Mobile design is growing in quality for sure. I must say that the one big thing that is taking over the mobile design scene is colour. Colour hasn’t been popular in mobile design as people were playing it safe and therefore the underutilizing colour. However, that is changing – thankfully – as colour is becoming a big component of mobile design and deserves to be called a trend all on its own.
What’s up with colour?
Colour can be very fun, flattering and helpful – that is exactly what makes it amazing. Colour is a wonderful design element and a crucial tool that should not be feared but embraced.
Unlike a desktop monitor, mobile devices have small screen which is very limiting; you just don’t have as much freedom as you do on a desktop. Using colour in a mobile design is not much different, but it is more important. A person who is using a mobile device is most likely on the go and their attention span is much worse due to the enormous variety of distractions; this where colour can help you get their attention back. on top of that, colour can help you achieve certain emotions, get the user to go specific places or help get your message across.
Just because you throw a bunch of colour at someone it doesn’t mean that they will now be very focused on your design. In order for colour to be used as a tool it has to be used right as colour is a delicate thing. Just like with any other design element, it too has to be well executed for it to work its magic. Too much or too little colour and the user doesn’t see it; it has to be just right. So, I have decided to go over a few ways that show you how colour is being used in mobile design and how you should be using it too.
Colour as accent
I’m sure you’ve seen accent colours in all sorts of designs such as interior, print and, of course, web. Accent colours should be used to guide the user, point stuff out to them – make them aware of things – and help them get around. The best way to do this in mobile design is through big, bold and beautiful colours as they catch people’s attention.
Take a look at the two examples below, first is the Lovely app for apartment seekers. On this page you can clearly see the call button – you just cannot miss it! That wouldn’t have been possible without its orange colour; a user who isn’t paying much attention will definitely see that button.
Same goes for the blue button on the second example; you are bound to notice these bright blue buttons. The best part about those two buttons is that because they stand out from everything else they also tell you what to do; in this case they tell you to call or to add.
Colour as a statement
Making a big statement in design is easy – just do something wild. But why would someone want to make such a statement? The answer is simple, to grab attention, as most of the time the statement is “LOOK AT ME”. Once again, this is a beautiful and awesome way to grab a distracter user’s attention and, most importantly, to keep it. With colour, this is most often done with either big bold coloured typography or a background colour – just like in the examples below. As a designer, I love when there is a bold element incorporated – it makes the whole design grand and amazing.
Please do not tell me that the big red or bold green backgrounds do not scream at you to look at your phone, and to pay attention? Enough said.
Colour and emotions
I’m sure you know that colours and emotions go hand in hand. Red is closely knit to love and danger while blue is more of a trusting, relaxing and soothing colour. Additionally, lack of colours such as white, grays and black also evoke emotions of solitude, dullness and elegance. Colours can be very powerful when used in a strategic way. Basically, well paired colour combinations and usage set the tone and experience of the interface.
If you take a look at the foollious website it is very elegant. Compared to the white background, the green atop grabs your attention and adds a bit of a fun and glamorous touch to the site. Without that green, this wouldn’t have been possible. Without the white background (okay and the whitespace too) the design wouldn’t look as high end or sleek either.
Colour as customization
Whether this is an app or a responsive website, when using certain UI elements, they will often times appear with its default OS design. Designers are really taking a stab at making OS UI elements such as a navigation bar or drop downs look as they are part of and custom made for that particular design. After all, they are custom and should look as such. This custom look is easily achieved by manipulating the details of the UI elements such as colour, texture and font. Additionally, making your own UI parts like your own home icon or triangle for the drop downs helps make the UI that much more awesome. Those types of changes are what make the customization look brilliant and well done and they cannot be achieved without clever use of colour.
Take a look at the two examples below. Both of them have a typical top bar navigation. But, both of those bars don’t look anything like the default OS design. They match the rest of the design which is why they look stunning and perfect to the remainder of the design. Why? Because they were literally made for each other.
In the end
I’m sure you knew how greatly colour can affect a design. What I want you to take away from this post is that colour has been much underrated in mobile design and that it is a marvelous tool in our kits that should never be underutilized. What makes colour amazing is that, in all honestly, it makes things pretty. Colour helps us enjoy what we are looking at and makes things fun and – most importantly – better. Until recently, mobile designs have been keeping things safe by using very little colour. What I would love to see is designers taking a stand in their work like they do with any other type of design and show the rest of us how great mobile design can be with the help of colours.