Learning, Technology and Educational Transformation

Building and Evaluating Websites - Design Issues

8 Recommended Steps to designing a Website
  1. Decide on what your purpose is and who your audience is
  2. Draw a flow chart of how the site will be organized
  3. Design the interface - screen size, background, menus and titles
  4. Decide on text styles and size
  5. Select visual theme and graphic elements
  6. Create text and put all elements in place
  7. Check your spelling and all links
  8. Test on all browsers

General Design Rules

  1. Keep things simple
  2. Don't create dead end pages
  3. Pages should take no more than 5-7 seconds to load.
  4. Make your graphic design match your site and page purposes
  5. Be aware of visual design elements
    • What is the focal element on each page?
    • Contrast is good, in moderation.
    • Are the text, graphics and other elements arranged systematically on each page?
    • Repetition is comforting, repetition can tie together a site.
  6. Be aware of usability design elements
    • Are there means of navigation on each page that link you to other site pages?
    • Keep regular alignment.
    • Utilize appropriate proximity.
    • List URL, Dates of updates, webmaster email on each page

Designing Individual Pages (Krug, 2000 p.)

  1. Create a clear visual hierarchy on each page
  2. Take advantage of conventions
  3. Break pages up into clearly defined areas
  4. Make it obvious what is clickable
  5. Minimize noise

A good overall design has the following three traits:

  1. It has unity and variety.
  2. It supports, but does not overpower, the message.
  3. It is appropriate to the particular message being conveyed.
    Web Developers Virtual Library - http://www.wdvl.com/Authoring/Design/Pages/

Six Keys to Successful Web Design - Roger Parker (1997)

  1. Smaller is always better - faster loading, more space for other elements
  2. Strive for Simplicity - graphic, text and layouts
  3. Build Visual Contrast into every page - create zones of interest, break up text
  4. Provide a meaningful hierarchy of content - more important = more obvious
  5. Choose a limited color palette - be reserved in color selections and combinations
  6. Make Navigation intuitive, obvious, and fast.

*Building School Web sites - http://www.siec.k12.in.us/~west/online/

  1. Gather Information
  2. Determine the Intended Audience
  3. Create a Storyboard
  4. Plan Your Navigational Tools
  5. Create an Aesthetically Appealing Web page
  6. Establish Credibility

Top ten signs you have an amateur web site - http://webdevelopersjournal.com/columns/abc_mistakes.html

  1. Busy backgrounds
  2. Busy graphics
  3. Crummy -looking NavBars
  4. Awkward frames
  5. The linear look
  6. Hit counters
  7. Under construction signs
  8. Endorsement of a particular Browser
  9. Free ads and other visual clutter

Selected Good References

Yale Style Manual for Web Design - http://info.med.yale.edu/caim/manual/contents.html

Building better websites - http://learninfreedom.org/technical_notes.html

ABC of building websites - http://webdevelopersjournal.com/columns/abcs_of_building_web_sites.html


Other Good Links

Designing Successful Web Sites - http://www.roughnotes.com/rnmag/may01/05p32.htm

Bad web design - http://webworst.about.com/library/weekly/aa050200a.htm?PM=ss13_webworst

Web pages that suck - http://www.webpagesthatsuck.com/

Building websites for kids - http://builder.cnet.com/webbuilding/pages/Graphics/Kids/?tag=st.cn.sr1.dir.

ebook on web design - http://abigail.lib.pacificu.edu/search/Wweb+design/Wweb+design/49,63,63,B/l856&F=Wweb+design&54,54,,1,0

Designing Web Usability - http://www.useit.com/jakob/webusability/

stuff - http://www.goodpractices.com/#STRONG

KISS - http://news.bbc.co.uk/hi/english/in_depth/sci_tech/2000/dot_life/newsid_1779000/1779849.stm

Website Analyst award - http://www.website-analyst.co.il/win.html

Check the speed of your web site loading - http://www.numion.com/

Beginners Guide to HTML http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

References

Krug, D. (2000). Don't Make Me Think: A common sense approach to web usability. New Riders Publishing. Indianapolis.Indiana.

Parker, R. (1997). Guide to Web Content and Design. MIS:Press. NY.


Berglund Center Home Page  http://bcis.pacificu.edu
Last Updated 6/20/02
Copyright © 2002 Pacific University, all rights reserved
Questions: Mark Bailey - baileym@pacificu.edu