Outline of Web Design Process
Note: This outline owes a great deal to John
and Crystal Waters. Thank
you for your clear explanations and ideas. (I hope you won't mind my using
your words; you said it well. Can I buy ya lunch?).
Define project terrain
Who are the intended audiences? [example]
What are the short- and long-term goals of the site? [example]
What is the mission or purpose of the organization? [example]
Why will people come to your site? [example]
Filter answers and rephrase them as goals [example]
Have group members rank goals [example]
Client sign-off on goals?
Document goals and publish them to group
Who am I trying to reach?
Who are the intended audiences?
Rank importance of each audience and list goals important to each
Refine site goals accordingly [example]
Create use scenarios for typical users [example]
Create user profile and walk through typical task, do this for at least 6 users
Look at what these stories say about the way the site will feel and respond to users. These stories will be valuable when defining the content and functional requirements of the site. [example]
Perform Competitive Analysis
Generate list of features and criteria for evaluation of each site.[example]
Evaluate sites (including own existing site if there is one) consistently, taking notes & screen shots.[example]
Choose a date 1.5-3 months in the future to repeat the competitive analysis.
Create pros & cons summary of all sites evaluated.
Document and publish this information to the group.
What pieces of content does the site need?
How will this content be grouped and labeled?
Create a content list or inventory.[example]
What sorts of functionality will be required?
What functions are needed for content to work?
Create a functions list or inventory.[example]
Rank the items on each list.[example]
What can we achieve on deadline and on budget?
Create requirements list.[example]
Group content (this step is sometimes easiest to do with index cards arranged and rearranged on a table).
Use these labels to define the major sections of the site and the names of each section.
Do we have buy-in from key players on names?
Revise the content inventory, if necessary, to reflect the new organization of the information.[example]
Creating Site Structure
Organizational metaphors? (e.g. supermarket)
Functional metaphors? (e.g. cut, paste etc in Photoshop)
Visual metaphors? (e.g. cd player buttons on audio controls)
Remember, no metaphor is perfect. The overall site might not be explainable as a metaphor, but perhaps the navigation system (or smaller subsets of the site) can be.
Create a text-based, hierarchical map of the site, called the "site structure listing".
The major sections you decided upon earlier are the "roots" of the site structure listing. Fit them to your rationale or metaphor.
Map out the organization of each section with items from the content inventory
Create a visual representation of this structure (like an org chart or architectural diagram)
Publish structure to group
Will the visitors find what they need?
Choose global navigation elements
The major sections identified earlier are excellent candidates. Try to use fewer than 7 elements.
Document the global navigation system and as many of the local navigation systems as you can.
This can be as simple as compiling a list of elements that make up each system. For example, Webmonkey has a global navigation system that can be documented as a list: "The global navigation device contains links to all the major sections of Webmonkey: design, HTML, dynamic HTML, etc." A local navigation definition for Webmonkey might be: "For a multi-part article, a list of links to each section appears at the end of each page. Use the title of a section as a link to that section."
Write a summary or metaphorical explanation about the driving rationale behind the site structure
A good site structure combined with an effective visual design enables users to construct a mental map of the site.
Publish these to the group
Creating the Visual Design
Take the site's structure and map it onto the visual design
A number of tools are useful in creating the design. The first step is to make layout grids that define the structure and organization of the site as it will show up on the page level. Then design sketches will establish a general look and feel. Layout grids and design sketches together lead to page mock-ups, which in turn lead to the construction of Web-based prototypes.
Take the site structure listing and make a list of all the possible page types
Review the content inventory, then try coming up with two or three generic page types.
Create a rectangle representing the page, and block out the elements of your design. Since content is the most important element, start with that - even though it's a little tricky, since you won't yet know what else will be on the page. Several other elements must be considered: branding, advertising and sponsorship, navigation, page titles, header graphics, and footers, which include copyrights. This is an iterative process. You will need to revise the layout grids several times. You will probably want to do two or three different styles for the layout, if you have time.
Create page mock-ups
Once approved, document visual design and publish to group
Maintenance & Growth
Except where otherwise noted all text is copyright 1998-2001 Dinah Sanders. Images are copyright of their original creators. MetaGrrrl logo and photos of Dinah are copyright 1998-2001 Dinah Sanders. Inkspot Books and the Inkspot logo have been Service Marks of Dinah Sanders since 1993. Publication (yes, including on the web) without express written permission prohibited.