Sparks Fly
[Home] [PBS VideoDatabase] [Social Studies] [TSU] [UVA]

Style Guides

Just how do I get this much discussed CONSISTENCY?

How to Manage Web Sites

How do you remember which element you used for section headings?

Color?

Manner used?

Buttons?

Style Guides provide the key to creating a well designed web site

Be consistent.

This philosophy, above all others, drives good design.

"The principle of least astonishment,"

Focus on your message

Consistent images and layouts within each page and throughout your entire site.

Keep it simple.

Simplicity is the foundation of elegance.

Don't clutter your pages.

Keep your pages short and to the point.

Introduce other pages to explore tangential information.

Avoid excessive jargon and acronyms and use simple direct language.

Reduce complexity whenever possible.

Be relevant.

Keep the information content high.

Make each word, graphic and link count.

Make sure your information is well ordered and well organized.

Be organized.

Use links, table of contents, indices, and button bars to provide natural navigation between pages.

Order these sensibly.

Match buttons or link order to the way readers should approach the site.

Be current.

Keep information reliable and current.

Update pages as needed.

Outdated information casts shadows on the entire site.

Keep links, as well as data, current.

Be proactive.

Design against confusion.

Do not provide a "previous" arrow for the first of a sequence of pages or a "next" for the last.

Only provide those links and options which make sense.

Provide feedback.

Well-designed title bars and headlines let readers know where they are in your site.

Colon-separated text provides context clues.

Feedback prevents readers from getting lost within a site.

Provide escape routes.

Always provide return links to the section introduction and home page.

A reader who selects a wrong link should never be "trapped."

Be redundant, but not overly redundant.

Where appropriate, use both text and images to allow for audiences who cannot see images, who choose not to see images or who need the text to explain the images.

Use redundancy to accommodate physical, experiential and linguistic differences among your readers.

Demand the reader's attention judiciously.

Use blinking text, marquees and animated GIFs with great caution and only for good reasons.

Use video, sounds and color sparingly and meaningfully.

Links

Avoid unimplemented links.

If necessary, include links but provide style hints that the link is not active.

Keep links meaningful.

Avoid using "here" or "this" for links.

Instead, turn the description into the link.

Avoid excessive and unnecessary links.

A page with too many links detracts from, rather than contributes to, the flow of the document.

Do not expect your reader to follow every offered link.

Limit choices to those links which add to your presentation.

Place clarifications after link menus.

Add organizational information after listing links.

Readers familiar with the page skip unnecessary details while permitting new readers to access this information.

Text Issues

Use headlines judiciously.

Avoid overwhelming readers with excessive headlines.

Use whitespace effectively.

Do not clutter pages. Blockquotes, cellpaddings and other HTML tags can add vital whitespace to HTML documents.

Select readable fonts.

Keep your reader's vision limitations in mind.

Never blink.

Unless introducing information of earth-shattering importance, never ever blink. Blinking messages provide continuous distraction.

Don't forget graphic design principles.

Remember balance, gridding and proportion when laying out page text.

Backgrounds and Foregrounds

Use sensible background patterns.

Avoid patterns which obscure or overwhelm.

Contrast foreground and background colors.

Select colors which provide clear contrasts.

Images

Keep images small.

Help image compression routines by including fewer patterns, gradients and textures in your images.

When possible, use thumbnails.

If your site is image intensive, provide condensed low-resolution images that load quickly and give readers the choice to view them at full resolution.

Blend GIF images into the background with transparency.

The GIF89a standard supports image transparency.

The following two images are identical. The color white in the second image has been set transparent and blends without borders into the blue background.

Keep images meaningful.

Make each image count in your Web page.

Use images which are immediately apparent to users and which match other page elements.

Forms

Align fields.

Use preformatted text (the pre container) and a fixed-width font to create forms with aligned fields.

Use left-side checkboxes and radio buttons.

These selection elements align better when placed to the left of text.

General Issues

Avoid "bottom grot".

No matter how honored you are to be part of the "Top 16% of Websites" or "Cool Blue-Themed Site of the Day", be judicious when including these banners, buttons and advertisements for other sites.

Awards rarely add content to your site and often detract from a tight page presentation.

Date your documents.

For time-sensitive pages, add a "last revision" line at the very bottom of your document.

Remember to use month names and not numbers. Depending on country of origin, 7-2-95 might mean either February 7th or July 2nd.

Design Elements

Select a Theme.

Before starting a page design, select a theme.

This theme influences the decisions that follow.

Consider a variety of themes. 

Each choice points in a different direction and gives a different spin to presentation.

Select Colors.

Design a color chart that will guide the project "look".

Select colors and textures that complement each other and provide a good range of color hues and tie to the theme.

Do not use too many colors. As a rule of thumb, limit yourself to five plus or minus two colors.

Select fonts.

Image fonts complement your theme and color choices and are not limited to browser display fonts.

Fonts can be whimsical, serious, frilly, and plain.

Select fonts carefully. Choose those that look good at different resolutions and support bolding and italics.

Design buttons.

Create a rectangular block to form the structure of your buttons, and, perhaps, your banner.

Most important, blocks act as canvases.

Keep an area open to write and draw upon.

Design a banner.

Banners can mimic the buttons block or might pick up similar themes.

Design a horizontal rule.

If desired, you can create an alternative to the HTML horizontal rules.

Custom rules must match the page theme.

Either pick up the colors and page style in your rule or logically fit the rule into the overall design.

Design custom bullets.

Another alternative element is the bullet.

Custom bullets like custom rules must match the design.

Design a custom mailbox.

A third alternative element is the mailbox.

Rather than use a stock image, why not integrate the mailbox into the page theme?

Define HTML font colors.

Select HTML colors from this design palette.

Each HTML color should fill a particular role such as section headline, content text and expository text.

Section Title

Headlines

Style Guides

Style guides canonize page style.

A well-defined guide to text and paragraph style supports the creation of consistent pages.

Guides provide rules to create each part of a Web page with uniform page details.

Presentation detail might include font face, size, color, indentation and alignment.

Text plays many roles in a Web page.

Text which introduces a section should appear distinct from that of text which demonstrates examples or inserts a tangential note into the page.

The specifics of these details should be documented and collected into a style guide.

What roles will text play in your pages?

The first stage of creating a style guide is to detail each role played by text in your Web pages.

These roles might include

bulleted text,

sections,

examples,

summaries,

call-out notes, etc.

Try to list, and design for, as many roles as possible but be flexible. Many roles will not be discovered until page development is underway.

Create templates for each text role.

Provide reusable outlines

Standardize the look and feel of a particular role.

Templates make it possible to create and edit web page material quickly and accurately.

Test the templates before freezing style.

Create test pages.

If necessary, fill in page text with nonsense such as "blah blah blah".

Test pages will give a much better understanding of how the style guide elements work together than designing "in your head".

Keep adjusting the templates until you are pleased with the presentation.

Test each style element to make sure they work with each other and do not clash.

Once committed to a style guide, be faithful.

Do not change styles after the style guide has been frozen.

Add templates for additional elements

Never change any template that has already been used.

If changes must be made, all pages must be updated to the new standard.

Summary

Design is an important part of web page construction

Color and elements chosen on a page influence the readability and appeal of a site.

Style guides assure consistent pages.

Build templates for each text role and element.

Create your own unique style.

Test styles before commitment.

Once committed, do not change styles.

Source:

Sodun, Eric and Valqui, Kelly.  HTML TemplateMASTER CD.  Charles River Media, 2000.