Introduction to Web Design Principles
Textbook Highlights – Lengel, The Web Wizard’s Guide to Web Design, ISBN 0210745623
Chapter 1 – Audience
p. 4 – Types of Sites –
¨ User-Centered (It’s All About Me!)
o Organization Centered – It’s all about Corporate
§ Jargon-heavy
§ Poor Navigation
§ Corporate-speak
¨ Technology Centered
o Hey! Look at how much Flash I know!
o http://www.xroyvision.com.au/webmasters/flash_index.html
¨ Data-Driven Web Sites
o Functionality of site is limited by properties of underlying database.
o http://www.killersites.com/articles/articles_databaseDrivenSites.htm
¨ User-Centered Web Sites
o Centered on the Visitor
o What information does the visitor want to find?
o How do you know?
§ Ask a visitor!
§ Market Research
p. 8 – Site Purpose
p. 12 – Site Structure
¨ Three Layers, Max
o Home Page – Index.html
o Level 2 – Main Subject Areas
§ Usually these are listed on the Horizontal NavBar (HNav)
§ Each Level 2 page will have a Separate Set of Links on the Left NavBar
· Subject-related links
· Links back to Home Page
· HNav Links Back to Level 2
o Level 3 –
§ Product, Service Detail Pages
§ More text, fewer graphics.
§ 2-Column Pages rather than 4
Chapter 2 – Designing Display and Navigation
p. 34 - Sklar – Web Eye Movement – http://www.montgomerycollege.edu/~rkimball/design/page_design.html
¨ Form Follows Function
¨ Portrait vs. Landscape Web Design – Web Page Basic Design
p. 41 – Site Navigation
¨ Many Beginning Web Designers do not chart out Navigation before starting to design.
¨ Site Map – Always Helpful – sites over 10 pages – see p. 44
¨ “Above the Scroll” = “Above the Fold” – p. 46
¨ P. 50 – Image Logos, Corporate Identity
¨ Aspect Ratio – p. 57
¨ Display Size
o 800 x 600 pixels
§ What’s a Pixel? http://www.webopedia.com
o 1024 x 768 pixels
¨ Screen Resolution
o 72 Pixels (Dots) per inch – 72 dpi.
¨ Print Layout
o 700 Pixels Width in Landscape Mode
o “Oops, I just lost 100 pixels in printing!’
o Separate printable pages – Learn in CSS Class
¨ Pp. 59 – 61 – Print and Type Considerations
o Serif fonts – Fonts with Hooks!!!
§ Times New Roman
§ Garamond
§
§ Use for Dense Text
o Sans-Serif Fonts = “Without Hooks!
§ Arial
§ Verdana
§ Tahoma
§ Tempus Sans
§ Comic Sans !!
§ Matisse
§ CHILLER
P. 62 – Color, Contrast, Balance
Music appreciation, Art History Courses – They finally come in handy!
♪ Melody
♪ Harmony
♫ Color
♫ Balance
♫ Contrast
♪ Art History – www.nga.gov. The most gorgeous site in the world….
p. 68 – 72 – Sketching, Prototyping, Storyboarding and Testing.