• A sample of Material Design components. Source: https://en.wikipedia.org/wiki/Material_Design#/media/File:Material_Design.svg
    image
  • The new Gmail (on the right) after redesign using Material Design. Source: Adapted from NBC News, 2014.
    image
  • A comparison of different design philosophies. Source: Kline, 2015.
    image
  • A pressed button rises from the surface. Source: Adapted from https://i.stack.imgur.com/LzOSw.png
    image

Material design

Improve this article. Show messages.

Summary

image
A sample of Material Design components. Source: https://en.wikipedia.org/wiki/Material_Design#/media/File:Material_Design.svg

Material Design is a design system or visual language that enables designers and developers achieve a unified UI/UX across devices and products. It's perhaps Google's first serious focus on design, rather than technology alone. By giving app creators design guidelines and tools, Google hopes to bring a consistent experience to users of its products and platforms, especially with Android.

Why "material"? Users feel and understand materials. By making design obey real-world effects at a level of abstraction, the interface will be more natural and intuitive to users. However, realism is not taken to the extreme like skeuomorphism. Material Design improves upon flat design by adding real-world effects. Materials have thickness. They cast shadows. They are solid and cannot pass through other materials. They obey laws of physics. These have been used in the creation of Material Design.

Milestones

2007

Some Google designers attempt to create a unified design across the company's products and platforms. It is named Kanna. The project doesn't take off due to lack of management support.

2011
image

The growth of compute power and broadband access gives UI/UX increasing importance. Mobile forces design to be taken seriously. Project Strawman aims to "redesign Google". Gmail is redesigned with flatter buttons, and more whitespace and margin. A year later, Google Now uses cards and well-designed typography. These changes are elements of what later becomes Material Design.

Jun
2014

Originally codenamed Quantum Paper, Google announces Material Design at its annual developer conference, Google I/O, in San Francisco. In November 2014, Android Lollipop becomes the first Android release to use Material Design.

Apr
2016

Faiz Malkani states that Material Design has not achieved a grand unification it hoped for. He concludes that it can happen only if Material Design sheds the "Google branding" and looks beyond Android.

Oct
2016

Material Design gets a new website to bring together guidelines, tools and resources in one place.

Dec
2016

Since the spec is a living document, it's frequently updated. In 2016, this is when the last of five updates to Material Design guidelines is released.

Apr
2017

Google releases Color Tool for designers working with Material Design. Designers can create new colour schemes, test accessibility and preview colours with this.

Mar
2018

Google is reportedly testing Material Design for its Search but it appears that only some users are seeing this new layout.

May
2018

At Google I/O, Google announces that designers can customize material components for their product. Tool such as Material Theme editor, icon packs and colour palettes enable this. The idea is to separate functionality from styling so that all apps don't end up looking the same. As an example, Google releases GMail with such a customized Material Design.

