spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

HOME | EXPERTS | GRAPHICS| Greats 7

Graphic Greats: Navigation Graphics 2

Menus with Icons

   

Topics are identified with the same icon throughout the site.

Above: Partial view of the main menu on the front page. Below: Each menu item has a description on the right side of the entry page.

CoffeeKid.com
Those who know me well would say that this site could make my column even without great graphics, simply because of the subject. I protest that charge. Although I am a coffee connoisseur (sounds much better than fanatic), this site stands very well on its graphic merits.

The icon use here is one of the best samples I have seen. An icon should help you to identify a subject, and the samples here are top notch. Not only are the icons used in the main menu, and then again on the respective page, but they are also used in a mini site directory, right on the front page. This site directory is more than just a map – you can see at a glance what is included on each page. What a great example of an information packed, but very user-friendly site.

The illustrations used for the icon are beautiful. The color use it courageous and helps to establish the offbeat tone of the site. Well worth a visit.

Oops, I just noticed that the menu item I chose to feature is "Obsessions." That is, of course, simply because it is the first menu item ... certainly not because my friends have a valid claim.

 

Images © Coffeekid.com.

 


 

Icons are supported by text which also carries the brick color to the center section of the page.

Interior menu uses a lightened graphic to represent your location in the site.

Patrick Mountain Advertising
This is another simple site with excellent design and navigation. The silhouette icons mark your page with a lightened version of the graphic.

One of the few complaints I have about icons is that they can be cryptic. The benefit of graphic identification disappears if you cannot figure out what a symbol means. The designer has worked an elegant solution to this problem by incorporating text descriptions for the icons into the design. The brick colored lettering adds to the style of the page while it supports the graphic icons.

Although the gray and black is an important color in the design, it is used only for navigation, a great trick which makes the menu items jump off the page without being a segregated section.

This site has a trendy, artsy look. It is also a testament to the fact that you do not have to give up clear navigation for a great look. Well done.

Images © Patrick Mountain Advertising.

 


 

 

The entry page features very clear navigation that demands attention and hides nothing.

The interior pages feature classy photographs, yet the icons from the front page fit right in as internal navigation.

 

DryMartini.com
I find this site graphically fascinating. The first sample shown here is the entry page. Navigation does not get any clearer than this. Each subject is represented by an image and text, in clear bold fashion. There is nothing to distract you here. Make a choice ... that is your job as the visitor, and the designer has made that very clear.

The fascinating part to me is that they have changed the mood completely, moving from primary dots, to beautiful photographs on the interior pages. Yet, look in the upper right corner – there is the consistency and it works. The icons from the entry page are repeated as internal navigation. I admire that the designer came up with the idea. My brain would have said that it could not work.

The fun color dots fit perfectly into the tone of the site, as does the beautiful photography. I came away from this site with a "classy fun" image. What could be more appropriate for a site devoted to martinis?

I have seen many sites with split personalities, and believe me, I would not consider bringing them here to show off. But this one is special because it has a split personality that works.

 

Images © DryMartini.com.

 

Next page

Graphic Greats Index

Navigation Graphics 2 Start/Graphic Curves
Menus with Icons
Illustrated Navigation
Creative Text Navigation

Front page234

Developer News
Sir Tim Talks Up Linked Open Data Movement
From L.A. to Vegas With 100GbE
Salesforce Rolls Out Big Summer '08 Update



JupiterOnlineMedia

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Solutions
Whitepapers and eBooks
IBM eBook: Planning a Service Oriented Architecture
IBM eBook: Choosing the Right Architecture--What It Means for You and Your Business
Microsoft Article: Will Hyper-V Make VMware This Decade's Netscape?
Avaya Article: Using Intelligent Presence to Create Smarter Business Applications
Intel Go Parallel Article: Getting Started with TBB on Windows
Microsoft Article: 7.0, Microsoft's Lucky Version?
Avaya Article: How to Feed Data into the Avaya Event Processor
IBM Article: Developing a Software Policy for Your Organization
Microsoft Article: Managing Virtual Machines with Microsoft System Center
Intel Go Parallel Article: Intel Threading Tools and OpenMP
HP eBook: Storage Networking , Part 1
Microsoft Article: Solving Data Center Complexity with Microsoft System Center Configuration Manager 2007
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
Webcasts
HP Video: StorageWorks EVA4400 and Oracle
HP Webcast: Storage Is Changing Fast - Be Ready or Be Left Behind
Microsoft Silverlight Video: Creating Fading Controls with Expression Design and Expression Blend 2
MORE WEBCASTS, PODCASTS, AND VIDEOS
Downloads and eKits
Red Gate Download: SQL Toolbelt and free High-Performance SQL Code eBook
Iron Speed Designer Application Generator
MORE DOWNLOADS, EKITS, AND FREE TRIALS
Tutorials and Demos
Silverlight 2 App and Walkthrough: Leverage Silverlight 2 with SQL Server and XML
IBM Article: Enterprise Search--Do You Know What's Out There?
HP Demo: StorageWorks EVA4400
Microsoft Article: The Progress and Promise of Deep Zoom
Microsoft How-to Article: Get Going with Silverlight and Windows Live
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES
webref The latest from WebReference.com Browse >
Book Review: Head First JavaScript · Web Hosting Control Panels · Use Your Blog for Fast Search Engine Rankings
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
NetApp's Virtual Storage Strategy Crystallizes · F/MC Watch: A Cisco-Centric Approach · Olympic Time Trials Use Wi-Fi Mesh


URL: http://www.webreference.com/graphics/
Created: May 3, 2000
Revised: May 3, 2000