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

Menus with Beauty and Brains: The Heart of an Excellent Site

Petdata.com is an excellent example of creative menus used to present many options in a small space. Rather than tucking drop-down menus into a corner, the designer here has used them as part of the design. This is a pure information site, which demands instant access to site features from the entry page. Not all their data in place yet, but the entry page is an excellent example of integrating design and navigation.

Burpee.com provides access to a wealth of information on every page. We will take a closer look at this site.

Diamonds.com is one of my design projects. I worked closely with the company to establish information flow and priority before designing the graphics and navigation. We will look at the process and methods later in this article.

Remember when the Web was new and designing sites was relatively easy? For those of you who have entered the field recently, you may not remember the sites with just a few pages, with three or four menu items for the entire site. Designers around the world started educating clients about the benefits of interactive sites that provided real value to the visitor.

Well, guess what? That crusade was successful. Clients now want everything a visitor could ever want to know at their fingertips. Have we created our own monster? Exactly how do you fit 54 menu items into a space that is ideally less than 800 pixels wide, and even better if you can hit less than 600 pixels in width? Monster from a design standpoint is probably accurate, but the rewards are worth it, and one of the reasons professionals are hired when amateurs charge so little.

Perhaps 54 menu items is a slight exaggeration for most sites, but there is certainly a high demand to make navigation very simple for visitors. Some designers turn to frames, but many also refuse to use them except in very special circumstances. Most designers are vigilant in seeking new ways to fit navigation into their pages, without sacrificing visual appeal, or content area. I am going to take a few pages to look at some menu creation ideas, and tell you how to create that look in a variety of programs.

This is not a coding exercise. I will not be doing DHTML menus (our own DHTML expert, Peter Belesis, has the most phenomenal selection of menu tutorials on the Web at the Dynamic HTML Lab). I will not be discussing the JavaScript behind any type of menus. Again, our resident Guru, Doc JavaScript is far better qualified to take you through those codes. Wondering about the HTML code associated with menu construction? Stephanos Piperoglou can guide you through the intricacies of your HTML code and CSS positioning in HTML with Style.

Before you judge the previous paragraph as a WebReference commercial break, make a trip to the referenced sites. They are the first stop I make when I have a question ... because I hate wasting time. If you are looking for in-depth knowledge, they cannot be beat.

So, if I am not doing the code, what the heck can I put in a menu article. Lots! In fact, I am planning to feature menus on a regular basis. The topic is unlimited, and a menu that services visitor needs, while blending seamlessly into a unified graphic look is one of the main things that defines a professional Web designer.

To start this topic off right, we must look at planning. You cannot move to the graphic design part of a site without a plan. How can you choose the look, and then execute it, if you have not identified what features your visitor will want, and how best to provide the route they need? I will be using the Burpee Seed Catalogue site as an example for this section. This site packs an amazing amount of information into a small space.

We will also take a peek at a site that I did for a client. This site was my biggest navigational challenge to date, and involved close work with the company to place the right information in visitor's hands at the right time. We'll look at why and how we did what we did.

So, we have some theory to go through before we get to the stuff you love – firing up the graphics programs. But one cannot exist without the other. Without adequate planning, designing a menu is no more than a gamble. It may be pretty, but that counts for little if the visitor cannot find the information they desire. Sometimes you get lucky and stumble on the right way to present information. But like any gambling, sometimes you lose. Gambling is fine for playtime and personal sites. Client work takes careful and skilled planning.

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

Next page

Menus with Beauty and Brains Tutorial Index

Menus with Beauty and Brains: the Heart of an Excellent Site
Navigation Anatomy 101
Mapping Your Menus
Creating Consistency
Building Your Menu Skill