Discussion

  • What's the backstory for Material Design?
    image
    A comparison of different design philosophies. Source: Kline, 2015.

    Early human-to-computer interfaces were command line interfaces. When graphical interfaces were invented in the 1980s, designers attempted to represent real-world objects digitally so that users could relate to icons and buttons due to their familiarity. Design elements had a sense of realism. We called this design philosophy skeuomorphism.

    As users became tech savvy, such realism was no longer necessary. Meanwhile, better device displays allowed designers to add more details. In fact, too much detail can distract users from content and functionality. UI designs therefore moved towards minimalism that had solid colours, clear typography, no shadows and functional focus. This is what we called flat design. Its roots can be traced to the 1920s and later popularized by the Swiss Bauhaus School. Flat design was adopted by Microsoft Windows 8 (2012) and Apple's iOS7 (2013). With the rising popularity of mobile devices, flat design was easier for designers and users across device screen sizes.

    Flat design had its critics for causing usability issues and limiting variety. What if we could combine elements skeuomorphism and flat design? Material Design does this by using material as the metaphor.

  • What are the key principles of Material Design?

    We can identify three key principles:

    • Material is the metaphor: By using shadows and animation, we create surfaces, edges, their relationships and their interactions. Inspired by materials and objects in the real world, Material Design aims to obey the laws of physics but also go beyond.
    • Bold, graphic, intentional: The idea is to create immersive user experience while giving emphasis to user actions and core functionality. Typography, edge-to-edge imagery (without margins), ample whitespaces and bold colours are just some techniques to achieve this.
    • Motion provides meaning: Motion must maintain focus and continuity of user experience even as objects transform and reorganize. It also provides useful feedback to user actions. User actions are seen as users giving energy to the UI.

    Nick Summers has shared more details of the above principles.

  • What aspects of the interface does Material Design cover?

    Material Design guidelines cover the following (and more):

    • Motion: Duration, guided focus, path of movement, fading, etc.
    • Style: Colour, icons, imagery, typography, etc.
    • Layout: Units and measurements, floating action buttons, grids, spacing, layout structure, responsive layout, etc.
    • Components: Buttons, cards, menus, lists, dividers, tabs, widgets, sliders, etc.
    • Patterns: Launch screens, navigation, notifications, search, settings, scrolling, etc.
    • Growth & communications: onboarding, feature discovery, gesture education, etc.
  • Why does pressing a button make it rise up from the surface?
    image
    A pressed button rises from the surface. Source: Adapted from https://i.stack.imgur.com/LzOSw.png

    We normally think of a button as being raised from a surface in default mode. When pressed, it goes down towards the surface. In Material Design, buttons behave in the exact opposite manner. The z-axis property gives a component its elevation with respect to the surface. The surface is the digital device's display and components can only rise up (positive z values). Thus, button press should be seen as user interacting with the button and making it come towards the finger.

  • How is motion conveyed?

    Material documentation states,

    Motion in the world of Material Design is used to describe spatial relationships, functionality, and intention with beauty and fluidity.

    Motion is inspired by physics with attention to gravity and friction. A ripple effect from the point of touch conveys user input. New surfaces emanate from components that create them. Transitions happen in arcs. Surfaces can be push, divide or join with each other. They can create hierarchy by interacting and stacking on top of each other with attention to surface thickness. Materials that grow, shrink or fade do so by decelerating or accelerating in time. Upward movement starts slow since we have to work against gravity and vice versa for downward movement. Transformations can originate from object's current location or from the center of final surface. Materials can move along any axes but z-movement is meant for user interaction.

  • What tools has Google released to help designers working on Material Design?

    Apart from design guidelines, Google supports designers with many tools and resources:

    • Gallery: A tool to manage design iterations and get feedback.
    • Remixer: Collaborate in real-time by adjusting colours, animations and more on the fly.
    • Resizer: An interactive viewer that helps designers test material design breakpoints across desktop, mobile, and tablet.
    • Color Tool: Create colour palettes, test accessibility, preview and share.
    • Device Metrics: A handy reference for sizing your UI across multiple devices.
    • Stage: Allows for dynamic interfaces with interactive motion.
    • Icons: A library of hundreds of material icons.
    • Material Components: Provides modular and customizable Material Design UI components. It comes in variants of Android, iOS and Web.
  • Can you give some pointers for using Material Design in Android apps?

    Android documentation talks about three goals:

    • Enchant the user. Combine beauty and simplicity. Be crisp and meaningful with typography.
    • Make life easier. Make the interface intuitive. Don't overwhelm.
    • Amaze the user. Empower them to try new things and be inventive. Allow for new workflows.

    Muneer gives more descriptions of the above.

    Android comes with Material themes, lists, cards, and more. Shadows and layering can be created by using the Z property (surface elevation). A variety of Material animations can be used out of the box but developers can also create custom animations. In addition, a comprehensive Material Design training is available online.

  • What frameworks out there support Material Design?

    Among the free Material Design CSS frameworks are Materialize, MUI, Surface and Material-UI. Material Design Lite and Material Components for the Web are frameworks from Google folks. Google's Polymer has a category named Paper that includes Material Design components.

    Many frameworks add Material Design support for existing front-end frameworks: Viu for Meteor, Vuetify.js for Vue.js, ember-cli-materialize for Ember.js, Ionic Material for Ionic, Material-UI for React, Angular Material and LumX for Angular.js, Material Design for Bootstrap and Phonon Framework for Cordova.

    Beyond frameworks, there's a curated list of 300+ Material Design resources that developers will find useful. This includes colour palettes, icon sets, fonts, layout templates, UI kits, widgets, backgrounds, wallpapers, articles, design inspirations and more. Since animation is important in Material Design, Paul Andrew provides a list of animated Material Design examples for inspiration.

  • Are there any criticisms of Material Design?

    Developers used to flat design, may take more time to implement Material Design. They also have to learn and code for motion, which is an important design aspect. The design language is itself controlled by Google and not open sourced.

    Nate Swanner has said that, "Material Design wants to make you feel as though you're touching something tangible, but you're not. You. Are. Tapping. A. Screen." He goes on say that he doesn't care for the 'clever' animations. Android apps running on iOS tend to use Material Design. This violates iOS platform conventions and angers iOS users. Also, a taste of Material Design within iOS is unlikely to influence users to switch to Android.

    Rune Madsen gives specific examples of Material Design where Google's rules of design either constrain designers or simply ignore how designers actually work. For example, designers should be allowed to use bright colours for body text if they want to. The design guidelines also tend to enforce a certain style that's hard to break away from. Designers will be stuck with Google's branding. For that matter, Google itself is not adhering to the Material Design guidelines.

  • Are there any criticisms of design systems in general?

    A criticism of design systems is that they create a design monoculture. They also tend to benefit the designer more than the user. Users will obey a horrible system rather than complain. In fact, one Google designer stated that, "Material Design is a way for designers to get what they want."

    In 2018, Google addressed some of this criticism by allowing users to customize the styling while retaining the consistency, usability and discoverability of Material Design. So it's not just about design guidelines but also about tools to adapt to specific design needs and branding.

    In contrast, Amazon did not have a well-documented design system. Rather, it evolved an effective UI based on user feedback and continuous improvement.

  • Could you compare Material Design with its alternatives?

    Historically, we've had skeuomorphism and flat design for digital user interfaces. Flat design is more performant than skeuomorphism and distraction-free. But it may look boring and have usability issues. Skeuomorphism may look too real, distract users from content and render slower. Material Design combines the best of both. It has good documentation but developers may feel constrained by what Google considers as right.

    It's been said that between flat design and Material Design, the differences are subtle, yet critical. While Material Design is still flat, it considers the third dimension along the z-axis. Material Design attempts to bring the real and the digital worlds closer. It's richer in interaction and user experience.

    IBM Design Language is an alternative that's been commented as a copy of Material Design. In 2010, Microsoft introduced Metro design language that uses flat design and typography. An evolution of Metro is Microsoft's Fluent Design, which was applied to Windows 10 in October 2017.

