Menus with Beauty and Brains 2: Production Graphics with Wendy Peck at webreference.com

Menus with Beauty and Brains 2: Menu Graphics that Work

Menus with Beauty and Brains, the first article in this series, featured Burpee Seeds as a wonderful example of strong navigation.

Last time we took a tour through what makes a menu work. If you have not read the last issue, you should start with Menus with Beauty and Brains: The Heart of an Excellent Site. Also, I have added an excerpt of a letter from Don Zeidler, the leader of the design team for the Burpee Seeds site (featured last time). The letter enforces my message that it is hard work to create simple menus.

This time we are going to look at the graphics that we use for menus. When we are building menu graphics, we must keep all the same principles of design that we use for all graphic images, but we have several other considerations. We must make sure that the text used in menus is legible, and that the menu components are quick loading. If you have three separate menu areas on each page, all with rollovers, the byte count grows quickly if you are not watching your optimization at every step.

There is an unlimited number of ways to present menu items, but you must be aware of your visitor needs. Text that cannot be read will ruin well-planned navigation. However, large menu items waste download time, take up valuable space and can detract from the content.

Once you have your structure in place, you still have one more step to complete before you start to design. We looked last time at why it is crucial to understand the reasons that a visitor is coming to your site, and the importance of planning. You cannot design the structure of your menus unless you have that information. However, you also need to know a little more about your visitor in order to design the graphics for your menu.

The first question to ask how small can your menus be? We usually try to make our menus as small as possible, in order to provide great navigation, but still leave most of the screen for content. But we must be careful that we are not excluding some of our visitors with a font that is too small, or with a color combination that makes the menu items too hard to read. Once again, the importance of knowing your visitor cannot be overemphasized.

On the other hand, you can go to far in the opposite direction. The lower sample at the left is a common menu item. There is no doubt that any visitor can read the menu items, even with the low contrast color scheme. However, even two menu items take up a lot of space and command too much attention. Plus, the two items here weigh in at over 5 times the file size of all the menus shown above.

The best menu system will fade to the background when it is not needed. Menus created with large type and bold colors often overwhelm the content. Test this when you see a site with large, bold, navigation. My bet is that you will spend more time clicking from page to page than actually absorbing the content. (Are you having trouble reading this paragraph? My eye wants to go to the menu items.) Our surfer brains are lazy ... the mouse goes naturally to the attention getters on the page. That's why teaser menu items are so effective (see menu definitions). However, teaser menus are designed to direct our visitor to the places we would like them to go, or where they will fulfill the purpose of the visit. Site navigation should be integrated well into the page design, but subtle.

One last thing before we move to creating great looking text in graphics and some design ideas: Don't forget that menus can be "real" text, too. If you find that your design calls for plain text, consider using plain text. In the next article in this series, we will look at design tips to create professional looking menus with HTML text.

Let's make some graphic text ...

Wendy Peck is a working Web designer and writer living in NW Ontario, Canada. https://wpeck.com

Next page

Menus with Beauty and Brains 2: Tutorial Index

Menu Graphics that Work
Making Small Text Work
Creating a Menu Framework
Building Tab Menus
Menu Bars for Liquid Design