Graphic Greats: Production Graphics with Wendy Peck at | 29 | WebReference

Graphic Greats: Production Graphics with Wendy Peck at | 29


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.

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

Front page2345

Created: Apr. 20, 2000
Revised: Apr. 20, 2000