➙ Conteúdo completo, texto e vídeo, em: https://www.thiengo.com.br/material-design Apresentação da linguagem de design do Google: Material Design. Vamos abordar: o que era utilizado anteriormente, origem, lançamento, objetivos, regras a serem seguidas, principais características e o que esperar para o futuro do Material Design. ➙ Para receber os conteúdos do blog em primeira mão, assine a lista de emails em: http://www.thiengo.com.br *Obs. : os GIFs animados não funcionam no LinkedIn SlideShare. Abraço.  ▶ Treinamento oficial: ➙ Prototipagem Profissional de Aplicativos Android:  ↳ https://www.udemy.com/android-prototipagem-profissional-de-aplicativos/?persist_locale&locale=pt_BR ▶ Livros oficiais:  ➙ Desenvolvedor Kotlin Android - Bibliotecas para o dia a dia:  ↳ https://www.thiengo.com.br/livro-desenvolvedor-kotlin-android ➙ Receitas Para Desenvolvedores Android:  ↳ https://www.thiengo.com.br/livro-receitas-para-desenvolvedores-android  ➙ Refatorando Para Programas Limpos:  ↳ https://www.thiengo.com.br/livro-refatorando-para-programas-limpos  ▶ Redes:  ➙ Udemy: https://www.udemy.com/user/vinicius-thiengo/?persist_locale&locale=pt_BR ➙ YouTube: https://www.youtube.com/user/thiengoCalopsita ➙ Facebook: https://www.facebook.com/thiengoCalopsita  ➙ LinkedIn: https://www.linkedin.com/in/vin%C3%ADcius-thiengo-5179b180/  ➙ GitHub: https://github.com/viniciusthiengo ➙ Twitter: https://twitter.com/thiengoCalops  ➙ Google Plus: https://plus.google.com/+ThiengoCalopsita  ▶ Blog App:  ➙ https://play.google.com/store/apps/details?id=br.thiengocalopsita&hl=pt_BR

1. Material Design
thiengo.com.br
Vinícius Thiengo

2. Anterior ao Material Design
Holo Design
- Lançado em 2011 junto ao
Android 4, Ice Cream
Sandwich;
- Permitiu um padrão de
interface entre os aplicativos
Android - o foco ainda era
somente para este SO;
- Não teve o mesmo esforço e
trabalho em UX como no
Material Design.

3. Origem
Android com o Quantum
Paper Design
- Quantum Paper;
- Polymer (2013);
- Unificação das interfaces;
- "Espaços racionalizados e
sistemas em movimento";
- Tinta e papel.

4. Lançamento
Google+, Android App,
com o Material Design
- Google I/O 2014;
- Android 5, Lollipop;
- Foco na experiência do usuário;
- Constante evolução, aceitando
toques de "criatividade e magia".
Ex: BottomNavigationDrawer;
- Primeiro App oficial do Google com
o Material Design: Google+.

5. Objetivos
Realidade tátil
- Unificação das interfaces:
Android, Chrome OS e Web
Apps;
- Mundo real no mundo digital:
- Resposta imediata;
- Objetos sólidos e individuais;
- Sombras, luzes e camadas;
- Eixo Z, simulando
profundidade;
- Animação em força.

6. Objetivos - vindos do mundo digital
Materiais em mesmo nível
- Animação de objetos em mesmo
nível (junção e separação);
- Transição de telas de maneira
suave e construtiva, sem
mudanças bruscas de uma
screen para a outra.

7. Regras a serem seguidas
Animação lenta, quebrando
regras do Material Design
- Animação / movimento no modelo
curvado, simulando força aplicada,
incluindo aceleração e desaceleração;
- Animação linear quando somente um
eixo tem a coordenada atualizada no
posicionamento final;
- Utilizar sombras e luzes para
identificação dos níveis dos objetos;
- Materiais digitais não podem passar
uns dentro dos outros;
- Animações devem ser rápidas, na
casa dos milissegundos;
- Responsividade somente em objetos
acionados.

8. Similaridades
Similaridade com o Metro UI e com o design aplicado ao iOS desde a versão 7.
Porém formas retangulares, com grandes espaços em branco e cores intensas já
eram utilizados nos cards do Google Now.
Microsoft Metro UI
Android N -
Material DesignApple iOS 7

9. Principais características
- Formas;
- Cores;
- Ícones;
- Tipografia;
- Imagens;
- Animação;
- Profundidade.

10. Formas
Google Now
Retângulos, grandes
espaços em branco, grids
e bordas suaves para
aumentar a clareza do
conteúdo

11. São sólidas, mutáveis e
os materiais digitais têm
disponíveis a eles ao
menos duas: primária
(primary-color) e
secundária (accent-color).
Textos e ícones fazem
uso do canal alpha.
Cores
Primary e accent color

12. Ícones
Ícone de produto
Divididos em dois tipos:
produto e sistema.
- Produto (launcher icon):
pode ser complexo, com
mais de uma cor;
- Sistema (interno ao app):
simples e uni-color.
Ícone de sistema

13. Fontes comuns: Roboto e
Noto.
O trabalho com família de
fontes é flexível. Com o
Android já tínhamos o
Typeface.
A partir do Android O temos o
Fonts XML que facilita ainda
mais o uso de fontes
personalizadas.
Tipografia
Fontes personalizadas sem
perder qualidade na entrega

14. - Apresentação de conteúdos
e avatares;
- Devem ser relevantes ao
que o usuário está
consumindo;
- Não devem ter bordas ou
espaçamentos, padding.
Imagens
Imagens de conteúdo e
avatares

15. - Simular o movimento de
objetos no mundo real;
- Ter resposta imediata a
interação do usuário.
Realidade tátil;
- Ser simples, perceptível e
rápida.
Animação
Movimento ao
acionamento do usuário

16. Profundidade
- Objetos individuais,
como no mundo real;
- Separação em nível,
camada, perceptível
ao usuário: luzes e
sombras;
- Espessura dos objetos,
eixo Z, tendo 1dp em
tamanho.

17. Componentes comuns
Barra de topo (toolbar)
Menu gaveta
(NavigationDrawer) Dialog Framework de lista

18. Devemos aguardar uma nova linguagem de Design?
A princípio o que está por vir são apenas
atualizações no próprio Material Design,
digo, mais adições do que atualizações.
Pois desta vez o projeto foi feito para ser
não somente uma maneira de identificar
e unificar os sistemas Google, mas
também ser algo que materializa o que
temos no mundo real, melhorando em
muito a experiência do usuário em
relação ao que se tinha anteriormente,
onde o foco principal era a padronização
das interfaces gráficas dos aplicativos.

19. Material Design
https://www.thiengo.com.br
Vinícius Thiengo
thiengocalopsita@gmail.com