Introduction to material design Melissa Powel (Google UX) Verónica Traynor Octubre 2015. Google, buenos aires.
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.