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

Below you’ll find some practical techniques on using vibrant colors in your design.

Monotone

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

Vibrant Colors For Apps and Sites | picture

Sydneystockhom uses bold color to create a memorable look in a very simple way.

Tip: Use of a single color with black and white accents is a great way to create visual interest on a small screen.
Vibrant Colors For Apps and Sites | picture

The color, iconography and simple type in Streaks app creates a striking combination that are easy to read and engage with.

Duotone

Duotone is a halftone reproduction of an image that brings out its middle tones and highlights. The technique that was once a print staple has found new life online. Duotones are visually interesting and fairly easy to create. You can create the effect using Adobe Photoshop and a two-color gradient.

Vibrant Colors For Apps and Sites | picture

Soft duotone effect set a businesslike atmosphere. Credits: Holm Marcher & Co

While duotone effects lend themselves to large desktop images, they can work in smaller mobile screens as well.

Tips:

    • Use duotone to create a dominant image. Select simple high-quailty photos with a single, clear subject. Busy photographs with a lot of details may be obscured.
Vibrant Colors For Apps and Sites | picture

One highly intensive images that are worth a thousand words. Credits: Spotify

  • Pick colors that reflect the mood of the photo. Remeber, that different colors evoke different emotions.
  • You design a website and want to create a duotone effect for your image you can do it without any modifications of existing image. Simply use Colofilter.css to apply the effect in CSS code.

Overlay

One way to use color to make a statement is with a design that incorporates a color overlay. You simpy cover an image or video with a semi-transparent colored box. By using one of the bright, saturated colors associated with Material Design, you can evoke feelings of modernism.

Vibrant Colors For Apps and Sites | picture

Color overlays enhance the impact of a photograph, and allow designers to modify the tone the interpretation. Credits: Hype

Consider using image overlay for card-style elements, for video content or to emphasize calls to action.

Vibrant Colors For Apps and Sites | picture

Apply hover animations to the cards. Credits: Column Five

Tip: When using a single color as an overlay, think about the degree of saturation and transparency of the color:

  • Heavier color combinations (less transparency and more saturation) put more focus on the color itself than the image behind it.
  • Lighter color combinations put more focus on the image.

Conclusion

It’s hard to find a design technique that’s 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 you need to remember:

There are no wrong colors. What matters most is how to use them.


About the Author
Nick Babich is a software developer and author of a blog dedicated to usability

Main image credit: Venngage




Try tools for creators by the Icons8 team:

Icons8

Icons8, a library of about 130K+ icons and clip art images

Offline app icons8

Offline app and plugins to drag’n’drop icons and clip art to any design tools

Moose

Moose, the big collection of high-quality stock photos

illustrations

Ouch! , a library of vector illustrations and collages

Background Remover

Background Remover, AI-based online tool for removing background from any photo

Mega Creator

Mega Creator, online tool for creating visual content from pre-made elements

Fugue

Fugue, royalty free music for videos of any kind

Lunacy

Lunacy, free graphic design software with built-in design resources

Smart Upscaler

Smart Upscaler, image upscaler to enlarge and enhance images using AI

Generated Photos

Generated Photos, unique, worry-free model photos generated by AI

Also, get the lists of free vector software and free photo editing software.
pinterest linkedin VK reddit