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/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.
|