Introduction to Material Design - Google

If you like this presentation – show it...

Slide 0

Introduction to material design Melissa Powel (Google UX) Verónica Traynor Octubre 2015. Google, buenos aires.

Slide 1

What is material design? google.com/design

Slide 2

Slide 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/

Slide 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/

Slide 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/

Slide 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/

Slide 7

Improved UX = Improved ROI

Slide 8

Material design does NOT mean copy Google design How to maintain your unique flavor

Slide 9

CRANE AIR | Reference: https://design.google.com/articles/expressing-brand-in-material/

Slide 10

PESTO | Reference: https://design.google.com/articles/expressing-brand-in-material/

Slide 11

ABISCO | Reference: https://design.google.com/articles/expressing-brand-in-material/

Slide 12

Shrine | Reference: https://design.google.com/articles/expressing-brand-in-material/

Slide 13

Main components

Slide 14


Slide 15

FAB: 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/

Slide 16


Slide 17


Slide 18


Slide 19

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/

Slide 20


Slide 21


Slide 22


Slide 23

TABS ● 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/

Slide 24


Slide 25


Slide 26


Slide 27

Slide 28

Slide 29

Slide 30

Introduction to material design Melissa Powel (Google UX) Verónica Traynor Octubre 2015. Google, buenos aires.

Slide 31