Menu Search
Jump to the content X X

Playing With Color: Vibrant Options For Apps And Websites

Color is one of the most powerful tools in a designer’s toolkit. Color can draw attention, set a mood, and influence the user’s emotion, perception and actions. When it comes to the web and mobile app design, this is definitely a time of vibrant colors. Designers use vibrant colors to focus people’s attention on important elements and to make their designs memorable.

In this article, I’ll summarize a few popular techniques of using vibrant colors in web and mobile design. Also, if you’d like to get started designing and prototyping your own web and mobile experiences1, download Adobe XD.

Make Or Break A User’s Experience Link

All kinds of visual communication in your designs leave at least some kind of cumulative impression on users. Nevertheless, you still need to be careful not to exaggerate. Read more →2

Monotone Link

One of the most popular ways to use vibrant colors is with a monotone color palette. A monotone palette has a single color with a mixture of tints and tones. Such color palettes are visually stimulating. Paired with attention-grabbing typography, a monotone color scheme is able to create a really memorable experience.

3
Sydney Stockhom4 uses bold color to create a memorable look in a very simple way.
5
(Image: Pillow6) (View large version7)

Tip: Monotone is great for mobile apps. Using a single color with black and white accents is a great way to create visual interest on a small screen.

8
The color, iconography and simple typeface in the Streaks9 app creates a striking combination that is easy to read and engage with.

Duotone Link

As the name suggests, a duotone is made up of two colors. It could be two shades of the same color or two contrasting colors. This technique, once a print staple, has found new life online. Thanks to Spotify, duotones are growing in popularity every day.

10
Two-color photos have almost become a visual symbol of Spotify. (View large version11)

Create Emotions Link

Duotones enable you to inject any image with the emotional attributes of any color. Different colors evoke different emotions:

  • Soft and modest combinations of colors create a serious atmosphere. In Holm Marcher & Co12, shown below, every detail contributes to the businesslike atmosphere, and the background image is no exception.
    13
    The soft duotone effect sets a businesslike atmosphere. (Image: Holm Marcher & Co)
  • A combination of bright colors creates a sense of happiness. The main visual for New Deal Design14 is striking, thanks to the bold color choice. It creates a friendly atmosphere and sets a positive mood.
15
One intense image is worth a thousand words. (View large version16)

Improve Readability Link

A duotone can give text plenty of contrast. The color variation in an image is adjusted so that text can be shown in a single color almost anywhere on the image.

17
(Image: Method18) (View large version19)
20
(View large version21)

Translates Well on Mobile Link

Last but not least, while the duotone effect lends itself to large desktop images, it can work on mobile screens as well.

22
(Image: Ognjen Divljak23)

Tip: If you want to use a duotone for a hero image24, select a simple high-quality photo with a single, clear subject. A busy photograph with a lot of detail might be harder to interpret.

Gradient Link

Gradients have made their way back into modern user interfaces, this time as high-contrast complementary colors. Modern gradients can include multiple colors, can radiate from the center, and can come from a corner or fall horizontally.

They serve the following functions in user interfaces.

Create a Modern Look Link

Gradients have made a comeback and breathed new life into flat design. Paired with flat color palette, they can evoke a feeling of modernism.

25
By using one of the bright, saturated colors associated with material design, you can evoke a feeling of modernism. (View large version26) (Image credit: Ramotion27)

Improve Content Comprehension Link

Gradients can improve visual communication. The transition from orange to pink in Symodd’s example below gives depth and contrast to the interface, and it creates some eye-catching visual effects. The shift from light to dark follows the natural scanning patterns of the human eye, moving from the top left of the page to the bottom right.

28
Symodd’s home page features a full gradient background from orange to pink. It’s a subtle gradient; the two hues aren’t very different from each other, making this easy on the eyes. (View large version29)

Create a Pseudo 3D Effect Link

While the flat aesthetic is sleek and easy to look at, one potential shortcoming is that it lacks an element of realism. To compensate, designers often use gradients to give depth to their backgrounds. This will likely continue to grow as designers try to incorporate more realism and 3D elements into web design.

30
(Image: Swiss Army Man31) (View large version32)

Try a Gradient Accent Link

While gradients are often used as backgrounds for pages, they can work in smaller places as well. Consider using a gradient as an accent in navigation, for a secondary image or for specific types of content. Smaller areas of gradient give you more freedom to play with this technique. For example, you could create visually interesting pairs of multicolor, as Bloomberg33 does:

34
Bloomberg uses a gradient for the “Latest News” ticker. (View large version35)

Overlay Link

A color overlay is probably the most self-explanatory effect. And it is one of the most useful and commonly used effects in popular design. If you want to incorporate it in your design, all you need to do is cover an image or video with a semi-transparent colored box.

Trendy Look Link

By using one of the bright, saturated colors associated with material design36, you can evoke a feeling of modernism.

37
A color overlay enhances the impact of a photograph and enables the designer to modify tone and interpretation. (Image: Hype38)

Strongest Clickability Signifier Link

Consider using an image overlay for interactive card-style elements, for video content and for call-to-action buttons.

39
Apply hover animations to cards. (Image: Column Five40)

Focus User Attention Link

Overlay effects can focus users on certain design elements. However, when using a single color as an overlay, think about the degree of saturation and transparency of the color:

  • Heavy color combinations (i.e. less transparency and more saturation) put more focus on the color itself.
41
Studio Up uses less transparency and more saturation for its color overlay. (View large version42)
  • Light combinations put more focus on the image.
