Dan Fergus Design > Student Resources > Syllabus > Class Schedule > Web Site Style Manual

VCB328 Advanced Web Design

Web Site (Part 2: Style Manual)

A style manual is a document that sets out the specifics of the overall "look and feel" of a large design project. Anytime a project incorporates a variety of media (such as a corporate identity program) or is large enough that many people at different time will be working on it (like a large web site), it is important that there is a fixed set of rules that specify things like proper font families and sizes, appropriate colors, how the company logo is to be used, etc. Often times, when one goes to work for a company on a free-lance basis, she will discover that there is already a fairly strict set of guidelines in-place that she must follow. Other times, the designer is free to create the style guidelines from scratch (this is usually done as part of a corporate identity or re-branding program).

For this project, I'm giving you carte blanche. The only restriction—you must use the provided logo. Otherwise you are free to set-out the style guidelines as you see fit.

The following are typical standards that should be specified in a style manual:

• Proper use & placement of logo (size, color scheme, position on page, etc.)
• Font face, style, color, and size for various size headings, body copy, navigation, and other uses.
• Color scheme (and be specific, use hexadecimal and/or RGB formulas).
• Use of colors: which colors can be used as backgrounds? Which are accent colors? Which are used in fonts, etc. be as specific as you can.
• Look of and placement of navigation/buttons/links.
• Use of graphics—will there be photos? How will they be used? Background images? Illustrations? Will they be color or B&W? etc.
• Size of screen layout (in pixels).
• Overall screen layout: where will the logo go? How about navigation? Text? Photos? etc.

Procedure

1. Spend some time thinking about the possibilities. Do some research—look at similar sites. Consult a color harmony guide book. Draw upon your knowledge as a graphic designer.
2. Write a 1-2 page document that specifies as many design standards as you can. You may create the document in Word, InDesign, or any application you feel comfortable working with.
3. Include samples: color swatches, sample graphics, typefaces, etc.
4. You will present your design manual to the class next session.

Due: Beginning of class, week 3.

Class schedule

Syllabus

Student resource index