Colour is among the most important instruments in a designer’s toolkit. It’s an important a part of the visible language that product designers use to speak with their viewers. Person interface colour can serve practical functions, equivalent to giving customers visible hints about the place they need to look subsequent after they scan a web page, however it may possibly additionally serve ornamental functions equivalent to conveying a selected temper.
On this article, I need to share 10 sensible tips about how to decide on colours and use them in your person interface design.
1. Use Model Colours as a Foundation for Your Colour Palette
Most manufacturers have a longtime palette of name colours. These colours are sometimes used within the model’s brand, print and promotional materials, on-line presence, and packaging. It’s price reusing model colours in UI design as a result of they make the UI look acquainted to folks acquainted with your model.
For instance, you would use a model’s major colour as a colour for practical components equivalent to call-to-action buttons. Discover how McDonald’s makes use of the variant of its iconic yellow colour for the Order Now and Obtain the App buttons on its web site:
If you wish to use a model colour as a ornamental ingredient, you would use it for the background. For instance, beneath, you possibly can see how Slack makes use of one in all its major colours (#4A154B) as a background colour for the touchdown web page. This purple reinforces Slack’s very sturdy visible id.
Tips on how to Create Your Personal Model-Based mostly Colour Scheme
You should use instruments like ColorBox by Lyft to create a ready-to-use person interface colour scheme out of your model colours. Outline Begin and Finish colours from the listing of your model colours, and let the system generate a scheme for you.
2. Take Inspiration From Nature
What must you do should you don’t have established model colours? You may take inspiration from nature. One benefit of the person interface colour schemes created from nature is that they’re well-balanced from the beginning. The method of making a colour scheme is simple— take an image of nature and use instruments like Adobe Extract Theme to extract colours from it.
3. Think about Colour Psychology
Completely different colours can imply various things, and other people unintentionally affiliate colours with all elements of their very own experiences. For instance, in western international locations, folks sometimes affiliate purple with power and hazard, whereas blue is mostly related to calm and rest.
Should you design a meditation app, utilizing purple as a major colour may be a foul concept. That’s why it’s necessary to recollect the specifics of the product and colour that means within the markets you intention to be in.
4. Keep Away From Pure Black Textual content
Pure black textual content (#000000) on white background (#FFFFFF) can simply trigger eye pressure when customers must learn textual content for extended intervals. This occurs as a result of pure black on a white background creates an excessive amount of luminance distinction and makes the attention work tougher. You may usually substitute pure black with darkish grey with none issues with the person interface colour scheme.
5. Restrict the Variety of Major Colours in Your Design System
Major colours (as we’re referring to them right here) are these most prevalent in your person interface. You may also see them referred to as “base colours”.
Utilizing too many major colours is among the vital errors that many UI designers make. Extra of all the pieces is unhealthy. Utilizing too many major colours within the UI is like sending many various indicators to your customers. Overuse of major colours will trigger customers to disregard the colours they see. It’s advisable you begin with a small variety of major colours–intention for one or two that completely signify your model.
Each time you assume that you simply want one other major or base colour, it’s best to cease your self and experiment with already current colours. It’s comparatively straightforward to create beautiful accents utilizing your major colours. All it is advisable do is combine the first colour with white (tint) or black (shade). For instance, beneath are a couple of accents of a major blue created utilizing Adobe Colour.
6. Outline Guidelines for Utilizing Particular person Colours
Colour can be utilized to information customers by way of the product and helps them perceive the that means of particular person components within the person interface. For instance, when customers be taught that textual content coloured in blue in your web site represents hyperlinks, they don’t have any issues discovering hyperlinks in your web site. However this works solely if you use colour constantly.
When you outline colours and their guidelines within the UI, it’s best to embody these guidelines in your product’s design tips and share the rules with all folks concerned in product design. It will improve the possibility that the workforce will observe the foundations when designing a product.
7. Guarantee Your Colours Are Accessible
Accessible design permits all customers to make use of your product, and colour performs an amazing position in creating accessible merchandise. Poor colour distinction is a standard accessibility situation of many person interfaces. It creates a horrible expertise for folks with visible impairment, making it tougher to differentiate data on the display.
You could consistently test colour distinction for textual content and icons in your UI. There are many instruments that may provide help to with that. WebAIM Distinction Verify is a instrument that can provide help to to make sure that your UI complies with the Internet Content material Accessibility Tips (WCAG).
When testing your UI, pay particular consideration to disabled states. A disabled state is often created with low distinction, creating unhealthy readability for displayed textual content and icons. WCAG requires not less than a 4.5:1 distinction for textual content and pictures of textual content, even for disabled states!
Learn up on colour accessibility tips with these tutorials:
8. Don’t Use Colour Alone to Talk System Standing
By no means use colour alone to speak system states equivalent to error, data, or success. Customers that suffer from visible impairment, equivalent to red-green colour blindness, will battle to grasp what’s taking place within the person interface just because they can’t distinguish the colours.
Whenever you present an error message, or a message a couple of profitable operation, all the time add an accompanying label and/or icon to assist customers perceive what’s taking place. Chrome DevTools presents instruments that can help you expertise your product the way in which folks with disabilities expertise it.
9. Take a look at Your Colour Scheme
You could be sure that the colours you select to make use of in your UI work harmoniously. Whereas it’s technically attainable to make use of automated instruments for testing your UI, it’s significantly better to conduct a handbook statement. Most designers have a skilled eye and may shortly inform when one thing doesn’t look appropriate. So it’s advisable to incorporate colour scheme testing as part of handbook QA actions that the workforce conducts earlier than releasing a product to the market.
When testing a person interface colour scheme, all the time test how your product’s colour scheme works below numerous lighting situations. A colour scheme usually appears to be like unhealthy when customers entry merchandise outdoors, in solar glare.
10. Conduct Interface Stock on a Common Foundation
The variety of colours utilized in a product will develop because the undertaking evolves. The extra colours you utilize, the tougher it will likely be to regulate how they’re used. That’s why it’s advisable to conduct an interface stock process not less than as soon as in the course of the launch cycle. This process permits you to categorize parts and kinds that make your product.
This can be a easy process; all it is advisable do is use a instrument that can inform you what number of distinctive fonts, colours, and parts are utilized in your UI.
Should you design an internet site, you need to use instruments like CSS Stats to see what number of distinctive colours you will have in your cascade fashion sheets (CSS). The following step is to grasp how these colours are used. Keep in mind that it is advisable perceive each the context of use and the variety of instances the colour is used. Should you be taught {that a} specific colour is used solely as soon as in your UI and is almost the identical as the colour used a number of instances, you may make the primary colour a replica and get rid of it.
Conclusion
Colour has an amazing affect on the notion of a product. Together with typography, visible movement, and spacing, colours create a basis upon which every product is constructed. Correctly chosen colours not solely enhance the product’s usability but additionally positively have an effect on person expertise.
However choosing the proper colours shouldn’t be a one-and-done exercise. You’ll seemingly iterate a couple of instances earlier than discovering a person interface colour palette that works nicely in your viewers. That’s why accumulating suggestions out of your customers and making adjustments primarily based on that suggestions is so necessary.
