Crash course sobre Material Design que dei na Gama Academy em setembro de 2016, mostrando os principais aspectos a serem observados pelos designers e desenvolvedores ao criar uma interface baseada no Material Design do Google

1. Material Design
Crash course

2. Ney Ricardo
Olá, meu nome é
Sou Designer, tenho 30 anos,
trabalho como CTO na Jera

3. Material Design
Sistema de design (guideline/framework)
Elementos virtuais com características físicas
Ambiente e elementos tridimensionais

4. Material Design
Ambiente tridimensional
Luz e sombra

5. Material Design
Todos os elementos possuem:
● Largura e altura
● Espessura: 1dp
● Posição de elevação

6. Luz e sombra
Sombra de luz ambienteSombra de luz principal (key) Sombra de luz principal e
ambiente combinadas

8. Comparação de elevação dos componentes

9. Floating action button (FAB)
Resting state: 6dp Pressed state: 12dp

10. Densidades e medidas
PPI
DP
SP
MDPI, HDPI, XHDPI, XXHDPI, XXXHDPI
https://design.google.com/devices/

11. Densidade de tela
screen density = screen width (or height) in pixels / screen width (or height) in inches
screen density = screen width (px) / screen width (in)

12. Density-independent pixels (dp)
dp = (width in pixels * 160) / screen density
Usado para elementos "display"!

13. Scaleable pixels (sp)
sp = (size in pixels * 160) / screen density
Usado para fontes!

14. Densidade de tela

15. Densidade de tela
Mesmo tamanho de tela (in)
Dobro de pixels por polegada (@2x ppi)
Interface 2x maior (px)

16. 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

17. Grid
Base: 4dp
Componentes

18. Grid Baseline aligned: 4dp

19. Tipografia
Roboto
Noto

21. Esquema de Cores
Primary 500's
Secondary color
Accent colors
Text and Background colors

22. Como usar

23. Motion
Duração e suavização de movimento
Transformação

24. Ícones

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

27. Grids e keylines para Product Icon

28. Content area do Product Icon

29. S.S. para ícones do app
https://design.google.com/icons/

30. Navegação
Up
Back

31. Recorte
Sketch Sketch Toolbox Zeplin

32. T.Hanks!
Ney Ricardo
dribbble.com/neyricardo
twitter.com/neyricardo
fb.com/neyricardo
neyricardo.com