43
The color overlay used by Outlines puts more focus on the image. (Image: Outlines44) (View large version45)

Conclusion Link

Few design elements are more fun to play with than color. Color effects can be dramatic, impressive and even serene. You the designer really get to experiment when using color effects. Whether you are a fan of bright, bold hues or prefer a more minimalist black and white, the one thing to remember is that there are no wrong colors. What matters most is how you use them.

This article is part of the UX design series sponsored by Adobe. Adobe Experience Design CC (Beta) tool is made for a fast and fluid UX design process, as it lets you go from idea to prototype faster. Design, prototype and share46 — all in one app. You can check out more inspiring projects created with Adobe XD on Behance47, and also visit the Adobe XD blog48 to stay updated and informed.

(ms, vf, yk, al, il)

Footnotes Link

  1. 1 https://adobe.ly/2gvBAAr
  2. 2 https://www.smashingmagazine.com/2017/01/more-than-just-pretty-how-imagery-drives-user-experience/
  3. 3 https://www.smashingmagazine.com/wp-content/uploads/2017/08/1-Vibrant-Colors-For-Apps-And-Websites-800w-opt.png
  4. 4 https://sydneystockholm.com.au/
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2017/08/2-Vibrant-Colors-For-Apps-And-Websites-large-opt.png
  6. 6 https://neybox.com/pillow/
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2017/08/2-Vibrant-Colors-For-Apps-And-Websites-large-opt.png
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/08/3-Vibrant-Colors-For-Apps-And-Websites-preview-opt.png
  9. 9 https://streaksapp.com/
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2017/08/4-Vibrant-Colors-For-Apps-And-Websites-large-opt.png
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2017/08/4-Vibrant-Colors-For-Apps-And-Websites-large-opt.png
  12. 12 http://holmmarcher.dk/en/
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/08/5-Vibrant-Colors-For-Apps-And-Websites-800w-opt.png
  14. 14 https://newdealdesign.com/
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/08/6-Vibrant-Colors-For-Apps-And-Websites-large-opt.png
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/08/6-Vibrant-Colors-For-Apps-And-Websites-large-opt.png
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/08/7-Vibrant-Colors-For-Apps-And-Websites-large-opt.png
  18. 18 http://method.digital
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/08/7-Vibrant-Colors-For-Apps-And-Websites-large-opt.png
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2017/08/8-Vibrant-Colors-For-Apps-And-Websites-large-opt.png
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2017/08/8-Vibrant-Colors-For-Apps-And-Websites-large-opt.png
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/08/9-Vibrant-Colors-For-Apps-And-Websites-800w-opt.gif
  23. 23 https://dribbble.com/ogiogi
  24. 24 https://www.smashingmagazine.com/2017/06/designing-hero-images/
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2017/09/branding-trust-professionalism-large-opt.png
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2017/09/branding-trust-professionalism-large-opt.png
  27. 27 http://ramotion.com
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/08/11-Vibrant-Colors-For-Apps-And-Websites-large-opt.png
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2017/08/11-Vibrant-Colors-For-Apps-And-Websites-large-opt.png
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2017/08/12-Vibrant-Colors-For-Apps-And-Websites-large-opt.png
  31. 31 http://swissarmyman.com/
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2017/08/12-Vibrant-Colors-For-Apps-And-Websites-large-opt.png
  33. 33 https://www.bloomberg.com/europe
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2017/08/13-Vibrant-Colors-For-Apps-And-Websites-large-opt.png
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2017/08/13-Vibrant-Colors-For-Apps-And-Websites-large-opt.png
  36. 36 https://material.io/guidelines/style/color.html
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2017/08/14-Vibrant-Colors-For-Apps-And-Websites-800w-opt.png
  38. 38 https://thehypeagency.com/
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2017/08/16-Vibrant-Colors-For-Apps-And-Websites-800w-opt.gif
  40. 40 https://www.columnfivemedia.com/
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/2017/08/17-Vibrant-Colors-For-Apps-And-Websites-large-opt.png
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2017/08/17-Vibrant-Colors-For-Apps-And-Websites-large-opt.png
  43. 43 https://www.smashingmagazine.com/wp-content/uploads/2017/08/18-Vibrant-Colors-For-Apps-And-Websites-large-opt.png
  44. 44 http://outlines.pt/
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2017/08/18-Vibrant-Colors-For-Apps-And-Websites-large-opt.png
  46. 46 https://adobe.ly/2gvBAAr
  47. 47 https://www.behance.net/galleries/adobe/5/Experience-Design-(Beta)
  48. 48 https://blogs.adobe.com/creativecloud/category/xd/

↑ Back to top Tweet itShare on Facebook

Nick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests.

  1. 1

    Thanks for your insights. How do you think color trends will change or evolve in the future?

    4
    • 2

      Hey, J Schmidt. Thanks a lot for your comment!

      I think we’ll see more content-focussed experiences. In content-focussed design content and color/contrast are used together (color is used to empathize content). Designers will use more vibrant hues both as a primary color and as accents to make design more visually interesting.

      2
  2. 3

    Rodrigo Sanchez

    October 4, 2017 5:58 pm

    One thing that I would consider with this is visual contrast/accessibility. I find a lot of designers don’t take this into account. Not necessarily because they don’t care but because they don’t know.

    Here is a good write-up from the Accessibility (a11y) Project. http://a11yproject.com/posts/what-is-color-contrast/

    1

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top