Plan the Overall Site

Specification Document

• Why are you building the site?
• What is the business model for the site?
  • What is the goal for the site: Billboard, Publishing, Special interest, Virtual Gallery, E-commerce, Product support, Intranet or Extranet...
  • If you are generating revenue what will be the primary source of revenue? The secondary?  
  • Is the business exclusively web based or the extension of a brick-and-mortar business?

• How will you judge the success of the site?
• Who is the target audience?
• What are the limiting technical factors  affecting your site?

Plan for a successful implementation 

• Creating portable file naming conventions. 
• Build a relative file structure that can be transferred to your Web server without a hitch.

Select a basic information structure for your site 

• Manually diagram your site based on "Standardized" site plans then customize to develop the best structure for your site.
• Linear Information Structure: Lets you guide your user along a path.  Good for books or sequential presentations:

• Tutorial Structure: Similar to linear structure except there are several predefined paths the user can travel.

• Web Structure: A content structure used by smaller sites which provides links to every page on the site.  This type of structure requires clear navigation information.

• Hierarchical Structure: One of the most common. It lends itself to large content collections because the Section pages break-up and organize the content at different levels.

• Cluster Structure: Similar to hierarchical except each section is an island of information organized in a Web structure.

• Catalog Structure: Accommodates electronic shopping.  Users browse or search for items and add them to their shopping cart, they can review the items in their cart then checkout.

Planning Site Navigation

• Work from the users point of view.  Think about where the user wants to go within your Web site and make it easy for them to get there.
• Add plenty of links to make your Web site quickly accessible. Link to internal bookmarks/targets as well as to whole pages.
• Provide plenty of location cues to let users know where they are within your site:
  • Yahoo has a complicated directory structure.  They use text based links to let you know where you are and how you got there:

• Amazon.com clearly indicates that you are browsing Books in the subject for Computers and the Internet.  They also give clear links back to other parts of the Books site and the whole site.

• Use consistent text based navigation bars to link users to other pages on your site.  Use other text based links to help users move through a long page of information or through a Table of Contents.
• If you use graphical navigation links: 
  • Reuse the same images to reduce download time.  
  • Use the ALT attribute to provide alternative navigation options for users. 
  • Have a consistent text only link/navigation bar at the bottom of every page.

Home|Notes|Syllabus|Outline|News

• Keep a flat hierarchy: Do no make users navigate through to many layers to find the information they want.
• Consider providing a site map that graphically shows Users the lay-out of your entire site:

Design for the Medium 

Craft the look and feel

• Make your site consistent and easy to use.
• Better sites  support the way users want to approach the problems.  (Research shows users will leave sites that have unique designs or terminology). 
• Content design requires that the Web designer determines the best approach to describing each unit of information.
• Use a standardized Information architecture. An example that has already happened is the "About the company" area of most corporate Web sites. 

Make your Design Portable

• To be successful, you Web design must be portable and accessible across different browsers, operating systems and computing platforms.

Design for Low Bandwidth

• Plan your pages so they are accessible at a variety of connection speeds.  
  • Break large pages into smaller units.
  • Use fewer graphics
  • Use the ALT attribute with your images so that the user has information to look at while the graphics are downloading.  

Plan for clear presentation & easy access to information

• Highlight keywords (hypertext links serve as one form of highlighting; typeface variations and color are others)
• Use meaningful sub-headings (not "clever" ones)
• Use bulleted lists
• Only one idea per paragraph (users will usually skip over any additional ideas)
• Start with the conclusion, then add details.
• Have half the word count (or less) than print writing
• Limit the number of fonts and colors used on the site.

Use the Power of Hypertext Linking

• When writing on the Web you have the power to put hypertext links anywhere in your document to guide users through you information.
• Provide links anywhere you think it will help end-users find the information they want more quickly.
• Provide links that will allow users to jump through a long document quickly

Plan the Page Structure & Content

• The final step is defining the unifying themes and structure that will hold your pages together.  This includes:
  • Choices of colors, fonts and graphics
  • Page Layout
  • How much content to include

Create Smooth Transitions

• Plan to create a unified look among the sections and pages of your site.  Web sites should have:
  • Consistent background graphics
  • Consistent placement of navigation information
  • Consistent font usage
  • Logo that brands the site
• The two screen shots below show the unified look of the National Gallery of Art's Web site:

Use a grid to Provide Visual Structure

• The structure of a Web page is imposed by the grid or page template you choose for your Web page design.
• Most web pages use tables to lay content out in logical areas.
• Tables are also used to create active white space.  White space between content areas to guide readers attention to important content (space between each of the cells in the table).