Eye-Catching Websites With One-of-a-Kind Navigations For Inspiration

Posted in Inspiration, Web Design, Web Interfaces • Posted on 3 Comments

A website is like a magazine where people search for information. The table of contents of a magazine is like the navigation of a website. Table of contents provides an overview of your magazine, while a navigation also shows on what your viewers should expect to see on your website. Both serves as pathways for your viewers on how they can read your mag or explore your website.

Whenever I think of what is the most important task a web designer could do, I always end up thinking that it should be the creation of good navigation. It must be well-designed in a user-friendly manner that the moment the viewer sees it, they instantly understand how it is used and what is it for. A navigation must also be creatively done, it is one of the elements you can find on a website where you can capture a viewer’s attention.

Components of Good Website Navigation:

1. Primary Navigation

Primary navigation are the main menus or categories of a website. These are considered as the most important links that can be seen the moment your website loads. Most of the primary navigation consists of Home, About Us, Contact Us and other links depending on what kind of website you are creating.

Primary navigation sample

Keep in mind that primary navigation should not have more than seven or eight links. Choose the most important links and put them as the main menus and the rest will be placed on the sub-menus.

2. Secondary Navigation

Secondary navigation are the secondary links or sub-menus of a website. Usually, these are to be found from a drop down menu or a fly-out menu.

A drop down menu is when a user mouse over and click on a menu button, then sub-menus will be shown.

Submenu sample

Sample Image of a Drop Down Menu

A flyout menu is when a user hovers onto a menu button, then sub-menus will appear. In this case, the user doesn’t have to click the button for the sub-menus to appear.

Fly out menu sample

Sample Image of a Flyout Menu

3. Position of Menus

It is important that you position your menus on a place where your viewers can easily see them.

Usually, horizontal navigation is put on top and under the header of your website. While a vertical navigation, this is commonly put on the left side of the website.

To add up on to this, always put your menus from left to right since most viewers start reading from the left.

Left-to-right-navigation

Even you put your links from right to left, your viewers will still read them starting from left. Take the image below as an example. Even the links are put into a right to left position, viewers will still read them starting from the Contact Us, Blog, About Us and then Home.

Right-to-left-navigation

4. Size of Buttons and Menu Label

The size of your menus must be noticeable, but not too large that they would occupy too much space. Adjust them where they can be seen easily by your visitors while maintaining a professional look.

Wrong-size-menu

When putting menu labels, make sure they are readable in size. Also, choose a font color that is in contrast with the color of your button. If the color of your button is light, use dark color for your menu label and vice versa.

Correct-size-menu

5. Color of Menu Buttons

Colors are one way to entice the visitors of your website. Use a color for your menus that is in contrast with the background color of your website. This way, you can capture the attention of your viewers and your buttons will stand out with the other elements of your website.

Tulumarka

Take a look at this example. Even the buttons have the same color as the background, it still stands out for it has button-click effect and the text color is white.

Merixstudio

6. Icons and Effects

Icons are great way to differentiate your buttons and they also inform users on what viewers could expect on that link. Also, hover effects is a good way to attract viewers’ attention. This also informs the visitor that they can click the button which looks different from the others. You can also put a button-click effect to inform your viewers on what button they clicked.

To give you more idea about this, I have here a good example of website navigation. The designer of PixelResort put icons on top of each menu label to represent the link. Also, it has a hover effect (glowing circle) and a button-click effect (arrow pointing on the link). In this case, the page is on the Blog link and the mouse pointer of the viewer is put on the Goodies link.

Pixelresort

And my last tip for you…

7. The less click, the better.

Viewers tend to be impatient when searching for information, they want to seek what they are searching very quickly. Make sure that your navigation respond as quickly as possible to your viewers’ instincts.

In this article, I will highlight amazing horizontal and vertical navigations for your inspiration. First, let us take a look at horizontal navigation.

Horizontal Navigation

Horizontal navigation is the widely used navigation of web designers today. Usually, the navigation bar is placed right under the header.

Good Characteristics:

1. It occupies less space

Horizontal navigation is mostly used by web designers for it occupies less space, because it is placed at the top part of the website. Then, the rest of the spaces you can use for your content.

2. More noticeable

Our eyes first notice elements of the website that are placed on the center, that is why horizontal menus are more noticeable since they are placed on the top and center part of the website.

3. Easier to use

Viewers find horizontal navigation easier to use. Comparing it to vertical navigation, you still have to move your mouse pointer on the left part of the screen (or sometimes right) to click the menus. If the navigation is horizontally placed, you just have to move your pointer upward to click a menu button.

4. Viewers are already used to it

Since it is the mostly used navigation, viewers always expect that all websites have this type of navigation.

Bad Characteristics:

1. Limited space for your menus

When using horizontal navigation, you are limited on the width space of your website and this still depends on the layout of your website.

2. Can only be used if number of menus are already known

Horizontal navigation can only be used if the number of your menus is already fixed, because the size and design depends on the number of menus to be placed.

Here are some example of horizontal navigation for your inspiration:

1. Rayman

Rayman

2. Davroc Interiors

Davroc

3. Rzepak

Rzepak

4. Owltastic

Owltastic

5. Sarah Hyland

SarahHyland

6. Racket

Racket

7. Kinder Aktuell

Kinderaktuell

