7 Important Colour Rules for UI Design
Many Internet users aren’t conscious of the role User Interface (UI) design plays in their online experience.
Despite this, UI design is undoubtedly one of the most critical factors in making a website accessible.
Designers aren’t only required to put together an aesthetically pleasing layout. They also need to provide a backdrop that allows people to navigate a website with ease.
In essence, to be both stylish and functional.
A big part of this comes down to the colour palette , which sets the visual “mood” that a user will experience.
The colour combinations a UI designer uses depend upon various factors, including the specific brand they’re working with.
There are differing opinions of colour rules in UI design, but there are some universally applicable basic principles agreed on by all designers .
This article takes a closer look at the seven essential colour rules for UI design.
It’s an excellent guide for anyone who needs a deeper understanding of the impact of colour and the way it’s used to enhance a user experience .
1 – Organise Colours—Avoid Chaos
One of the essential rules of UI design is this:
Don’t use too many colours and know how to use the ones you do choose.
One piece of advice for designers is to use an interface inventory to stock how many colours you’re working with and how they combine.
Internet users assess websites fast. Research has shown that people evaluate online products within 90 seconds , and most are influenced subconsciously by the colours used.
UI design must be harmonious when it comes to colour combinations and the contrast between them. That means text versus background as well.
For example, bright yellow text on a white background will be hard to read, just like a bright green logo on a blue background will fade into obscurity.
To avoid chaos, you can divide your choices into complementary and analogous UI colour schemes.
For this, you’ll need a sound knowledge of colour theory .
Complementary colour schemes are based on the interplay of warm and cool complementary colours.
Using colours opposite each other on the wheel creates a pleasing contrast and helps the eye focus on a specific point.
In contrast, analogous colour schemes make use of colours grouped closely together on the wheel. Their variety comes from the brightness and saturation shifts rather than intense contrast.
When creating a UI design, stick with one or the other scheme throughout. This creates uniformity, which is an element that enhances the user experience.
If too many colour schemes are in use, the result becomes confusing, and users aren’t sure where to look first. It’s also hard to highlight essential features as they’re all fighting for attention.
Consider a site like the Van Gogh Museum . To ensure the user experience is pleasant, they’ve used complementary colours for maximum effect.
The artist’s paintings are showcased at their best, and the information provided is clear and easy to distinguish.
2 – Match Colour Combos With Brand Personality
A large part of colour usage in UI design is understanding the impact of different colours on users’ psyche.
Warm colours – red, orange, brown – evoke different emotions than cold colours – blue, green.
Different cultural backgrounds influence a person’s emotional reaction to different colours.
For example, red elicits happiness and comfort and is also interpreted as aggressive or passionate.
The brand informs a UI designer’s colour rules behind the website. Each brand’s logo design conjures specific emotions in its target market.
The importance of understanding a brand’s personality is impossible to understate.
Research has shown that brand recognition increases by 80% when appropriate colours are utilised.
Consider some of the world’s most famous logos and the colours used .
MacDonald’s Golden Arches are the colour of sunshine and happiness, and their red branding is warm and comforting. All of these are traits the brand personality associates with.
On the other end of the spectrum, we have Microsoft’s blue logo. Blue has connotations of security, reliability and trust, and these positive associations are exactly what the brand wants to convey.
By using colours that evoke a specific emotion, the user experience is already halfway there. UI design isn’t just creating pretty pictures; it’s about evoking a response and making the user feel something.
If you feel happy or safe when looking at a logo, branding or website design, you’ll feel more inclined to browse or buy the product than if it left you feeling uncomfortable or unsure.
The use of colour rules also extends to contrast and shades, tones and tints. Each plays a role in creating a clean, easy to navigate user interface.
Strong contrasts encourage the user to concentrate on a specific area, while lighter contrasts reduce the feeling of intensity and create feelings of relaxation.
A focal brand image is ideal for heavy contrast, but the subsequent brand information must be easy and comforting to read.
Shades, tones and tints trigger visual cues in users and push the brain towards drawing conclusions.
Shadows can enhance main design elements and make them an instant focal point while changing tones and tints guide users through their journey.
Think of an ombre effect. The visual gradient draws the eye from darkest to light and creates a path that’s followed instinctively. This evokes the emotion of seeing the journey from start to finish and keeps users engaged as they scroll.
3 – Obey The 6:3:1 Colour Rules
In UI design, balancing colours is fine art rather than an individual’s taste.
The 6:3:1 rule (the “Golden Rule”) originated in interior design and is a way of determining the ideal mix of colours to use.
The gist of 6:3:1 is that 60% of the colour is your most prominent/dominant colour, 30% is a secondary colour, and 10% accent colour.
The dominant colour is often neutral (white or grey, for example), and the secondary colour provides a pleasing contrast.
When you’re working with a brand, the 30% should be a secondary brand colour, while 10%, the accent colour, is a primary brand colour.
Amazon is an excellent example of a brand that’s done this right.
They use white as their background colour = 60%
Blue for the footer and header = 30%
Yellow for buttons and ratings = 10%
By obeying the Golden Rule , they’ve made it easy for users to absorb large amounts of information without feeling overwhelmed or confused.
As they sell a vast array of products, they need a design that moves seamlessly from one category to the next on all size screens.
4 – Stay Minimalist
UI design, like interior design, benefits from minimalism.
The vast majority of big brands make use of at least one easily identifiable colour. Great examples of this include Coca-Cola, Ikea, and Lego.
Using too many colours results in a visually overwhelming design and also detracts from the brand logo itself.
Even if you’re working with a very colourful brand colour palette, using neutral colours is beneficial; it makes the logo pop.
Brands that successfully use over one primary colour are Google and Burger King , but the way they use these colours is critical.
The designs are unfussy and straightforward and don’t confuse or overwhelm the user.
Plus, the wording is distinctive and stands out, as the contrast ratio is carefully planned.
There is plenty of space between each letter, and the font is perfectly legible too.
5 – Perfect And Limit Interactive And Denotative Colours
Online, “interactive” colours show users when they can interact with the interface. For example, a link or button that you can click on.
When designing a website, it’s best practice to stick to one colour to indicate an interactive element. This ensures users quickly become familiar with what a colour means and the resultant action.
If all your buttons or links are the same colour, your site becomes easier to navigate, and users feel comfortable as they know what action their actions will trigger.
Imagine the reverse—a site filled with buttons in different colours.
The user will feel confused by what’s expected of them and whether their actions will have the same result each time.
“Denotative” refers to the meaning of different colours in the context of the relevant brand. For example, if your brand’s dominant colour is red, like Coca-Cola, stick with red as a cheerful colour.
That means no red error messages. For this brand, red means positive.
The flip side of this is that when you’re using colour to indicate something positive (such as a “Thank you for contacting us” screen), it’s perfectly fine for that to match a primary brand colour.
The use of light and shade is also helpful in reinforcing the concept of interactive and denotative colour rules.
Different shades can convey various states, such as when you press a button, it turns a darker shade, or when you hover over a specific section, it lightens in colour.
Tying this into a brand is easy. You can work within the existing colour spectrum and lighten or darken the hue according to the user’s action.
6 – Make Colour Accessible For All Users
Accessibility is an essential buzzword in web design . And we don’t just mean making sure a site is online and indexed.
It’s all very well to design a beautiful page, but if your colour choices exclude some users, you’ve missed the mark.
Colour-blind people and others with visual impairment also spend time online—and the ultimate goal of UI is to ensure a pleasant browsing experience.
One goal of UI design is to reduce cognitive load. This means creating an interface requiring the least possible mental processing, allowing users to focus on content rather than hunting around looking for another page or element.
Creating an evenly spaced layout is the first step towards reducing cognitive load. Using a wireframing tool allows you to design a site that considers both user needs and user journeys. This reduces the chance of visual clutter.
The next step is to use a colour palette that’s simple and unrestrictive.
The discerning use of colour should facilitate easy navigation of a page or site.
When designing an accessible interface, there are tools like Colblindor.com, which give you an idea of what those with colour blindness can see.
Also, a screen reader can struggle to pick up the light text on a light background or dark text on a dark background.
Becoming familiar with accessibility issues and how colour ties in is a crucial component of UI design.
Websites with greater accessibility attract more traffic and user interactions, both of which are positive attributes for any brand .
7 – Use What Works – Take Inspiration From Nature
This probably isn’t a hard and fast rule as much as a helpful suggestion.
Nature knows how to be beautiful without any exceptional effort.
If you have a basic understanding of colour theory and know your colour wheel, taking a minute to analyse a natural scene will reveal how many colours can coexist harmoniously.
Even if a brand has no connection to the outdoors, you can discover complementary colours in nature.
Natural colours have a great feel to them, and this enhances UX.
If you think about the Evian logo, it utilises natural colours and natural design. The BP logo is another excellent example, as it combines shades of green and yellow inspired by nature.
If you consider these logos, you’ll also see that nature has a symmetry that’s almost always pleasing to the eye.
Incorporating nature-inspired elements into a design automatically improves UI design, as nature instinctively follows a logical format.
Above all else…
Like UX, UI design is both an art and a science. It demands a creative eye that appreciates colour and a scientific understanding of our instinctive reactions to different hues.
There are a few non-negotiables with colour rules in UI design – consistency, harmony and simplicity being the most important—and several principles which serve as a foundation for a successful and pleasing interface.
Understanding and using these colour rules is essential for a user-friendly interface.
