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.
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.
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.
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.
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 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 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.
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.
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.
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.
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.
The main navigation is easy to find, and the green underline creates uniformity between the navigation and the rest of the page.
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.
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 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.
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.
The navigation makes use of bright colors, easy accessibility and unity with the blue background of the main content of the page.
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.