|
 |
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
  
|
 |
|
|
|
