Being focused on this design journey for a while, I can now surely say that every designer should go through the basics of design. Not with the intention of “get to know everything”, but for the sake of purity of the design skill. I once had the phase which belonged to nowhere but starting on this journey and being consistent helped me enough to discover the secrecies of the design psychology.
So I recently studied the color theory using various books, online video lectures and blogs which made me create a template for all the beginners out there to learn from and follow when starting. This template could be used to remind oneself about the color playing a major role in design projects. In this blog, I’ll go through some of my learnings and the resources for UI design to follow. If you find this piece worth sharing, let it be done!
Color owns much of a design which can speak for itself. This does not mean that the main focus of the project should be color only. 40–30–30 rule must be followed when going through a design project containing text, colors and graphics.
While designing any project, a designer must focus 40% on the colors over the whole project, 30% on text in the project (typeface and colors) and 30% on the elements being used (context of the element). This makes a design perfectly usable and easy on the eyes for the consumers.
You can go through the design palettes in the slides provided based on which UI design base are also created for reference. This is to showcase how a palette suits the design if applied in any project. Below given is an example:
As per the color theory, this could be well said that most people are not aware of the colors they are using. These are the top three reasons why your colors suck:
- Using too many colors
- Too much saturation
- Not enough contrast
Using too many colors
This is mostly the biggest reason which results in poor design content. You can witness the same from the image above, which is a part of one of the biggest design fails in the past.
Preventing large number of colors in a design project makes it more accessible and easy on eyes.
Too much saturation
This image might just have taken your senses down. Do not regret criticizing about the vibrating colors (colors which seem to be vibrating when placed beside each other).
Too much saturation makes it hard to place your eyes on and even harder to shift your focus away from it (even when I am writing this blog!). Having proper fit between Hue and Saturation makes the color pleasing and more attractive, ultimately increasing the quality of the product.
Not enough contrast
Not having enough contrast, often creates a dissonance when working with textual content over colored background. To create more attractive products, designers often end up with the issue of “fonts not clearly visible”.
WCAG guidelines are used professionally for contrasting text with the background being used.
4.5:1 is a must ratio between text: background contrast.
You can use this tool in Figma named — “Contrast” to check and fix the contrast of the elements being used.
Following this guideline makes your design more accessible and easy on eyes.
Conclusion
Color is a major part of any design which can either make it or when excessively used, break it to the core. Go through my slides for a better understanding about the color theory and design inspiration for UI products.
Good luck with your journey. Hope you excel in this design world!✨