How Do I Use Material Design Tools

Introduced more than five years ago, Google's Material Design guidelines have become the signature look of their websites and app-based services. They're immediately recognizable as affiliated with Google, a boon for the company's branding.

Material Design has also been adopted by the wider design community and can now be found on websites and apps far outside of Google's native platforms (and even on competing platforms). Simplenote, for example, uses a Material Design aesthetic across its apps for desktop and mobile platforms. It's just one example of why Material Design is an excellent choice for a variety of design implementations.

Why use material design — Simplenote is one example of a Material Design-based interface that is used beyond Google's native platforms.

What Is Material Design?

Material Design was created by Google in 2014, based in part on the card-based layout utilized in Google Now. The nod to paper-based design styles differentiated it from the flat design style that was widely used at the time.

Like most design systems, Material Design was created to bring a unified user experience across various devices, platforms, and input methods. Similar to the way that Apple implemented flat design principles as their standard, Google used Material Design to ensure that, regardless of how users were accessing their products, they would have a consistent user experience.

The Material Design specification includes guidelines for everything: typography, grids, space, scale, color, and imagery. But Material Design goes a step further than just telling designers how to make things look. It enables designers to create intentional designs with hierarchy, meaning, and focus in their end result.

What is material design — Basil's card-based structure is heavily rooted in Material Design's layout guidelines.

Why Use Material Design?

As with any well-established design system, there are some major pros to using Material Design that designers should consider.

Material Design is effectively an entire design ecosystem, rather than just a set of style guidelines. If there's a potential design situation that exists, Material Design likely has a comprehensive set of rules for how to handle it. That includes complex use cases that are often overlooked by less comprehensive design systems. This can be very comforting for designers who want that kind of structure.

Google maintains Material Design and keeps extensive documentation for how to use and implement it. This kind of support and documentation can be lacking for many modern design systems.

Material design framework — Shrine uses a number of complex layouts, including card-based product pages.

Despite all this comprehensiveness and documentation, Material Design remains a fairly flexible design library. Within the guidelines, much of the specifics of how to implement the design are left entirely up to the designer.

More granular advantages for Material Design include things like subtle skeuomorphism, which sets it apart from flat design and makes it more intuitive for many users. Another user-friendly feature is that user feedback in the form of haptic feedback, subtle animations, and similar things are built into the guidelines. It has a very simplified sense of physics, too, which makes interactions more intuitive.

US-based full-time freelance UI designers wanted

Material Design was built on a mobile-first sensibility, which makes sense considering its original purpose was for designing Android apps. It also promotes animation in designs, both for user feedback and to hint at how different features function.

Finally, dark theme options have been made available, adding even more visual flexibility for designers. Originally, Material Design was very light and bright, which didn't work well with the aesthetics of some brands. The addition of a dark theme guideline fixes that issue.

Google material design patterns — Rally does a great job of implementing a dark Material Design theme.

Drawbacks of Using Material Design

While Material Design has very obvious pros, that doesn't mean there aren't cons that go along with using it.

First up, Material Design is immediately identifiable and is strongly associated with Google and, specifically, Android. While this isn't necessarily a bad thing for everyone, it's potentially a negative for some.

One big reason that it might be a negative is that it limits the effectiveness of other branding while using the design system. Yes, designers can incorporate logos, color palettes (within the Material Design guidelines), and other differentiating factors to support the brand identity, but a product following the Material Design specifications will almost always also be associated with Google.

Since motion and animation are promoted within the Material Design guidelines, sites or apps that don't incorporate it can seem to users as if they're missing something. People associate the motion characteristics of Material Design with the visual characteristics, which can leave designs without motion lacking.

Sure, one solution is to always incorporate motion in designs that follow the Material Design specs. But extensive animations can be very resource-heavy on mobile devices, resulting in higher data usage and faster battery depletion. It's a balancing act designers have to consider when working within the Material Design guidelines.

Beginners may find that the Material Design specification is more complicated and harder to implement than other styles like flat design. Because the Material Design system is so comprehensive, there are a lot more things to consider and adhere to than many new designers may be comfortable with.

Google material design components — Crane uses both light and dark themes to create a complex and aesthetically pleasing design.

Its comprehensiveness can also lead to some designers feeling constrained and unable to fully realize their own creativity. It can also stifle innovation, since virtually any design challenge has been planned for and solutions offered. While being helpful in many cases, this can prevent designers from taking new approaches to problems, while also limiting the number of new ideas that may occur.

There are also some usability issues in Material Design that can make websites and apps very user-unfriendly. One of the biggest issues is with the so-called "mystery meat" navigation encountered on many mobile design apps. Icons are often used in place of text, and while sometimes the icons are immediately recognizable and fairly usable, at other times they're not.

A circle to indicate "Home" is significantly harder to identify than the house icon that was previously used in most Android interfaces. This is a prime example of placing form over function, which is a holdover from Material Design's flat design roots.

And it's not just in the lower navigation bar. Material Design's preference for including circular floating action buttons is also a usability issue. These circular buttons only include space for an icon, with no assistive text included. And because icons can be so open to interpretation, in many cases, users are left questioning what these buttons actually do.

Google material design elements — Reply solves the floating navigation icon with a more detailed slideout menu that includes text labels.

Conclusion

If an app is being built primarily for the Android platform, then using Material Design is an easy choice. Because of Google's widespread adoption, any app based on Material Design principles is going to feel like a native app.

That said, there are plenty of other use cases outside of the Android platform where Material Design is a solid choice. As the design system matures even further, those situations are bound to increase. Designers should, at the very least, familiarize themselves with the guidelines so that they can determine for themselves when it's appropriate to use Material Design, and when other systems might be better suited.

• • •