Introduction to Material Design - Google

Презентация изнутри:

Слайд 0

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

Слайд 1

What is material design?

Слайд 2

Слайд 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:

Слайд 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:

Слайд 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:

Слайд 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:

Слайд 7

Improved UX = Improved ROI

Слайд 8

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

Слайд 9

CRANE AIR | Reference:

Слайд 10

PESTO | Reference:

Слайд 11

ABISCO | Reference:

Слайд 12

Shrine | Reference:

Слайд 13

Main components

Слайд 14


Слайд 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:

Слайд 16


Слайд 17


Слайд 18


Слайд 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:

Слайд 20


Слайд 21


Слайд 22


Слайд 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:

Слайд 24


Слайд 25


Слайд 26


Слайд 27

Слайд 28

Слайд 29

Слайд 30

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

Слайд 31