1. Design Principles
5-Apr-19

2. 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.

3. 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

4. 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

5. 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

6. 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

7. 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!

8. Serif Fonts Types of 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

9. 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

10. 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

11. 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

12. The End