HOME | EXPERTS | GRAPHICS | column 53

Menus with Beauty and Brains As a Book: Chapter 13 (con't)

Avoid an amateur look
In the effort to make some areas of text stand out, many beginning designers make similar errors. Some errors make the content hard to read, while others are very confusing to visitors. Make sure that you are not falling into any of the following traps, and adding an amateur look to your pages. The common thread through each of these errors is that the designer forgets that special effects must be used only for emphasis.

ALL CAPS ARE VERY HARD TO READ FOR ANYTHING BUT HEADLINES. NOTICE HOW HARD THIS PARAGRAPH IS TO READ WHEN COMPARED TO THE REST OF THE TEXT ON THE PAGE.

Underlined text is also hard to read and causes another problem on a Web page. Visitors to your page are trained to look for underlines as links, and can be quite frustrated when underlining is used as an emphasis. Underlining is really a hangover from typewriter days, and is almost always a poor choice, even in print pages.

Italic text - especially at small point size - is another hard to read style when presented in large quantities. At monitor resolution, the course display usually creates a lot of jagged edges in italic text. Again, a style to avoid for Web design, although graphic text menu items can be the exception.

Bold style added to content text is a common, but very serious error. Creating a bold text makes the character shapes lose definition, and for large passages, lowers legibility. Some menus can be attractive when presented in bold style, but that is usually for very short menus. There is usually an alternative, like reversed text, or all caps that provides a more legible solution if normal text is too small. Increasing your text size by one point is often better than resorting to bold text in large quantities.

Isn't it a relief to get back to plain, ordinary text? The difference between plain and enhanced text is larger on a monitor. Do your visitors a favor, and help your site's success by always using emphasis text styles for emphasis only.

If you wish to set apart text because it is a quote or a section of text referencing back to another source, there are a variety of ways of doing so, without using italiziced text. One way it to simply indent the paragraph.

Or you can further emphasize the fact that the paragraph is not your work by setting a subtle background color other than your normal background color

Figure 13-3
The gray bar at the top, and the black dot in the center of the passage jumps to your attention in the light text sample at the left. In the darker text sample, the attraction to your eye is almost lost.

Tip

I do not have the space here to provide an entire lesson on contrast in design. The information is out there, though. If you do not have design training, I recommend that you find a few good sources of pure design information to increase your comfort with the subject. You can also absorb a great deal of intuition about contrast by keeping it in mind as you visit Web pages. If an area catches your attention, try to figure out why. Before long, your eye will become trained to watch for contrast, and you will be incorporating contrast area automatically into your design.

Contrast Counts

Have you noticed that when you arrive at some Web pages, your eye is drawn immediately to one area or another? A break in the visual flow of the page, as I mentioned in the previous section, is the most obvious reason for your eyes to settle in one particular place. Look at the difference between the two samples in Figure 13-2 again. It is not just a break in the flow of text that directs your eye around the page. Contrast is at play here, too.

A tiny red dot in the middle of a black and white page will attract attention every time. A large red menu in the middle of a very busy and colorful page may be missed completely. We can work with contrast to assign priority to our menu items through our site.

In Figure 13-3, I have the same block of text featured in different fonts and colors. In the block at the left, the small font color is light and the line spacing is loose. The sample at the right is in a heavier font, larger font size, default line spacing, and dark color. Both are legible, but look at the effect the gray bar at the top has with each sample. (It may help to cover one at a time and look at each sample alone.) With the lighter text, the darker bar jumps right off the page. However, with the heavier text, the bar nearly disappears. Find the black dot in the middle of the text. In the light sample, you will find it instantly, and your eye will remain there without conscious effort. In the middle of the dark text, your eye will have to work to find the dot, and continue working to remain there.

Contrast is the most important design feature for attracting attention to a spot on the page, and there are as many ways to create contrast as designers in the world. White space (space around a design element), background color for menu areas, graphic enhancements such as dots and lines, font color or weight changes, placing items on an angle – all are effective in providing the contrast you need to attract attention.

Caution

Do not lose sight of your page as a whole, and spend your contrast areas cautiously. Every new area that attracts attention on your page takes attention away from another. With too many areas on your page competing for attention, you lose all the benefit you set out to gain, and are more likely to confuse your visitors than help them through your pages.

Power Tools for Making Text Pop

Design training and getting your brain in shape for design over years of observation are the most reliable ways to improve your design. However, isn't it nice when you can find a list of ideas that you can simply pick out and try on your page? I have design training, and years of experience, and I still love to find design ideas neatly laid out for me. This section is devoted to jump starting your ideas to make the text, and specifically, text menus pop off your page for visitors.

Creating a Valuable Set of Tools

As soon as I have the direction for a site set, I automatically prepare a few tools to help me put the site together. Once the site colors and fonts are chosen, you can prepare the following items to have on hand as you put the pages together. It is important to prepare these tools early in the process-it is tough to decide that you will add a design element when you have twenty pages or more already completed.

Figure 13-4
Two versions of a "more" symbol. The upper paragraph contains the word "more" and the ">" symbol, formatted with a CSS style. The lower paragraph features the word "more" and a triangular symbol created in a raster program.

Get the "more" symbol ready
I tend to use a lot of teaser menus through a site, and always want a "more" symbol. Depending on the site, this can be a tiny graphic or simply creating a cascading style sheet (CSS) class style for my "more" symbol (see Figure 13-4) . Once I have either the style or the graphic created, I find that I use it often through a site.

Following is the code for the class style shown in Figure 13-4:

.more { font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 9px; color: #333333; font-weight: bold}

Figure 13-5
A one pixel GIF file can enhance your pages with very little file size weight.

See the HTML file for the above image.

Create a 1 pixel GIF file in each site color

Creating a one pixel GIF file in each color you have on your site is like having crayons to call out at any time. You can use these tiny files over and over, specifying a different size for each use. Figure 13-5 provides a few ideas for using a one pixel GIF file.

Figure 13-6
Stripes created with clear GIF files and background color.

See the HTML file for the above image.

Create a clear GIF file

While you are creating the one pixel GIF files in each of your site colors, prepare a one pixel transparent GIF file as well. You can use this image to hold columns open, but also to create vertical or horizontal stripes with table cell background colors. Figure 13-6 is created entirely with text, background color and clear GIF files.

Figure 13-7
Individual design elements prepared in Photoshop.

Repeat elements: dots, lines, and icons

As I am closing in on the final look for a site, I am always on the lookout for repeatable elements that I can pull from the design to liven up the menus and other areas of the page. Sometimes the elements are simple geometric shapes like triangles, or they can be photo pieces that can form bullets, dividers, or other attention grabbers. Unlike the graphic enhancements that use GIF files, special design elements cannot usually be resized without affecting quality. You will need to create one image for each size that you will require.

Figure 13-7 illustrates a design elements set created in Photoshop. Each of these elements will be exported individually and pulled into the page as required. Note that even the lines could not be resized like a plain color GIF file, as the shadow quality would suffer.

Figure 13-8
All caps, bold, and reverse text stands out well from the surrounding text.

Figure 13-9
Menu created with a CSS background to form reverse type category headings.

Tricks and Warnings with Text Styles

You have plenty of design power with simple text formatting. However, when working with text styles, it is important to use a light touch. More pages are ruined by overusing text styles than are improved by using formatting wisely. Using CSS adds many options to your text formatting choices. When you are creating your initial design style, keep the following ideas and cautions in mind as you progress.

Use text styles to attract attention
Using all caps for headlines is a sure way to make the text jump out. Applying a bold style can help to divide a page if used with a light hand. White space can help to separate areas, and don't ever be afraid to use color in headline or menu text to make it stand out. CSS offers an easy way to use reverse type and light lettering on a colored background. You can also surround text with a border with CSS. All of these methods will break your page, add contrast, and draw visitor attention to specific areas. Figure 13-8 illustrates three ways to make your headlines and subheadings stand out from the main content text.

The same methods can be used to liven up text menus. In fact, when the decorative elements in headings match those used in the menus, you are guaranteed a consistent look for your pages. The menu shown in Figure 13-9 shows a menu with CSS background style added to main headings.

Next page

Menus with Beauty and Brains as a Book: Tutorial Index

Ta!Da!
Table of Contents
Chapter 13
Chapter 13 (con't)
Chapter 13 Exercise