5

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.

Improve this question
2

4 Answers 4

Reset to default
7

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.

Improve this answer
1
  • completely agree. +1
    – montrealist
    Jun 13, 2011 at 14:36
4

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

Improve this answer
1
  • 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
    – pepe
    Jun 12, 2011 at 23:59
2

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

Improve this answer
1
  • 1
    thx @jonshariat - very helpful links and screencaps
    – pepe
    Jun 15, 2011 at 0:26
1

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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