Project Client: Refresh.com  
back button
Details: Redesign of header and navigation bar. Make area easier to use by following basic tested principals along with keeping to the current tone and visuals of the site.
 
 
Option 1 - clean , straitforward, easily navigated

- 6 tabs total ( anything more, you will create findability issues . General rule of thumb is 5 or less.

- Interaction. On click of tab, user will go to that page. On hover of tab they will see the extended menu in javascript/dhtml.
This will only cover content as long as the user hovers over tab.

- User/ Pass fields are prominent and larger than normal. More web2.0 sites have easily visible fields that are labeled inside. When user clicks in, the label goes away. Sign In , Sign Up links are centered and easily visible. All the background of the top portion of the screen is in white, this way none of the main actions get lost, nor does the banner.

- Logo redesigned, cleaner , easily brandable , and “fresh” looking. This is just concept , so up to you.

- Tabs I used same clean bright colored tabs that stand out. I would steer away from darker colors on a bright site. Make sure
there is a good hierarchy of focal points.

- I took out the small icons next to each category. This causes more visual clutter which we don't want when people are navigating. Usually those are used when sites are very very light and we want to call attention to the navigation. We will use the opposite approach and call attention by cleanliness.

 
 
 
 
 
Option 2 - messy look, more in line with style of page

- The overall approach with this one was to get most of the main interaction elements ( login, navigation, sign up , branding ) all in the same area. I moved the banner up to the top and slid the modules up a bit to fill up the page.

- I tried to emphasis the branding a bit by using a different font and keeping a thrashy look like the other fonts on the page. I know this goes against branding but this can change if you want.

- I also kept the same navigation idea that are easy to see and still a bit fun by stylizing the menu portion with a stroke outline that goes with your current style.

- Once again, the sign in, sign up links are prominent and easy to see, and navigation is secondary which cannot be missed. The background is white so there are no ( scribbles ) behind the elements.

- Moving the elements around a bit make the site look more " meaty" and not just a bunch of graphics. I would also suggest using larger images that users resignate with, instead of alot of graphics. ie: celeb graphics..etc. Be more in their face with what they have seen out there. ( if i have time i will show you what i mean )

 

  2
 
 
 
 
 
Option 3 - tabs, space for additional tabs    

- This is closest to what you have today with a clener navigation structure. At this point your navigation is pretty much fine with one of these concepts, it basically comes down to taste, and what visually you would like to see. I made the top nav sit on a boarder like structure like the rest of your modules. Kept the logo fairly unchanged, and just made the fonts a bit bigger and easier to read.

- I would recommend not using different fonts for navigation although I could have for visual effects. I would think at this point your testing and reg's would tell you how well they are working.

- I went with a flatter graphical approach with the tabs. This is a new trend in logos that are rolling around. Less graphics, cleaner representation. kinda like www.digg.com.

Check out some sites at: http://www.go2web20.net/


I would recommend www.crazyegg.com for a visual map of where people are clicking, and obviously google analytics if you dont have them in house already.

  3
   
Iteration 1 - Combined