Colour: when a design gets it right, you likely never notice it — but when it gets it wrong? It doesn’t matter if it’s an overly bright, eye-singeing background, or black text on a dark gray background, sub-par colour choices can ruin even the most functional app. Much like other aspects of design, colour isn’t just there to spice up an app. Colour can be a tool just like any other feature of the user experience.
The graphic design philosophy used to design an app — from the size of each element, to how it slides across the UI, to yes, the colour — impacts user behaviour. There’s a good reason why designers frequently spend the first months of a project agonising over colour palettes and not wireframes, after all.
Picking the perfect palette can be the difference between designing a meditation app that actually helps users relax and one that causes them to want to toss their phone at the wall. It’s the difference between a banking app that makes you nervous about checking your balance and one that can soothe your anxieties about when that next paycheck is coming in.
So how do you get it right — and what can you do to master colour in your design?
Graphic Design Philosophy: The Theory of Colour
Before getting into the thick of graphic design philosophy (and psychology!), it’s important to understand some basic principles of colour and design. While colour might not seem like an exceedingly complex subject, there’s a good reason why every art class begins not only with a lesson on how to use colour but how to make colour.
The basics — as explained by the colour wheel — are simple: primary colours (red, yellow, and blue) can be combined to create secondary colours (green, purple, and orange). Likewise, various fractions of white can be added to a colour to create tints, and black can be added to create shades.
Colours opposite from one another (like red and green, or blue and orange) are considered complementary. These colours contrast strongly, making them stand out when next to (or on top of) each other.
Colours that are next to each other are considered to be analogous. These colours have much lower contrast, meaning that they tend to not stand out as much when close together.
There’s nothing inherently “right” or “wrong” about colours with high or low contrast. Sometimes an application will call for bright colours that starkly contrast against one another. Other times, you’ll want something that’s a bit gentler. Generally, the more you want something to stand out, the more you should rely on contrasting colours.
The best way to get a feel for how colours go (and don’t go) together is to play around with them. Even if you aren’t working on a project right now, a quick spin of Adobe’s colour wheel might get your mind thinking about colour in a new way.
Swatches Of Emotion: Colour And Psychology
When you’re solidifying the graphic design philosophy behind your app, you can’t just be thinking about how things look — you have to think about how they feel. We’re not talking about haptic feedback, either. Ever since Johann Wolfgang Goethe studied the physiological effects of colour, we’ve been obsessed with using colour to produce physical and emotional effects.
Even today, colour takes centre stage in many brands’ philosophy of design. Healthcare, business, and government all tend to use blue, as it gives off a sense of trust and professionalism. Green is seen as a youthful colour that’s full of energy — and, of course, reflects a sense of environmentalism and closeness to nature. Red is energetic and impulsive, giving off the impression of speed, efficiency, and power. Every colour that we see (and certainly every colour that we intrinsically associate with certain brands) implies something, either directly or indirectly, that helps drive our perception of individual brands.
Think about the brands and symbols you recognise as being very color-centric. Apple, Wikipedia, and The New York Times all feature grayscale colors, symbolising a calm trustworthiness. These brands are viewed as balanced and reliable. Whole Foods, John Deere, and Starbucks all feature green shades in their logos, connecting nature and wholesomeness to their brand and their products.
Some colours even go beyond their brands, defining entire industries. Think about how many fast food or restaurant chains use red or yellow colour schemes, for example. These colours help trigger us mentally, placing us in a certain psychological place that primes us to purchase some sort of product.
While this is something that marketers figured out long ago, science justifies a lot of our mutual feelings about colour. Red, for example, has been found to make some people react faster and more forcefully to certain stimuli. It also can intimidate: researchers found that when test takers saw the colour red, their scores were worse.
Even stranger? The colour of a pill has a mild effect on how it works. Blue pills work best as sedatives, yellow works best as an antidepressant, and in all cases, bright colours work best. While this is likely just the placebo effect boosting our responses to active medication, the effect is strong enough for companies to consider it when producing new pharmaceuticals.
Now, we’re not saying that using a yellow-based colour scheme in your mood tracking app is going to make it effective as an antidepressant, but the colour palette you choose could reasonably have an impact on a user’s mood — so choose wisely.
Colour And Usability
Design isn’t just about looking pretty — it’s about functionality and usability, the two principles that are arguably the most important to any UX designer. If the UX isn’t smooth, it doesn’t matter how beautiful your chosen colour palette is, or how stunning your UI is. If a user can’t swipe through it efficiently, it’s not going to have any staying power.
But what does colour have to do with all of that?
Simple: colour is a tool that can help guide the eye. If you can use colour efficiently, you can guide a new user through your app without a lengthy tutorial, a series of complex videos, or even a single word. An intuitive UI uses colour to direct not just the user’s attention — but also their interactions with the entire experience.
Imagine, for a second, that you’re developing an app for a catering company that helps large organisations easily customise food orders. A potential customer downloads your app for the first time and opens it up. What do they see?
In the app, most of the menu items — including the background and any information boxes — are coloured in a muted, dulled palette of gray scale colours. The one exception is an orange-red box that says “order.” As the designer, you know that the number one thing users want to do when they’re using your app is painlessly set up their food order. Instead of hiding this feature deep in the app, or requiring them to scroll down page after page to get to it, you’re putting it front-and-centre. Not only that, but you’re drawing their eye to it immediately. Colour helps it stick out, and shows new users exactly where they need to go.
Likewise, we interact with color in various ways on a daily basis and build up certain social associations in our minds. Take a stoplight, for example: green means go, red means stop, and yellow means slow down (or it alerts us to something up ahead). By putting an important warning in yellow, or by using red to highlight something, you can powerfully convey a message that primes a user for their input.
That same logic can be used for more than just warning screens, however. Changing the colour of a button on your app that leads to in-app purchases can significantly impact conversion rates.
While it wasn’t inside of an app, HubSpot found that they could increase their conversion rate by 21% simply by making a button red instead of green. Now, this doesn’t mean you should change every in-app purchase button to a bright crimson, but there is an argument to be made here that colour can’t just be part of your philosophy of design: it has to be central to your entire app development philosophy.
Using Colour Wisely: A Philosophy Of Design And Accessibility
At Proto.io, accessibility is always at the forefront of our design philosophy. To be blunt, accessibility is something that must be baked into good design. If it’s not there, then the design simply isn’t very good.
Around 8% of men and .5% of women have some form of colour blindness. Contrary to popular thought, there isn’t a singular kind of colour blindness, but red/green colour blindness tends to be the most common. Someone suffering from this form of colour blindness will generally have trouble seeing variations of both red and green. While the severity of this form of colour blindness varies quite a bit, even mild red/green colour blindness can make using many apps virtually impossible.
Outside of colour blindness, nearsighted users often struggle to read text with low contrast unless they move the screen close to their face — something that can potentially break the usability of many apps.
The solution to both of these problems is fairly simple: avoid using non-contrasting colours when you’re displaying text on a background. While you can’t guarantee that everyone will be able to see your app the way you intend, if you’re using contrasting colours, you’ll at least be giving people an app they can use. Likewise, using high contrast colors will make text easier to read for everyone — even if they don’t have a vision problem.
Another option to increase accessibility is to offer swappable colour palettes in your app. While this isn’t an option for everyone, it can greatly boost the accessibility of your app. You could also allow users to change the colour of specific features. For example, you could have an option that changes your app’s accent colour, or the colour of the text throughout the app. While both of these options might take some control away from you, they will ensure your app is accessible to a wider audience.
If you’re still struggling to figure out how to integrate colour into your design philosophy in a way that doesn’t harm the accessibility of your app, we suggest checking out Google’s material design library.
Picking The Perfect Palette: Solidifying Your Design Philosophy
Even though it should be clear that there are some rules to follow when it comes to colour, it isn’t necessarily a science either. Colour is often about more abstract things, like feel. Even if your app isn’t trying to manifest some sort of emotion in a user, that doesn’t mean that it won’t. While finding the perfect palette isn’t a black and white endeavour, we do suggest starting with something grayscale.
Build a flat prototype of your app in a grayscale gradient and use that as your baseline. Take note of how it looks and feels: pass it along to your QA team, and see what they have to say. Is your onboarding process murky without colour? Are you drawing attention to the wrong parts of your app? With this feedback, design a few more prototypes, this time bringing in colour. Don’t rely on a singular palette. Instead, take a cue from Google’s material design website and play with a few of their swatches.
Send these revisions to QA, too. Don’t be afraid to A/B test them against each other (and against the original grayscale version). Make sure that you’re asking some hard questions about the colours you’re bringing into the fray. Are you using colour to guide the user’s eye in the app? Are you just throwing colour on the screen for the sake of adding a spark? Is colour distracting the user from getting to where they want to be going?
Don’t forget about user psychology or accessibility. If you are creating a travel app, do you really want everything to be bright red? If you are creating a healthcare app, should your background really be green? Do your colours contrast enough for text to be legible?
Good UX design takes all of these questions into account — after all, colour has a definitive impact on user behaviour and enjoyment. If your design philosophy isn’t taking this into account, you could be making an app that isn’t as accessible or useable as you think it is. Make sure you’re prototyping your design every step of the way, and don’t get too hung-up on one or two colours.
Experiment, pick another colour, and continue to revise until you land on a palette that’s perfect for you.
