The Underestimated Power Of Color In Mobile App Design

by

Sponsored ArticleThe Underestimated Power Of Color In Mobile App Design

Color is arguably the second most important aspect of your app, after functionality. The human to computer interaction is heavily based on interacting with graphical UI elements, and color plays a critical role in this interaction. It helps users see and interpret your app’s content, interact with the correct elements, and understand actions. Every app has a color scheme, and it uses the primary colors for its main areas.

When designing a new app, it’s often difficult to decide on a color scheme that works well, as there are an infinite number of possible color combinations out there. In this article, we’ll go over the most important points related to color in apps. We’ll cover traditional color scheme patterns (monochrome, analogous, complementary), custom color combinations that aren’t based strictly on any one pattern, and we’ll also learn how to choose colors and contrasts for your app that support usability. If you’d like to hone your own color usage skills, you can download and test Adobe XD1for free, and get started right away.

Further Reading on SmashingMag: Link

How To Select An Effective Color Scheme Link

When creating a color scheme there are many factors to consider, including brand colors and color associations for your region.

How Many Colors?Link

Keeping your color combinations simple will help you improve the user experience6. A simple color scheme isn’t overwhelming to the eye and makes your content easier to understand. Conversely, having too many colors in too many places is an easy way to mess up a design.

A University of Toronto study7 on how people used Adobe Color CC8 revealed that most people preferred simple color combinations that relied on only two to three colors.

How To Create a SchemeLink

So, how do you choose those two or three colors? The color wheel can help.

9
The twelve-spoke color wheel is an important tool in creating color schemes. (Large preview10)

There are a number of predefined color scheme standards that make creating new schemes easier, especially for beginners.

MonochromaticLink

Monochromatic schemes are the simplest color schemes to create, as each color is taken from the same base color. Monochromatic colors go well together, producing a soothing effect.

11
Monochromatic colors are a single color, and its tints, shades, and tones. (Large preview12)

The monochromatic scheme is very easy on the eyes, especially with blue or green hues.

13
Image credit: Adobe Color CC36282314. (Large preview15)
16
Image credit: Louis Saville17

As you can see, the scheme looks clean and elegant.

AnalogousLink

Analogous color schemes are created from related colors that don’t stand out from one another; one color is used as a dominant color while others are used to enrich the scheme.

18
Analogous schemes are created by using three colors that are next to each other on the 12-spoke color wheel. (Large preview19)

While this scheme is relatively easy to pull off, the trick is in deciding which vibrancy of color to use, as it will be exaggerated. For example, Clear20, a gesture-driven21 to-do app, uses the analogous colors to visually prioritize current set of tasks.

22
Image credit: Adobe Color CC36282314. (Large preview24)
25
The default color scheme in Clear is reminiscent of a heat map, where the hotter items are displayed in bright red.

While Calm26, a meditation app, uses the analogous colors blue and green to help users feel relaxed and peaceful.

27
Image credit: Adobe Color CC36282314. (Large preview29)
30
Calm 31uses analogous colors to establish an overall mood.

ComplementaryLink

Colors aren’t always at odds with each other; complementary colors are opposite colors.

32
Complementary colors are opposite of each other on the color wheel. (Large preview33)

They contrast strongly, and they can be used to attract the viewer’s attention. When using a complementary scheme, it is important to choose a dominant color and use its complementary color for accents. For example, when the human eye sees an object full of different hues of greens, a bit of red is going to stand out very well.

34
Using complementary colors is the easiest way to make something to stand out.

However, you have to use complementary colors carefully to keep your content from being visually jarring.

Custom Color SchemeLink

Creating your own color schemes is not as complicated as many people think. Adding a bright accent color into an otherwise neutral palette is one of the easiest color schemes to create, and it’s also one of the most visually striking.

35
Adding one color to a grayscale design draws the eye simply and effectively. Image credit: Adobe Color CC36282314. (Large preview37)

White canvases and cool gray copy, splashed with accents of blue, make up the Dropbox color scheme.

38
Image credit: Dropbox39 (Large preview40)

Adobe Color CC Makes Your Life Easier Link

Adobe Color CC41, previously known as Kuler, makes color selection extremely easy. Every color on the palette can be individually modified or chosen as the base color with a few simple clicks.

42
Under each color, the export codes are provided (including hexadecimal). (Large preview43)
44

