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

		Menus with Beauty and Brains 3: Creating Unified Menus
		Now that we have spent so much time learning about small type and how to work with it, we must stop to look at one of the great problems with small type. Although you can pack a lot of information into a small space, small type menus can easily be lost in a busy page. I'm sure you have been to pages where you must hunt for the menu. We must not allow this to happen for our visitors, and if we are going to work with small text, we must make sure that we place our menus in logical placed on the page, and give it enough visual weight that it does not disappear.

Most visitors will seek the menu at the left edge of the page or the top. If you deviate from this pattern, make sure that you test your design well.		It is my opinion, and I will certainly get mail on this one, that main menus belong on the left or top of the page. Artistic pages that are not meant for business may not fall into this, but in my opinion, commercial pages should have menus where people expect to see them. As designers, we love the idea of "different," but I do not think that main navigational menus, featuring the primary categories, or contact information should be in unusual places. Think of a car .. there are a million different variations in the world, but the steering wheel, gas, brake and clutch pedals plus the gearshift are always in the same place (opposite sides of the car in some places, but still arranged the same). From the top model in the world, to the oldest economy car, there is almost no variation. Why? Because if the designers put any of the components anywhere else, the driver would not be able to find them, or would have to learn to drive over again. It is a standard. I believe that the top and left menu locations have become as much a standard as car components.

		You may, of course, disagree with me, and I have been in the graphic world for long enough to know that there is a way to successfully break every rule. If you do break it however, make sure that you test your navigation system very carefully with people who know nothing about the site. No matter how clever your idea, it is important that visitors can find their way around without thinking.

There is an endless variety of anchoring techniques you can use with small text menus. It is important to ensure that the text appears to be part of the design.		But just placing the menus in the correct area is not enough to ensure that your visitors will instantly recognize where to find the menu system. In all but the most minimal designs, you will also have to provide some visual clues for your menu locations. Top Menus Lines and colored boxes are the most common, simple and effective way to highlight menu areas. Simply adding a border to a small menu can make it jump right off the page when the visitor is looking for information, yet fade into the background when not needed. The small menu at the left is simply text menu items separated by a colon, with a one pixel border added. Adding colored boxes to the same text made the menu pop off the page. The green bar along the top of the menu can be changed to reflect the active page, i.e., in this case, the "house 3" menu item would be the active page. Even a simple stripe or line can anchor the menu items and make them stand out, as shown in the final samples at the left.

		It is important to anchor your menu items with a visual element. At times, color changes in the background can prepare a natural area that will anchor your menu. Stand back from your monitor, or squint your eyes to blur the image to check whether the menu is an integral part of the page, or simply floating, looking lost. I see many menus that are missing the little bits that finish off the look and create a strong design. The two samples at the left provide a good example of how a small change can improve a design. The top sample is acceptable, and the menu is quite easy to spot. However, in the second sample, the light, small text has a place to rest near the line that connects the left part of the page to the right. Note how much more a part of the design the text appears to be. In the first example, the text is just "there." When the text is provided with a more stable base, the text becomes part of the design, yet is still easy to see. If you are having trouble seeing the difference, try covering one at a time with your hand or a sheet of paper. Try standing back from your monitor for another test. The final sample shows how a simple rearrangement of the text gives a completely different look. Again, the menu is easy to see, but there is a much more symmetrical look to the design, since the text and the cityscape are similar in shape. Both the second and third examples are well anchored.

		Side Menus Many of the same principles apply to both top and side menus, although there are a few new considerations. Side menus are often larger text, and so I will not concentrate too much on them for this article, since we are focused on small text. However, like the anchor necessary for the top menus, we must provide a connection for side menu items as well. If you simply feature words in a row, that is usually how it will appear as words in a row. In order to create a menu which is also a design element, it is important to provide a linking element. The sample at the left is a list of text items, but it becomes a unified object through the vertical bar, and the horizontal line created by both the text and the shadows. Even with this subtle effect, there is no doubt that the menu items form a complete unit.

Adding simple design lines to a text menu can create a unified look.		Many of the ideas we used above can be applied to side menu items as well. Be careful with your spacing, though. Menu items that are too tight can be hard to read. A more common error, however, is for side menu items to be spaced too far apart. You want them to be easy to read, but also to hold together as a unit. The sample at the left is not wrong, but there is no element that actually creates a menu, or design element. In the second example, a simple gold line graphic is added to the text listing. The text size, spacing and alignment is the same, but the lines tie the many items together and create a unit. You can take design elements like this and scatter them through your pages, using the repeating elements to define where links are found, or to highlight important information like the example shown at the right. Your visitors will soon learn to watch for the yellow lines.

		Next page Menus with Beauty and Brains 3: Tutorial Index Small Fonts Continued Fireworks and CorelDraw Antialiasing Special Antialiasing for Flash Creating Unified Menus Finding the Fonts