Post on 21-Apr-2017
Introduction to material design
Melissa Powel (Google UX) Verónica Traynor
Octubre 2015. Google, buenos aires.
What is material design?google.com/design
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/
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/
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/
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/
Improved UX = Improved ROI
Material design does NOT mean copy Google design
How to maintain your unique flavor
CRANE AIR | Reference: https://design.google.com/articles/expressing-brand-in-material/
PESTO | Reference: https://design.google.com/articles/expressing-brand-in-material/
ABISCO | Reference: https://design.google.com/articles/expressing-brand-in-material/
Shrine | Reference: https://design.google.com/articles/expressing-brand-in-material/
Main components
FLOATING ACTION BUTTON
● 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
DO
DON´T
CARDS
● 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
DO
DON´T
TILES
● 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
DO
DON´T
DON´T
Introduction to material design
Melissa Powel (Google UX) Verónica Traynor
Octubre 2015. Google, buenos aires.