Palettes can be saved and added directly to a library. In addition, there are a number of great color schemes created by the community available on the site.

45
Large preview46

Check it out, so you don’t need to start from scratch.

The Impact Of Color Contrast Link

Typically, a colored object or area on a UI is not displayed in isolation, but is adjacent to or superimposed on another colored object or area. This creates contrast effects. Contrast is how one color stands apart from another. Properly used, it reduces eyestrain and focuses user attention by clearly dividing elements on a screen.

47
High contrast is when colors easily stand apart from each other. Low contrast is when they don’t. (Large preview48)

Contrast and Text ReadabilityLink

Color contrast is one area where color theory is crucial to the usability of a design. Designers often like to use low contrast techniques because low contrast makes things look beautiful and harmonious. However, beautiful isn’t always the best for readability. When you’re using colors in text, be aware that placing two colors with low-value contrast next to each other can make your copy very difficult to read. This is especially true on mobile screens, where users are often on devices outdoors or in bright places that cause screen glare.

49
These lines of text are difficult to read against their background colors.

Make sure you have a fair amount of contrast between elements. It’s really not that hard — all you need to do is to check the contrast ratio. Contrast ratios represent how different a color is from another color (commonly written as 1:1 or 21:1). The higher the difference between the two numbers in the ratio, the greater the difference in relative luminance between the colors. The W3C50 recommends51 the following contrast ratios for body text and image text:

  • Small text should have a contrast ratio of at least 4.5:1 against its background.
  • Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.

This guideline also helps users with low vision, color blindness, or worsening vision see and read the text on your screen.

52
These lines of text follow the color contrast ratio recommendations and are legible against their background colors.

Icons or other critical elements should also use the above-recommended contrast ratios.

53
Left: Icons don’t follow the color contrast ratio recommendations. Right: Icons follow the color contrast ratio recommendations and are legible against their backgrounds. Image credit: Material Design54. (Large preview55)

There are several free tools available to give you meaningful feedback about the levels of contrast in your chosen palette. One of them is WebAIM’s Color Contrast Checker56 which let you test colors you have already chosen.

Contrast and User’s Attention Link

Along with establishing readable text, contrast can also draw the user’s attention towards specific elements on a screen. Generally, high-contrast is the best choice for important content or key elements. So, if you want users to see or click something, make it stand out! For example, users are much more likely to click a call-to-action button that strongly contrasts with its background.

57
Contrast makes the area look different than the rest of the screen.

Designing For Color Blindness Link

Have you thought about your app appears to users who have visual impairments?

When people talk about color blindness58, they usually refer to the inability of perceiving certain colors. Approximately 8% of men and 0.5% of women are affected by some form of color blindness. Red and green colors are a common problematic combination.

59
Colors, as seen with normal vision, and same colors, as seen with red-green color deficiency (Deuteranopia and Protanopia) (Large preview60)

Since colorblindness takes different forms (including red-green, blue-yellow, and monochromatic), it’s important to use multiple visual cues to communicate important states in your app. Never rely on a color solely to indicates system status. Instead, use elements such as strokes, indicators, patterns, texture, or text to describe actions and content.

Avocode lets you visually compare revisions of designs.

Also, Photoshop61 has really useful tools to help, and can simulate color blindness. This feature allows the designer to see what the app’s screen will look like to people with different types of color blindness.

62
Airbnb app login screen Image credit: Pinterest63. (Large preview64)

Conclusion Link

We’ve barely covered the fundamentals of how color theory can enhance your app UI design. Honing your color usage skills is an ongoing endeavor. If you want to learn how to create beautiful, functional color schemes, all it takes is practice, determination, and lots of user testing.

This article is part of the UX design series sponsored by Adobe. The newly introduced Experience Design app65 is made for a fast and fluid UX design process, creating interactive navigation prototypes, as well as testing and sharing them — all in one place.

You can check out more inspiring projects created with Adobe XD on Behance66, and also visit the Adobe XD blog to stay updated and informed. Adobe XD is being updated with new features frequently, and since it’s in public Beta, you can download and test it for free67.

(ms, aa, il)

