|
 |
Graphic Greats: Navigation Graphics
Artistic Navigation
|
|
|
|
|
|
The menu stands out and blends in – skillful work.
Lines connecting the menu items together, as well as to the photos,
help to present the menu entries as a unit.
|
|
Holmes Consulting Group
This entry page has all the required elements to make a great introduction
to a site, and then it goes further. Not only is the navigation clear
and easy to use, it is also an integral part of a beautiful design.
Note how the menu is instantly visible – there is no question
where to find the navigation. Yet, it is also subdued like the rest
of the graphic elements. Carefully applied drop shadows help to lift
the gently contrasting menu items from the blueprint background, and
the connection lines help to define it as an "area," rather
than six independent rectangles.
The circular photographs offset the color in the main photo and also
help to anchor the menu. The photos serve a practical purpose as well,
providing visual identification of potential projects for the visitor.
This is a beautiful page, but the designer has not sacrificed navigation
ease for beauty ... wonderfully executed.
|
|
|
|
Rather than break the curving line of this photo, the
designer places the text menu along the image edge.
This photo only has about 20% showing in color, but
it is enough to give the menu background a form.
|
|
47°
I have not often seen text menus that follow the outline of the photo
as on this entry page. A linear presentation of the menu would have
hurt the feeling of motion on this page, very important as that is exactly
what the site promotes ... motion.
When you click through to the inside pages, you will find a more traditional
menu presentation. The entry page is creating a mood, but by the time
a visitor is on the interior page, it is time for solid information
to be put forth.
Although the interior menu is linear and more conventional, the designer
has maintained a modern look. The menu background covers most detail
in the underlying photo, which peeks out in color at the edge. See the
bottom image at the left. This is a very effective method for breaking
the rectangular look without making the menu harder to use.
The "see through" mouseovers (not shown) and present location
markers (shown here) are also a clever way to provide full function,
i.e., letting the visitor know exactly what is happening, without ruining
the artistic line.
There are many other little touches throughout this site that make
it well worth the trip for designers looking to increase their tips
"toolbox."
|
|
|
|
The menu stands out, even though it is at the bottom
of the screen and quite small.
Dotted lines and light colors provide direction without
demanding more attention than they are due.
|
|
 730
Creative
The designer has found a great method to have the art without sacrificing
function. Although the menu is tucked away at the bottom of the screen,
it is highly visible. The dark colors and linear form stand out very
clearly.
The same pattern has been used for interior pages as shown here. The
image and menu takes up less than half a medium resolution screen, with
the text presented on the right. The menu stays consistent, as does
the look, yet there is room for text to be placed in an orderly way,
without harming the overall design.
Note how the dotted graphic line separating the images from the menu
is gray, not black. With the dots and the softer color, it separates,
but does not draw the eye away from more important features.
This site is a great example of how you can present a very artistic
look, but also fit in very clear menu presentation and well ordered
text. You can have it all as this site proves.
|
|
|
|
|
|
|
|
That's it, but before I go ...
Learn to watch for special graphics techniques as you surf the Web.
We often see great design as a whole without taking the time to put
each of the pieces under a microscope. How did they do that? Why does
that spot attract attention? The answer is often a very simple, but
stunningly creative graphic treatment. Harvest ideas constantly to keep
your work fresh and reduce the time it takes you to create great graphics.
Check the main graphics page regularly for new additions. Visit our
new Links section, and don't forget
to send URLs when you find "Graphic Greats." Send
links.
|
| |
|
|
| |
|
Back to the start
Graphic Greats Index
Navigation Graphics Start/Graphic Direction
Large Menus
Simple Graphic Navigation
3D Graphic Navigation
Artistic Navigation
 
|
 |
|
|
|
