Design Principles

1
Design Principles
2
Design principles

• In The Non-Designers 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

• Proximitynearnessis 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
• Dont 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 arent headers dont 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 tendsto happen naturallyin Web
  pages
• Right alignment isnot generallyas useful
• Center alignment tends tobe boring, and is
  especiallyugly when the lines are allabout 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 arent 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, dont 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
• Dont be a wimp--make different elements really
  different
• There isnt much contrast between 12-point type
  and 14-point type

7
Lets 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
• Dont be a wimp--make different elements really
  different
• There isnt much contrast between 12-point type
  and 14-point type!

8
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

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 readers 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 users eyes
  away from the content
• If everything is emphasized, nothing is
  emphasized
• Be consistent
• Dont 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 shes 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 dont have to all look identical (and
  shouldnt), 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
• Dont use more than a couple of different fonts
• Usually, one serif font and one sans serif font
  is enough

12
The End