References

  1. Adiseshiah, Emily Grace. 2017. "Flat Design vs. Material Design: what’s your flavor?" Justinmind. November 15. Accessed 2017-12-06.
  2. Andrew, Paul. 2016. "15 Subtly Animated Examples of Material Design in Action." Envato Blog. June 2. Accessed 2017-12-06.
  3. Android Developers. 2017. "Material Design for Android." Accessed 2017-12-06.
  4. Android Developers Training. 2017. "Material Design for Developers." Accessed 2017-12-06.
  5. Been, Rachel. 2017. "Expand your color palette with new tools for Material Design." Google Developers Blog. April 6. Accessed 2017-12-08.
  6. Bohn, Dieter. 2018. "Google’s software design is having a reformation." The Verge, May 10. Accessed 2018-05-11.
  7. Forrest, Conner. 2017. "Google Material Design: The smart person's guide." TechRepublic. May 30. Accessed 2017-12-06.
  8. Google Design YouTube. 2015. "Making Material Design." May 28. Accessed 2017-12-06.
  9. Google Developers YouTube. 2014b. "Google I/O 2014 - Material design principles." June 25. Accessed 2017-12-06.
  10. Gromov, Vadim. 2015. "Material Design Button." Dribble. January 25. Accessed 2017-12-06.
  11. Houston, Thomas. 2012. "The Google that never was: how the search giant killed a 2007 redesign." The Verge. March 12. Accessed 2017-12-06.
  12. Jeter, Jonathan. 2012. "A Brief History of the Complete Redesign of Google at #SXSW2012." March 11. Accessed 2017-12-06.
  13. Jitkoff, Nicholas. 2016. "Design Is Never Done: Material Design’s new suite of tools and guidelines—all in one place." Google Design. October 26. Accessed 2017-12-08.
  14. Karol K. 2015a. "New to Material Design? 12 Principles You Need to Know." Adobe Blog. December 5. Accessed 2017-12-06.
  15. Karol K. 2015b. "Flat Design vs. Material Design: What Makes Them Different?" Adobe Blog. August 5. Accessed 2017-12-06.
  16. Karol K. 2015c. "Is Flat Design a Web Design Standard That’s Here to Stay? 10 Designers Chip In." Adobe Blog. February 10. Accessed 2017-12-08.
  17. Kline, Jeff. 2015. "Top 10 Web Design Trends for Nonprofits in 2015." Accrisoft. June 4. Accessed 2017-12-06.
  18. Konstantinidis, Giannis. 2017. "6 Free Material Design CSS Frameworks for 2017 Compared." Sitepoint. July 11. Accessed 2017-12-06.
  19. Kuang, Cliff. 2015. "How Google Finally Got Design." Co.Design. January 6. Accessed 2017-12-06.
  20. Kuprenko, Vitaly. 2016. "Material Design vs Flat Design UI." Inkbot Design. November 7. Accessed 2017-12-06.
  21. Lynch, Jim. 2015. "Google angers iOS users with Material Design." CIO. October 20. Accessed 2017-12-06.
  22. Madsen, Rune. 2017. "The User Experience of Design Systems." UX Camp Copenhagen, transcript. May. Accessed 2017-12-06.
  23. Malkani, Faiz. 2016. "Why Material Design Didn’t Achieve the Grand Unification it Originally Aimed For." XDA Developers. April 9. Accessed 2017-12-06.
  24. Malukas, Mantas. 2015. "How Material Design sparked evolution of web design." Material Design Blog. May 17. Accessed 2017-12-06.
  25. Material Components. 2017. "Material Components." GitHub. Accessed 2017-12-08.
  26. Material.io. 2017. "Material Design." Accessed 2017-12-06.
  27. Mix. 2018. "Google is testing a new Material Design layout for Search." The Next Web, March 5. Accessed 2018-03-06.
  28. Muneer. 2015. "Android App Development Using Material Design #Tech 2016." Krify. December 15. Accessed 2017-12-06.
  29. Müller, Florian. 2014. "Flat Design: A History, Past, Present and Future." Onextrapixel. November 7. Accessed 2017-12-06.
  30. NBC News. 2014. "Old Gmail, Meet New Gmail: Android Shows Off New Design." June 25. Accessed 2017-12-10.
  31. Prasad G. 2017a. "25+ Best Material Design Frameworks." CSS Author. July 21. Accessed 2017-12-06.
  32. Prasad G. 2017b. "300+ Material Design Resources For Designers And Developers." CSS Author. October 11. Accessed 2017-12-06.
  33. Sinicki, Adam. 2016. "Top examples of Google ignoring its own Material Design guidelines." Android Authority. July 15. Accessed 2017-12-06.
  34. Sinsabaugh, Nathan. 2014. "What Google’s Material Design Is Really About." Wired. December 26. Accessed 2017-12-06.
  35. Summers, Nick. 2014. "9 principles Google created for its colorful ‘Material Design’ UI refresh." The Next Web. June 26. Accessed 2017-12-06.
  36. Swanner, Nate. 2016. "Counterpoint: Google’s use of Material Design on iOS is great (even though I hate it)." The Next Web. May 29. Accessed 2017-12-06.
  37. Warren, Tom. 2017. "Microsoft shows off its Fluent Design changes to Windows 10." The Verge. October 16. Accessed 2017-12-06.
  38. WebComponents.org. 2017. "paper-elements: Material design UI elements implemented using Polymer." Accessed 2017-12-06.
  39. Wikipedia. 2017. "Android Lollipop." December 7. Accessed 2017-12-08.
  40. Workerbee. 2016. "Skeuomorphism vs. flat design vs material design." 99designs. October 25. Accessed 2017-12-06.

