May 25
30 Examples of Attractive Nav
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.
30 Untypical WordPress Sites Microsoft Event & Free Giveaways
Comments
There are 105 comments (+Add)
Loading ...
1 Ryan http://www.ryancanderson.com
May 25th, 2009 at 11:46 pm
Great post! Really good collection of websites. I love seeing a good list of well designed websites.
2 CreamScoop http://creamscoop.com
May 26th, 2009 at 12:06 am
Amazing list, some really good sites.
3 div http://divyasharad.blogspot.com
May 26th, 2009 at 12:12 am
Words will fall short………..
4 Daus http://daus.trala.la
May 26th, 2009 at 12:21 am
Nice roundup. Love how contrast.ie configure their navigation.
5 abhay http://futerox.com
May 26th, 2009 at 1:12 am
excellent collocation dude.. I’m always looking for this kind of inspirational things to design unique
6 Haris http://designtowp.com
May 26th, 2009 at 1:18 am
Beautiful.
What else can I comment? All of them are exceptionally beautiful websites. Apprasing each of them one by one will take a lot of time and just add bloat to my comment.
7 Vim http://www.crearedesign.co.uk
May 26th, 2009 at 2:55 am
These are some really nice websites, each unique in its own way, one that stands out is to me is Work at Play.
8 manuel http://manugrafie.de
May 26th, 2009 at 3:51 am
interesting list again. thx
9 Phillip Smart http://phillipdsmart.byethost18.com/
May 26th, 2009 at 4:18 am
I’ve just started making my first site and wow, all this just seems miles away.
Great stuff, love the inspiration, keep it coming.
10 DKumar M. http://www.instantshift.com
May 26th, 2009 at 5:11 am
Nice collection nick…. thanks for sharing !!
DKumar M.
@instantShift
11 Serkan http://www.serkangurkan.com
May 26th, 2009 at 6:53 am
its all Great.
My fav: http://www.webpagefx.com/blog/
12 Benjamin Reid http://www.nouveller.com/
May 26th, 2009 at 7:04 am
If it looks good and it’s still user friendly then they get a tick in my book.
13 webadelic http://webadelic.co.uk
May 26th, 2009 at 7:09 am
great list, will add this to my favs.
14 Wedge http://kilobox.net
May 26th, 2009 at 7:10 am
I feel it’s easier to create usable, attractive navigation when you’re asking people to view just four sections, or just four pages. It’s much harder when you’re site has a lot of *content* and requires drop-down menus.
15 Altitude Marketing http://altitudemarketing.com
May 26th, 2009 at 7:16 am
Thanks for featuring one of our latest projects, Healogix. Much appreciated!
Some really great stuff in this list.
16 Iria http://www.iria2k.net
May 26th, 2009 at 7:45 am
I always thought that http://www.operamage.com was an extremely beautiful website, it stands out in this awesome list of awesomeness
17 David Costales http://blog.davidcostales.com
May 26th, 2009 at 8:03 am
Nice list, thanks!
18 KChristoph http://SieSindDeutschland.de
May 26th, 2009 at 8:37 am
Greatings from Hannover, Germany.
Thanks for inspiration.
19 David http://www.jarrettandlam.com
May 26th, 2009 at 8:42 am
Thats a really nice list thanks. It seams to be so easy for web designers to fall into the trap of using the same or similar navigation on every site they make. I agree with Wedge about larger sites with drop downs but it’s easy to forget how creative you can get with navigation on smaller sites without compromising the usability.
20 Brian Cray http://briancray.com
May 26th, 2009 at 10:20 am
Very cool roundup.
21 mabonic
May 26th, 2009 at 11:26 am
thank (^_______^)
22 Cassie http://mamasontheweb.com
May 26th, 2009 at 2:10 pm
This post makes me wanna scrap all my websites and start from scratch. Very cool and inspiration navs and sites in general.
23 Radoslav Holan http://www.iomtt.cz
May 26th, 2009 at 5:43 pm
It shows again there are really no borders. Something is more useful, something is more hot. But anyway, it’s again a nice post in here, useful and inspirative. Thanx
24 Julian Young http://www.julian-young.com
May 27th, 2009 at 4:55 am
Lovely compilation, nice mix alhough some are clearly not very attractive!
Thanks!
25 Creamy CSS http://creamycss.com/
May 27th, 2009 at 5:07 am
Nice list,.. Made By Elephant navigation menu is great!
26 Jurgen http://www.zenwebdesign.com.au
May 27th, 2009 at 6:45 am
Some are really cool and others not so… beauty is in the eye of the beholder! Thanks for sharing.
27 Michael Armsatti
May 27th, 2009 at 7:52 am
About time you posted something good again, this site was going to crap and boring
28 Dario Gutierrez http://labs.dariux.com
May 27th, 2009 at 10:51 am
Some sites are great but others not.
29 Jesse Korzan http://www.workatplay.com
May 27th, 2009 at 11:54 am
Thanks for including our site!
30 Joel R.
May 27th, 2009 at 2:53 pm
Thank you for your comments!
31 abhishek
May 27th, 2009 at 10:15 pm
your posts inspire me to be a web designer! thanks
32 Yuda http://swyuda.wordpress.com
May 28th, 2009 at 1:42 am
nice compilation, thanks for the post
33 Adam Akers http://www.brewerylaneonline.com
May 28th, 2009 at 3:25 am
Another great list of examples. Another list to be bookmarked into my favourites
34 aledesign.it http://www.aledesign.it
May 28th, 2009 at 6:39 am
Another fabulous post! Arca Lui Noe Hotel, Guillaume Pacheco, Typographica are my preferite. Is important to see a different NAV in the net..every graphic have a lot fo idea after see this post!
35 theodin http://www.theodin.co.uk
May 28th, 2009 at 8:55 am
great article as always, thanks for sharing!!
36 kamalakar http://www.deqube.com
May 28th, 2009 at 9:59 am
hi, it always a pleasure to visit ur website. it gives me a great deal of information on what is going on in the design world as i dont get much information regarding global webdesign trends in my country india. but i was wondering on what basis do u search for these websites and how would u decide on which one to showcase when each other website would have its own speciality?
37 Aneslin http://www.hisubash.com
May 28th, 2009 at 11:02 am
great bunch of collection,
thanks a lot bro
38 roberto
May 28th, 2009 at 4:48 pm
There are some really nice websites there, it’s cool to see (don’t know if it’s a trend) moving backgrounds and slides.
As always thanks for sharing…
Roberto
39 Sklep Zoologiczny http://www.przyroda.org.pl
May 28th, 2009 at 6:07 pm
Simply genius !
40 @cwylie0 http://www.misselhornmedia.com
May 28th, 2009 at 7:28 pm
Beautiful list. I am always looking for good inspirational design examples to help me along in my journey.
41 Egypt Web Design http://www.seniorwebdesigner.com
May 28th, 2009 at 11:30 pm
Woww Thanks for all your efforts, it’s defiantly an added value for all the designers and a good way to show appreciation for the hard worker designers
Thanks,
Mohammed
42 aaaaaaaa http://aaaaaaa
May 29th, 2009 at 1:35 am
aaaaaaaaaaaaadddddddd
43 webdesign - bevisual http://www.bevisual.de/
May 29th, 2009 at 10:26 am
Thank you for this very nice List!
44 Halim http://www.halimdesign.com
May 29th, 2009 at 11:23 pm
Thank you for all the inspirations!
45 - Toby - http://www.kheendesign.com
May 30th, 2009 at 2:25 am
Thanks Nick! Nice Inspiration!
46 IdealHut http://www.idealhut.com
May 30th, 2009 at 8:16 pm
Great selection :), you can also check navigation bar at my portfolio as well…
47 zrce http://zrce.eu
May 31st, 2009 at 3:33 am
great collection. thx
48 Rivki http://rivki-hendriyan.com/
June 1st, 2009 at 11:48 pm
Great inspiration for me… thanks a lot…
49 TWMG http://www.thewebsitemarketinggroup.com
June 2nd, 2009 at 6:01 am
keep up the good work
brilliant
50 Jason Grant http://flexewebs.com/semantix
June 2nd, 2009 at 4:00 pm
Very nice stuff.
Design is a very important aspect of any web site and navigation can be one of the hardest things to get right and make it pretty.
51 Simon Erich http://www.sitegoals.com
June 2nd, 2009 at 5:27 pm
I have mixed emotions when looking at a list like this. Attractive - Yes. Effective - Mostly. But these are some very limited views on what “navigation” really is. Are we talking about the 4-6 links at the top of a homepage? Or are we talking about how to make a deep, content rich site easy to use for the visitor? There are some very nicely designed sites in this list, but many which “break the rules” of standardization of navigation and labeling.
All that being said, thanks for putting together this attractive and inspirational list! I’m sure it won’t be the last time I visit, keep up the good work.
52 Iza
June 2nd, 2009 at 6:25 pm
I agree with Simon Enrich. The sites are attractive and it is great to see so many talented designers on the web. Unfortunately, some of the sites from this list will be frustrating, confusing or even impossible to use for a keyboard user. In most cases this problem could be fixed by simply using device independent JavaScript handlers. Sites should be attractive but they are not paintings in a gallery or printed brochures - we should be able to get beyond the home page, with or without the mouse (e.g. mobile phone).
53 dsa
June 3rd, 2009 at 12:06 am
afsd
54 mindpro
June 3rd, 2009 at 11:26 am
inspiring
55 backusdesign http://backusdesign.com
June 5th, 2009 at 3:56 pm
Ewww, number 4 uses sIFR.
56 Web Design Hobart http://www.kingsdesign.net/portfolio/
June 5th, 2009 at 6:24 pm
I like the custom layouts the most where the navigation is enhanced with creative hover texts. All navigation here seem to keep usability in mind as well and that is very important.
57 Fred Campbell http://www.northstar-website-design.com
June 7th, 2009 at 6:00 am
What a great list! Plenty of great website designs to plunder for inspiration! Thanks
58 Deepak http://www.dashingsolutions.com
June 9th, 2009 at 3:53 am
Gr8 Collection !!!! The most important function of a website is to be very attractive and easy navigation , user friendly and communicative.
59 Carl - Web Courses Bangkok Instructor http://www.webcoursesbangkok.com
June 10th, 2009 at 4:03 am
Great examples thank you!
60 Michelle http://www.holdenmichelle.com
June 10th, 2009 at 7:10 pm
I love these examples!
Thank you!
61 div http://divyasharad.blogspot.com
June 11th, 2009 at 4:47 am
Very Informative, inspiring…..
62 burak - delizade http://www.delizade.com
June 11th, 2009 at 5:19 pm
bunch of great sites…gatheing them is a holy effort. thankyou
63 Pavel Kuts
June 15th, 2009 at 7:11 am
nice owly site. made browse through more than the rest
64 nesnora
June 16th, 2009 at 10:21 pm
Most of these sites have less than 10 links/pages. It would be nice to see something more than just artist portfolio sites. Solutions for huge, data-rich sites would be interesting… this stuff is (mostly) pretty, but not exactly inspiring.
65 diyet http://www.diyet.name
June 17th, 2009 at 1:11 pm
It would be nice to see something more than just artist portfolio sites. thanks
66 Nicolas Borda http://mulpo.com
June 20th, 2009 at 3:42 pm
Nice to see a Drupal site like Red Nose Day in the list!
67 kiera http://www.thekeyinsights.com
June 23rd, 2009 at 2:29 am
still learning so much about websites. not a designer but need to know this info for my clients. thanks for the lesson.
68 Attitude Design | Graphic Design Portfolio http://www.attitudedesign.co.uk
June 23rd, 2009 at 10:09 am
Thanks for this great selection.
69 Joe
June 25th, 2009 at 12:37 pm
(comment removed by admin)
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!
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!!!
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
73 matrax http://multimanyak.com/matrax
July 3rd, 2009 at 2:17 pm
Your site and your content to a really great hand healthy;)
74 yapidekor http://yapidekor.blogspot.com/
July 6th, 2009 at 1:51 pm
Thank you my friend …
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.
76 London web design http://www.totallydesignlondon.co.uk
July 11th, 2009 at 12:57 pm
Yeah this is well nice!
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.
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.
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.
80 shesh http://www.scaninvisible.com
August 3rd, 2009 at 2:22 pm
this site rocks for a post like this
81 Stephen Kui http://www.stephenkui.com
August 7th, 2009 at 12:57 am
I really love some of these navigation examples.
Just one thing I’ve found and noticed is no matter how good a navigation system looks, if it’s not easy to figure out, it doesn’t work for me.
So when I design I always make a habit of trying to keep the navigation stylish and different without making it totally confusing. (if you want to see what I mean it’s on my site at http://www.stephenkui.com)
Does anyone get what I’m saying or even agree?
82 cennetevi http://www.cennetevi.gen.tr
August 8th, 2009 at 5:57 am
these are awesome!
thanks for putting in the effort to get this list together
83 Clinton Montague http://slightlymore.co.uk/
August 14th, 2009 at 2:53 pm
@chris - it’s nice to know that some people look at it! Thanks for the kind words!
84 free style http://vn.myblog.yahoo.com/lesinhtien
August 21st, 2009 at 10:43 pm
oh more attractive…
85 Cookie Creative - Graphic Design Manchester http://www.cookiecreative.net
August 25th, 2009 at 5:23 pm
Wicked collection, thanks.
86 Huge http://fashionow.net
September 4th, 2009 at 4:16 am
Atebits is cool design. Really interesting things here.
87 Diane
September 8th, 2009 at 1:48 pm
I LOVE the “Work at Play” Site. Awesome example of creative navigation. I’m curious how they did it. Is it as simple as anchored links with a sticky header & footer? Or is there more to it? Hopefully this doesn’t sound too much like a newbie question.
Although…. it would make for a really cool tutorial. Hint, hint
88 bagsin http://handbagsurf.com
September 10th, 2009 at 8:12 pm
Be sure and check out the page source for the Slightly More site
89 Louis http://www.coztic.com
September 13th, 2009 at 4:13 pm
Some of them are really nice.
However, some of them seems with a bad usability
Nice article anyways.
90 Rob http://www.sprite21.co.uk
October 25th, 2009 at 6:36 pm
Some great examples there. Great post.
91 Mike http://www.comastore.com
October 31st, 2009 at 5:18 am
I really love some of these navigation examples.
92 panel radyatör http://www.emkoisi.com
November 5th, 2009 at 8:48 am
good tutorial thanks
93 egypt web design http://www.egyptwebdesign.com
November 8th, 2009 at 7:07 am
thanks for the nice collection
94 Discount Mole http://www.discountmole.co.uk/
November 12th, 2009 at 1:53 pm
some amazing designs so jealous :()
95 panel radyatör http://panel-radyator.blogspot.com
December 15th, 2009 at 8:16 am
nice tutorial i will translate my language
96 Daniel
January 4th, 2010 at 7:27 pm
another great 2010 incrasing webtrend is the horizontal scroll, keep this example using jquery: RossoCarmilla.com
97 vincentdresses http://www.hibridal.com
January 6th, 2010 at 1:55 am
喜欢你们的设计与技术，常来看看
98 zonguldak halı yıkama http://www.benimsehaliyikama.com
March 2nd, 2010 at 4:42 pm
excellent article i learn so thşngs
99 Kirsten http://www.hybridlava.com/
March 19th, 2010 at 10:30 am
lovely designs ….great job
100 brandon http://www.bloggs74.com/
March 19th, 2010 at 10:32 am
exceptional stuff.keep up the good work
101 Alex http://www.hybridlava.com/
March 24th, 2010 at 1:25 pm
amazing article…
102 Michael Müller http://www.kroati.de
April 9th, 2010 at 8:52 am
How do you find this site http://www.kroati.de?
103 Lauren http://JolaCreative
April 9th, 2010 at 3:21 pm
Nice! This gives me some good ideas
104 Web Design http://exmmedia.com
April 28th, 2010 at 9:16 pm
I LOVE THIS SITE!! thank you for sharing
105 London Web Designer Evan Skuthorpe http://www.thebrisbaneline.com
May 25th, 2010 at 11:10 am
some inspiring design examples here… bu not quite what im looking for… must keep looking.