O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Material Design
thiengo.com.br
Vinícius Thiengo
Anterior ao Material Design
Holo Design
- Lançado em 2011 junto ao
Android 4, Ice Cream
Sandwich;
- Permitiu um padrão de
...
Origem
Android com o Quantum
Paper Design
- Quantum Paper;
- Polymer (2013);
- Unificação das interfaces;
- "Espaços racion...
Lançamento
Google+, Android App,
com o Material Design
- Google I/O 2014;
- Android 5, Lollipop;
- Foco na experiência do ...
Objetivos
Realidade tátil
- Unificação das interfaces:
Android, Chrome OS e Web
Apps;
- Mundo real no mundo digital:
- Resp...
Objetivos - vindos do mundo digital
Materiais em mesmo nível
- Animação de objetos em mesmo
nível (junção e separação);
- ...
Regras a serem seguidas
Animação lenta, quebrando
regras do Material Design
- Animação / movimento no modelo
curvado, simu...
Similaridades
Similaridade com o Metro UI e com o design aplicado ao iOS desde a versão 7.
Porém formas retangulares, com ...
Principais características
- Formas;
- Cores;
- Ícones;
- Tipografia;
- Imagens;
- Animação;
- Profundidade.
Formas
Google Now
Retângulos, grandes
espaços em branco, grids
e bordas suaves para
aumentar a clareza do
conteúdo
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 ...
Ícones
Ícone de produto
Divididos em dois tipos:
produto e sistema.
- Produto (launcher icon):
pode ser complexo, com
mais...
Fontes comuns: Roboto e
Noto.
O trabalho com família de
fontes é flexível. Com o
Android já tínhamos o
Typeface.
A partir d...
- Apresentação de conteúdos
e avatares;
- Devem ser relevantes ao
que o usuário está
consumindo;
- Não devem ter bordas ou...
- Simular o movimento de
objetos no mundo real;
- Ter resposta imediata a
interação do usuário.
Realidade tátil;
- Ser sim...
Profundidade
- Objetos individuais,
como no mundo real;
- Separação em nível,
camada, perceptível
ao usuário: luzes e
somb...
Componentes comuns
Barra de topo (toolbar)
Menu gaveta
(NavigationDrawer) Dialog Framework de lista
Devemos aguardar uma nova linguagem de Design?
A princípio o que está por vir são apenas
atualizações no próprio Material ...
Material Design
https://www.thiengo.com.br
Vinícius Thiengo
thiengocalopsita@gmail.com
Próximos SlideShares
Carregando em…5
×

Material Design

10.017 visualizações

Publicada em

➙ 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

Publicada em: Design
  • Login to see the comments

Material Design

  1. 1. Material Design thiengo.com.br Vinícius Thiengo
  2. 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. 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. 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. 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. 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. 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. 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. 9. Principais características - Formas; - Cores; - Ícones; - Tipografia; - Imagens; - Animação; - Profundidade.
  10. 10. Formas Google Now Retângulos, grandes espaços em branco, grids e bordas suaves para aumentar a clareza do conteúdo
  11. 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. 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. 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. 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. 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. 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. 17. Componentes comuns Barra de topo (toolbar) Menu gaveta (NavigationDrawer) Dialog Framework de lista
  18. 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. 19. Material Design https://www.thiengo.com.br Vinícius Thiengo thiengocalopsita@gmail.com

×