Introdução ao material design (Tá Safo Conf)

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

Transcript of Introdução ao material design (Tá Safo Conf)

Page 1: Introdução ao material design (Tá Safo Conf)

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

Page 2: Introdução ao material design (Tá Safo Conf)

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 (Tá Safo Conf)

Material Design

[email protected]

Page 4: Introdução ao material design (Tá Safo Conf)

Papel

[email protected]

Page 5: Introdução ao material design (Tá Safo Conf)

Computadores

[email protected]

Page 6: Introdução ao material design (Tá Safo Conf)

Interface amigável

[email protected]

Page 7: Introdução ao material design (Tá Safo Conf)

Ícones

[email protected]

Page 8: Introdução ao material design (Tá Safo Conf)

Guide Lines

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

• Reclamação• Recomendações e boas práticas

[email protected]

Page 9: Introdução ao material design (Tá Safo Conf)

Material Design• APIs com novas features• Android ♥ Design

[email protected]

Page 10: Introdução ao material design (Tá Safo Conf)

Design Flat

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

Comercias)

[email protected]

Page 11: Introdução ao material design (Tá Safo Conf)

Cores

[email protected]

Page 12: Introdução ao material design (Tá Safo Conf)

9 Princípios

[email protected]

Page 13: Introdução ao material design (Tá Safo Conf)

1º - Material é uma metáfora

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

[email protected]

Page 14: Introdução ao material design (Tá Safo Conf)

2º - Superfícies naturais ao toque

• Sombras, bordas, brilhos• Superfícies

[email protected]

Page 15: Introdução ao material design (Tá Safo Conf)

3º - Dimensionalidade

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

busca• Exemplo: Receber chamada

[email protected]

Page 16: Introdução ao material design (Tá Safo Conf)

Interações em 3D

[email protected]

Page 17: Introdução ao material design (Tá Safo Conf)

4º - Designer Adaptativo • 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...

[email protected]

Page 18: Introdução ao material design (Tá Safo Conf)

Facilidades multi-dispositivos

[email protected]

Page 19: Introdução ao material design (Tá Safo Conf)

5º - Conteúdo Gráfico• Ser gráfico e intencional• Designers esqueciam de priorizar o

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

[email protected]

Page 20: Introdução ao material design (Tá Safo Conf)

6º - Ações Claras• Funções principais e secundárias • FAB (Floating action button)

[email protected]

Page 21: Introdução ao material design (Tá Safo Conf)

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

[email protected]

Page 22: Introdução ao material design (Tá Safo Conf)

8º - Animações • Baseadas na física real• Componentes mais realistas

[email protected]

Page 23: Introdução ao material design (Tá Safo Conf)

9º - Sentidos nos movimentos

• Mostrar o que está acontecendo

[email protected]

Page 24: Introdução ao material design (Tá Safo Conf)

Saiba mais...

DevByteshttps://goo.gl/GLv7gV

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

[email protected]

Page 25: Introdução ao material design (Tá Safo Conf)

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 (Tá Safo Conf)

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

[email protected]

Twitter@miltonalcantara

Facebook (Perfil e página)Milton Alcântara

Instagram@milton_alcantara