30 Examples of Attractive Navigation

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.

See the full article from www.webdesignerwall.com here:

May 25

Tagged in: Comments:Add

30 Examples of Attractive Nav

advertisement

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

Unstoppable Robot Ninja

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

Screenshot

Red Nose Day

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

Screenshot

Polar Gold

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

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

Sushi & Robots

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

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

Ulster Grocer

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

Screenshot

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.

Screenshot

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.

Screenshot

Delicious Stumbleupon Digg

30 Untypical WordPress Sites Microsoft Event & Free Giveaways

Comments

Pages: 8 7 6 5 4 3 2 1 » Show All

There are 79 comments (+Add)

  • 79 Jessie Matanky http://jessiematanky.com
    July 28th, 2009 at 11:09 am

    I really liked these- these sites seem to be up on all the blogs & web design sites for all sorts of different stuff. They should be proud.

  • 78 chris
    July 20th, 2009 at 8:22 pm

    Be sure and check out the page source for the Slightly More site, includes some ascii art and text! Very shocking and funny.

  • 77 Nashville Web Design Guy http://www.nashvilleinteractive.com
    July 15th, 2009 at 2:31 pm

    Very diverse range of styles and functionality on the list. Very nice compilation. I tend to lean toward linear navigation if it can fit at all into a project. I like to lead people through the experience. It’s not always feasible of course but a nice change for users and it allows you to gauge interest pretty easily via analytics.

  • 76 London web design http://www.totallydesignlondon.co.uk
    July 11th, 2009 at 12:57 pm

    Yeah this is well nice!

  • 75 egypt web design http://www.egyptwebdesign.com
    July 7th, 2009 at 6:43 am

    great article thanks for share with us, really great list.

  • 74 yapidekor http://yapidekor.blogspot.com/
    July 6th, 2009 at 1:51 pm

    Thank you my friend …

  • 73 matrax http://multimanyak.com/matrax
    July 3rd, 2009 at 2:17 pm

    Your site and your content to a really great hand healthy;)

  • 72 Bernard Teske http://www.bernardteske.de
    July 1st, 2009 at 7:46 am

    In this webside, http://www.druckundrepro.de you can use the navigation in the left side or use the cursor like a “hand-tool”. Think this is also an interesting way :-)

  • 71 Rob http://robstathem.com
    June 25th, 2009 at 10:24 pm

    @ Joe…I don’t think your rude behavior is appreciated by anyone in this forum. I would automatically delete your outcast behavior, and so should the designer of this website.

    There’s no need for your attitude. Take it somewhere else!!!

  • 70 Rob http://robstathem.com
    June 25th, 2009 at 10:21 pm

    Fantastic!! Thanks for posting these examples of awesome navigation! I’ll admit, it can be real exciting adding different design touches to the navigation!

    I tend to design the navigation based on the style of my website. For elegant designs, I tend to use subdued text for links or maybe a subtle roll-over. The hotel website listed above is definitely an elegant type of roll-over!

    I think it’s probably important to note that when doing roll-overs, image based roll-overs should be done with CSS instead of JavaScript. The JavaScript is a bit clunky and CSS just makes it a little cleaner. Just my personal opinion!

    :) Rob

Pages: 8 7 6 5 4 3 2 1 » Show All

Post Your Comments

Name (required)

Mail (required)

Website

Comment Guidelines

Live Comment Preview

Back to top

// W3Counter Web Stats <p><a href=”http://www.w3counter.com&#8221; mce_href=”http://www.w3counter.com”><img src=”http://www.w3counter.com/tracker.php?id=5996&#8243; style=”border: 0; display:none” alt=”W3Counter Web Stats” /></a></p>

// //