Created October 1,1998
Updated February 8, 2005
Comments:  Ann Lindell
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

color | type | images | distractions | general

---

wGraphic design creates visual logic. It combines the tools of layout, typography and illustration to lead the user's eye through the page or the site.   The Web is a primarily visual medium.  Careful consideration of shape, color and contrast will hold the interest of the user longer than a long, visually boring text document.  Dense text documents without other visual elements to provide visual relief and directional assistance are difficult to read, especially on a computer screen.

wVisual Hierarchy
You encounter a page--printed or electronic--as a graphic document.  Your eye scans for shape and color, foreground and background; then  you pick up the secondary information.  First we see illustrations or graphics, and finally the text.

Consider how we are conditioned to view a page (how do you read?):  top to bottom, left to right.

The top portion of a website is very important because only the first few inches will be visible on a standard computer screen before scrolling.

basic color wheel (primary, secondary, complementary)	color wheel

wBackgrounds: 
Subtle pastel/natural shades of colors make good choices for backgrounds and minor design elements.  Bold primary colors should be used sparingly for emphasis.   You want your text to be readable.

wType Color: 
Type color should contrast sharply with your background color for maximum readability.
See these examples.

A common color affliction:  orange & blue disease
Pi Kappa Phi
UF VetMed: Dept of Pathobiology
UF Dept of Sociology

Living well with orange and blue:
UF Office of the President
UF OIT Network Services
 

wConsider using type/font families:some examples, good and bad

 

Arial	Arial	Arial
Arial Narrow	Arial Narrow	Arial Narrow
Arial Black	Arial Black	Arial Black
Arial Rounded MT Bold	Arial Rounded MT Bold

• case   :http://www.webstyleguide.com/type/case.html 
• line length
• justification
• emphasis:  bold, underline, italics, color, capitalization
• font size (Use at least 10 point for readability)

• Consider size and color relative to your overall page design.
• Use only graphics that enhance content or lead to a better understanding
• File size is important.  Large files take time to download. 
• Make sure you load your images to the server to avoid broken links

• blinking/movement
• scrolling banners
• advertisements
• annoying animations: 1 | 2
• clutter

• Provide useful content on every page.
• Use short sentences (20 words max.)
• Use short paragraphs (5 sentences max.)
• Use lists to break up long sentences.
• Consider aligment and use of "bullets" for easy scanning.
• Proofread, Proofread, Proofread !!!

• Again, be consistent.
• Establish a simple grid and style for your pages and use it throughout your site.
• Repetition is not boring.  It helps build a graphic identity for your site and enhances usability.
• Align page elements.  Users prefer rows and columns on the page.  Aligned text is easier to read.
• Try using tables to set up a template grid for pages in your site.  You can use an "invisible" table (Border=0) to create rectangles and columns of color, or to organize your text without visible grid lines. (This page is an example.)
• Design your "negative space" as well as your "content space.
• Put the most important information at the top of the page.
• Make sure to "title" your pages.
• Limit page length (and scrolling)
• Consider user's screen resolution
• Provide alternate formats to visual and aduitory content for disabled users.