The principles when making creative navigation.

Nowadays, there are many kind of ways in making creative navigation.  HoView Postwever,  they are all based on the rich interface. There are some principles that we should keep in mind when start doing any projects in web design:

1. Consistency

Consistency is very important: It’s help people image and connect elements in design. Consistency could be in headers, sub headers, paragraphs, picture size, page, menu. The element build consistency are: color, font size, type face, indent

If we have paragraphs, sub header are in same level. they should be consistent in same color, font size, type face.

If the content are belong to different level, hierarchy. They should be consistent in different color, font size, type face, indent.

2. Self explanation

Try to use the image, icon, label that can make a self-explanation. Sometimes a little explanation or introduction of new technique will help users have idea in navigate pages. Do not overwhelm all design that might  be destroy the design.

3. Apply telling a story

Telling a story that make user feel more interact into pages. Therefore if  designers can connect the idea of website with telling story. It would be great.

 

There are some examples apply those principles, take a look.

1. Trailsandbyways

Advantage:

  1. When entering the site, there is an introduction of helping user how to navigate
  2. Make 3 slides pictures=> create 3D => interact with user effectively
  3. Design horizontal scrolling navigation => make user easily understand the landscape.
  4. Use the  pictures to show the building instead of name of the building
  5. When moving the mouse, the picture is moved a little bit, help users know they are interactive with webpage=> make all design more interesting but not overwhelm.
  6. Apply telling story (landscape on the horizontal), building (instead of the name of building). It is playful, experimental to user.
  7. The map follows the mouse as the mouse move on the left or on the right.
  8. Navigation menu is displayed on the right, bottom site. whenever clicking on one option in main left menu, secondary options are displayed next to the main menu and this selection is not change wherever the mouse is. It just only changes when the mouse chose another option in main menu

2.  Rosso Carmilla:

Advantage:

  1. When entering the site, there is an introduction of helping user how to navigate
  2. Make 3 slides pictures=> create 3D => interact with user effectively
  3. Design horizontal scrolling navigation => make user easily understand the landscape.
  4. Use the  pictures to show the building instead of name of the building
  5. When moving the mouse, the picture is moved a little bit, help users know they are interactive with webpage=> make all design more interesting but not overwhelm.
  6. Apply telling story (landscape on the horizontal), building (instead of the name of building). It is playful, experimental to user.
  7. The map follows the mouse as the mouse move on the left or on the right.
  8. Navigation menu is displayed on the right, bottom site. whenever clicking on one option in main left menu, secondary options are displayed next to the main menu and this selection is not change wherever the mouse is. It just only changes when the mouse chose another option in main menu
Advertisements
Comments
One Response to “The principles when making creative navigation.”
Trackbacks
Check out what others are saying...
  1. […] there are many kind of ways in making creative navigation.  HoView Postwever,  they are all based on the rich interface. There are some principles that we should keep in […]



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: