TEC home

Web home

Page design
- basic principles
- examples and resources

Basic html
- tutorial
- resources

Netscape Composer
- tutorial
- resources

Dreamweaver
- tutorial
- resources

Uploading and downloading
- setting up your mason account
- basic procedure

Web assignments
- general
- design and navigation

Contact us

Design Strategies

Below are some basic strategies for enacting page and site design principles. Though some web sites (or hypertexts) are experimental or artistic, most are expository, or meant to deliver information quickly and easily. With this in mind, here are a few commonly used strategies that web designers typically employ.

  1. Arrangement
    • Note that the navigation bar to the left outlines the entire site.
    • Sites are typically organized hierarchically from general to specific, so try to create general categories with similar amounts of material in each category (to create a balanced site).
    • Within each category can be another mini-site built around that topic and inter-linked within itself.

  2. Navigation
    • Navigation across the top and side should always go to your main category pages.
    • Navigation across left or right side is usually in a table.
    • Navigation across the top is often an image-based links bar, sometimes running underneath a banner logo.
    • Navigation across the bottom is often links within the sub-category site and is often simply centered links with a | between them (see below).
    • Links in an informational site should always be literal and clear. Links in a more artistic site can be based on metaphor, irony, metonymy, etc.
    • To show where users are in relation to the whole, take the link away from the page that they are on and leave the basic text color (see links above left and below).

  3. Scrolling
    • Avoid breaking the text into too many separate pages—it could create arrangement and navigation problems.
    • If you do have a lot of text on one page, you can create jump links that take the user down that page rather than to a different page.
    • If you do have a lot of text on one page, make sure that you create bolded, easily identifiable headers for each chunk/section and use bullet lists when possible.

  4. Readability
    • Create headers and use bullet lists so that the page can be skimmed.
    • Use tables to create narrower columns of text, or to create margins or space around the text.
    • Use different colored backgrounds within tables to create separation among blocks or columns of text.
    • If you do use tables, avoid borders on the tables and make sure to create some space between the edge of the table and the text.
    • Use san serif fonts and avoid use of italics, especially within larger blocks of text.
    • Avoid background images that make the text hard to read.
    • Avoid bolding all of the text because it makes it harder to read and it leaves no room to use bold for emphasis.

  5. Layering
    • Links to further information are usually placed within blocks of text rather than in links bars.
    • Links should go directly to a page that gives information directly related to the linked word, rather than to a works cited or a general home page. (If the linked word is "Microsoft Word" don't send the reader to the Microsoft home page: be specific.)
    • Always have a link back to the page of origin and the main page of the site (or sub-section).

  6. Coherency
    • Many sites create a banner with a logo that cuts across all pages in order to bring coherency to the cite.
    • Also create one or two icons that can symbolize certain topics or sub sections of the cite. Use them logically and consistently.
    • Once you have a main graphic, pull the color scheme for the site out of the graphic. Choose two or three main colors and stick with them.
    • Only deviate from the main color scheme to signify a different (sub)section of the site.

  7. Signature
    • Provide links back to the supporting institution or organization (if there is one).
    • Icons can often be effective signatures. Always place them in the same location on each page (if you have a banner across the top, then run an icon on the bottom left or right corner).
    • Have a separate page with your bio and bios of other people who work with the site. Always make that info available.

  8. Professionalism
    • A site that follows these basic principles and strategies should look and sound professional.
    • Even if you don't have all the latest java scripts and flash animations, you can still have a well done site that shows you understand the principles.


last update: 10 December 2002
Design Home | Principles | Strategies | Processes