Milestones

2007

Some Google designers attempt to create a unified design across the company's products and platforms. It is named Kanna. The project doesn't take off due to lack of management support.

2011
image

The growth of compute power and broadband access gives UI/UX increasing importance. Mobile forces design to be taken seriously. Project Strawman aims to "redesign Google". Gmail is redesigned with flatter buttons, and more whitespace and margin. A year later, Google Now uses cards and well-designed typography. These changes are elements of what later becomes Material Design.

Jun
2014

Originally codenamed Quantum Paper, Google announces Material Design at its annual developer conference, Google I/O, in San Francisco. In November 2014, Android Lollipop becomes the first Android release to use Material Design.

Apr
2016

Faiz Malkani states that Material Design has not achieved a grand unification it hoped for. He concludes that it can happen only if Material Design sheds the "Google branding" and looks beyond Android.

Oct
2016

Material Design gets a new website to bring together guidelines, tools and resources in one place.

Dec
2016

Since the spec is a living document, it's frequently updated. In 2016, this is when the last of five updates to Material Design guidelines is released.

Apr
2017

Google releases Color Tool for designers working with Material Design. Designers can create new colour schemes, test accessibility and preview colours with this.

Mar
2018

Google is reportedly testing Material Design for its Search but it appears that only some users are seeing this new layout.

