Planning The Site

  1. Look at other sites that have a similar purpose. Focus on the content, and how easy or difficult it is to find information. Does the navigation make sense? Is the content relevant? From this evaluation you can learn what does and does not work in a website.

Your Website Blueprint

A website blueprint is a set of documents, including drawings, that describe all of the essential information about the site.
One of the keys to success in developing a website is to document the results of all of your tasks. We recommend keeping a directory on your computer for everything related to your site. This directory should contain, at a minimum, the documents described below.

Blueprint Document 1- Requirements Specification

  • What are your goals in creating this website, what overall information do you want to convey?
  • Who is your audience? Students, prospective students, faculty, staff, community, or a combination of two or more of these? What will be their goals in using your website?
  • Are there different goals for different audiences? If so, what are the goals for each?
  • Does the written content for your site already exist, or will someone be creating it?
  • If the content exists, how and where is it currently stored?
  • How often does the content change?
  • Are there constraints on the information you want to display? For example, a page on this website should only be visible to students enrolled in a specific course.
  • What interaction do you need between your site and its users? Do you have a database from which you want to extract and display information? Do you have forms that site visitors will need to complete?

Blueprint Document 2 - Site Specification

  • What technology is available, and how will it be used?
  • Who will manage the project?
  • Who will create the pages?
  • Who will maintain the site?
  • What will happen if one of these people above is no longer available?
  • What will be the approval and upload process for future changes?
  • What is the time frame for development?
  • What special allocations are needed so you have a realistic timeframe? Example: If you have students working on a project, remember finals week and breaks.

Blueprint Document 3 - Site Layout

  • Gather all of your content, and organize it into categories. Determine the primary topics your website will cover and how your content fits into those topics.
  • Look over your content with the eye of a user. If you were a user, where would your expect to find each piece of information?
    • Standard Content Areas. Most sites have standard content (About Us, Contact Us)
    • General Content Areas. Divide your content into broad general areas. These areas will become the secondary pages on your site.
    • Miscellaneous. Some content does not fit into general areas. Often this content is placed into a catch-all area, or you may need to review your general areas.
  • Create a drawing using pencil and paper, or a visual tool such as MS Visio, to lay out all of the content within your site.
    Pencil sketch and Visio drawing of website layout
    Pencil sketch and Visio drawing of website layout
  • When your layout is complete, sketch in any images and major page elements that your want to use to enhance your pages.
    Visio Drawing of layout with image placement
    Visio Drawing of layout with image placement
    • Keep images small and visually effective. Images take up space, which can mean longer download time for people using your site. Be sure your images contribute to both the look and the information of your site.

Developing The Site

There are common elements that should be on every page of your site.
  • Specify the title of each page in your site. This is done within the <title></title> tag in the header of the page, and is displayed in the blue bar at the very top of the window.
  • Every page must have, at a minimum, a link to the home page of the site. Because of the way search engines (such as Google) work, a user is very likely to enter your site at a low level page. If there is no way for the user to get into the rest of your site, they are lost.
  • A contact name and email or phone, should be visible on every page. In the ATUS Templates, this is part of the footer.
  • Provide a clearly visible date that the page was last updated. If you save your files as .shtml the date can be automatically placed on your page with the following code:
    • <!--#config timefmt="%m.%d.%Y" -->
    • <!--#echo var="LAST_MODIFIED"-->
  • Within the Header Section of the page, the following information should be placed in a commented area:
    • The person, department, or entity that owns the site.
    • The author, or contact person for the site.
    • An email or phone number for the author.
    • The date the page was created
  • Each page should have a link to Western's Home Page. If a user comes in at a low level page, and finds this is not where she wants to be, an easy link to both the home page of your site and the home page of the University will be helpful.
adapted from: