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.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.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.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.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?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.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.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?Experiment, pick another colour, and continue to revise until you land on a palette that’s perfect for you.
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.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.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.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.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?