Website Design:  Style Guide


Website_Design
Site Unity
Organization
Typography
Page_Layout
Style Guide
Audience
Page Size

All Hints
Site_Map


Related_Tutorial
Web Images
Scanning_Images


Summer_98
TechFair_98


Use tables to give your site a constant grid format It's not especially easy to implement, but a site can have consistent columns that fall into a grid, much like a newspaper or a magazine. Because of the limitations of HTML, horizontal alignment of text and graphics is difficult to control. But you can at least define vertical columns by using a table.

Click here to see how this page was constructed with tables.

Example
  • Good Page: Psy 523 using tables, and typographic hierarchy
  • Bad Page: Psy 523 not using tables or typographic hierarchy
Keep your pages
short
Set an upper limit to the amount of text you put on each page; somewhere between 200 and 500 words per page is reasonable. The first page should have the leas amount of text, and the pages deeper into your site can have more text.
Example
  • Bad Page: an example of to much text on a single page
  • Good Page: links to in-depth material, and liberal use of bullets
Create
style guidelines,
with some contrast
between other sites
Although it's important to maintain consistency throughout your site, you also want to provide enough contrast between its various site on the same server. PSU, for example, has many classes on the web, and if they all looked the same, then the rule above would still apply. Check out SOC 399, then PSY 523, and notice they all have the same format, but use font, color, and graphics to make each site unique.
Establish sitewide
consistency rules
Consistency is important in all design, but it's extremely important with the Web. Because one mouse-click can send someone to a new site at any time, a consistent style provides a significant visual cue to let people know they're still at the same site. (This site for example, use the same color, format, and text style for entire Web site.)

Website Design
Site Unity | Organization | Typography | Layout | Style Guide | Audience | Page Size
All Hints | Site Map


Related Tutorial
Web Images | Scanning Images


Contact Nancy Perrin, or John Rueter. PSU's FIPSE Project coordinated by Nancy Perrin and John Rueter, © 1998. Page constructed by Chris Miller. Last updated on June 23, 1998. For more see the About Page.