Purpose/Audience
 
Tone/Message
 
Layout/Design
 
Site Storyboard
 
Templates
 
Great Content
 
Great Graphics
 
Multimedia
 
Universal Design
 
Quality Control
 
Reach the World
 
docb's webdesign clinic

 
WebDesign Clinic #5a:
Creating a Page Template
 
Now that you've planned your basic layout (Clinic#3) and site structure (#4), use your results to create a template for your pages. All your pages can basically follow this template; you plug in differing text, graphics, and special features.

*Why?: Using a page template both assures a visual consistency for your site (important for professionalism, readability, and usability) and simplifies page creation and maintenance. As new content is created, you can just plug it into the template and go. And because the design elements are consistent, you can change them site-wide using a simple extended search and replace.
 
*Making a Grid: Using the design decisions you made in Clinic #3, draw a rough grid of a typical page in your site. For example:
  • "here's where the logo or title always goes"
  • "let each page have an intro paragraph here"
  • "lay out the main info. this way"
  • "fit in rules, bullets and other separating elements like this"
  • "here's where I'll put the email links, special info (modified date, browser logos, copyright notice) and navigation bars"
*Main or home page: 'Main' pages may have a slightly different layout (larger logo/title, less text, etc.) than 'branch' pages, but the designs are congruent. Notice the main page of this site vs. these subpages.
 
*Navigation: Navigation aids (buttons, bars, image maps, etc.) are key; they should be identical in look and placement across the pages, and provide users a way to at least go:
  • up to the home or index page
  • back to the previous page when appropriate
  • ahead to the next page
  • perhaps to other 'main' pages.
The logo/title is also useful for letting users see at a glance where they are; size can indicate the page's place in the hierarchy.
 
*Head Template: Make sure to include a <!DOCTYPE> statement in your Head section for validation, and a <TITLE> tag with the name of each page; this will appear at the top of the user's browser window. Include <META> tags with Description, Author, Keywords, robot directions, etc. Besides informing users, these are often used by search engines. To see how this is done, just View Source of this page in your browser.
 
Now we'll continue our template discussion with part b: a look at pages with special purposes.
 
NEXT: WebDesign Clinic#5b: Special Pages
Content ©1999 Dr. Barbara Strand.
All Rights Reserved.