View
122
Download
5
Category
Preview:
Citation preview
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
Recommended