0

We've been developing a mobile app, and now we're researching the perfect colors for it.

I've noticed that most mobile retail/list apps use white and gray as their normal GUI colors. For example, mobile apps like Airbnb, Walgreens, Zillow, Old Navy (which have a color associated to it) use white or very light gray in the background header.

Obviously, there are exceptions where the app header has a background color (i.e.. Walmart, Target, Amazon). But most of the apps use white and gray and very light neutral colors.

Is it a risk adding a background color to a new mobile app?

1
  • 1
    It's not something exclusive to mobile applications, in fact, the question applies to all desktop web pages, and the answer is probably the same.
    – Danielillo
    Oct 11, 2022 at 16:30

5 Answers 5

3

There isn't a "best practice" that recommends against adding background colors. In fact, Google Material Design provides several studies that show how color can be incorporated while still staying within its standards.

Owl design study example

I think there are a few reasons you see a lot of corporate designs "playing it safe" when it comes to color:

  • It's like painting your wall red, users might get tired of looking at strong colors every day
  • Most companies are using design systems, which can be bureaucratic and slow to accept new updates, which leads to conservative designs
  • Colors have meaning. If you make certain elements red because of your brand, for example, you might end up having to change them later if users are inferring that they're in danger.
  • The products being sold need to be far more visually interesting than the "furniture" around them. But, it's still possible to use color in a subordinated way that supports the main content (examples below).

So, it's easiest to be frugal with color, and play it safe. But, that doesn't mean that playing it safe is "correct" or the best way forward. I'd encourage you to look at lots of examples (Google has a bunch), read up on color harmonizing and accessibility, and test your designs with users to get their feedback.

Google's Basil theme

Google's Shrine theme

1

In addition to @izquierdo's answer, there are 3 other points:

  • Many apps/websites have lots of colorful images and videos, and the interface with neutral colors helps users focus on content. Examples are Instagram (where they removed the black and blue elements and everything became black/white), airbnb, YouTube, ...
  • Not all websites/apps use neutral colors. Landing pages, artist portfolios, games, apps aiming on younger generations, ...
  • This might be a design trend. I remember websites were colorful as hell with lots of gradients and annoying animations in early 2000's. This is not so common now, but it was "cool" those days. (this is just my opinion and from what I remember)

Based on what your app does, and who your users are, you can decide to go with neutral colors or not.

I also want to add some tips if you really want to use your brand colors but don't want to go the colorful way:

  • You can use you primary color subtly: in icons, pills (chips), buttons, (mind the semantic colors), borders of elements like callout or quote boxes, focus and hover states, ...
  • You can blend shadows with your primary color: For example, if you primary color is purple, you can make the shadows dark-purple instead of rich black.
  • You can use your brand colors in your images & videos: Say there's a "team" page in your app and your primary color is green, you can use the color as the background of people pics (imagine there's a green wall behind each team member picture)
0

First, I'd recommend you let go of searching for perfection. You're looking for a design that is optimized for whatever your business goals are, within all of the real world constraints you're going to have to deal with. Ideally, your users will experience your app with the least amount of friction. But even with a pretty good design, your users won't all share the same experience. Forget perfection, it doesn't exist.

The interfaces you refer to are colorized the way they are, because the content the app presents is most important. The app's chrome/interface will also usually not be at the top of the visual hierarchy, simply because it doesn't need to be. A well designed interface will leverage commonalities in users' mental models. For instance, if your users expect to find a home link in the top left corner, a search bar in the top of the screen, or contact info in the footer, then put yours there too.

Find out which colors you want to use to make your offering salient. And then stay away from those colors in your interface, with the exception perhaps of call-to-actions and other important funnel drivers.

0

Maybe :

  • Contrast ratio
  • Dark mode problem
  • Seamless design integration between different Design system OS
  • Minimalist design
0

Before coming to the answer, Let me tell you that most apps follow the 60-30-10 rule. Where 60% colour is the background of the apps. Anything above the white looks great. And if we start using other colors in the background may conflict with the bran dolour. For e.g the Google app, What if they use their logo color in the background and the main CTAs won't look appealing, or intuitive.

Your Answer

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

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