Footnotes Link

  1. 1 https://adobe.ly/2iHmxQr
  2. 2 https://www.smashingmagazine.com/2017/01/how-functional-animation-helps-improve-user-experience/
  3. 3 https://www.smashingmagazine.com/2016/10/in-app-gestures-and-mobile-app-user-experience/
  4. 4 https://www.smashingmagazine.com/2016/12/best-practices-for-animated-progress-indicators/
  5. 5 https://www.smashingmagazine.com/2016/08/experience-design-essentials-animated-microinteractions-in-mobile-apps/
  6. 6 https://www.smashingmagazine.com/2010/10/what-is-user-experience-design-overview-tools-and-resources/
  7. 7 http://www.dgp.toronto.edu/~donovan/color/colorcomp.pdf
  8. 8 https://color.adobe.com/create/color-wheel/
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2017/01/1-large-opt.png
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2017/01/1-large-opt.png
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2017/01/2-large-opt.png
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/01/2-large-opt.png
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/01/3-large-opt.png
  14. 14 https://color.adobe.com/
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/01/3-large-opt.png
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/01/4-preview-opt.jpg
  17. 17 https://twitter.com/louis_saville
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/01/5-large-opt.png
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/01/5-large-opt.png
  20. 20 https://itunes.apple.com/en/app/clear-tasks-reminders-to-do/id493136154?mt=8
  21. 21 https://blogs.adobe.com/creativecloud/in-app-gestures-and-mobile-app-user-experience/
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/01/6-large-opt.png
  23. 23 https://color.adobe.com/
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2017/01/6-large-opt.png
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2017/01/7-preview-opt.jpg
  26. 26 http://www.calm.com/
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2017/01/8-large-opt.png
  28. 28 https://color.adobe.com/
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2017/01/8-large-opt.png
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2017/01/9-preview-opt.png
  31. 31 https://blogs.adobe.com/creativecloud/how-the-calm-app-uses-empathy-and-simplicity-to-connect-with-users/
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2017/01/10-large-opt.png
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2017/01/10-large-opt.png
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2017/01/11-preview-opt.png
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2017/01/12-large-opt-1.png
  36. 36 https://color.adobe.com/
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2017/01/12-large-opt-1.png
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2017/01/13-large-opt-1.png
  39. 39 https://blogs.dropbox.com/
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2017/01/13-large-opt-1.png
  41. 41 https://color.adobe.com/
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2017/01/14-large-opt-1.png
  43. 43 https://www.smashingmagazine.com/wp-content/uploads/2017/01/14-large-opt-1.png
  44. 44 https://www.smashingmagazine.com/wp-content/uploads/2017/01/15-preview-opt-1.png
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2017/01/16-large-opt.png
  46. 46 https://www.smashingmagazine.com/wp-content/uploads/2017/01/16-large-opt.png
  47. 47 https://www.smashingmagazine.com/wp-content/uploads/2017/01/17-large-opt-1.png
  48. 48 https://www.smashingmagazine.com/wp-content/uploads/2017/01/17-large-opt-1.png
  49. 49 https://www.smashingmagazine.com/wp-content/uploads/2017/01/18-preview-opt.jpg
  50. 50 http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
  51. 51 http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
  52. 52 https://www.smashingmagazine.com/wp-content/uploads/2017/01/19-preview-opt.jpg
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2017/01/20-large-opt.png
  54. 54 http://material.google.com/
  55. 55 https://www.smashingmagazine.com/wp-content/uploads/2017/01/20-large-opt.png
  56. 56 http://webaim.org/resources/contrastchecker/
  57. 57 https://www.smashingmagazine.com/wp-content/uploads/2017/01/21-preview-opt.png
  58. 58 https://en.wikipedia.org/wiki/Color_blindness#Dichromacy
  59. 59 https://www.smashingmagazine.com/wp-content/uploads/2017/01/22-large-opt.png
  60. 60 https://www.smashingmagazine.com/wp-content/uploads/2017/01/22-large-opt.png
  61. 61 http://www.adobe.com/accessibility/products/photoshop.html
  62. 62 https://www.smashingmagazine.com/wp-content/uploads/2017/01/24-preview-opt.png
  63. 63 https://ru.pinterest.com/pin/396457573423276783/
  64. 64 https://www.smashingmagazine.com/wp-content/uploads/2017/01/24-preview-opt.png
  65. 65 https://adobe.ly/2iHmxQr
  66. 66 http://adobe.ly/1U9LS0E
  67. 67 https://adobe.ly/2iHmxQr

↑ Back to topTweet itShare on Facebook

Leave a Reply

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