Before you start to publish a web site ...

Plan your website

Take a few minutes and decide on a "theme" for the page(s) you are creating. Decide the structure of the site and what images you will need.


Why do we concern ourselves with design issues?

Jakob Nielsen suggests that we have an absolute need for design standards.

You cannot go wrong by following the direction given in the Web Style Guide [linked from every page on the class web site]. But we will review some basic considerations and offer a way to approach the process of designing your web site. The principles are pretty straightforward:

know your audience,
keep it simple,
be fast,
know the rules before you knowingly break them


Define the purpose and the target audience

[Foxtrot comic strip, 18 Sep 2006]

What is your intent? what is the message you wish to convey, both in text and in feel?

Who are you trying to reach? who is your target audience?

Think about the audience

  • tailor your look and your content to appeal to this audience
  • consider their needs and their limitations


Determine the structure of the site by sketching the navigation structure

[Foxtrot comic strip, 21 Sep 2006]

What is the top level page? This is home page, the page that will open when a user types in the URL of your web site's directory

Are there any second level pages? If so, they are children of the home page

Are there any third level pages? If so, each third level page is a child of the second level page it is subordinate to

  • one might stretch the metaphor by thinking of the home page as the parent, the second level pages as children, the third level pages as grandchildren
  • of course, this means a page might have a parent, some siblings, perhaps some children, even some aunts and uncles, and cousins

A sketch will help you keep the relationships clear


Determine the content and navigation for each page

[Foxtrot comic strip, 19 Sep 2006]

What kinds of text, images, or other objects are relevant to the topic of a particular page? Remember, some things add code weight to a page and are thus more slowly loading, but sometimes the object is critical to the message and the load will have to be borne

Within the structure of your web site, plan
to have every page link directly to the home page,
to its parent page,
to its children,
and to its siblings.

Ponder designing a way to place the navigation tools so that they are visually similar
and in the same relative position on each page


Determine the design of the page

[Foxtrot comic strip, 22 Sep 2006]

Don't forget that this is your page,
so it should represent you in a manner you wish to be represented

how do you plan to lay it out? what objects go where? appropriateness

user expectations: placement

  • users expect the most important thing on a page to be in the initial view on the screen
    put the important stuff above the fold
  • users have a way of reading pages, so design accordingly

user expectations: consistency

user expectations: usability


Devise a simple, consistent naming system for your pages, images, and external files

Most good advice have consistent themes

  • create a main folder for our site on your client
  • create subfolders within the main folder for the various components of your site; store materials for each of the components in their subfolders
  • create a separate subfolder for images


... you want to consider that the development cycle for web sites has four stages

  1. The first stage is to develop content and format in tandem
  2. The second stage is to view the results
  3. Third, to make repairs as necessary. At this time you will either return to the first step to add content, or go to the fourth step
  4. Fourth, publish the page


General good advice about things you want to consider in your design

Web Design That Won't Get You Into Trouble


working with images | THOUGHTS ABOUT DESIGN | accessible design | next session