In last week’s post, we looked at 3 traditional navigation placements in layout design, and briefly discussed the pros and cons of each. But there are some tricks to changing up and decorating the navigation itself without making it too hard to use, as you’ll see!

Idea #1: Mix in a few icons as well as text links.

Font names, from left: Webdings, Wingdings, Wingdings 2, Wingdings 3, Stateface, Socialico, Nymphette, Entypo, Bergamot Ornaments, Modern Pictograms.
Navigation doesn’t have to be just plain, boring text links–icons are a modern webdesigner’s friend! For instance, you could use the Facebook icon shown above to link to your site’s Facebook page, or you could use the speech bubble icon to show where users can leave comments, etc.

Most designers rely on icon fonts for this; Modern Pictograms, Socialico, and Entypo (all linked above) are some of my favorites, and there’s a more comprehensive list here. To use your icon fonts, you can either link and style them directly in your CSS using the CSS property @font-face (more about that here), or you can use a graphics-editing program to type out each of your needed icons and save them as individual images. Just make sure your icons all have transparent backgrounds so that they blend in more seamlessly with your layout.

(Note: I included some ornamental icons as part of the above graphic as well, for the purpose of dressing up your navigation if you don’t like the idea of just having clickable icons and no text. Icon fonts are multipurpose!)

Idea #2: Keep similar links together.

A long list of unsorted links down one side of the layout can be a lot of text for your visitors to read when they are browsing your site. How about grouping like pages together within your navigation instead?

An example would be my City of Heroes site, Skies over Atlas–I placed all my site content links going down the left side, and used a horizontal navigation bar underneath the header image for my guestbook links, my contact email, a “back to homepage” link, and the links to the Twitter and Tumblr account associated with the site. Even though the navigation is in the same general area on the page, one part of it is devoted to site content, and the other part is devoted to user interaction.

You could also accomplish this with the old standard three-column layout design. Have your main content navigation on whichever side you like, and on the other side, you could have user navigation, admin area, links to your other websites–just anything that isn’t really related to your main content.

Sorting your navigation this way can help your user more easily pinpoint what area of the site they wish to go to. Of course, be sure to label which area is which so the user does not have to read everything to find out where things are!

Idea #3: Combine your header and navigation for a super-streamlined design.

For the tidiest, most mobile-friendly design, pull your navigation into your header space–in fact, just a site logo or site name text plus a horizontal navigation bar can BE your header! This way, your navigation is up where your users see it when the page first loads, and it leaves more room for your content so that perhaps your pages won’t even scroll so much. Your navigation bar can then be colorful or even patterned to play off the colors in the rest of your design, drawing attention to it without making it huge or heavy with text links.

Additionally, using social media icons alongside text links in a horizontal navigation bar at the top of the page can highlight your navigation further, bringing the user’s attention to it as the rightful central hub of your site. As a user, I love seeing an organized navbar like this; I know I won’t have to worry about searching the rest of the page for info I need!

Summary

I hope the ideas in this two-part series have started your brain percolating about navigation. It may sound like the most boring part of your website, but with these tricks, it certainly doesn’t have to be!