Material Design

Victor Chia  Director of UI Design

Material Design is a term that many web and app designers are talking about now. This new visual design language has become one of the most influential philosophies in design since it was first introduced by Google for Android applications in 2014. It is shaping the way people see and interact with interfaces because of its streamlined design and usability guidelines.

However, Material Design goes beyond Google and Android apps. More and more websites featuring Material Design are breaking away from the initial Android popularity and using it for websites across a variety of platforms and for all device types.

What is Material Design?
Google developed a design philosophy that outlines how apps should look and work on mobile devices based on real world sources. It breaks down everything such as style, typography, layout, animation and gives guidance on patterns, components and usability. Since then, the new design language has gradually been extended throughout Google’s web and mobile products, providing a consistent experience across all platforms and applications.

Material Design is rooted in three core principles:

  • Material is the metaphor
    The design is grounded in reality and actually inspired by design with paper and ink.
  • Bold, graphic, intentional
    The foundational elements of print-based design – typography, grids, space, scale, color, and use of imagery – guide visual treatments. Elements live in defined spaces with a clear hierarchy. Color and type choices are bold and deliberate.
  • Motion provides meaning
    Animation isn’t just be there for the sake of movement. Motion is meaningful and appropriate, serving to focus attention and maintain continuity.

Material Design matters to designers because it provides a robust set of standards and usability patterns which not only can be applied to any online products to ensure consistency across all layouts and details about how content reflows on different screen sizes, it is how they combine to create purposeful and meaningful UI experience.

The idea that interfaces should behave like real-world objects with layers and depth makes sense to the human eye. “The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other.” It’s not surprising that more and more designers are embracing this concept and creating websites or apps that are “Material” in function and aesthetic.

For developers, Material Design provides new tools that will make it easier to build usable apps that also look good. Google was seen more as a technology corporation and less for design. But with the introduction of Material, its commitment to design has changed. It is becoming a significant UI/UX design influencer and receiving wider recognition for delivering exceptionally good design.

When a large section of production relies on outside designers and developers to build a third-party applications on a company’s platforms and frameworks much can go wrong. With Material Design, these problems can be mitigated by a well documented design language that is both practical and modern.

Material Design is a highly usable and visually pleasing design system. Designers and developers can easily use Material as a boilerplate and freely modify all the elements from the documentation or download the latest UI kit. AUDI recently published a new brand guideline which provides a great example of how Material Design concepts can be applied.

The key is to recognize the main beliefs of Material Design and integrate a number of these values into designs and applications. After all, Material might just be the start of a new trend. The simple visual style and high usability of this design style will continue to grow as designers catch on the concepts. However, like many other design trends, at some point it may return back to more “realistic-looking” interfaces. Time will tell. Until then, Google’s Material Design is definitely here to stay and has already taking a strong lead in its influence in design and UI concepts.