{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

Some of the best web and mobile app designs have a very limited colour range. Two or three colours can be more than enough, and I find that a restrained approach to colour works especially well on de-cluttered interfaces. 

The use of colour in design is a bit like great music, where balance, contrast, restraint and dissonance all come into play. I picked out monochrome and hypercolour as two of my 18 web design trends for 2014, but perhaps trichromatic design is where it's really at?  

For trichromatic design it is often the case that there is a 'main' colour, an 'active' colour, and a 'highlight' colour. A limited palette goes further when you reverse out the colours in certain areas (menus, or buttons, for example).

I wanted to highlight some examples of mobile interfaces that primarily focus on two or three colours, along with plenty of white (or otherwise neutral) space, and a lack of unnecessary clutter. In other words: minimal design. Less is more.

So let's take a look at a few examples. I don't claim to have used all of these apps and sites, and one or two are concepts, so the focus here is on the look and feel, rather than the user experience. Click on the images to see more in-depth or full size screenshots.

Paratt

This is a very clean, very content-focused mobile interface, which allows product imagery and logos to inject more colour into the overall look and feel.

Help Make It

This donation-focused app uses a blend of black, white and peppermint, alongside distinctive typography.

Anhanguera

Anhanguera’s brand colours are reflected throughout its mobile site. It regularly inverts these three core colours, to mix things up for the user.

Fashion Adviser

This Fashion Adviser app designer also knows that various shades of grey work a treat alongside hot pink.

Guide 

This app uses its third colour as a kind of navigational anchor for the eye. 

SnelTrein

One of the nicer travel apps that I've seen. 

PrivatBank

Icons are proving increasingly popular. Ultra-obvious icons don't require any labels, and are better still.  

Bitcoin app

An interface design for a Bitcoin app, by Karol Ortyl. Clean, strident typography, and a good example of reversing out colours.  

Pawwholla

Very clean and very flat, though the colours aren't to my taste.

 

The Corner

How's this for minimal? The monochrome, type-driven approach may be too stark for some, but I like it. It looks fit for purpose...

Peek Calendar

"The calendar, humanized" is the strapline. This certainly appears to be a rather elegant way of expanding content on a mobile device, and isn't something I've seen before.

DNB

This mobile app design from DNB uses three main colours to establish a compelling visual experience for users. This makes good use of limited screen estate, with clear navigation prompting the user into action.

Swing

Swing is a concept for a music app that has embraced flat design. No visual clutter. Lots of black, white and red, with images once again used to add colour.

Target

Target’s in-store mobile app relies on three main colours, and is very big on iconography, a trend in modern web design.

Fantasy League App

Really crisp typography, plenty of space, and another example of trichromatic design. Top work by Brian Waddington.

Airwala

Bajinder Singh has created a beautiful design for this travel app. Typography is design.

Outfit Of The Day

This fashion app is big on iconography and a subtle colour palette, allowing the high quality imagery to stand out.

MenuSpring

Here's another design from London-based Ben Dunn, this time for a good-looking app aimed at restaurants.

Coffee App

Man, I've been waiting for something like this for years. Skinny, lightly-coloured fonts against a dark background can provide poor contrast, but the full size screenshots look better.

Unvit

An easy-on-the-eye app for connecting up multiple social networks. Icons, plenty of space, and shades rather than mutliple colours.

I hope these examples hit the spot if you're working on ideas, interfaces, colour schemes or typography. Check out these other examples of mobile design inspiration, if you'd like some more UI candy.

If you have thoughts and observations about this kind of mobile design then do leave a comment below.

Our Festival of Marketing event in November is a two day celebration of the modern marketing industry, featuring speakers from brands including LEGO, Tesco, Barclays, FT.com and more. 

Chris Lake

Published 19 February, 2014 by Chris Lake

Chris Lake is CEO at EmpiricalProof, and former Director of Content at Econsultancy. Follow him on Twitter, Google+ or connect via Linkedin.

582 more posts from this author

Comments (16)

Comment
No-profile-pic
Save or Cancel
Avatar-blank-50x50

Maxim Y

20 stunning examples of UI dribbblisation

over 2 years ago

Avatar-blank-50x50

Liz

Thanks for putting this together. I am curious as to why Parrat was used as the headline example, or even included in this list at all, when the others are in a completely different league?

I love the hot pink on greys and how the peppermint works with the black. Mobile and tablet screens render vibrant colours so well but the challenge I have come across is if you use those vibrant colours for your app it is hard to carry them through to other media which brings its own challenges when it comes to having a consistent brand ID.

over 2 years ago

Avatar-blank-50x50

Leigh

Nice examples. Never been a fan of too many colours for interface design; three is ample.

over 2 years ago

Avatar-blank-50x50

Ben Read

Thanks for this article - some really nice examples there. 8 )