8. Acko

Acko

9. Red Velvet Art (Horizontal Navigation)

Redvelvetart

10. Xedum

Xedum

11. Design Nut

DesignNut

12. Jay Taylor Design

Lehighvalleyweb

13. Mac Rabbit

Macrabbit

14. Getraenke Kukral

Kukral

15. Noizi Kidz

Noizikidz

16. Chris Guille Beau

Chrisguillebeau

17. Small Stone Recordings

Smallstone

18. Max and Lous

Max&lou

19. Loodo

Loodo

20. Boukarabila

Boukarabila

21. Jiri Tvrdek

Jiritvrdek

22. Ungarbage

Ungarbage

23. Duarte Pires

Duarte Pires

24. CSS Beauty

Cssbeauty

25. Manndible Cafe

Manndiblecafe

Now let us go to vertical navigation.

Vertical Navigation

Vertical navigation are usually placed on the left side of a website and the menus are placed from the top to bottom, like a ladder.

Good Characteristics:

1. It allows grouping of menus

Vertical navigation allows you to group your menus and place sub-menus under each main category. Unlike in horizontal navigation, you still need to create a drop down menu for the sub-menus.

2. It is easier to add or remove menus

If you are trying to put more or remove menus in the future, you can use vertical navigation. It will be easier for you to add or remove menus without resizing each buttons.

Bad Characteristics:

1. It occupies a lot of space

Usually, menus in vertical navigation are placed on the left side of the website and this occupies a lot of space on the whole website template. Unlike when using horizontal navigation, you are just using the top part of your website.

2. Limited characters for your menu label

For your buttons not to occupy too much space, you are limited to few characters when putting labels for your menu. If you will be putting many characters, tendency is the font size of your menu label would be small or you will occupy too much space on your template.

3. Scrolling down is needed for websites with many menu buttons

If you have several menus for your website, the tendency is that your viewers need to scroll down their to see the other menus placed at the bottom part.

4. Viewers are not used to it

Viewers expect that a website should always have a horizontal navigation, since it is mostly used by web designers. But nowadays, there are already websites that are using vertical navigation and are designed creatively to make it easier and noticeable for visitors.

To give you more idea about vertical navigations, take a look at these websites.

1. Brian Handley Design

Brianhandleydesign

2. R.I.P. Cube Club

Ripcubeclub

3. INNOVATIVE Imaging Professionals

Innovative

4. Envira Media Inc.

Enviramediainc

5. Oink El Rellano

Oink

6. Gary’s Real Life

GarysrealLife

7. Total Body Care

Totalbodycare

8. Red Velvet Art (Vertical Navigation)

Redvelvetart2

9. Extra Tasty

Extratasty

10. Power to the Poster

Powertoposter

11. Cambrian House

Cambrianhouse

12. Cassys Design

Cassysdesign

13. Diego La Torre

Diegolatorre

14. Brown Blog Films

Brownblog

15. Wards Exchange

Wardsexchange

16. AJ Miles

Ajmiles

17. Washtenaw Community College

Washtenaw

18. Adventure Here

Adventurehere

19. KKMedia

Kkmedia

20. National Television

Natl

21. Utah Travel

Utahtravel

22. Notorious Design

Notoriousdesign

23. This is Leaf

Thisisleaf

24. District Solutions

Districtsolutions1

25. Thora

Thora

Other Examples of Navigations

Here are some examples of websites with one-of-a-kind navigations.

1. Noroutine

Noroutine

2. Good Man

Goodman

3. Time for Cake

Timeforcake

4. Steven Holl

Stevenhollarchitects

5. Michael J. Yang

Michaelyang

6. WOW Brand Impact

Wowbrandimpact

7. Nathan Borror

Nathanborror

8. Creative Storm

Creativestorm

9. Nora Rose Travis

Norarosetravis

10. Deconstruction Records

Deconstructionrecords

What are your favorites among the selection? Comment out and feel free to share.

For high quality Photoshop navigation menu tutorials, click the link below.

50 Really High Quality Photoshop Navigation Menu Tutorials

33 Written Articles

An Information Technology graduate who loves learning new things and chocolates, too. She spends the whole day sitting in front of the computer, making herself updated with the things going on around her.

3 Comments
  • Renato Alves

    Monday, December 6th, 2010 14:45

    1

    Very complete list Torres.

    Thanks for your insights, these are very important things we need to pay attention in our projects.

    0
  • Angelee

    Monday, December 6th, 2010 11:01

    2

    great list! and yeah, “the less click the better”…..

    0
  • Ian

    Monday, December 13th, 2010 13:59

    3

    A really useful article. In fact, well done navigation is very important. The collection is very inspiring, I like Getraenke Kukral, I think it is very creative

    0
  • Ian

    Monday, December 13th, 2010 13:59

    3

    A really useful article. In fact, well done navigation is very important. The collection is very inspiring, I like Getraenke Kukral, I think it is very creative

    0
  • Angelee

    Monday, December 6th, 2010 11:01

    2

    great list! and yeah, “the less click the better”…..

    0
  • Renato Alves

    Monday, December 6th, 2010 14:45

    1

    Very complete list Torres.

    Thanks for your insights, these are very important things we need to pay attention in our projects.

    0

Comments are closed.

54.82.142.246 - unknown - unknown - US