Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to Material Design - Google

29,109 views

Published on

Material design is a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science.
● It was inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.

Published in: Design, Internet
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Introduction to Material Design - Google

  1. Introduction to material design Melissa Powel (Google UX) Verónica Traynor Octubre 2015. Google, buenos aires.
  2. What is material design? google.com/design
  3. What is material design? ● Material design is a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science. ● It was inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic. Source: https://www.google.com/design/spec/
  4. Tangible: material is a metaphor ● Surfaces and edges of the material provide visual cues that are grounded in reality. ● The use of familiar tactile attributes helps users quickly understand affordances. Source: https://www.google.com/design/spec/
  5. Print-like Design: bold, graphic & intentional ● Typography, grids, space, scale, color, and use of imagery do far more than please the eye, they create hierarchy, meaning, and focus. ● Deliberate choices and intentional white space create a bold and graphic interface. Source: https://www.google.com/design/spec/
  6. Motion provides meaning ● Motion respects and reinforces the user as the prime mover. ● Motion is meaningful and appropriate, serving to focus attention and maintain continuity. ● Feedback is subtle yet clear. ● Transitions are efficient yet coherent. Source: https://www.google.com/design/spec/
  7. Improved UX = Improved ROI
  8. Material design does NOT mean copy Google design How to maintain your unique flavor
  9. CRANE AIR | Reference: https://design.google.com/articles/expressing-brand-in-material/
  10. PESTO | Reference: https://design.google.com/articles/expressing-brand-in-material/
  11. ABISCO | Reference: https://design.google.com/articles/expressing-brand-in-material/
  12. Shrine | Reference: https://design.google.com/articles/expressing-brand-in-material/
  13. Main components
  14. FLOATING ACTION BUTTON
  15. ● A floating action button represents the primary action in an application. ● They are distinguished by a circled icon floating above the UI . ● Not every screen needs a floating action button. Source: https://www.google.com/design/spec/ FAB: FLOATING ACTION BUTTON
  16. DO
  17. DON´T
  18. CARDS
  19. ● A card is a piece of paper with unique related data that serves as an entry point to more detailed information. ● For example, a card could contain a photo, text, and a link about a single subject, a collection, rich content or interaction, such as +1 buttons or comments. Source: https://www.google.com/design/spec/ CARDS
  20. DO
  21. DON´T
  22. TILES
  23. ● A tab provides the affordance for displaying grouped content. ● Use tabs to organize content at a high level, for example, presenting different sections of a newspaper. Source: https://www.google.com/design/spec/ TABS
  24. DO
  25. DON´T
  26. DON´T
  27. Introduction to material design Melissa Powel (Google UX) Verónica Traynor Octubre 2015. Google, buenos aires.

×