So what is Material Design?

Over the last year or so the popularity of flat design has grown rapidly and it looks set to stay put throughout 2015. However, there’s a new guy in town! Not quite as flat as flat design (in fact some may argue it’s skeuomorphic tendencies), Material Design is Google’s new design language and offers a richer approach to the flat interfaces we’re currently seeing – it’s flat design grown up!

Unveiled by Google in June 2014, Material Design retains many of the same aesthetic principles as flat design – bold colours, large imagery and clean, minimal lines. However, ‘Material’ goes much further than this – subtle gradients; lighting and shadows offer depth that we don’t achieve by following the flat guidelines alone. Interfaces are layered, design components are flexible (often grid based) and animation is used a-plenty.

Unlike Flat, Material aims to retain touches of the physical world and utilise the principles of good design teamed with the magical possibilities of technology and science.

Speech marks left

Unlike real paper, our digital material can expand and reform intelligently. Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch.

Speech marks right

Matias Duarte

You can read up on Google’s new design spec. and principles. It’s pretty ‘waffly’ and skirts very close to flat design at times but it’s worth a read. The main principles include; ‘Material is the metaphor’, ‘Bold, graphic, intentional’ and ‘Motion provides meaning’. Essentially, using a digital form of tactile design to ensure graphics feel touchable, ensuring visual hierarchy is established. Motion comes into play within Google’s material design – “serving to focus attention and maintain continuity”.

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.