Rogue Librarian

Here is a little something from Web Design on a Shoestring, Chapter 5. The Design: Looking Good With Less. I am looking for inspiring stories about CMS on the cheap. Please contact me if you have any.

Typography as a Three-Step Facelift

Imagine this scenario. You have just started a new job as an in house web designer, and the first thing your boss wants you to do is clean up the web site. She has given you a week and no money to do it. This is not to be a complete redesign; that will come later when you have a little more cash. You just need to give it a facelift.

Assume that your cluttered site was created three years ago. While it is fine as the boss’s nephew’s first web site, it makes your company look amateurish and out of touch.

Start with the typography, and use it to define your style, simplify your color scheme, and clean up the visual lines in your site. Think about the variety of typefaces, how consistently each typeface is being used, and the placement of text on the screen. Ask yourself how you might change these three typographical elements — variety, consistent use and placement — to eliminate visual clutter and to improve the site. This analysis begins three-step facelift that will inexpensively add elegance and style to what every design you are trying to improve. Your boss will wish her Botox treatment had been as successful and pain free.

1. The Careful Variety of Typefaces

The least expensive way to create uniformity and hierarchy is to select two or three good typefaces. Try to select typefaces that together create strong visual contrast, and that look good on a computer screen.

2. The Consistent Use of Typefaces

Once you have selected your typefaces, write a quick visual style guide that will dictate how each of the typefaces will be used. This guide should prescribe a set of rules that cover elements like headlines, site-wide navigation, body copy, links and call-outs. You will undoubtedly go back and make changes to these rules as you begin implementation. That is fine; just be sure to update your style guide.

3. Creating Clean Lines by Placing Text

When you lay text out on the screen, make sure that you use clean lines. The alignment of each text area should be strong, and should relate visually to other text areas on the page. Clean placement costs no more than sloppy placement, but it adds tremendously to the integrity of your design.

Take the three elements — careful variety of typefaces, the consistent use of those typefaces, and the clean lines via typeface placement — and start cutting.