Rethinking design processes with Material Design
Your digital product’s user interface (UI) is critical to the product’s success. It is how the product communicates with users, and how users communicate with the product. Material Design is a Google-created system for UI design and development that incorporates the latest best practice design principles. Read on to find out what Material Design is, how it works, and how it benefits your product design process.
Table of contents
What is Material Design?
Originally launched in 2014, Material Design is a Google design system that makes it easier to create user-friendly, intuitive interfaces for your app, website, or platform. Material Design is inspired by the physical world, applying natural laws around lighting and motion, and encouraging designers to pay close attention to the impact of layout and visual language.
Material Design is based on open source code, is adaptable, and can be widely used across multiple environments, including iOS, Android, web, and Flutter - Google’s own app-building platform.
Basic principles of Material Design
Prior to 2014, the fashion industry was using flat elements in UI design (this, in itself, was a shift from the previous trend for more realistic 3D, real-world UI, and icon design). Google’s inspiration for Material Design was paper and ink. Avoiding the distractions of real-world UI, Material Design is two-dimensional in the same way as a sheet of paper – looked at head-on, paper (and whatever is written or drawn on it) appears very 2D but it can be layered, folded, cut, resized… and this is the principle behind Material Design. The elements appear two-dimensional but are treated like paper, for example, having a shadow beneath an otherwise flat-looking title bar.
What and who is Material Design for?
The purpose of Material Design was (and is) to support designers and developers to build responsive, usable and scalable apps – and to do so quickly. Material Design offers UI designers:
- Icon sets
- Google Fonts
- Design kits for Adobe, Sketch, and Figma
- Material Design templates & themes (including a theme-builder tool)
- Plus, ‘customizer tools’ that preserve best practice design principles while allowing brand customization of the materials in respect of colors, shapes, and typography.
Material design is much more than simply a set of components which can be combined in multiple ways – it’s fully customizable, allowing for full creative freedom while ensuring best-practice design.
Material Design ‘rules’
The key to the original version of Material Design is that “Material” is a metaphor. Material Design uses the material, physical world as inspiration for good, intuitive UI design. The rationale is that by applying the rules of the physical environment to the world of software, you’re ensuring users are experiencing something that is familiar to them.
The only downside of this principle and all the accompanying guidance on layout, how to use colors and fonts, etc. was that a certain style of app began to emerge. In other words, people complained that all apps looked the same.
That may not be literally true, but there was a certain style and appearance… and so, Google released Material Design 2 in 2018 which offered greater amounts of white space, use of bottom navigation bars, colorful icon sets, a dark mode option, and – possibly the most significant upgrade – a strong emphasis on accessible design.
The latest version is Material Design 3 (also known as Material You), unveiled in 2021. The freshly-upgraded Material Design takes a more user-centric approach, and emphasizes personalization accessibility while updating its intuitive, easy-to-use components, libraries, and guidelines.
On a more specific and practical level, all three versions of Material Design so far, there are certain basic design principles at work:
- Convey the idea of ‘material’ to the user – the visual design language should resemble the properties of the physical world.
- Shadows represent hierarchy – shadows add depth and layers.
- Bold colors – colors that are too similar can be unclear, whereas a bold and varied color palette speaks to the user intuitively. Usually, this means keeping it simple with a primary palette of three colors, with a single accent color.
- White space – in common with traditional print design and layouts, white space is a crucial tool for creating focus and visual sense for the user.
- Edge-to-edge images – full bleed, edge-to-edge images without margins have impact.
- Motion – simple motion or animation can be used to give the user feedback (e.g. you have successfully clicked a button). And, in line with the physical world metaphor, any motion should align with the laws of physics (no matter how ‘entertaining’ unreal motion might be!)
- Responsiveness – everything should be responsive, i.e. compatible and functional on any device.
Why use Material Design?
As a set of best practices and as a design system, Material Design offers a number of benefits:
- It is a trustworthy and consistent package of detailed guidance for digital product UI designers. There’s no need to invent or decide everything from scratch with such a detailed set of tried and tested recommendations and advice. Look at it this way, Material Design has effectively solved most basic issues around usability, legibility, and accessibility before you even begin.
- With its level of detail, Material Design can enhance the understanding of the user interface, including its key components and behaviors – it can also be used to assess and analyze existing UIs.
- Having started out as a system for Android apps, it inherently uses a mobile-first approach. Material Design encourages designers and developers to make every digital product responsive.
- Likewise, with Material Design, every app, website, and platform should be accessible.
- As a user-first approach to design, Material Design fits well with Agile frameworks of development, such as Scrum.
- Material Design is now sufficiently broad and flexible (and has such extensive documentation and support) that designers can produce best-practice products without completely sacrificing their own creativity.
Finally, Material Design, having answered all the fundamental UI design questions, means you can build digital products faster.
Should you use Material Design?
An easy-to-use, well-designed UI can make or break your product. When it comes to product design, Google Material Design was initially an obvious choice for Android-style apps. However, the design system’s evolution over the last few years has significantly broadened its appeal. And if you’re a fan of the old saying: “don’t reinvent the wheel”, then the idea of a comprehensive package of advice and guidance packed in the Google design system is something for you.
Share this article:
