enquiries@dvt.co.uk |  +44 203 848 9470
Insights

Trends and insights making an impact in your digital transformation journey

Exploring colour in UI design
Lebogang Lebyane
UI Designer at DVT

Exploring colour in UI design


As a UI designer, I have had the privilege of witnessing weird and wonderful client comments, especially these classic and timeless ones. “Dear, *insert designers name*. Thanks so much for the latest round of designs. Really coming together nicely. Few points of feedback: *Insert long list of changes*”. That is by far my all-time favourite, and until this day I sometimes feel like I’m being punked when a client approves a piece of creative without any suggestions. It just doesn’t feel right. But I digress.


A few years ago I was part of a team tasked with presenting low fidelity (grey scale) wireframes to a large corporate client and we were going around the room introducing ourselves and sharing our roles and responsibilities. A time came for the UI team to introduce themselves and the client turned, looked at us and said “Oh so you are the guys responsible for colouring this thing in?” We giggled and continued with the introductions but that comment lingered in my brain for years.



Image credit: coloringcorruptions


Is a UI designer’s role really just to colour in wireframes? In oversimplified terms yes you could say that UI designers do colour in wireframes. There's a lot more to UI than just “colouring in” but I won’t get into that right now. If you would like to read up on UI design click here. Let’s ignore all the other hats a UI designer has to wear and only focus on the notion of “colouring in”.


Isaac Newton was one of the first humans to play around with colour, using sunlight and prisms (Photoshop wasn’t around back then). He found that clear white light was composed of seven visible colours, the colours we see in a rainbow. By doing this Newton paved the path for the likes of Johann Wolfgang von Goethe and all those who came after him including myself, to experiment with colour in a “scientific” manner.



Image credit: Granger


Goethe challenged Newton’s views on colour, arguing that colour was not simply a scientific measurement, but a subjective experience perceived differently by each viewer. His contribution was the first systematic study on the psychological effects of colour. Goethe’s views were widely adopted by artists around the world.


In visual arts, colour is the soul of everything, birthed to life by the artist into a canvas. Colour is power, actually. It can change the mood of the image in the blink of an eye. It can encourage, warn, appeal, frighten, highlight and persuade. It can support the words or vice versa – steal their power. It can share an emotion without anything being said. It can become a great weapon in the hand of a master.


In the sphere of UI design on the other hand, colour is one of the key steps to efficient results. It is actually a multi-functional and diverse tool able to fulfil several needs simultaneously. Unfortunately, humans don’t all interpret colour the same way. We somehow don’t share the exact same colour vision experience. Because the human eye and brain work together to translate light into colour, each of us sees colours differently. Your blue can be slightly bluer than someone else’s. However, sometimes differences in colour vision are tragic.



Image credit: Harry Quan


According to Colour Blind Awareness, approximately 338 million people in the world suffer from some kind of colour vision deficiency. Depending on the seriousness of the deficiency, humans can go from not seeing colour clearly, getting colours mixed up, not being able to differentiate between certain colours or lose the ability to distinguish colours at all.


Every kind of colour blindness makes it difficult for a user to have a great experience. At worst, colour blind people will not be able to use a product at all. This will upset a lot of users and a business will lose potential clients too. To avoid this, UI designers need to consider only a couple of simple rules when designing interfaces.


It is important to understand that colour blind people see the same colourful picture as the rest of us. Despite an inability to see some colours, colour blind people distinguish shades even better than average. Creating sufficient contrast between elements is an effective way of designing for accessibility. By catching the user’s attention and attracting them to particular elements supports quick and intuitive navigation and usability of the page or screen.


As much as colour is the soul of everything, one needs to understand that it doesn’t have unlimited powers. You shouldn’t expect it to solve all of your problems. However, when implemented correctly and paired carefully with considered layout, good typography, captions, iconography and so on, colour is able to beautify UI and improve UX.


Creating interfaces is not just about pure creativity. It is all about providing users with the product that will heal their pain and make their life simpler. So, in the perspective of colour choices and usage in UI, a designer should always remember that the interface should be highly usable, clear and accessible. There is never a universal solution or a one-size-fits-all solution to colour usage in UI design, so go forth, experiment, and colour in those wireframes.


Useful links

https://colorable.jxnblk.com
https://michelf.ca/projects/sim-daltonism/
https://www.awwwards.com/talk-escaping-convention-with-executive-creative-director-at-ueno-david-navarro.html
https://www.designyourway.net/blog/design/colors-and-contrast-in-user-interface-design/ https://blog.prototypr.io/how-to-use-color-in-ui-design-wisely-to-create-a-perfect-ui-interface-6e524bd023bc
https://medium.muz.li/designing-for-accessibility-the-colour-contrast-compliance-7d8902850ec7

Tagged under