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 using twitter bootstrap and I don't like the default dark gray background color for the navbar.

So I was thinking of chosing a different color. But being a programmer and not a designer first this is turning out to be harder problem than I imagined.

Are there any guidelines/principles/best practices in choosing background color for the navbars and how that color is related to/complements other colors on the page.

Any website to take inspirations from?

share|improve this question

closed as off topic by Vitaly Mijiritsky, Benny Skogberg, JonW Aug 21 '12 at 6:41

Questions on User Experience Stack Exchange are expected to relate to user experience within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

    
Belongs on graphicdesign.SE –  Vitaly Mijiritsky Aug 8 '12 at 5:41
add comment

3 Answers 3

up vote 8 down vote accepted

I feel your pain on this one. I like to refer to Adobe's Kuler for some good ideas on color palettes/complementary colors.

Also, PatternTap has a huge gallery of navigation elements, although if you're just looking for new colors it might be a bit much to sift through.

I think the principle to follow here above all else is simple: make sure there's enough contrast to be readable. Contrast-A is a good web-based tool that can tell you if the contrast between the text and background colors is high enough to be readable. If you want something that will examine a production site, checkmycolours.com can do that, although it seems to provide goofy results.

share|improve this answer
    
great resources. thanks mark! –  numan Aug 8 '12 at 1:28
add comment

The colour you decide on depends on whether you're coming from a UI designers point of view, a UX point of view, or an accessibility point of view, and finding the right level of all.

For example, if you were looking at 100% accessibility you'd go with black text on a yellow background and have the option to change. If you were coming from a 100% UI p.o.v. you'd probably design it to fit in with the restof the system but you might end up with something less legible. 100% UX would be well-designed enough to not make the user feel like they're looking at something which is easy to read and noticeable and probably in the correct order too.

Combine all 3 in the right ratio and you should have something which is easy to read, easy to use, looks nice and is legible to those who can't see so well.

Tip - don't RELY on colours to depict information. The colour should supplement the information, so that those who do not see colours as easily cannot get confused. So using different colours for different sections of the site, for example, without backing that colour up with text or symbols, is a nono!

share|improve this answer
add comment

good infographic design books take you through the pertinent facts about color choice. some websites and tools like kuler provide instant gratification for a complimentary color based off your existing pallete. if your pallete is tonal or other scheme, best to continue in same vein.

share|improve this answer
    
Please consider registering your account. You can register here with a Google/Yahoo/Facebook account or make an account with Stack Exchange. This allows you to link your accounts on Stack Exchange sites, and means your posts stay together; we've had to merge a couple of your accounts because your unregistered cookie was lost; info's all in the first link. –  Ben Brocka Aug 8 '12 at 13:30
add comment

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