Hop-e you guys use it for your school.

1. PRINCIPLES
OF
WEB
DESIGN
Adopted from the presentation of C. Candace Chou
Prepared by:
JESSICA M. DIMAILIG, SST III

2. Basic
Principles
of Web
Design
• Simplicity and consistency
• Standard HTML
• Content and navigation
• Organization
• Typography
• Web-safe Color
• Accessibility

3. Essential
Information
• An informative title
• The creator’s 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. BALANCE
Informal
Formal

6. CENTER OF INTEREST
Focal point

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

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

9. FONTS
T
T
Serif fonts have thin lines and feet.
Sans-serif fonts have even lines and NO feet.

10. FONTS
T
T
Serif fonts are easier to read in print media.
Sans-serif fonts are more legible in projected media.

11. FONTS
Helvetica
Geneva
Arial
Sans-Serif
Times
Palitino
Courier
Serif

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

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

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

15. Readability
• Avoid centering.
• Avoid italic fonts, look awful in small
fonts

16. What Does Research Say?
• Bernard, Mills, Peterson, & Storrer (2001)
• http://psychology.wichita.edu/surl/usabilitynews/3S/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

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

18. Preferred
Fonts
• Elegant Font Type:
Corsivia
• Youthful & Fun: Comic
• Business Like: Times and
Courier
• General Preference: Arial,
Comic, Tahoma, Verdana,
Courier, Georgia, and
Schoolbook

19. DON’T 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. WASN’T THIS BLOCK
OF ALL CAPS DIFFICULT TO READ?

20. DON’T 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. WASN’T THIS BLOCK
OF ALL CAPS DIFFICULT TO READ?
Don’t 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. Wasn’t this better?
Compare

21. Single
Concept
Concept A
Concept B
Concept C

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

23. •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/effects.html
Selecting Color

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

28. 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.
green text on red background
red text on green background
green text on blue background
WORST LEGIBILITY for text
------------------------------------------------------------------------

29. BEST VISIBILITY to attract attention
but not for large blocks of text
text
text
text
text
black on orange
red on white
dark blue on yellow
white text on purple
Source: http://library.thinkquest.org/50065/psych/effects.html

30. COLOR PSYCHOLOGY
Greencan signify growth and
movement.

31. COLOR PSYCHOLOGY
Blue, the most universally liked
color, can convey calm.

32. COLOR PSYCHOLOGY
Redcan stand for power,
energy, or danger.

33. COLOR PSYCHOLOGY
Yellowis thought of as positive,
used for highlighting against
dark background.

34. COLOR PSYCHOLOGY
Purplehas spiritual meaning
for some people.

35. BACKGROUND
White
or
Yellow
Red
or
Black

36. Remember good design is
invisible.
• Learn more.
• Decrease anxiety.
• Increase motivation.
• Increase time studying.

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

38. 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, <em> and <strong>
– Always specify alternative text for graphics - <img
src="image.gif" width="10" height="10" alt="image description">
• 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

39. Web
Resources• Instructional Design
– http://www.lrc.arizona.edu/facdev/Technology/vizdes.htm
• Web Style Guide
– http://info.med.yale.edu/caim/manual/pages/page_design.html
– http://www.wpdfd.com/
• Font
– http://psychology.wichita.edu/surl/usabilitynews/3W/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/