Linda Baker's Web Design Tips & Tutorials

Web Design: Visual Design

Design Examples (Powerpoint) ~ Visual Appeal Basics ~ Usability & Navigation

Examples: What Do Others Have to Say? ~ Your Turn! Evaluate These Sites

Your web page is a reflection of you. A Web page is much more than typing - it's aesthetics, ergonomics, and personality…

Visual Design should:

be effective: show a polished, organized, and logical layout
be affective: attractive, interesting,and inviting
easy to tell who the target market is (age, demographics)
easy to see the purpose (marketing, information, persuasive) of the site
appear within the browser ("load") in under 20 seconds
leave lots of white space so it is easier to read and scan
color: harmony in colors - color impacts your user's attitude toward your site!
- be consistent, coordinated, easy on your eyes
- use contrast to call attention
- one or two colors highlight - three or more confuse
- colors "fit" the topic (ex: banking site that uses green)
text: uncluttered - scannable chunks of information - easy to read
images:
- provide atmostphere, enhance the topic, provide additional understanding to the content
- fast loading
link terminology: makes sense for the topic and are understandable
encourage feedback

Color Psychology and Web Design:

Psychology of Color and Projecting a Professional Image*
Importance of Color (from Web Design: the Complete Reference)
Color Psychology
Color Matters (Color Theory)
Colors for the Color Blind
Effective Color Contrast for those with Color Deficiencies
Color Perception & Color Deficiency Issues

Remember that site simplicity is fine!

Usability & Navigation - Your Should:

limit scrolling - break up the information into more page if your page is more than 3 "page downs"
provide clues at the top of the page to sections of the page
if something looks like a link or a button - make sure it really is a link or button
link and page names always make sense and represent the site pages
be consistent in the navigation options and layout
allow the users to always know where they are
let users know who you are (contact info, creation/revision dates)

More Info:

What do others have to say?

Readability ~ Readability #2
How to Make Annoying Web Pages
Robin Williams: Examples
Basic Web Page Layout & Design
Mike Markel's Web Design Tutorial
Design Examples (links to Interface Hall of Shame, Dezign Diary, Daily Blooper...) - Each month, Lou Rosenfeld selects a commercial website and suggests improvements.
Don't Make Me Think! excerpt from book
4 Simple Steps to Coloring your WWWorld!
Bad Web Design Feature Checklist
Good Web Design Feature Checklist
Cool Web Pages: Examples
Good Design Sites & Design Tips: Links
How to Make an Annoying Webpage: Examples
Vincent Flanders' Web Pages That Suck: Examples
World's Worst Web Pages: Examples

Your Turn! Evaluate the following pages against the criteria listed above:

Amazon	Loyola College Media Center	ABOTC
California Table Grapes	Popular Mechanics	Webby Awards
Dinesh's Page	Chihuly	Usability.gov
American Art	Polo	Y2G
Branch Brook Park		Williams-Sonoma Inc.

It's Never Perfect! As you can see, a focused concept is crucial to a successful design!

One of the greatest features of the web… and its greatest web authoring headaches is the variety of software and hardware that can be used to utilize the web. Your viewers may be using a laptop, a Macintosh, a 486 computer, black and white Unix terminal, Lynx browser, a Palm handheld device… You want your pages to view the best from any number of systems.

You probably will not be able to please all viewers, but you can aim for the most. Web statistics show that most people use Internet Explorer and screen resolutions of 800 x 600. (Source: http://www.w3schools.com/browsers/browsers_stats.asp)

Your web page is a reflection of you. A Web page is much more than typing - it's aesthetics, ergonomics, and personality…

Return to the Top