In our last post, we discussed Google’s new ‘Material design’ philosophy for both Lollipop and future generations of Android. Material design establishes rules and theories for how visual environments in Android should be composed. Each visual element is treated as ‘material’ and thus must be designed with specific properties, dimensionality, and spatiality in mind. In short, this means an aesthetic that looks flat, but feels 3D. In concrete terms, this means flat and colourful shapes, regular spacing, depth and shadow, lots of readable white space and new transition animations. Today I’m going to talk about how these changes affect the way we design things (such as icons) within the ‘launcher’ environment, with the help of a few examples.
I’ve spoken to a number of people who previously used third-party launchers and customisation packs on KitKat, but actually dropped these in favour of the vanilla Lollipop launcher. Obviously, people are still going to use custom icons. But what material design has done is to lay down some ground rules that icon designers can work within – in order to maximise the end-user experience and help create a more unified Android ‘ecosystem’. As Google outline in the lengthy ‘Icons’ page of the material design spec, “while each product icon is visually distinct, all product icons for a given brand should be unified through concept and execution.” Therefore it’s important to look at the ways in which we can create icons that are innovative but consistent within Google’s new guidelines.
Although in a higher resolution, therefore being bigger than would usually be necessary for the average Android device, Dtalfonso’s icon set (pictured above) is a good example of Lollipop icons that fit within the material design ethos. We see the use of multiple shadows and directional lighting to give the images a sense of depth, but a clear feeling of uniformity and separation through the use of flatness. This ultimately gives the icons the sense of dimensionality that Google are aiming for as outlined in their icon proposal: “Product icon design is inspired by the tactile and physical quality of material. Each icon is cut, folded, and lit as paper would be, but represented by simple graphic elements. The quality of the material is sturdy, with clean folds and crisp edges. The matte-like finish interacts with light through subtle highlights and consistent shadows.”
Material design also introduces new ‘colour palettes’, which can be found here. They outline their principles for colour as so:
“[Colour] is inspired by bold [colour] statements juxtaposed with muted environments, taking cues from contemporary architecture, road signs, pavement marking tape, and sports courts. Emphasize bold shadows and highlights. Introduce unexpected and vibrant [colours].”
Each palette “starts with primary [colours] and fills in the spectrum”, and this is easily visible in the icons above. Pay attention to how the colours in each icon fit together, even if there are many of them – they fit together very well for a reason. Even small differences count in Lollipop, and with colour being particularly important in this iteration, researching the new palettes is a must.
Hopefully this will clear up the general principles Google want icon designers to move toward. With this in mind, it is vital to read their guidelines and specifications for design and interpret them in your own way. In the next post in the Lollipop series, I’ll be talking how this all fits in within app design itself.