Material DesignCrash course

Ney RicardoOlá, meu nome é

Sou Designer, tenho 30 anos,trabalho como CTO na Jera

Material DesignSistema de design (guideline/framework)

Elementos virtuais com características físicas

Ambiente e elementos tridimensionais

Material DesignAmbiente tridimensional

Luz e sombra

Material DesignTodos os elementos possuem:

● Largura e altura● Espessura: 1dp● Posição de elevação

Luz e sombra

Sombra de luz ambienteSombra de luz principal (key) Sombra de luz principal e ambiente combinadas

Comparação de elevação dos componentes

Floating action button (FAB)

Resting state: 6dp Pressed state: 12dp

Densidades e medidasPPI

DP

SP

MDPI, HDPI, XHDPI, XXHDPI, XXXHDPI

https://design.google.com/devices/

Densidade de telascreen density = screen width (or height) in pixels / screen width (or height) in inches

screen density = screen width (px) / screen width (in)

Density-independent pixels (dp)

dp = (width in pixels * 160) / screen density

Usado para elementos "display"!

Scaleable pixels (sp)

sp = (size in pixels * 160) / screen density

Usado para fontes!

Densidade de tela

Densidade de telaMesmo tamanho de tela (in)

Dobro de pixels por polegada (@2x ppi)

Interface 2x maior (px)

Image scaling

Resolução de tela dpi Proporção de pixels Tamanho real da imagem (px)

xxxhdpi 640 4.0 400 x 400

xxhdpi 480 3.0 300 x 300

xhdpi 320 2.0 200 x 200

hdpi 240 1.5 150 x 150

mdpi 160 1.0 100 x 100

GridBase: 4dp

Componentes

Grid Baseline aligned: 4dp

TipografiaRoboto

Noto

Esquema de CoresPrimary 500's

Secondary color

Accent colors

Text and Background colors

Como usar

MotionDuração e suavização de movimento

Transformação

Ícones

Protótipo Físico Estudo de luz Protótipo Material

Grids e keylines para Product Icon

Content area do Product Icon

S.S. para ícones do app

https://design.google.com/icons/

NavegaçãoUp

Back

Recorte

Sketch Sketch Toolbox Zeplin

T.Hanks!

Ney Ricardodribbble.com/neyricardo

twitter.com/neyricardofb.com/neyricardo

neyricardo.com