1

I am creating a thin fixed navbar and am debating between having it be primarily colored (our color is a type of turquoise) with white accents or primarily white with the turquoise color accenting it. I have seen posts discussing the benefits of a darker nav bar but I was wondering what are some of the benefits of having a white nav bar.

I am assuming there are many benefits considering Twitter and Instagram use a white navbar for their websites.

thanks

4
  • 3
    What is the background color of the main portion of your site? That should influence your choice of navbar color.
    – Mayo
    Jul 21 '15 at 15:38
  • If the links on this navbar are not important then use white bg color. If the links are the main functions of the site, give them some importance and highlight them by giving darker bg color.
    – Ades
    Jul 22 '15 at 9:22
  • 1
    This is really a visual design question and the answer will always depend on the context of the overall site design.
    – DA01
    Jul 27 '15 at 1:17
4

It depends on the colors used in the rest of your website, the mood you're trying to achieve, the content you're presenting, etc.

Contrast

In general you should aim to have a lot of contrast between the navbar and the rest of the page, so that users can find it easier.

UX Stack Exchange navbar

This is what Stack Exchange does, the blue navbar contrasts heavily with the mostly-white page, and the black network-wide navigation bar at the top contrasts with both the other navigation bar AND the content.

In some cases, however, less contrast is cleaner and less distracting.

Twitter navbar

This is what Twitter does, their white navbar blends in with the rest of the page. This is because navigating between pages on Twitter is not nearly as important as it is on Stack Exchange sites. On Twitter, the primary focus for the user is the content on a single page, so the navbar should not distract from that.

Psychology

Additionally, different colors cause users to feel differently while using your application. This is a very broad and interesting topic, and the effects of different colors depend heavily on culture and heritage. Here are some sources to learn about how different colors effect user perception.

Brand Recognition

Users sometimes also associate colors with certain brands, and keeping this association can be important for users to easily identify the brand of your website. As an example of this, let's play a little game.

Logo game

Out of these 4 squares, which ones do you recognize? (Answers at the bottom of answer) Color can be a powerful thing, and sticking with a certain color can build brand recognition.

Conclusion

Going back to your original question, a white navigation bar can give focus to the content of your page (provided that your content also has a light background) and can help your logo stand out. It can also make your application look more clean and open.


Answers to Logo Game

(The answers are backwards so you don't see them by accident)

A. koobecaf B. rettiwt C. elppa D. tfosorcim

You might not have gotten C right because Apple depends more on the shape of their logo than color of their products. But you almost certainly should've gotten the first two right as social media sites depend on their brand being recognized everywhere.

0

There's one strong advantage to the white navbar over any kind of color: it can be easily customized with any logo if/when the system is whitelabeled or rebranded.

However, if white-labeling isn't anywhere in your perspective, a colored bar can be great for building some extra personality with a bold color block.

0

For a more dynamic and strong site, use the opposite color of your website background for your navbar background. If you want to have a more calm, minimal and subdued feel to your site (and navbar), you should use the same color for your navbar and background.

I would recommend having a white background for the navbar though, potentially, if your background is turquoise, because having that much turquoise on the page may detract from the actual content on the page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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