Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I am working on a web application that has a typical top nav, using this paradigm.

[logo].........[search bar]................[home] [link 1] [link 2] [link 3] [logout]

By top nav, I mean that this menu is the topmost element of the page, ie above this the user will be interacting with the browser itself.

My current issue is this website is being conceived using a 'minimalist' design approach -- not much lines, borders, or boxes. The background is white, and I'm attempting to have the whitespace contain elements based on their placements and margins. This has worked well re text and other elements but not much (to my eye) re the top menu.

It feels like those links should be contained by something, a box, line, etc, or else they're just floating around.

Does anyone have suggestions to give a better sense of solidity to the top menu, while maintaining a light and unobtrusive design. Any examples/links are welcome and if needed, I'll be glad to better describe this very subjective issue.

share|improve this question
1  
Try GraphicDesign.SE. –  Vitaly Mijiritsky Jun 13 '11 at 4:02
    
I wouldn't put the "search bar" there. –  Knu Jun 13 '11 at 8:56
add comment

4 Answers

If it feels like the links should be contained by a box then maybe they should!

Who has set the limitation of no boxes? If it is just you, then maybe you should break your rule here! A light grey strip would contain the bar and still not be to obtrusive. Perhaps a gradient could be used to fade it into the main page for a smoother effect.

Alternatively you could have a dark bold solid line for the toolbar. This would set it apart from the rest of the unobtrusive page to give a clear distinction between content and navigation. This could make the site more usable as it would make it obvious to the user what is functional and what is informative.

Remember that the browser itself is a solid box around your page. As your toolbar is on the top of your page it it visually connected to the top of the browser and so isn't going to impact on the minimalist content.

share|improve this answer
    
completely agree. +1 –  dalbaeb Jun 13 '11 at 14:36
    
+1 for excellent points, thanks –  torr Jun 15 '11 at 0:24
add comment

If you want to keep the design minimalist, instead of denoting a menu by a visible border, use alignment, typography, and some hover styling.

share|improve this answer
    
thx -- i guess that makes sense and is the current approach I'm taking - wonder if there are other ways of achiving this effect of things holding together with minimal use of borders –  torr Jun 12 '11 at 23:59
add comment

If your current solution is not to your liking (Sounds fine to me, maybe provide a screenshot?) than you can take a look at other minimal designs for a wide array of navigation treatments that still show creativity and clean design.

Here are a few sites to get started...

A few main styles from the ones I researched:

Top and to the left or right, your current solution if im not mistaken enter image description here

Left list nav enter image description here

No nav, just 1 page enter image description here

Box's, lists, and grids enter image description here http://chevychase.se/

Left and right enter image description here

share|improve this answer
1  
thx @jonshariat - very helpful links and screencaps –  torr Jun 15 '11 at 0:26
add comment

I suggest a plain grey line separating the menu from the rest of the page, like this:

Minimalist web page with unobtrusive menubar

The line stretches across the full width of the browser. This visually ties the menu to the browser chrome, so it doesn't intrude on the minimalism of the page body.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.