|
The menu bar provides general navigation, and text
areas allow one-click access to popular areas.
Such a small change to make this menu bar 3D, but it
brings the page to life and makes a very important feature visually
prominent.
|
|
Gateway
This site could have been featured for organizing a lot of information
well, but I loved how the slight 3D shaping for the green navigation
bar brought the page to life. If you took this design and replaced the
3D bar with a flat bar of exactly the same color, you would be shocked
to see how lifeless the page would become.
Although the entry page is visually very clean, there is a lot here.
In addition to the menu bar, there are also text lists and one-click
access to (I assume) the most popular items. The designer has obviously
thought about what the visitor will be seeking as they arrive, and has
done a terrific job of placing most of the site just one click away.
This is another site that is well balanced between linear and nonlinear
elements. The menu information is in straight lines, and the boxes below
mirror that symmetry. However, the rounded, and large text, indents
and relaxed groupings for photos prevents the page from being boring
or predictable.
I really like this unquestionably professional, yet visually exciting
and easy to navigate design.
|
|
Three separate menu areas provide great navigation
while keeping a very clean look.
Black hairlines help to divide the menu items, but
the top and bottom of the menu are defined
only by a hint of 3D.
Gentle 3D texture separates the white menu listings,
yet has little visual interference.
|
|
Kyocera
This is another site that presents a multitude of information on one
page. But the subtle 3D work is what really caught my eye. Of course,
red and shades of gray is usually dynamic, but it can easily get too
busy.
The designer here has used a light hand on the menu dividing sections.
Note in the close-up of the top menu (shown in the middle at the left)
how there is just a hint of a button shape. The depth is enough to separate
the menu items, but provides little contrast to pull the eye away from
the text.
The same idea is used in the side menu. The dividing lines are barely
there as far as interfering with the white text, but if they were missing,
the white lines would tend to run together without order. Note also
that the round photo carries into the menu in the same subtle way.
Very nicely done and a method to plant in your toolbox for a future
project. When menu items refuse to stand alone, but placing lines ruins
the look of the page, use some 3D tricks to have the best of both worlds.
|
|
A top menu and a button version of the main photo (close-up
below) provide 12 menu items without sacrificing the mood of the page.
|
|
Cisco
Although this site features a long past event, and is archived, not
live, I felt that the menu was well worth bringing to this Greats tour.
I liked the contained but artsy look of this site, partially provided
by the menu. A textured copy of the photo on the main page has been
"buttoned," but not in the usual way. See the second sample
at the left for a close-up view. Though button sized sections have been
raised, the background simply carries on from the image. What a wonderful
way to integrate a look, or have a menu stand out while still working
into the ultimate design.
In addition to the image-based menu, the site also contains a top menu
for additional information. This page offers 12 menu options to the
visitor, yet the menus blend perfectly into the newsletter mood of the
page.
There are so many ways to integrate graphic menus into your site. For
our final set of examples, let's have a little fun and allow the art
to take a higher priority. Carry on to the next page for some beautiful
examples of graphic menus.
|
