Guest Post by Joel Reyes

Web designers always have to strike a balance between usability and visual appeal when designing a website. Without this balance, a website might be nice to look at or difficult to navigate. Or, it might be easy to navigate, but not easy on the eyes. With this in mind, balancing attractive navigation with usability does not need to be overly difficult. To help you generate new ideas and inspiration for user navigation, here are 30 great examples of attractive and usable navigation.

Typographica

This site features the simplicity of an attrractive menu that empowers users with undeniably easy to follow navigation. If you hover over the headline under the logo you will see that the word "Type" remains highlighted, and as you begin to hover over the rest of the words you'll be able to clearly select the corresponding area you'd like to visit.

Atebits

Links are in the form of icons that feature a neat effect that allows the icons to light up as you hover over them. It's simple, subtle, attractive, yet effective.

Contrast.ie

The navigation on Contrast.ie displays a unique approach to creative styled menus. All of the buttons are placed in a comment shaped figure and pop out as you hover over them.

Search Inside Video

The navigation on this site clearly directs you in the form of an arrow as you hover over them with your mouse. Effective navigation leaves behind complex design. Seems as though this site made use of this suggestion.

Leihu

This site takes creative navigation to the sky. If you look to the left and mouseover the guy you will see a smile appear, if you mouseover the icons and images you'll instantly see a description next to the mouse's pointer as well.

Forty

Forty uses a creative, image-based user navigation. The arrows “guide” the users attention to the buttons and invites the user to click on them.

Healogix

Healogix asks the four most important questions of itself with large text that draws the users attention. When, what, why and who? Can all be answered one click away from the homepage.

Ideas on Ideas

There is only one main link to the home page, but the idea is both creative and usable. The link is prominent and it “speaks” to the user. Users, in general, enjoy web pages that they can interact with.

Sarah Longnecker

The navigation of this website is simple and easy to use. The banners behind the selected page make the navigation easily identifiable from the rest of the page.

Made By Elephant

Made by Elephant features large and easy to use navigation. The blue text also adds a nice contrast to the heavier red and black.

Work at Play

As you begin to click through the menu of this site, you'll be able to notice that the position of the background and color of the entire site quickly change.

Clear Left

The menu on this site resembles that of a post it note as you mouseover the links. Then entire layout of the site is based on this concept.

Pattern Tap

As soon as you enter the site you're greeted by a green arrow that feeds you information about every section as you scroll through the site. This makes it easer for users to interact with the site.

Unstoppable Robot Ninja

The navigation is as bold as the name of this website. Furthermore, it also enhances the design tremendously.

Red Nose Day

The main navigation links fit in well with the playful theme of the website, while maintaining usability and prominence.

Polar Gold

This text-based navigation features a colorful and playful look while maintaining usability without the use of Javascript, but Flash instead.

Webpage FX Blog

A unique and interesting take on navigation. The links to the home page and blog are featured in a sentence across the header of the page. It does not violate usability principles, it is easy to read and highly effective.

Opera Ma-gé

The main navigation is easy to find, and the green underline creates uniformity between the navigation and the rest of the page.

Owltastic

Owltastic is a perfect example of good user experience. Every element of the main navigation animates when the user hovers the mouse over it. Like other examples on this list, the navigation is also prominent and easy to locate.

Guillaume Pacheco

Like Owltastic, this website interacts with the user as they mouse over different elements of the page. The site is well laid out and easy to navigate.

Full Cream Milk

Full Cream Milk uses a distinct text-based navigation, as you roll over the links, a portion of the top of the page is highlighted. This is a great example of navigation that is pleasing to both users and search engines.

Arca Lui Noe Hotel

This site features user navigation that is both beautiful and easy to use. It is very stylish and adds to the overall design of the page.

Sushi & Robots

Sushi and Robots uses elegant Typography to create a beautiful and attractive navigation that stands out.

Sharify

Sharify features a monochromatic user navigation that is pleasing to the eye, and usable because of the contrast between the white text and the sky blue background.

Stephen Caver

Here, the navigation is essentially the first content you see on the home page. It is “clean” and easy to use. Moreover, the use of whitespace in the navigation is excellent.

Thought and Theory

This site takes a minimalist approach to navigation, and it simply works. It does not take anything away from the page or distract the user.

Slightly More

Again, the high contrast black and white adds to the usability of the site. The javascript rollovers are light blue tabs that add interactivity and aesthetic value.

Ulster Grocer

The navigation makes use of bright colors, easy accessibility and unity with the blue background of the main content of the page.

Adaptd

The Adaptd site features creative, easy to follow, and beautiful navigation. The aspect of this navigation that stands out the most is located in the section where the portfolio resides. When you place the mouseover these buttons the words become transparent blend in with the sites background.

Sac Jazz Festival 2009

This site has navigation that the user does not even have to search for. In addition, the vibrant color of the navigation adds even more color to the page. The elements of this design blend together seamlessly.