over 2 years ago

Avatar-blank-50x50

hemant kumar, marketer at elitewebzone.com

excellent work,nice wordings, thanks for such a article.

over 2 years ago

Avatar-blank-50x50

Travel Marketers

Great article and impressive designs :-)

Minimalistic, Simplistic is good as long as you have the right Call to Action Tabs to achieve what you are trying to achieve. To make it as simple as possible for the user on their Mobile. If its conversion of any sort we have a max 3 clicks rule on SmartPhones. One company we know does it really well in the Travel vertical is Expedia.

over 2 years ago

Avatar-blank-50x50

Nathan

as a Windows Phone user, i looked up some of these in the Windows Phone store.
Naturally, very few could be found. But one that could be found, the DNB app, is very interesting.
Looking at the implemented UI for the WP app (http://www.windowsphone.com/en-us/store/app/dnb/37c871a6-7ad6-43c7-974a-acb51b041fff) I am very disappointed in the differences in what is shown in this page and what they did for the WP app.
While I enjoy the UI design language for WP over others, the image on this page for it is also very tile-like but the WP app uses a different style that I think is far inferior. I honestly don't know why they didn't just use the same UI/UX. It would have worked. Instead, we get some sub-par, inferior version. It could have been a marvel of good UI/UX for WP as well...
Figures.

over 2 years ago

Sarah Alder

Sarah Alder, Managing Director at Cranmore Digital Consulting Ltd

I want that coffee app and of course I can't get it in UK on Android. So all the good design ideas have been blown out of my head by the idea that in NY they have an app to order coffee. You blew my Friday morning, Chris!

over 2 years ago

Chris Lake

Chris Lake, CEO at Empirical Proof

@Liz - Paratt is the most text-heavy of all of these examples, which makes life a little more difficult if you have a 'minimal' brief. But I think it looks good, and the colour choices work nicely.

@Nathan - Such are the challenges with designing across multiple platforms and gazillions of devices! I think it's still relatively early days, and in the years to come there will be a move towards a singular user / customer experience.

@Sarah - I hear you! I'm sure that kind of app will arrive in the UK before too long.

over 2 years ago

Avatar-blank-50x50

David Jarvis aka DJ, Business Director, London at cxpartners

You guys need to brush up on your terminology.

UI design ≠ Visual design.

Perhaps you should take some of your own training courses :)

over 2 years ago

Chris Lake

Chris Lake, CEO at Empirical Proof

@David - I hear what you're saying, as this post does focus heavily on colour, but I'm also looking at the interfaces themselves. Not in massive detail, admittedly, but my point is that a minimal approach to colour, clutter and functionality can help people to quickly grasp how to use these apps and websites. I didn't simply pick these examples because they're pretty to look at.

over 2 years ago

Avatar-blank-50x50

Recruitment Consultant

Your research about the apps on mobiles which concentrated on the user interface and the looks of the apps are very impressive.

about 2 years ago

Avatar-blank-50x50

Rodrex Matthew

The examples given here are really cool. Almost all UI designs show that flat-looking UI design is the current trend for website designing. And this effect looks great if the proper color combination is used. This list of the designs gives an idea to graphic designers which can be helpful for them.

about 2 years ago

Avatar-blank-50x50

Anmol Dubey, Personal at Personal

Really nice examples, i did found one more which looked pretty nice: https://play.google.com/store/apps/details?id=com.azoora.com.incardashboardrc1

Their product page for this app is also very nice: http://www.azoora.com/apps/in-car-dashboard

Have Fun

almost 2 years ago

Avatar-blank-50x50

shumaila butt, Worker at 46300

Web designing is a process of designing the electronic files through planning, concepts, ideas, creativity, thinking, language etc, which is delivered via internet in the form of web site. The main purpose of the web designing is to create a web site. Web site interprets the information about particular topic and website design is creation and arrangement of web pages that can be done by web development that includes but not limited to; Web Development, eCommerce, CMS, Content Management System, shopping Cart, Business Website Design, Flash Website design, business development.
http://jicstech.com/home/

over 1 year ago

Usman Anwar

Usman Anwar, Manager at Logo Gulf

The examples are really nice and exquisite.

The minimal UI design is about to get lot more common thanks to the material design by Google that brings a lot of unique design elements and animation. I believe the material design will be a popular trend by the end of 2015 since material design also follows the best practices of ui design, as concluded from the following article.

http://www.logogulf.ae/blog/creating-an-intuitive-mobile-app-ui-design/

about 1 year ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.