Design Principles
20-Jan-12
Design principles
In The Non-Designer’s Design Book: Design and
Typographic Principles for the Visual Novice, Robin
Williams discusses these four principles:
Proximity: Related items should be grouped together
Alignment: Nothing should be placed on the page arbitrarily--
every item should have a visual connection with something
else on the page
Repetition: Some aspect of the design should be repeated
throughout the entire piece
Contrast: If two items are not exactly the same, make them
different--really different.
Proximity
Proximity—nearness—is your best tool for organizing
things on a page
If things are close together, they appear to be related
Therefore:
If things are related, they should be close together
If things are not related, they should not be close together
Avoid spacing everything equally
Don’t stick things in the corners or alone in the middle of a
page
Avoid having too many groups on a page
Make sure headers look like headers, and things that aren’t
headers don’t look like headers
Alignment
Alignment is literally “lining thing up”
Good alignment helps to unify and organize the page
You want to avoid the “scattered all over” look
Left alignment tends
to happen naturally
in Web pages
Right alignment is
not generally
as useful
Center alignment tends to
be boring, and is especially
ugly when the lines are all
about the same length anyway
Try to avoid more than one kind of alignment on a page
Repetition
The purposes of repetition are:
To unify the page or group of pages
To add visual interest
Few things look more boring than long, unbroken pages of text
Things that look boring often aren’t given a second look
Repetition is like consistency, only more so
You probably already try for consistent fonts, headers, etc.
Some visual elements--backgrounds, icons, borders, horizontal rules--
should be repeated throughout a Web page, or a related group of Web
pages
If your pages belong together, they should appear to belong together
However, don’t use so much repetition that it becomes annoying
Contrast
Contrast is when two elements are clearly different
You can create contrast by using different sizes of type
You can create contrast by using different kinds of fonts
You can use thin lines and thick lines
You can use horizontal lines and vertical lines
You can use contrasting colors: cool (bluish) and warm (reddish)
colors
You can use widely spaced text and closely spaced text
Don’t be a wimp--make different elements really different
There isn’t much contrast between 12-point type and 14-point
type
Let’s do that again!
Contrast is when two elements are clearly different
You can create contrast by:
Using different sizes of type
Using different kinds of fonts
Using thin lines and thick lines
Using horizontal lines and vertical lines
Using contrasting colors: cool (bluish) and warm (reddish) colors
Using widely spaced text and closely spaced text
Don’t be a wimp--make different elements
really different
There isn’t much contrast between 12-point type and 14-point type!
Types of fonts
Serif Fonts
Sans serif fonts -- no serifs
Monospaced fonts -- all
characters are the same width
Display fonts -- not intended for lots of text
EVEN IN A GOOD FONT, LARGE AMOUNTS OF
TEXT IN ALL CAPITALS IS DIFFICULT TO READ
A few more simple principles
Establish a visual hierarchy
People first see the graphics, then the text
Balance, organization, and visual contrast are vital
Direct the reader’s eye
People scan text left to right, top to bottom
Only the top four inches may be visible
Use pastel shades for backgrounds or minor elements
Beware of distractions
Garish illustrations and (especially) animated graphics or blinking text
pull the user’s eyes away from the content
If everything is emphasized, nothing is emphasized
Be consistent
Don’t have things scattered all over your page
Let your style “evolve” as you improve the page
Establish a consistent look
Every page on your site should share some style
elements with all the other pages
The idea is that the user should know, without thinking
about it, that she’s still in the same site
Use the same logo, or the same set of navigation
buttons, on every page
Use a consistent color scheme and set of fonts
Your pages don’t have to all look identical (and
shouldn’t), but they should have a common style
CSS style sheets can be a big help in defining a
consistent look
But you need to test them on a variety of browsers
Legibility and readability
Readability: How easy it is to read a lot of text
Legibility: How easy it is to read headlines
In general, a serif font is more readable (in medium sizes)
Because of the coarse resolution of modern screens, a sans serif
font is more readable in small sizes
Very high contrast (difference in brightness, not color) makes
text more readable
Do not change the default size of body text; the user has it set to
the size she wants
Increasing the size for headers or for emphasis is OK
Don’t use more than a couple of different fonts
Usually, one serif font and one sans serif font is enough
The End