Web Site Planning: Suggestions and Guidelines

Step 6: Site Visual Design

Now is the time to take the site plan and build a visual design around it. This step is often the most satisfying aspect of a web site project.

Remember: Settle the intellectual property issues early on. Determine who owns what aspects (HTML code, graphics, scripts, etc.) of your web site. For more information on copyright issues, see below. Understand the benefits of using proprietary resources and the costs (time, money, inconvenience) of opting out.

Consider the following points as you approach the visual design phase:

  • Consider a unique graphic identity which incorporates your organization logo or a unique logo for your site.
  • Consider a distinct color palate. Use color to generate a visual vocabulary** which supports your site content.
  • Remember, the eye tends to see the pictures first. Consider how visual images can reinforce the text.
** Visual vocabulary is a set of symbols used to describe a system, structure, or process. Web designers use the vocabulary to describe, at a high level, the structure and/or flow of the user experience of a web site. For example, one approach is to make every page appear similar with a distinct color for each category of pages (think of colored tabs in a notebook).

Layout grids

Layout grids are the foundation of your visual design. Grids and design sketches lead to page mock-ups. The goal, as you begin, is to have pages similar in form across all major sections of the site. Consider the following points as you begin:

  • Strive for (not more than) three or four generic page templates.
  • Block out space for the following:
    • Page content.
    • Organization logo (often in the upper-left corner of the grid).
    • Navigation information.
    • Page title.
    • Supporting graphics.
    • Sponsorship acknowledgements/advertising.
    • Page footer, including copyright information, link to a privacy policy.
    • Contact information for document author and/or site webmaster.

About copyright:

Design Sketches and Page Mock-ups

Consider the following points as you begin your design sketches and page mock-ups:

  • Sketches establish the site's look and feel. They may been done concurrently (and approved!) during earlier steps in this process.
  • Mock-ups integrate design sketches with layout grids
    • Mock-ups should closely replicate actual pages by integrating design sketches with the layout grids
    • Mock-ups serve as the basis for your site prototype, if the site is large, or actual pages if the site is small.

When the design seems too simple for the work it required, then you know you are done!

Link for more info:
Security Considerations:
Why not use a Free Web Hosting Service?

NOTE: Be aware that the free "visitor counters" you see on the bottom of many Web pages often contain advertising or hidden code. You should also be aware that these counters are an inaccurate way to track traffic on your web site.

Previous Index Continue