8 Recommended Steps to designing a Website
- Decide on what your purpose is and who your audience is
- Draw a flow chart of how the site will be organized
- Design the interface - screen size, background, menus and titles
- Decide on text styles and size
- Select visual theme and graphic elements
- Create text and put all elements in place
- Check your spelling and all links
- Test on all browsers
General Design Rules
- Keep things simple
- Don't create dead end pages
- Pages should take no more than 5-7 seconds to load.
- Make your graphic design match your site and page purposes
- 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.
- 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.)
- Create a clear visual hierarchy on each page
- Take advantage of conventions
- Break pages up into clearly defined areas
- Make it obvious what is clickable
- Minimize noise
A good overall design has the following three traits:
- It has unity and variety.
- It supports, but does not overpower, the message.
- 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)
- Smaller is always better - faster loading, more space for other elements
- Strive for Simplicity - graphic, text and layouts
- Build Visual Contrast into every page - create zones of interest, break up text
- Provide a meaningful hierarchy of content - more important = more obvious
- Choose a limited color palette - be reserved in color selections and combinations
- Make Navigation intuitive, obvious, and fast.
*Building School Web sites - http://www.siec.k12.in.us/~west/online/
- Gather Information
- Determine the Intended Audience
- Create a Storyboard
- Plan Your Navigational Tools
- Create an Aesthetically Appealing Web page
- Establish Credibility
Top ten signs you have an amateur web site http://webdevelopersjournal.com/columns/abc_mistakes.html
- Busy backgrounds
- Busy graphics
- Crummy -looking NavBars
- Awkward frames
- The linear look
- Hit counters
- Under construction signs
- Endorsement of a particular Browser
- 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/rnmagazine/2001/may01/05p32.htm
Web pages that suck - http://www.webpagesthatsuck.com/
Designing Web Usability - http://www.useit.com/jakob/webusability/
Good Site Design Practices - 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 awards - http://www.website-awards.net/
Check the speed of your web site loading - http://www.numion.com/
HTML tutorial - http://www.w3schools.com/html/default.asp
Text 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.
|