Friday, 15 March 2013

Navigation Structure Research

I will be creating a website for this project so looking at the different navigation structures out there would hopefully give me some inspiration into what I want my navigation to look like and how I want it to work. My initial thoughts were to make the navigation as exciting and unique as possible although I have no solid ideas on this yet. 

With this in mind I started looking at existing navigations that are visually engaging but also work well. First off I found a blog that had a navigation which looked like it fitted on the page and was not blatantly obvious it was the navigation of the site.  

The home page looked like this with the HBPA in the top left being the navigation it's fairly basic but I like it because it's unique and not something I had seen before.

It showed the first letter of each part of the navigation and had a hover effect to add more of a visual element to the website. The colour were different for each section and the full word appeared next to the navigation when it was hovered over. I like the idea of this navigation structure as it's eye- catching and fits the pages of the site well. However I don't think it would be useful on my site as the capital letters of each section could be misleading and if the user doesn't know what they stand for they have to hunt for what they want to find. 




www.skialpine.com - Drop down menus


The next navigation bar I looked at I really liked as it used drop down menus in a really good way that suited the visual style of the whole site. They also appeared as part of the background on the site which I think works really well and keeps the navigation visually engaging. 



The menus dropped down when the topic is hovered over, these have a slight shadow effect to show what you are highlighting. The menus themselves appear as if they have just been pulled down and the slight shadow at the top of adds to that effect. I wanted to use drop down menus in my site initially but after looking at the possible options on my site I don't think this will work. 




Candccoffee.com - Animated Navigation 


So these were the basic navigation structures I found and liked that were fairly simple yet looked good, so I decided to look for some more unique looking example of navigation that were better looking visually. I found the candccoffee.com website which and a really good looking animated nav bar. The home page initially has no navigation as it animates onto the screen from the top as if it was falling onto the page as shown above. 

It then bounces and dangles there for the user to use and also has hover effects, the navigation never stops moving on the page which adds to the animation. I like this style as I think it is dynamic and it does not overpower the other elements of the site or force itself onto the users. With the hand-written fonts and elements on the site it also has a personal or friendly feel to the user. However whilst the navigation looks good and is unique it is also not really practical if someone was using the site for a long period of time as the animation happens on every page and to me this would become annoying. I still really like the way it works on the site but as my site is educational and aimed at college student I don't think something like this would suit it. 






No comments:

Post a Comment