[main] [misc] [graphics] [page design] [site design] [xhtml] [css] [xml] [xsl] [schema] [javascript] [php] [mysql]

HVCC Home
Blackboard HVCC
Blackboard Manual
Faculty Association

site design main
1. the web project
* a. starting a project
b. planning a site
c. site structures
d. site development
e. project review
2. what is info arch
3. organizing info
4. navigation systems
5. labeling systems
6. search systems
7. project planning
8. project development


print version

Note that all external links will open up in a separate window.

This is a stripped down version of these pages for older browsers. These pages are really meant to be viewed in a standards compliant browser.

Directions for surfing with audio.

Starting a Project

These tutorials are about general Web design theory.

Getting Started

One factor makes a page of any kind work. That is legibility. Web pages not only need to be legible, but also need to download quickly.

Web sites also need to be legible. Since a Web site is a structure for pages, the legibility of a site is constituted as ease of navigation. It is easy to navigate a book, it is a linear object that you can flip through the pages of. Web sites are more difficult to navigate. Therefore, you need to actively work on designing them in ways that make it easier for users to get around in them.

The following rules are some basics for making a Web site easy to navigate.

Know the site's purpose.

Why are you creating this site? Until you have an answer to this, your site should not even begin. Another way if putting this is that you should always have a clearly defined goal before you set out on a project.

Know the site's audience.

Who is the intended audience of the site? Plan the site for them, not for yourself. Different audiences have different needs. Make sure you address them in your design.

Keep your audience on track.

Make sure your audience knows where they are at all times. It should be clear to them that they are on your Web site. It should be clear to them where on the Web site they are.

Brand your site.

This is market-speak for make sure that your Web site has a consistent look and feel. This helps to keep the audience oriented. It also helps to advertise your site by generating a strong impression of it as a coherent unit.

Make sure your site is scalable.

Plan for growth. People developing large sites almost always remember to plan for growth, but even the smallest sites grow over time. Make sure you site can adapt to growth and to changing content.

Separate your functions.

Break different functions of the Web site into different sections. Make it clear to users what section they were in and what function it serves. The same also applies to the staff of large projects. Don't give everyone full-control over every aspect of the project. Establish divisions and gateways that divide up the site and the project.

What all these rules boil down to is, plan your site out before trying to build it so you know what you are doing.

When first learning how to build Web pages and Web sites there is a big temptation to just leap right in and do it. If you start creating Web pages for real world purposes and not just for fun, you usually only do this once before you realize what a bad idea it is. It is like hopping in the car for a road trip with so little planning that it isn't until you are pumping gas into your car 300 miles from home that you realize that your wallet is still on the dresser.

Fortunately, in Web design, you can usually start again from scratch, but this costs time, and potentially money. Spend enough of both on someone else's tab and you will find yourself in trouble. If you plan a Web site, you can make sure that even if you don't get it right the first time, a mechanism is on place to allow for change and development.

You should always plan your Web sites before building them.

These tutorials look at planning a Web site within the context of a business project planning and development model.

The Business Model

Before beginning a Web site, it helps to take a look at how businesses plan for the development of most any information technology project.

Any business project worth its salt is an iterative process that cycles through a series of steps. A rough breakdown of the steps is as follows:

  • Definition
  • Planning
  • Development
  • Implementation
  • Review

How these steps are implemented depends on the nature of the project. For instance, a large scale Web site may go through the following steps:

  • Definition
    • Identification of a need or opportunity that the Web can address
    • Identification of a idea to meet those needs
    • Identifying a target audience for the Web site to be developed
    • Formal statement of a project goal that uses that idea to meet those needs
  • Planning
    • Assessing feasibility of project
    • Defining resource needs for project
    • Identifying target audience needs for project
  • Development
    • Developing an information architecture that addresses user needs
    • Developing a site layout that reflects this architecture
    • Developing a look and feel for the site
    • Developing page layouts that reflect the look and feel of the site
  • Implementation
    • Assembling content for the site
    • Structuring content to fit the information architecture, the site layout, the site look and feel, and individual page layouts
    • Assembling content into pages
    • Assembling pages into the Web site structure
    • Testing the site
    • Making the site publickly accessible
  • Review
    • Monitoring site usage
    • Assessing user satisfaction with site in terms of usability and visual appeal
    • Fixing problems
    • Identifying new needs and opportunities

Using a business model as a template for talking about site design has a distinct purpose. In designing a Web site, it is probably a model of development you should know about. By teaching the concepts within its framework, the concepts you need to know become part of the process you need to follow.

For now we will look at the elements of this process that relate to site design. We look at page design elsewhere.

[top]