O documento descreve os princípios e diretrizes do Material Design desenvolvido pelo Google em 2014. O design foi concebido para ser fluido, intuitivo e consistente através de plataformas diferentes com foco em movimento, hierarquia visual e realismo com base na física do mundo real.

1. MATERIAL
DESIGN
GOOGLE

2. COMEÇA
ONDE
TUDO
ANO DE
LANÇAMENTO 2014
QUEM
DESENVOLVEU
GOOGL
EO
CARA
MATÍAS
DUARTE

3. METOLOGI
A
DE DESIGN
ELE FOI PENSADO PARA
SER:
FLUÍD
ONATURA
LINTUÍTIV
SIMPLE
S
=

4. FUNÇÃ
O
+
+
TECNOLOGI
A Experiência uniforme através de diversas
plataformas diferentes, sejam smartphones,
computadores ou relógios inteligentes.
INOVAÇÃ
O
ELE SINTETIZA OS
CONCEITOS DE UM
BOM DESIGN
CIÊNCI
A

5. PRINCÍPIO
S
REALISTA
CHAMATIVO
CINÉTICO
AMBIENTE E
SOMBRAS
ELEVAÇÃO

6. REALIST
A
Desde a iluminação até como suas animações se
comportarão, tudo é pensado de modo que se assemelhe
ao que aconteceria se ocorresse fora do ambiente digital.
O Material foi idealizado sobre o estudo de papéis
com tinta, mas sendo mais tecnicamente
avançado e aberto para a criatividade.
O Material Design se baseia no mundo real.
Com isso, o design se torna intuitivo e de fácil
compreensão, já que se baseia na realidade vivenciada
fora do ambiente virtual e já familiar para os usuários.

7. O encaixe desses blocos com cores diferentes,
trazem uma volumetria nos eixos Y e Z.
Exemplo de aplicação real

8. CHAMATIV
O
Eles criam também hierarquia visual, significado e foco,
guiando o usuário durante a experiência dele.
Os princípios fundamentais do design gráfico, como
a tipografia, grade, cor, espaços e uso de imagens não
servem apenas para deixar o conteúdo visualmente
agradável.
Por isso, o Material Design também se
apoia nesses pilares, para ser o mais
intuitivo, claro e imersivo durante o uso.

9. Cores em contraste gerando uma hierarquia visual.
Nesta aplicação temos 03 elementos.
Exemplo de hierarquia de encaixes

10. CINÉTIC
O
O movimento é essencial no Material Design.
Seu uso proporciona foco, transição e feedback dos
elementos, tudo dentro de um mesmo ambiente.
Isso é pensado para que a continuidade não
seja afetada, mesmo havendo movimentação.

11. Efeito aplicado de sombra, na diagonal
esquerda inferior, isso traz um efeito de
movimento é um encaixe aplicado ao quadrado.
Exemplo de cinético

12. AMBIENTE E
SOMBRAS
Todos os objetos do Material Design possuem
eixos x, y e z. Ou seja, eles são 3D e possuem
comprimento, largura e altura referente ao plano de
fundo.
Esse ambiente tridimensional tem duas fontes de luz:
luz ambiente e luz direcional. Elas são combinadas
formando a iluminação presente nos elementos.

13. Esses aplicações de sombra são referenciadas
nos ambientes reais com luz projetada.
Exemplo luz aplicada no ambiente

14. AMBIENTE E
SOMBRAS
Por exemplo, se a sombra aumenta junto ao objeto, quer
dizer que ele aumentou sua altura relativa ao fundo.
Por outro lado, se a sombra se mantém igual, quer dizer
que o elemento aumentou de tamanho.
A iluminação é extremamente importante no Material
Design. Como todos os objetos seguem o mesmo eixo
para z (altura), é somente a sombra que eles projetam
que irá diferenciar qual está na frente e qual está no
fundo.
As sombras são fundamentais para a
compreensão dos componentes.

15. Sombra aumenta de forma
relativa junto ao objeto.
A sombra se mantém igual,
quer dizer que o elemento
aumentou de tamanho.
Exemplo de ambientação real e sombras

16. AMBIENTE E
SOMBRAS
Sempre que não estão em movimento no eixo z,
ficam em uma altura definida, que varia de acordo
com o componente visual.
As eleTodos os elementos do Material Design possuem
uma elevação de repouso padrão.
As diferentes alturas em relação ao fundo criam hierarquia
visual entre os componentes visuais, definindo quais têm
mais importância sobre os demais (e vice-versa).

17. Exemplo de subdivisões em "dp" nos eixos

18. Exemplo de subdivisões em "dp" nos
eixos com outros elementos

19. MOVIMENTO
Dessa forma, se torna bastante fluido
e agradável para o usuário.
O motion é um elemento crucial para sua
funcionalidade. Toda a cinética da
metodologia é pensada com base
nos movimentos naturais reais.
Dessa forma, se torna bastante fluido e agradável
para o usuário. Existem alguns preceitos do
movimento usados no Material. Por exemplo, os
elementos possuem bastante energia.

20. Movimento natural no Material
Design.
A linha e o círculo azul
indicam o usado, com
aceleração e
desaceleração.
Já os elementos
vermelhos indicam como
seria com um movimento
uniforme e mecanizado.

21. CORES
O Material Design possui uma paleta de cores
própria desenvolvida para ser harmoniosa,
contrastante e chamativa.
As cores podem ser usadas para criar hierarquia
visual, definindo quais elementos chamam mais
a atenção, e também definir o estado de algo.
Por exemplo, caso um elemento esteja errado qual
cor representa este elemento? Se um elemento
estiver certo qual seria com deste elemento?

22. O uso das cores precisa garantir contraste suficiente entre
os componentes visuais. No caso de texto, não use cores
sólidas, e sim diferentes opacidades de uma mesma
cor.
O mesmo acontece para diferenciar
destaques nos textos, seja cor clara em um
fundo escuro ou uma cor escura em um fundo
claro.

23. O Material Design possui duas fontes padrão usadas
nos diversos produtos: Roboto e Nato.
Roboto é a fonte desenvolvida pelo Google com
objetivo de ser funcional em uma grande gama de
dispositivos.
TIPOGRAFIA
GRAFIA
Possui formato um pouco mais largo e
arredondado para proporcionar maior clareza
durante a leitura e ser mais otimista.

24. Fonte aplicada no Material

25. ICONOGRAFIA
Os ícones são feitos a partir de formas
geométricas, simples e que, no total,
sintetizam a ideia fundamental do produto.
O Material Design utiliza uma grade bastante
versátil para a criação iconográfica, podendo
abranger diversos formatos em um único padrão.
Cada ícone é desenvolvido para parecer tátil e real.

26. Todos os ícones são criados a partir da grade
de ícones do Material Design.
Exemplo de padronização de ícones

27. Os melhores designers do Google tentando
descrever em palavras o Material Design.

29. Obrigado à
todos!