Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to Improve the UI Design of an App Easily If You’ve Already Coded It

Color is an essential instrument in design.

People make a subconscious judgment about a person, environment, or product within 90 seconds of initial viewing and between 62% and 90% of that assessment is based on color alone.
Source. CCICOLOR — Institute for Color Research

Despite the fact that color is generally seen as an aesthetic decision made by designers, it actually generates a great emotional and cognitive impact on users. At the same time, it impacts the way users perceive a brand, a product, and even a view in an application.

Color is also the easiest element to remember when looking at new things. The concepts of color psychology can be applied in user interface design, branding, products and marketing.

How do you apply this easily, fast, and correctly to UI design? These are the steps:

1. Apply the “60–30–10 rule” to the colors of your app

If you’ve already programmed the app, you have probably already chosen one or two dominant Colors for your interface. With one or two colors in use you can apply the 60–30–10 rule.

The 60–30–10 rule is a theory for making color palettes that are aesthetically pleasing and adequately balanced. It consists of a color, a neutral one, being used in 60% of the interface. An additional supplementary color in another 30% and then a third one to accentuate the remaining 10% of the design.

You don’t need to think about it too much since there are many websites that can suggest color palettes following this rule.

Check out the two links below where this rule is applied and that show various palettes ready for use.

Canva Color Palette

  • Color Hunt - Color Palettes for Designers and Artists
  • Flat UI Colors 2 - 14 Color Palettes, 280 colors 🎨

2. Follow “color theory” for all buttons, pictures, links, header and footer in the app

Color theory is a body of practical guidance to color mixing and the visual effects of a specific color combination. There are also definitions (or categories) of colors based on the color wheel: primary colors, secondary colors, and tertiary colors. Although color theory principles first appeared in the writings of Leone Battista Alberti (c. 1435) and the notebooks of Leonardo da Vinci (c. 1490), a tradition of “color theory” began in the 18th century, initially within a partisan controversy over Isaac Newton’s theory of color (Opticks, 1704) and the nature of primary colors. From there it developed as an independent artistic tradition with only superficial reference to colorimetry and vision science.
Source. Wikipedia

Color theory is one of the oldest concepts about color that comes from the Renaissance period and you can apply it today.

There are many ways to use it. My recommendations are:

  • If you want to display general information, it is better to do it in the simplest of ways: detect one or the two most predominant colors in the application and look for their complementary colors, so that the entire application has greater contrast and highlights.
  • If you want to display sensitive information, it is better to use supplementary colors, since these colors are softer and are better received in the brain.
Color Theory Poster for reference by chrysanthos

3. Use “color psychology” for the right color-emotion associations

There is research that shows light and color can affect our mood, sleep, heart rate, and even our well-being.

Color Psychology: How Colors Influence You — https://healthpositiveinfo.com/color-psychology.html

Considering that there are so many color mixing possibilities, it is difficult to determine which one will have the most influence on a website or app. Fortunately, there are a few tricks on how color affects users’ attitudes and behavior.

You can visit the Canva’s color meaning website for more information.

4. Pick the colors in your app according to the age of your audience

There are thorough studies on this topic. I’ll summarize them here, so you can focus on taking the information most relevant to your needs.

  • Depending on the culture of a place, colors can be perceived differently at a certain age.
  • Most younger people prefer colors closest to the end of the color spectrum, such as purple or blue.
  • Most older people prefer colors closest to the top of the spectrum, such as yellow, orange, or red.
  • There are studies that show that groups of people of a certain age, between 61–70 and 71–90 years, perform tasks on screens with several colors more slowly than young people…So, do not show too many colors to older people.

Scott Desing Inc. created a huge up-to-date infographic summarizing the research’s results.

5. Use colors in your app according to the gender of your audience

For color usage based on gender, a huge number of studies have been conducted and the results thoroughly reported. I’ll summarize them here, so you can focus on taking the information most relevant to your needs.

  • Women
    Love: Blue, Purple, Green
    Hate: Orange, Brown, Grey
  • Men
    Love: Blue, Green, Black
    Hate: Brown, Orange, Purple

The pink vs blue idea of ​​girls vs boys is a great myth that was discarded by a BBC publication where the author breaks down the social conditioning that this generates, discovering that blue is the most popular color among both men and women.

For more information, Martech created an outstanding infographic breaking down colour preferences — including things like saturation, pairings and psychological associations — between genders.

Would you like to know more? Do you need our help? Contact Us!
www.quadiontech.com


How to Improve the UI Design of an App Easily If You’ve Already Coded It was originally published in Quadion Technologies on Medium, where people are continuing the conversation by highlighting and responding to this story.



This post first appeared on Quadion Technologies, please read the originial post: here

Share the post

How to Improve the UI Design of an App Easily If You’ve Already Coded It

×

Subscribe to Quadion Technologies

Get updates delivered right to your inbox!

Thank you for your subscription

×