The Power of Colour in App Design
Colour could be the single most important aspect of your app other then functionality. It not only gives Uses a sense of place but also forms a key part of how the app feels, providing the platform for the User Experience. It can define your app in a crowded market.
Colour forms a key part of Google's Material design approach
This is having a huge influence on future app design.
As taken from Google Material Design Principles:
Bold, graphic, intentional
The foundational elements of print-based design — typography, grids, space, scale, color, and use of imagery — guide visual treatments. These elements do far more than please the eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create a bold and graphic interface that immerse the user in the experience. Colour is the key component here because it's Bold, Graphic and Intentional.
More then a Design Trend
There has been a surge lately in using colour in app design, with Material Design and Flat Design trends helping to promote this approach.
The hipster trend of going completely zen and using black-and-white has also ran it’s course. Every app starts looking the same. People also want the emotion that colour brings but in a simple, clear way.
The new Google Marketing App Primer uses colour so prominently that it really stands out not only in the App but in the on-boarding stage. You can see how important they value this on-boarding page by the level of detail they go to in getting the colours and composition just right. All their great illustration snippets build on the colour by taking on the pallette.
One of the most popular App in Brazil (#1 in Education) now is a quiz game to help students pass their college exam G1 Enem App. This App goes maybe a step further then Google Primer in that is narrows in on colour to not only help identify the app amongst a growing list of games in this area- but also aims to simplfy. This builds on the who idea of the app, to provide easy fun learning on while the go.
Decide on a main colour range
By limiting the App to one main colour range, in this case Red, you automaticlly give your users a strong sense of place. This enhances the user experience in the way of branding, simplicity and a dynamic learning aesthetic.
In this screen to the left users view their progress amongst 4 main areas of expertise. Overlaying simple graphs is simple on a colour range like this.
Extending the main choice of colour to main categories helps further define each area of the App. Icons can be large and purposeful, like performance gauges and badges. It also forces you to design in a simple clear way.
Choose your palette wisely
A graet place to start and get you familuar with suitable scren colours is Flat UI and Material Colour palettes. A great tool for choosing your palette.
It's important to match the brand to the kind of app you're creating. For the quiz app the red colours are appropriate because it's about speed, knowledge, and passion for the subject. The red promotes a sense of movement and action. With a countdown timer for each question it’s not a place for contemplation, it's all go.
Context is extremely important. Red also can mean stop of a warning signal so it’s important to match the colour to the context of your app.
Designing for colour helps you lead with a design that places emphasis on shapes and bold forms. This makes your job as a designer so much easier as you're not wasting time crafting amazing icons or design elements. Not that there’s anythign wrong with that but for apps which are task based it makes sense to keep the design simple and straightforward.
It's interesting to see how much emphasis Google Material Design places on using colour.
Historically Google did not place much importance to colour within apps or services. It was always a white background with minimal colour tints on icons. Now with Material design it makes a massive turnaround and respect for not only visual aesthetics but aesthetics in general, as more sense are invovled now with the tactile feel of material design.
Material design will do more for colour then the last major design era of the 60's and 70's. Our screens are now such a dominant area of our lives. With the push and ease of implementation of Material Design there will be a huge transformation of colour and aesthetics on our screens to help define these new digital places.
Google now has a dedicated space for colour in Material Design and have published colour swatches for Illustrator and Photoshop.
Some helpful ways to think about
using colour
Think about the context of your app
What kind of activity does your app promote?
What is the personality of your app? try and be more then one dimensional, make it interesting and relect this in your colour choices
Study the meaning behind colours, each colour can have both a positive and negative connotation so you need to know what these are and match them to your app
Think about visual aesthetics and colour but also aesthetics as a whole, this drives meaning and conncetion as we are designing for people first and foremost.
