5 Colour Tips
To Enhance Your
UI Design
Hey there Designer, have you ever wanted to start a Design Project for a client and after having back and forth meetings, organising the structure with wireframes, you jump straight into Figma or Adobe XD and you get stuck on colors??
I mean colors???
This could be so frustrasting at times for a designer but don’t worry guys, I am here to help! With my experience and research I have been able to develop 5 ways to help with solving the color problem.
Choosing the proper color is important in every design. The color you choose is just as significant as the image or text you employ. Because colors have various individual emotions, it is the color that draws the eye.
- Understand Brand Colours:
When designing for clients the first thing you try to understand their brand colours. You can get this from the client’s existing logos. This single idea can solve half of your problems because you can draw up inspiration and keep uniformity when designing the product. This is also key in branding because it helps customers recognize the company which make them feel safe.
2. Understand Mood of App/Design
If you are dealing with a client who has no logo probably because they are just starting their company then you understand the mood the client has in mind for the brand or app. Various colors represent various feelings or emotions. To help you get more insight please visit Color Meanings. Interviewing the client would be very vital in this process, to understand the feeling the brand chooses emit or stand for.
3. Use Colour Palette Generators
This combined with any of the previous 2 ideas is a really easy way get inspiration on colors. This helps generate colors that really harmonize with the clients colors (which could save you alot of time in trying to blend colors). I use the following to generate palletes on the go. They are Color Hunt (NB: Use colors to search as tags in the search bar) & Coolors.
4. Use Color Wheel
If you have been in the design space for a while you would have heard about the Color Wheel. Let me help break it down. A color wheel is an illustrative tool used to help us define colors and their relationships to one another, the first one was invented in 1666 by Sir Issac Newton and several variations have been used since then. Hats off to Sir Issac Newton, such a smart guy. But thanks to guys like him, you don’t need to create one, you can just select some of the various Color Wheel Schemes and use e.g Complementary, Analogous, Triadic etc. This is to be an alternative to the Color Pallete and could be use when you Understand the Brand color or the mood of the app. Adobe has a nice tool for this.
5. Use 60–30–10 Rule
This is most important step in this process. This little mathematical formula can turn you to a Super Star. To have a color balance is your upmost priority so that users can sense harmony when using your app.
60% to Primary Colour: Sometimes serves as background colour which most time’s would be slightly white or slightly black for dark mode).
30% to the Secondary Colour: This comes from your colors we get from brand colors and color palettes. A good use for widgets, banners and components.
10% to the Accent colour: These can be used in very few parts of the apps for things like buttons or hover effects. Remember the balance is so that we don’t use to many colors, which could spoil the designs.
Lets recap once more so that we are sure these ideas are stuck!
- Understand Brand Colours
- Understand Mood of App/Design (Substitute for № 1)
- Use Colour Palette Generators
- Use Colour Wheel (Substitute for № 3)
- Use 60–30–10 Rule
To know more about me and my works, please visit my portfolio.
Now go out there and save the world with your colors and designs!
