BETTER DESIGN COPY designs GROUP related items Retain ASPECT ratio

Drawing INSPIRATION from great works of
Humans are poor at remembering
Good artists copy,
great artists steal.
Pablo Picasso
This UNORGANISED list
others is the best way to create a good design. unordered lists. Structure and narrative are has 9 distinct items. It is
It is also the best way to learn how to create essential tools for learning and impossible to remember
new designs. When in doubt, go looking for remembering. them or connect them into
inspiration to any of these sites. a story.
To aid this visually, it is important to

DATA INFOGRAPHICS WEBSITE DESIGN group related items.

This structure is a
SQUINT your eyes and COUNT the uniform GRID – 3 rows PRESERVE ASPECT RATIO of images. When
Visual Complexity The New York Times Smashing Magazine Pinterest number of separate items your eyes see. If and 3 columns. This is stretching an image to fit a space, the most
there are more than 3-5 items, see which easier to remember based common error is to resize it to fit that box.
items can be grouped together into a single on row and column logic.
But as you can see from the example above,
visual unit.
Audrey goes from thin to fat to very fat. This
D3 Gallery … just copy … and paste Behance There are many ways of grouping related This structure is a is both jarring as well as inaccurate.
items. Some examples are shown here. But HIERARCHY – rows and Always ensure that the width and height are
the key principle is PROXIMITY. Things columns with totals. It is resized equally. If you need to fit a predefined
that are close to each other for a group. much easier to remember. box, crop the image.

ALIGN every edge TYPOGRAPHY is key CONSISTENT design

ENSURE ALIGNMENT PRACTICALTYPOGRAPHY.com says: serif sans serif monospace For example, if you’re using rectangular If you’re using a COLOUR PALETTE, stick to
GRAMENER
ENSURE ALIGNMENT GRAMENER
SHAPES (in buttons, for example) avoid it. Avoid using slightly different variants
Every item should have a 1. Start by making the BODY TEXT look

A
visual connection with Every item should have a visual circles, ovals, rounded rectangles, etc. when you mean to use a single colour.
something else on the page.

-- Robin Williams
connection with something else on
the page.
-- Robin Williams
good, then worry about the rest.

2. POINT SIZE should be 10-12 points in

Draw a line from every edge of every object
to the end of the sheet. You’ll find that almost
none of them are aligned to one another.
ENSURE ALIGNMENT
GRAMENER
Every item should have a
visual connection with
something else on the page.
-- Robin Williams
Ensures that every edge is
aligned to another. Use a
grid if required.
ENSURE ALIGNMENT
Every item should have a visual
connection with something else on
the page.
-- Robin Williams
print, 15-25 pixels on the web.
A A
3. LINE SPACING should be 120–145% of
If you’re using a certain STYLE of icons When designing, try and pick a single
the point size. BETTER SYSTEM FONTS (cartoons, pictures, black-and-white, etc.), THEME of graphics (aqua, flat design,
4. The average LINE LENGTH should be stick to the same style of icons. Mixing these metallic, natural, etc), and stick to the same
FRANKLIN GOTHIC ABCDEFGH ijklmnop
45–90 characters (including spaces). creates a jarring effect. theme right through.
GILL SANS MT ABCDEFGH ijklmnop
GRAMENER 5. This implies LARGE PAGE MARGINS
CALIBRI ABCDEFGH ijklmnop
and/or use of multiple columns.
PALATINO LINOTYPE ABCDEFGH ijklmnop
6. Use PROFESSIONAL FONTS. Avoid
goofy, monospaced, Especially default GEORGIA ABCDEFGH ijklmnop
fonts like Times New Roman and Arial. CAMBRIA ABCDEFGH ijklmnop

COLOUR carefully HIGHLIGHT features SHOW it around

Office 2007/2010 palette Colorbrewer2 RdYlGn palette There are two reasons to highlight items. COLOUR Good communication is as
By ORGANIZING a page into logical units, stimulating as black coffee and just
we improve its readability. This means that as hard to sleep after.
Civic palette Colorbrewer2 Purples palette important items must be CONTRASTed SIZE
-- Anne Morrow Lindberg
with neighbouring items

Highlighting also allows you to create

We aren’t very good at picking colours. It’s better to pick a colour from a tool that INTEREST in a page that might otherwise
SHAPE The best feedback comes
Colour theory and colour palettes are a deep provides pre-defined palettes, or lets you be dull. from the end users.
field by themselves. create your own.
Changing the colour, size, shape, etc of an POSITION Show your design around.
If your colours are If your colours are If your colours are If you palette must be item, you can increase the level of contrast. See what they think.
DISTINCT DATA-DRIVEN IMAGE BASED CUSTOM Then iterate.
use palettes from use palettes from use palettes from use palettes from SPACING
MS COLOR ADOBE I WANT
Gramener
A DATA ANALYTICS AND VISUALIZATION COMPANY OFFICE BREWER COLOR HUE BOUNDARY