Material Design

Google announced Material Design at Google I/O on June 25, 2014. This announcement was a bold step toward a more unified and modern approach to design in the Android ecosystem. Material Design, according to the Material Design Spec, is “a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science.” What does this mean? This post explores what Material Design is, why it is important, and how to get started designing and developing with Material Design.

What is Material Design?

Material Design is focused around “material metaphors,” which are tactile and reminiscent of real objects, but also utilize technology and imagination. Practically, what this means is that material elements are displayed as objects, such as cards or paper, in a 3D world. Material Design utilizes elevation and shadows to emulate the real world and indicate that materials are tactile objects that interact meaningfully.

“Material is the Metaphor”

Material Design also utilizes “meaningful and appropriate” motion and actions to describe the intentions of objects and provide a unified experience that is similar to what users are used to in the physical world. Animations should be controlled and intentional, and they should generally occur as a result of user interaction.

Another key part of Material Design is the use of bold colors and graphics to guide visual interactions and create a meaningful hierarchy and structure. These colors and imagery do not simply exist for aesthetic reasons; they exist to emphasize user actions and provide familiarity to the user while navigating through the app.

Bold colors guide interactions (Pocket Casts for Android)

Why Material Design?

Though Material Design is not a requirement for building Android apps, there are many reasons you should consider adhering to its principles and guidelines. For one, it provides a consistent user experience across the Android Platform. If most of the apps a user downloads and uses are designed within the constraints of Material Design, the user’s experience will be more seamless and intuitive. The use of layers, shadows, bold colors, meaningful motion, and the other Material Design principles results in a focus on user actions and continuity across the Android ecosystem, and the result is increased user engagement and a better overall experience.

In addition, Material Design apps and layouts are built to be adaptive and responsive. The use of full-width imagery, consistent margins, and legible typography creates layouts that scale and adapt to any screen size. The Material Design Spec has a specific section on Responsive UI that outlines the 12-column grid layout system used in Material Design. According to that guide, “This grid creates visual consistency between layouts, while allowing flexibility across a wide variety of designs.” Using a grid system with various screen size breakpoints is a common practice in responsive design, and it allows designers and developers to create apps that look great and function well on a variety of different devices.

If you want your app to be successful on Google Play, Material Design is a very powerful guideline. Google provides a book, The Secrets to App Success on Google Play, which includes a full chapter on Material Design. This book emphasizes “visuals that both surprise and enlighten your users in equal measure.” Surprise and delight go a long way toward app success. Using Material Design ensures that your app behaves in a consistent manner with other apps, but it also provides you with the freedom to innovate and delight your users. If your goal is to succeed in the Play Store, and to perhaps have your app featured by Google, Material Design is a key factor in that success.

How do I get started?

There are many resources and guides to get started with Material Design:

· The Material Design Spec is a great guide that includes a ton of information about Material Design and its motivations and uses.

· Google also provides Material icons that are completely free to use.

· Material Palette is a wonderful way to build a color palette for your app that meets the Material Design Spec.

· MaterialUp provides Material Design inspiration and resources for anyone who is looking to implement Material Design.

If you’re looking to build a new mobile app or responsive mobile website, Gloto can help. Our engineers are best-in-class, and we know how to balance the needs of desktop and mobile users. Reach out today for a custom quote.