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

		Menus with Beauty and Brains 2: Creating a Menu Framework
ThinkInkless.com menu showing colored light bulb which is triggered by the mouseover shown below.		You have your site plan ready, and have identified a few fonts that will produce great results for your menus, so now comes the fun. You have to decide what form your menus will take. There are as many ways to frame a menu as there are designers in the world. I have seen some very creative menu frameworks, especially on artistic sites. If your visitor base calls for it, let your imagination run. I am not a big fan of playing "find the menu" for sites where you see no navigation until you mouse over the correct spot, but even that variation is appropriate for a narrow visitor base - a very narrow visitor base. ThinkInkless.com, a Web development business site, is a perfect example of an alternative menu presentation that works. On each menu mouseover, an animated rollover appears, and the light bulb changes color to match the featured rollover color. In the mouseover sample I have included as full size, the pink "O" characters hop up and down. Note that the designer has included Alt tags. Consider that even on my very slow (24k) connection, this site loaded fast, is fun and innovative, yet is quite logical and includes accessibility features excellent proof that form need not replace function. I recommend a trip to this site, since the menu reflects the tone of the entire site. The theme is left brain/right brain, each represented by one of the partners in the business. Every element of the site enforces the theme, for an extremely cohesive site.

Colored tabs mark your position in the site at Apple.com.		Tabs: Classic, or tired trend? For most sites that we do as professionals, our menu design must be clean and crisp, and leave no doubt in the visitor's mind how to reach the information they seek. Tabs are still popular, even though they could be considered "overused." However, tabs provide an instantly recognizable format for people, no matter how new they are to the Web. Tabs evoke the idea of sorting though a filing cabinet to find categorized information exactly what we want to provide for our visitors. They lend themselves well to showing an active page, as shown at the left for the highly recognized Apple.com site. (To create a glass look like this, see Classy, Glassy Buttons.) Do not discount the idea of tabs, just because so many sites feature this navigation. At times, trends become classics because they work. In my opinion, tabs fall into that definition, and I think we will be seeing them for a long time yet. See the next page for specific instructions to create tabs for several programs.

		Menu bars By far, the most common type of menu framework for commercial sites, is the menu bar. Often, this represents little more than a colored bar that stretches across the top of the page, or down the side, with menu items listed in graphic text. Most graphic artists find creating a menu bar is very easy. Quite simply, you prepare your menu graphics in a consistent size, with the same background color. However, it gets a little more complicated if you wish to create a liquid design, or have your bar stretch across the page for any resolution. It gets even more complicated if you want the liquid design, but want your bar to have a pattern, or have shading. Diamonds.com, the site I used to describe the menu creation process in the last article, (see Menus with Beauty and Brains) uses a colored and shaded bar (shown at left). I will go into how to create a liquid menu bar using a background image later in this article.

Top menu from the PRC site. Simple categories make it easy for visitors to move from section to section. Side menus, shown below, direct the user groups from inside the main section. On the entry page for the site, where a specific side menu was not required, we included a site map (below).		Side menus I really like side menus. You do not need two levels of menus for small sites, but menus at the left (yes they would serve the same purpose on the right, but people look to the left) serve another purpose. In the old days, we were trying to grab every horizontal pixel we could for content. Let's face it, 640 px total width does not leave a lot for menu items and content. However, we face the opposite problem today. With 800 px wide display the most common, and 1024 px and wider becoming more common every day, we need ways to reduce the space for content. You may be thinking that I have finally gone over the edge with that last statement, or that you misunderstood what I was saying. But I assure you that I meant it. Long lines of text are very difficult to read. If your content is displaying with lines containing 20 words or more, you are making your visitor work far too hard. Eyes cannot follow along for that distance without straying. Even well-behaved eyes that can make it to the end of the line, will have a break in the reading flow as they try to find the start of the next line. Plus, there is an ugly factor for short paragraphs which perfect Web writing entails. Picture three short, snappy paragraphs, where two of them display as a single line. I've seen it, and I never surf using more than 1024 wide display. Enter side menus. Even if you do not have enough pages to warrant a side menu, you can use the left area for teaser menus, or to create a bulleted list of features. I used this solution on my site, which is a total of five pages (wpeck.com). Unless you have a lot of content, consider adding a right menu area, as well. Last time I talked about designing for 800 px width, but placing "disposable" content at the right edge of the screen. Both left and right menus can help keep your content line length within easy-to-read bound. I have included another of my client sites at the left. The PRC site has a simple structure, categorized by the top menu. Although there are not many "sections," we faced the problem of three different client groups for the product. We handled that division with side menus within the larger sections. Since the front page did not need a side menu, we were also able to address our concern that visitors would not know where to go on arrival. The side menu area was used to present a site map. Of course, this only works for a small site, but it was a very good solution for this site. Side menus can take on many forms. The Burpee.com site makes very good use of side menus. We talked last time about the Diamonds.com side menus. They are great candidates for HTML text or dynamically created content. You can use buttons, or bars, or grid patterns. Some sites use side menu areas to add a graphic, or background image to liven up the page without taking away the space for content. Keep your eye out for side menu ideas as you surf the Web. You will find many great ideas. For the graphics portion of this article, we are going to concentrate on horizontal menus, though, since they wander into the topic of liquidity, which adds a wonderful challenge to menu items. We will focus on side menus in the next article when we look at popout style menus. These menus are often placed in a side menu position. Let's move on to make some tabs, and get our graphics spanning a page from border to border.

		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