'

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? google.com/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: 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

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/


Слайд 16

DO


Слайд 17

DON´T


Слайд 18

CARDS


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


Слайд 20

DO


Слайд 21

DON´T


Слайд 22

TILES


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


Слайд 24

DO


Слайд 25

DON´T


Слайд 26

DON´T


Слайд 27


Слайд 28


Слайд 29


Слайд 30

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


Слайд 31


×

HTML:





Ссылка: