Principles%20of%20Web%20Design

1
Principles of Web Design

• C. Candace Chou

Modified from Drs. Catherine Fulfords and Curtis
Hos presentations
2
Basics of Web Design

• Simplicity and consistency
• Standard HTML
• Content and navigation
• Organization
• Typography
• Web-safe Color
• Accessibility

3
Essential Information

• An informative title
• The creators identity (author or institution)
• A creation or revision date
• At least one link to a local home page
• The home page URL on the major menu pages in
  your site

Source Lynch, P Horton, S (1999), Web Style
Guide. Yale University Press.
4
Rule of Thumb

• Use careful layouts of text and links with
  relatively small graphics
• Web page graphic should not be more than 535
  pixels wide or more than about 320 pixels high
  (within letter size paper)
• Browser safe area 600 x 350

5
Web Grid
Grid http//info.med.yale.edu/caim/manual/pages/p
age_grid.html Browser Size Test
http//www.wpdfd.com/restest.htm
6
BALANCE
Formal
7
Optical Center
The viewer will tend to focus at the screens
optical center, located slightly above the center
of the screen. Tend to locate objects at this
optical center
8
CENTER OF INTEREST
Focal point
9
CENTER OF INTEREST
Focal point
10
CENTER OF INTEREST
NOT Focal point
11
Rule of Thirds

• Divide the screen into thirds horizontally and
  vertically
• Place focus of interests on the four intersections

12
Rule of Thirds

• Upper right position
• See full shadow and tracks

13
Layout

• Use 2/3 - 1/3 format or 2 columns.
• Use header and picture column
• Use table formatting
• Try inventive layouts

14
Layout

• Leave 20 white space.
• Use shorter paragraphs
• Avoid heavy lines.

15
Fonts
T
Serif fonts have thin lines and feet.
T
Sans-serif fonts have even lines and NO feet.
16
Fonts
T
Serif fonts are easier to read in print media.
T
Sans-serif fonts are more legible in projected
media.
17
Fonts
18
Readability of Fonts

• This is a serif font (Times)
• Can you read this easily? Do the letters all run
  together? Would you like to see an entire screen
  full of this? This is Times 18-points
• This is a sans-serif font (Arial)
• Which is easier to read, this text block or the
  block above? In general, sans-serif fonts look
  better on computer monitors. This is Arial
  18-point.

19
Legi bility

• Use sans-serif for headers.
• Use sans-serif for projected visuals.
• Use at 18 points for projected visuals.
• Change preferences in web browsers.

20
Readability

• Use serif font for lots of printed text.
• Use 12 points for adult learners.
• Use 14 for children special needs.

21
Readability

• Use ragged right justification.
• Avoid centering.
• Avoid full justification.
• Avoid italic fonts, look awful in small fonts

22
What Does Research Say?

• Bernard, Mills, Peterson, Storrer (2001)
• http//psychology.wichita.edu/surl/usabilitynews/3
  S/compare.htm
• A comparison of the following fonts
• Sans Serif Fonts Agency FB, Arial, Comic Sans
  MS, Tahoma, Verdana
• Serif Fonts Courier New, Georgia, Goudy Old
  Style, Century Schoolbook, Times New Roman
• Ornate Fonts Bradley Hand ITC, Monotype Corsiva

23
Research Results

• Font Legibility No significant difference
• Reading Time Tahoma faster than Corsivia
• Perceived Font Legibility Courier, Comic,
  Verdana, Georgia, and Times

24
Preferred Fonts

• Elegant Font Type Corsivia
• Youthful Fun Comic
• Business Like Times and Courier
• General Preference Arial, Comic, Tahoma,
  Verdana, Courier, Georgia, and Schoolbook

25
DONT USE ALL CAPS FOR LARGE BLOCKS OF TYPE.
READERS READ FASTEST WHEN SENTENCES ARE PRINTED
IN UPPER AND LOWER CASE - THE WAY THEY NORMALLY
ARE SEEN IN PRINT. HEADLINES ARE SET IN ALL CAPS
BECAUSE THEY REQUIRE THE READER TO SLOW DOWN,
GIVING EMPHASIS TO A FEW WORDS. WASNT THIS BLOCK
OF ALL CAPS DIFFICULT TO READ?
26
DONT USE ALL CAPS FOR LARGE BLOCKS OF TYPE.
READERS READ FASTEST WHEN SENTENCES ARE PRINTED
IN UPPER AND LOWER CASE - THE WAY THEY NORMALLY
ARE SEEN IN PRINT. HEADLINES ARE SET IN ALL CAPS
BECAUSE THEY REQUIRE THE READER TO SLOW DOWN,
GIVING EMPHASIS TO A FEW WORDS. WASNT THIS BLOCK
OF ALL CAPS DIFFICULT TO READ?
Compare
Dont use all caps for large blocks of type.
Readers read fastest when sentences are printed
in upper and lower case - the way they normally
are seen in print. Headlines are set in all caps
because they require the reader to slow down,
giving emphasis to a few words. Wasnt this
better?
27
Single Concept
28
Color