May
2018

At Google I/O, Google announces that designers can customize material components for their product. Tool such as Material Theme editor, icon packs and colour palettes enable this. The idea is to separate functionality from styling so that all apps don't end up looking the same. As an example, Google releases GMail with such a customized Material Design.

Tags

See Also

  • Material Components
  • Materialize
  • Material-UI
  • Skeuomorphism
  • Flat design
  • Fluent design

Further Reading

  1. Google Developers YouTube. 2014b. "Google I/O 2014 - Material design principles." June 25. Accessed 2017-12-06.
  2. Material.io. 2017. "Material Design." Accessed 2017-12-06.
  3. Cousins, Carrie. 2015a. "Google Material Design: Everything You Need to Know." Design Shack. February 24. Accessed 2017-12-08.
  4. Lisnyak, Anna. 2015. "Flat Design vs. Material Design: How Are They Different?" Designmodo. April 10. Accessed 2017-12-07.
  5. Brownlee, John. 2014. "Is Flat Design Already Passé?" Co.Design. November 14. Accessed 2017-12-06.
  6. Cousins, Carrie. 2015b. "Is Material Design Killing the Web?" WebdesignerDepot. October 22. Accessed 2017-12-09.

Top Contributors

Last update: 2018-05-11 07:38:49 by lokesh.rawat
Creation: 2017-03-20 08:16:41 by arvindpdmn

Article Stats

2000
Words
0
Chats
3
Authors
5
Edits
2
Likes
699
Hits

Cite As

Devopedia. 2018. "Material design." Version 5, May 11. Accessed 2018-06-18. https://devopedia.org/material-design
BETA V0.15