Colors can stimulate human brain in several ways. When it comes to mobile applications, design and colors both play crucial roles in triggering users to take certain actions. It is important to understand that accentuating right colors in accordance with design can help build trust in users. In essence, colors and designs are psychological things, and it goes without saying that the new age UI/UX designers are very keen in understanding the psychology of users before they develop a product for them.

Top UI UX designers say that, in order to craft effective human-centric products, it is highly important to adhere to material design guidelines.

In this article let’s explore the color guidelines for UI components and elements. As each mobile platform has its own set of guidelines, let us look into Android in this article.

1. Usage

When it comes to UI color application there are three principles that every designer should bear in mind.

1. Consistency: Color themes should be consistent throughout the UI, and should be in relation to the brand it represents.

2. Distinction: The applied colors should create distinction between elements, and should have sufficient contrast between those elements.

3. Intentional: Colors should never be used just for the sake of using it, instead it should be applied with an intention to help convey the message.

2. Top and Bottom App Bars

Top Bar

Top bars are usually used to display information and action pertaining to the current screen.

If you are using System bar along with Top bar, ensure that you differentiate them with right variants. If you look at the above image, the system bar is provided with slightly darker blue and the top bar is applied with a lighter blue variant.

So, your color variants would be like this:

 

Differentiating with color variants will help users to quickly decide on actions they intend to take.

Bottom Bar

Bottom bars are usually used to display navigation and other key actions at the bottom of the screen.

Bottom Bar

 

Typically the bottom bar provides access to bottom navigation drawer and up to four actions, including the Floating Action Buttons (FABs).

A word of caution with Bottom bars, though. Do not use bottom bars on screen that have one or no actions at all other than FABs. See below examples.

Differentiating bottom bars with other surfaces

Okay, now here is an example of how to differentiate bottom app bar with other surfaces, in this case a FAB.

Here, primary color blue is used on the bottom app bar and secondary color Orange is used on the floating action button. This way there is a clear distinction between the bottom app bar and the FAB. See below.

However, if you are forced to use the same color for both (bottom app bar and FAB) – a practice better avoided at normal circumstances – you could use a shadow to create enough distinction between the two.

Like this.

 

When your app bars are blended with backgrounds

There are instances where the above statement becomes inevitable. The simple and best way to deal with these situations is to make the top or bottom bars gain shadow as the background is scrolled. This creates an illusion that the background screen is beneath the top or bottom app bars.

See how the shadow is giving that depth while the background is being scrolled.

3. Backdrop

A backdrop is something that appears behind all other surfaces in an app. and they are used to display contextual and actionable content.

A typical backdrop consists of three elements – the backlayer, the front layer and a subheader (optional).

1- Backlayer

2- Front layer

3- Subheader (optional)

Usually, the back layer is applied with primary color and the front layer with white.

The below examples illustrates how the color variants are used between back and front layers.

 
The above shown app screen uses Crane Purple for back layer, the text fields are light Purple, and the front layer is white. If you notice there is red, too, highlighting the air fare. When you are dealing with multiple layers make sure you choose the color variants carefully.

4. Sheets and Surfaces

Sheets and surfaces can refer to several things such as, navigation drawers, dialogs, menus, bottom sheets or cards. Usually, sheets are presented in white, but not necessarily. You may either use white or any other primary color for the sheets, but just make sure you provide sufficient contrast between the sheets and other surfaces.

The above app uses primary color Blue to accentuate the bottom navigation drawer, darker variant for its account switcher, and uses a secondary orange color to highlight the selected text.

Cards

The baseline color for cards is white. But it can vary according to the backgrounds or brand themes. The card text and icons can also use the brand theme color to improve legibility.

If you are using white for both the card and the background, then you may apply a primary color to showcase the selection process. See below image.

5. Iconography and Typography

Typography refers to the style and appearance of a text (or any other printed material).

Iconography refers to images and symbols.

Typography

There are two instances where colors are used on text – one, to improve its visibility; two, to highlight its level of importance. Generally, texts are used in three areas:

Headlines

Tabs

Body

Usually, primary and secondary colors go well with headlines and Tabs.

In the above examples, the headlines and the tabs (bottom right) use primary colors, which works fine.

But when it comes to body text, using primary colors may not be a good idea. They could pose trouble. See below.

The primary / secondary colors on the body text may look forced, gaudy, or may even blend with other surfaces, which could ruin your interface. So, avoid using primary / secondary colors on body text unless they are done convincingly.

Text legibility is another area where designers need to focus more, especially when you place text on images.

Check out how texts are highlighted despite the imposing backgrounds. Notice that the ‘Black Coffee’ text is not directly placed on top of the cup image. Instead, a specially designed screen is placed beneath the text without disturbing the background image.

According to the The Web Content Accessibility Guidelines (WCAG 2.0), it requires 4.5.1 color contrast between text and background for normal text, and 3:1 to large text.

Iconography

Icons are important elements in an app, which helps to identify actions and provide information. So, care should be taken while applying colors to them. Again, the same principle applies here – you can use primary or secondary colors, but ensure that they are well contrasted against the background.

In the above screen, the background is applied with light pink and the icons are done with darker variant of pink. Result, the icons are well contrasted, legible, and are visually pleasing.

To help you maximize your knowledge on Android Material Designing, you need a comprehensive study guide, which can found here.

Endnote

Material designing is a useful system of guidelines, tools and components used to help designers and developers effectively collaborate to produce a product that is not just beautiful, but user-friendly and human-centric, too. It is important for UI/UX designers to imbibe and implement these best practices, as they can guide them on how to avoid missteps, and craft applications with superior user interfaces.

Ideaplunge is one of the leading UI/UX design studios in Bangalore, offering intuitive solutions to startups and Fortune 500 companies.

Have a UI/UX project on your mind? Write to us at talktous@ideaplunge.com

Credits:

Images Source – https://material.io/design/color/applying-color-to-ui.html

Leave a Reply

Your email address will not be published. Required fields are marked *