• Use color to enhance your presentation.
• Avoid more than 5 colors on one slide
• http//www.angelfire.com/mn/aptmgmt/building.html

29
Selecting Color

• Complementary colors colors opposite each other,
  e.g., red-green, blue-orange
• Split colors the 2 colors next to its
  complement, e.g., purple-orange green

Source http//library.thinkquest.org/50065/art/ef
fects.html
30
Complementary Colors
Split Complement
When two pure complementary hues are placed next
to each other, the design seems to vibrate. They
create an exciting feeling that quickly attracts
attention.
The effect of this color scheme is similar to
using complementary colors, except that it offers
the artist a little more variety with which to
work.
31
Analogous Colors
Colors next to each other on the color wheel that
have a common hue are referred to as analogous
colors. Red-purple, purple and blue-purple is one
set of analogous colors because they all have
purple in common. The common hue creates a
feeling of unity in the design by tying together
each part of the design.
Warm and Cool Colors
Warm and cool colors are two specific sets of
analogous colors. Blue, green and purple are cool
colors. Red, orange and yellow are warm colors.
Create a cold, icy feeling
Create a warm, sunny feeling
32
(No Transcript)
33
(No Transcript)
34
(No Transcript)
35
Now is the time for all good men to come to
the aid of their country.
Now is the time for all good men to come to
the aid of their country.
36
BEST LEGIBILITY for text ------------------------
------------------------------------------------
black text on a white background dark green text
on a white background dark blue text on a white
background brown text on a white background.
WORST LEGIBILITY for text -----------------------
-------------------------------------------------
red text on green background
green text on red background
green text on blue background
37
BEST VISIBILITY to attract attentionbut not for
large blocks of text
text
black on orange
text
red on white
text
dark blue on yellow
text
white text on purple
Source http//library.thinkquest.org/50065/psych/
effects.html
38
Color Psychology
Green can signify growth and movement.
39
Color Psychology
Blue, the most universally liked color, can
convey calm.
40
Color Psychology
Red can stand for power, energy, or danger.
41
Color Psychology
Yellow is thought of as positive, used for
highlighting against dark background.
42
Color Psychology
Purple has spiritual meaning for some people.
43
Background
White or Yellow
Red or Black
44
Remember good design is invisible.

• Learn more.
• Decrease anxiety.
• Increase motivation.
• Increase time studying.

45
Accessibility I

• Make sure your site is usable on the main browser
  flavors and versions
• Make sure it's usable without having to download
  a plug-in first
• Test your site at the development stage to check
  it works on various operating systems with
  different browser flavors/versions
• Use style sheets to separate style and content

46
Accessibility II

• Use the appropriate html tags to define your text
  - enables the text readers blind people use to
  read the text on your site
• Make good use of headings, ltemgt and ltstronggt
• Always specify alternative text for graphics -
  ltimg src"image.gif" width"10" height"10"
  alt"image description"gt
• Check the colors you use aren't bad for those
  with various forms of color blindness
• If in doubt - desaturate (make black and white)
  the design to see if it still makes sense
• Don't use color as the only indicator of change
  (e.g. in a new section)
• Always underline links

Source http//www.jessett.com/web_sites/usability
/accessibility.shtml
47
Web Resources

• Instructional Design
• http//www.lrc.arizona.edu/facdev/Technology/vizde
  s.htm
• Web Style Guide
• http//info.med.yale.edu/caim/manual/pages/page_de
  sign.html
• http//www.wpdfd.com/
• Font
• http//psychology.wichita.edu/surl/usabilitynews/3
  W/fontSR.htm
• http//www.wpdfd.com/wpdtypo.htm
• Layout
• http//www.jessett.com/
• http//www.dartmouth.edu/cc/
• Accessibility Test
• http//www.cast.org/bobby/