Introdução ao material design

Post on 10-Aug-2015

226 views 2 download

Transcript of Introdução ao material design

Introdução ao Material DesignMILTON ALCÂNTARAmilton.neto.alcantara@gmail.com

Sobre:

milton.neto.alcantara@gmail.com

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

Milton Alcântaramilton.neto.alcantara@gmail.com

Material Design

milton.neto.alcantara@gmail.com

Papel

milton.neto.alcantara@gmail.com

Computadores

milton.neto.alcantara@gmail.com

Interface amigável

milton.neto.alcantara@gmail.com

Ícones

milton.neto.alcantara@gmail.com

Guide Lines

milton.neto.alcantara@gmail.com

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

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

Material Design

milton.neto.alcantara@gmail.com

• APIs com novas features• Android ♥ Design

Design Flat

milton.neto.alcantara@gmail.com

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

Comercias)

Cores

milton.neto.alcantara@gmail.com

9 Princípios

milton.neto.alcantara@gmail.com

1º - Material é uma metáfora

milton.neto.alcantara@gmail.com

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

2º - Superfícies naturais ao toque

milton.neto.alcantara@gmail.com

• Sombras, bordas, brilhos• Superfícies

3º - Dimensionalidade

milton.neto.alcantara@gmail.com

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

busca• Exemplo: Receber chamada

Interações em 3D

milton.neto.alcantara@gmail.com

4º - Designer Adaptativo

milton.neto.alcantara@gmail.com

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

Facilidades multi-dispositivos

milton.neto.alcantara@gmail.com

5º - Conteúdo Gráfico

milton.neto.alcantara@gmail.com

• 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

6º - Ações Claras

milton.neto.alcantara@gmail.com

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

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

milton.neto.alcantara@gmail.com

8º - Animações

milton.neto.alcantara@gmail.com

• Baseadas na física real• Componentes mais realistas

9º - Sentidos nos movimentos

milton.neto.alcantara@gmail.com

• Mostrar o que está acontecendo

Saiba mais...

DevByteshttps://goo.gl/GLv7gV

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

milton.neto.alcantara@gmail.com

Participe das comunidades

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

Tá Safo/Tasafo.Comunidade

Tá Safohttp://goo.gl/NR3wrD

Tá Safo@tasafo

milton.neto.alcantara@gmail.com

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

E-mailmilton.neto.alcantara@gmail.com

Twitter@miltonalcantara