Introdução ao material design

26
Introdução ao Material Design MILTON ALCÂNTARA [email protected]

Transcript of Introdução ao material design

Page 1: Introdução ao material design

Introdução ao Material DesignMILTON ALCÂ[email protected]

Page 2: Introdução ao material design

Sobre:

[email protected]

• Publicidade• Ciência da Computação• Projetos Acadêmicos• BBTS• Startups

Milton Alcâ[email protected]

Page 3: Introdução ao material design

Material Design

[email protected]

Page 4: Introdução ao material design

Papel

[email protected]

Page 5: Introdução ao material design

Computadores

[email protected]

Page 6: Introdução ao material design

Interface amigável

[email protected]

Page 7: Introdução ao material design

Ícones

[email protected]

Page 8: Introdução ao material design

Guide Lines

[email protected]

https://developer.android.com/design https://google.com/design

• Reclamação• Recomendações e boas práticas• Exemplo: Botão Voltar

Page 9: Introdução ao material design

Material Design

[email protected]

• APIs com novas features• Android ♥ Design

Page 10: Introdução ao material design

Design Flat

[email protected]

• Simplista > Realista• Menos é mais• Tendência de mercado (Exemplo:

Comercias)

Page 11: Introdução ao material design

Cores

[email protected]

Page 12: Introdução ao material design

9 Princípios

[email protected]

Page 13: Introdução ao material design

1º - Material é uma metáfora

[email protected]

• Papel como base• Papel e tinta são o material

Page 14: Introdução ao material design

2º - Superfícies naturais ao toque

[email protected]

• Sombras, bordas, brilhos• Superfícies

Page 15: Introdução ao material design

3º - Dimensionalidade

[email protected]

• Ênfase no necessário• Ter elementos atrás para

busca• Exemplo: Receber chamada

Page 16: Introdução ao material design

Interações em 3D

[email protected]

Page 17: Introdução ao material design

4º - Designer Adaptativo

[email protected]

• Reboot para única Guide Line• Menor curva de aprendizado para o

usuário• Padrão visual em toda sua

plataforma• Dispositivo reflete visão diferente do

sistema oculto• Cores, iconografia, hierarquia e

relações espaciais constantes.• Exemplo: inbox• Próximos alvos: Carros, TVs, óculos...

Page 18: Introdução ao material design

Facilidades multi-dispositivos

[email protected]

Page 19: Introdução ao material design

5º - Conteúdo Gráfico

[email protected]

• Ser gráfico e intencional• Designers esqueciam de priorizar o

conteúdo• Foco no conteúdo • Mídias• “Queres que eu desenhe?”• Botões do Dialog

Page 20: Introdução ao material design

6º - Ações Claras

[email protected]

• Funções principais e secundárias • FAB (Floating action button)

Page 21: Introdução ao material design

7º - Usuários começam as mudanças

[email protected]

Page 22: Introdução ao material design

8º - Animações

[email protected]

• Baseadas na física real• Componentes mais realistas

Page 23: Introdução ao material design

9º - Sentidos nos movimentos

[email protected]

• Mostrar o que está acontecendo

Page 24: Introdução ao material design

Saiba mais...

DevByteshttps://goo.gl/GLv7gV

Android Design in Actionhttps://goo.gl/gMcjj3

[email protected]

Page 25: Introdução ao material design

Participe das comunidades

Participe do GDG Belémhttp://goo.gl/hfZoEs

Tá Safo/Tasafo.Comunidade

Tá Safohttp://goo.gl/NR3wrD

Tá Safo@tasafo

[email protected]

Page 26: Introdução ao material design

Obrigado...Linkedinhttps://goo.gl/3lGfnE

[email protected]

Twitter@miltonalcantara