Web Design Considerations

This is a handout to go with the presentation,
Creating Web Pages: Making Wise Decisions Before You Begin
,
by Donna Ashmus
SouthEast and Islands Regional Technology in Education Consortium (SEIR*TEC)
Copyright 1998


Simplicity
Keep design elements to a minimum. Minimize clutter so the document is simple to use. Use only one or two fonts and a minimum of three heading sizes. Avoid "piling up" special effects (bold, italics, blinking, etc.) Strive to optimize!

Consistency/ predictability
Repeat major design elements (headings, text blocks, graphics, navigational controls, etc.) to match users expectations. Create a template or format which provides a consistent pattern for the user. Establish a consistent background that is maintained throughout your stack.
 
Appropriateness
Keep design elements as well as content in an appropriate tone for the organization. Determine the organizational image you want to convey and stick with it. Use appropriate graphics to communicate rather than just decorate.

Usability
Provide a transparent means of navigation. Forecast what the user will find on the next page. Display important information prominently. Make your resource usable and informative!


Paper-based Page Design Principles

Contrast-
Make design elements (color, size, thickness, shape, space) very different.
Proximity-
Items relating to each other should be grouped close together
Alignment-
Never place design elements arbitrarily. Every item should have a visual connection with something else on the page.
Repetition-
Repeat visual elements (color, shape, line thickness, sizes, texture) of the design throughout the document.

 

Style Guides on the Web

Top Ten Mistakes in Web Design by Jakob Nielsen 
http://www.sun.com/960416/columns/alertbox/index.html 
Style Guide for online hypertext-  
http://www.w3.org/pub/WWW/Provider/Style/
Web Style Manual by Patrick Lynch http://info.med.yale.edu/caim/StyleManual_Top.HTML Sun Guide to Web Style  
http://www.sun.com/styleguide/

Web Tips

Information

 
Text

Graphics

 
Links

Testing

Elements to provide on every page:
1. Title of document
2. Name of organization
3. Author or contact information
4. Navigation to at least the home page


Compiled from:
Art and the Zen of Web Sites (http://www.tlc-systems.com/webtips.htm)
A Guide to Designing Web Pages for ICS199v (http://www.wcc.hawaii.edu/epw/begin.htm)
Lynch, Patrick. Yale C/AIM WWW Style Manual. (http://info.med.yale.edu/caim/stylemanual/M_II_5.HTML)
Nielsen, Jakob. Interface Design for Suns WWW Site (http://www.sun.com/sun-on- et/uidesign/)
Principles for Effective Hypermedia Design. Technical Communication, Third Quarter 1993.


logo2.gif (45552 bytes)   Return to SEIR*TEC Home Page