Design Basics

1
Design Basics

• May 2005

2
Skills

• Basic principles of design
• Apply design principles to web design

3
Good design

• Is inviting, friendly
• Is usable
• Is invisible

4
Design basics

• C
• R
• A
• P

5
Design basics

• Contrast
• Repetition
• Alignment
• Proximity

6
Design basics

• Contrast ? difficult
• Repetition
• Alignment
• Proximity

7
Application of principles
8

• Use white space (or lack of it) for separation
  and emphasis
• proximity
• Use headings lth1gt - lth6gt to group points
• Repetition
• Use no more than two fonts
• Repetition and contrast
• Use justification appropriate to the situation
  and audience
• Alignment

9
Repetition
10
Repetition

• Repeated design features or design elements (e.g.
  font size, weight, colour in headings) allows
  readers to see the divisions in a page before
  they read them

11
Proximity
12
Proximity

• Keep related things together
• Separate unrelated things
• This helps the reader to make sense of the
  content contained in the design

13
Proximity

• Use white space (negative space) to separate and
  give emphasis
• Keep related items close together to create unity
• Negative space is good

14
Proximity

• Use white space to separate or keep together
• Let white space lead the eye

15
Proximity

• Avoid elements which interrupt or limit eye
  movement
• E.g.
• ----------------------------------
• avoid using lines
• and

Avoid boxes too
16
Alignment
17
Alignment

• Makes the organization of a page clear

18
Alignment Rules

• Everything on a page should be aligned with
  something else
• Use only one alignment scheme
• Consider report examples
• Left aligned
• Centred headings

19
Contrast
20
Contrast

• Make similar things (e.g. level h2 headings) look
  the same
• Make different things (e.g. headings and
  paragraphs) look different

21
Contrast

• Use contrast to break up your text
• Lists
• Headings
• Images tables

22
Contrast Rules

• Fonts (type faces)

23
Font families in CSS

• serif (Times New Roman)
• sans-serif (Arial)
• monospace (Courier New)
• cursive (Monotype Corsiva)
• fantasy (Comic Sans)

24
Main two font families
25
Serif

• Bookman Old Style
• Garamond
• Times New Roman

26
Sans Serif (sans-serif)

• Futura Lt BT
• Arial
• Trebuchet MS
• Univers

27
Design with fonts

• Create Contrast
• i.e. use fonts from different families in one
  page

28

• Bookman Old Style
• Humanist521 BT
• Different Contrast Good

29
Similar conflict

• Avoid conflict
• Dont use two fonts from the same family in one
  document

30

• Bookman Old Style
• Garamond
• Similar conflict Bad

31

• Look at default MS Word templates
• Default Headings Arial sans serif
• Default Body font Times New Roman --serif
• Sans-serif serif Contrast Good design

32
Fonts to avoid
33
danger

• Never use Comic Sans
• bancomicsans.com

34
warning

• Dont underline text for emphasis
• underlining a hyperlink
• For emphasis use
• italics ltemgt
• Bold ltstronggt

35
Fonts designed for the web

• Sans-serif
• Verdana
• Serif
• Georgia

36
Compare -- Sans-serif humanist Arial 48pt And
compareSerif Garamond 48pt

• Sans-serif
• Verdana 48pt
• Serif
• Georgia 48pt

37
Compare -- Sans-serif humanist x Arial 48pt And
compare x Garamond 48pt

• X-height
• Verdana x 48pt
• Serif
• Georgia x 48pt

38
note

• Avoid Verdana and Georgia for print output

39
Verdana vs Times

• This is set up in Verdana 32pt with standard
  leading of 120.
• This is set up in Times New Roman, 32pt with
  standard leading of 120.

40

• Questions?