Web Site
Design		  
Designing a
website

Designing a Website

1. Create the design document

2. Develop the website

  • Determine Domain name
  • Determine Web hosting
  • Determine Web building software to use
  • Determine if you need to process $$  -paypal
  • Determine other interactive feature for your site
    • languages to use
    • client-side scripting vs. server-side scripting
  • Implement website in phases
    • may need to make changes to design document

3. Test website

4. Publish the website

5. Publicize the website

    link: Web Design Clinic

   

Design
document

The Design Document

IA - Information Architecture

    "the science of figuring out what you want your site to do and then constructing a blueprint before you dive in and put the thing together"

 

The Design Document:

I. Define site goals

    A. Ask the questions
        1. What is the mission of the client's organization
        2. What are the short-term and long-term goals of the site?
        3. Who are the intended audiences?
        4. Why will people come to your site?

    B. Rank and organize the answers into goals

    C. Client must agree with the goals of the site

 

II. Define the user experience

    A. Define the audience
        1. Determine all the categories your audience falls into
        2. List characteristics of each category
       

    B. Determine scenarios
        - Create a "story" for each of your audience categories

    C. Competitive Analysis (Appendix A)
        1. List competitors
        2. Determine evaluation criteria (use site goals)
        3. Evaluate competitors based on criteria

 

III. Site content

    A. Content Grouping and labeling
        1. List dynamic items
        2. List static items (privacy stmts, copyright info...)
        3. Group content into meaningful categories

    B. Functional Requirement
       - List of the transaction related items (forms)

 

IV. Site Structure

    A. Site structure summary
        list the main site web pages and
        content contained, purpose etc

    B. Architectural blueprint
        - diagram of relationship between the web pages

    C. Global and local navigation
        1. Global navigation - displayed on almost every page in site
        2. Local navigation is related to small parts of the site
            (ex. directory categories)

 

V. Visual Design

    A. Layout grids
        1. Determine the different page types
        2. Create a layout for each of the page types

    B. Design sketches, Page mock-ups, web-based prototypes

 
Designing for
www

Designing for the WWW

  • Designing for the web is not like print!!
  • Designer cannot control the way a web page will ABSOLUTELY display
  • Web page display is based on the end-user browser & user settings


Designing for the Unknown

  • Unknown browser - browser  & browser versions display elements differently
  • Unknown platform - O/S effects how some elements are displayed
  • Unknown user preferences - User settings override the web page settings.  User can adjust the font, colors, turn-off JavaScript or displaying of images
  • Unknown window size - monitor resolution and window dimension effect the live area and the "fold" of a web page.
  • Unknown connection speed - 
        High speed T1, cable, DSL to 28.8K modems
        Golden rule - KEEP FILES SMALL!
        Pages with files totaling more than 50-60K are "bloated"
  • Unknown colors - Monitors and browsers effect how color is displayed.
  • Unknown fonts - The way text appears is a result of browser settings.

For latest statistics:  www.thecounter.com

 
Good design
principles:
C.R.A.P.

Design Principles:

Contrast - Make different items look different. 

The large, bold lettering of a chapter title sets it apart from the smaller lettering in the body of a page.

Repetition - Repeat certain elements to tie all the parts together.

Each page in the website should look like it belongs to the same web site.

Use the same format for sub-headings etc.

Alignment - Place related items along an imaginary line. 

Align items of equal importance.  Indent subordinate items.

Indenting the items that belong to a main heading is an example of using alignment to clarify meaning.

Choose an alignment and use it for the entire document (center or left or right)

Proximity - People tend to perceive items that are located
                  together as being related.

Group related content items close together.  Separate unrelated items.

For example, place paragraph headings close to the paragraph they introduce.

 
Other design
principles		 Spelling - Check spelling and grammar

Motion - Watch the movement on the page

Scrolling - Different resolution/screen size etc can effect scrolling

Time to load - How long to load images?
 
Navigation

Navigation through site:

Every page should answer the following questions:

  • Whose site am I looking at
        - use a logo or sponsor's name in a prominent place
        - use a common visual theme in all pages
  • Where am I in the site
        - menus
        - site map
        - cascading titles
        - page numbering (providing next & previous page links)
  • What else is available at this site
  • Where should I go next
  • How do I find what I am looking for
    - provide searching   
poorly designed
websites

Examples of Bad Design

Web Pages that suck
 

Designers Check Lists

    The Non-designer's Web Book Check List

    Design for Accessibility

    WAI Check List