Web Design
Look and Feel
•
•
•
•
Way your web site works
Personality it conveys to the user
Plan the way to looks
Test against the variable nature of the web
Design The Entire Site
• Plan unifying themes and structures that will hold
the pages together
• Communicate a visual theme
Create Smooth Transitions
• Create a unified look among the sections and
pages of your site
• Repeat colors and fonts
• Think of this as turning pages in a magazine
• www.npr.org
Use A Grid
• Provides visual structure
• Layout device that organizes the page into
columns and rows
Use Active White Space
• Active White Space is blank space that is used
deliberately
• Blank areas on the page, does not have to be white
• Guides the reader and defines areas of the page
• Lack of white space suggests the page contains too
much information
• Poor use of white space
– www.sciam.com
– www.sciam.com
• Good use of white space
– www.scmonitor.com
– www.scmonitor.com
Create Usable Navigation
• Users should be able to answer the following
–
–
–
–
Where am I
Where can I go
How do I get there
How do I get back to where I started
Navigation
• Place navigation elements in the same position on
each page
• Use the same graphics for navigation
• www.nga.gov
• www.spaceflight.nasa.gov
Design for the User
• Know your audience
• www.eonline.com
• www.linguafranca.com
Design for Location
2
5
1
4
3
Design for the Screen
• Shape of the screen
• Light
• http://www.bobdylan.com
Type Design
•
•
•
•
Choose fewer fonts and sizes
Use available fonts
Design for legibility
Avoid using text as graphics
Graphics File Formats
•
•
•
•
GIF
JPG
PNG
SVC
Computer Color Basics
• Monitors displays color by mixing red, green and
blue
• Color vary between monitors based on both user’s
preferences and brand of equipment
• Dithering
• Banding
Sizing graphics
730 x 50
90 x 90
290 x 150
100 x 75
480 x 50
230 x 200