I am designing an app that is 90% light themed. Except for this one action where user has to create a document of sorts and has to fill in some information. I felt that this was a crucial part of the app and therefore did a navy blue background so as to grab the users attention. It has white input elements for contrast. And this page is like a mega-menu but is of page height.

Is this approach OK?


Yes of course. Backgrounds (and colors in general) are used for different purposes, including highlighting elements and whole sections. A completey different background will create a sense of alert and users will pay special attention to that.

However, if all backgrounds are different, or if they follow some kind of pattern, this sense of alert ceases and users will probably ignore parts you may deem important, so be careful with that.

Just in case, this is related to the Gestalt's Principle of Similarity. From this link:

GitHub uses the similarity principle in two ways on the page below. First, they use it to distinguish different sections. You can immediately tell that the grey section at the top serves a different purpose than the black section, which is also separate from and different than the blue section.

Second, they also use the color blue to distinguish links from regular text and to communicate that all blue text shares a common function. enter image description here

You can also see Material Design section about color and how to use completely different colors to stand out some content

  • 1
    This is helpful, thank you!
    – zer0
    Sep 16 '21 at 18:42

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.