Graphic Greats: Production Graphics with Wendy Peck at webreference.com | 27

Graphic Greats: Navigation Graphics

Simple Graphic Navigation

Low contrast color can be used in larger amounts. The menu icons would be too large in almost any other color.

Menu graphics are picked up on interior pages for instant visual identification of where you are in the site.

Diamond Micro Solutions
I always admire clean simplicity, and the following three sites are prime examples of great design through simplicity. Let's start with Diamond Micro Solutions.

The color choice provides a very gentle contrast to the white background, but notice how well it has been used. Because the color difference between graphics and background is small, you can make your graphic elements much larger. The designer has worked with this principal very effectively.

Each of the menu items is backed up with a graphic representation, and that image is repeated on the page where that menu item is located. See the second sample and note how the image forming a watermark on the page is the same as the menu item icon. To keep it clean, there is an extra layer of menu selection. Some designers designers would not permit this, but here it keeps the visitor focused on where they are in the site. I found that the site was so clean and clear to follow that the extra click to get to the information was not a burden.

There is also a very pleasing combination of square elements (the row of menu items) and the circles taken from the menu icons. Colored headlines, action photos and indented text also prevent the site from looking static ... visually pleasing all the way.

I also really liked the way that lines and graphic placement led me through the pages – a lot of thought went into organizing this site. A style worth emulating.

Very clean entry page features photos, which are also menu items, and two more navigation sections.

Icons on the top frame keep all contact information available throughout the site.

Dean and Deluca
Outside of a few (terrific) photos, the entry page for Dean and Deluca is all navigation. First, the icons at the top of the page present all major contact areas. Each of the photos represents a separate area, and the lower menu offers general product and customer service locations. On the interior pages, a tiny site map graphic has been added to the bottom frame (shown at the right here). This site provides serious tools to help the visitor find the way.

The interior market pages all have individual listings for product categories – a wise place for them to be. Since products are organized on the interior pages, the entry page can be visually clean and dynamic, presenting a high quality company image.

Nicely done site with terrific navigation.

Design Bank
This is another site that keeps most of the links on the appropriate interior pages. The entry page has four simple icons as a menu, icons that reflect the designs in the background. The lower image at the left shows a sub-menu from an interior page, which is displayed on the right, opposite the menu.

The gentle colors of this site only work because there is a lot of background room. The background is busy, and with low contrast text over it, it is important that the number of words is limited. I did not find the message hard to read, and I am usually a raving critic of low contrast text.

I liked the simplicity of the design and the repetition of the oval graphic through the site. When you are looking for impact in a world that often seems to shout its message, subtle and gentle can stop you dead. That was my reaction when I hit this site in my browsing.

Carry on to see some 3D navigation examples.

Next page

Graphic Greats Index

Navigation Graphics Start/Graphic Direction
Large Menus
Simple Graphic Navigation
3D Graphic Navigation
Artistic Navigation