Google Material Design
Conceito, aplicações e código
@danvitoriano
@danvitoriano
frontendpro.com.br
Material Design é uma metáfora baseada em que os objetos
físicos tem propriedades físicas.
PAPEL E CANETA
IMAGINAÇÃO E MÁG...
?
Lugar onde pessoas constroem coisas.
Software como
matéria.
Como no mundo físico.
Ele quer encontrar o que procura.
O usuário não está nem
aí para experimentar sua
interface.
Só isso.
E é aí que muita gen...
COMO USAR
Matéria
• Animações
• Sombras
• Profundidade
• Camadas
Usadas como dicas para o usuário
encontrar o que procura
Usabilidade
• Mostrar onde a informação está
• Como a informação está organizada
• Qual a hierarquia
Os princípios do design
industrial e de produtos
aplicados às interfaces de
software.
Software tornou-se uma
ferramenta tão comum
no nosso cotidiano
quanto uma cadeira ou a
roupa que vestimos.
O QUE QUEREMOS
COM ISSO?
Funcionalidade.
Estética.
Leveza*.
DE ONDE PARTIMOS?
O nosso mundo é 3D
Profundidade, camadas e sombras
Smart Paper
Solução física aplicada à interface humano-computador
PRAZER,
MATERIAL DESIGN.
ORIGENS DO PROBLEMA
FLAT vs. SKEUMORFISMO
Flat Design
PRINCÍPIOS
• 3D
• Cores sólidas
• Minimalista
• Carregamento leve
• Responsiva
Flat Design
ESCOLAS
• International Typographic Style - Swiss Style (1950/60)
• Modernismo
• Bauhaus
Flat Design – Primeiras aplicações
• Microsoft Zune (2006)
• Windows Phone 7 (2010)
• Windows 8 (2012)
• Metro Design Styl...
Material by Google Design
• Google Now (2012) // not so material, but the card concept is inside
• Google Material Design ...
SVG
CSS3
HTML5
Novos padrões de
usabilidade humano-
computador facilitados
por:
#FRONTEND
Qual o diferencial do
Google Material
Design?
Aplicações
Janelas
Blocos
Cards
Chame como quiser.
O conceito é o mesmo:
AGRUPAR INFORMAÇÃO
COMPONENTES
ISTO DEFINE
UX/UI
SUPERFÍCIE
CORES
IMAGENS
TIPOGRAFIA
LAYOUT
ANIMAÇÕES
ÍCONES
COMPONENTES
Código
Comunidade Web Components
http://webcomponents.org/about/
Microsoft e Web Components
https://blogs.windows.com/msedgedev/2015/07/15/microsoft-edge-and-web-components/
Suporte:
Chro...
WEB COMPONENTS
Polymer paper elements
Material Design para aplicações web
https://www.polymer-project.org/0.5/docs/element...
1.
Polymer core elements
Animações, Layouts e Scaffolding
https://www.polymer-project.org/0.5/components/core-elements/dem...
2.
Paper elements
Controles
https://www.polymer-project.org/0.5/components/paper-elements/demo.html
Código Polymer
https://www.polymer-project.org/0.5/docs/elements/material.html
Hello World Polymer
https://github.com/webcomponents/hello-world-polymer
Google Material Design Lite Web Framework
http://www.getmdl.io/
Getting Started
http://www.getmdl.io/started/index.html
Button Example
http://www.getmdl.io/components/index.html#buttons-
section
Card Example
http://www.getmdl.io/components/index.html#cards-section
Navigation Layout Example
http://www.getmdl.io/components/index.html#layout-section
*LEMBRETE FINAL
LEVEZA É
PERFORMANCE
Muito Obrigado!
Danilo Vitoriano
@danvitoriano
fullcircle.com.br
tableless.com.br/author/vitoriano/
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
Próximos SlideShares
Carregando em…5
×

Google Material Design - Conceito, aplicações, código e web components

686 visualizações

Publicada em

Palestra e hangout: Danilo Vitoriano.
Os conceitos do guideline Material Design desenvolvido pela Google, as inspirações, testes, objetivos, além de exemplos de código, aplicação no desenvolvimento de sites, aplicativos e interfaces em geral, e por fim, uma breve abordagem sobre componentes web e a aplicação do Material Design com Polymer, um projeto de web components desenvolvido também pelo Google, e utilizado nos apps Google Music, Youtube e no site GItHub, por exemplo.

Publicada em: Internet
0 comentários
5 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
686
No SlideShare
0
A partir de incorporações
0
Número de incorporações
21
Ações
Compartilhamentos
0
Downloads
11
Comentários
0
Gostaram
5
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Google Material Design - Conceito, aplicações, código e web components

  1. 1. Google Material Design Conceito, aplicações e código @danvitoriano
  2. 2. @danvitoriano frontendpro.com.br
  3. 3. Material Design é uma metáfora baseada em que os objetos físicos tem propriedades físicas. PAPEL E CANETA IMAGINAÇÃO E MÁGICA Conceito
  4. 4. ?
  5. 5. Lugar onde pessoas constroem coisas. Software como matéria. Como no mundo físico.
  6. 6. Ele quer encontrar o que procura. O usuário não está nem aí para experimentar sua interface. Só isso. E é aí que muita gente falha.
  7. 7. COMO USAR
  8. 8. Matéria • Animações • Sombras • Profundidade • Camadas Usadas como dicas para o usuário encontrar o que procura
  9. 9. Usabilidade • Mostrar onde a informação está • Como a informação está organizada • Qual a hierarquia
  10. 10. Os princípios do design industrial e de produtos aplicados às interfaces de software.
  11. 11. Software tornou-se uma ferramenta tão comum no nosso cotidiano quanto uma cadeira ou a roupa que vestimos.
  12. 12. O QUE QUEREMOS COM ISSO?
  13. 13. Funcionalidade. Estética. Leveza*.
  14. 14. DE ONDE PARTIMOS?
  15. 15. O nosso mundo é 3D Profundidade, camadas e sombras
  16. 16. Smart Paper Solução física aplicada à interface humano-computador
  17. 17. PRAZER, MATERIAL DESIGN.
  18. 18. ORIGENS DO PROBLEMA
  19. 19. FLAT vs. SKEUMORFISMO
  20. 20. Flat Design PRINCÍPIOS • 3D • Cores sólidas • Minimalista • Carregamento leve • Responsiva
  21. 21. Flat Design ESCOLAS • International Typographic Style - Swiss Style (1950/60) • Modernismo • Bauhaus
  22. 22. Flat Design – Primeiras aplicações • Microsoft Zune (2006) • Windows Phone 7 (2010) • Windows 8 (2012) • Metro Design Style – primeiro guideline • Google Now (2012) • Apple iOS 7 (2013) • iOS Human Interface Guidelines • Apple OS X Yosemite (2014) • Google Material Design (2014) • Google Material Design Lite (2015) Outros frameworks: - Bootstrap - Foundation
  23. 23. Material by Google Design • Google Now (2012) // not so material, but the card concept is inside • Google Material Design (2014) • Google I/O – Android L • Polymer Web Components • Google Material Design Lite (2015) • Framework (HTML, CSS, JavaScript, Imagens, Fontes)
  24. 24. SVG CSS3 HTML5 Novos padrões de usabilidade humano- computador facilitados por: #FRONTEND
  25. 25. Qual o diferencial do Google Material Design?
  26. 26. Aplicações
  27. 27. Janelas
  28. 28. Blocos
  29. 29. Cards
  30. 30. Chame como quiser. O conceito é o mesmo: AGRUPAR INFORMAÇÃO
  31. 31. COMPONENTES ISTO DEFINE
  32. 32. UX/UI
  33. 33. SUPERFÍCIE
  34. 34. CORES IMAGENS
  35. 35. TIPOGRAFIA
  36. 36. LAYOUT
  37. 37. ANIMAÇÕES
  38. 38. ÍCONES
  39. 39. COMPONENTES
  40. 40. Código
  41. 41. Comunidade Web Components http://webcomponents.org/about/
  42. 42. Microsoft e Web Components https://blogs.windows.com/msedgedev/2015/07/15/microsoft-edge-and-web-components/ Suporte: Chrome Mozilla Safari Opera
  43. 43. WEB COMPONENTS Polymer paper elements Material Design para aplicações web https://www.polymer-project.org/0.5/docs/elements/
  44. 44. 1. Polymer core elements Animações, Layouts e Scaffolding https://www.polymer-project.org/0.5/components/core-elements/demo.html
  45. 45. 2. Paper elements Controles https://www.polymer-project.org/0.5/components/paper-elements/demo.html
  46. 46. Código Polymer https://www.polymer-project.org/0.5/docs/elements/material.html
  47. 47. Hello World Polymer https://github.com/webcomponents/hello-world-polymer
  48. 48. Google Material Design Lite Web Framework http://www.getmdl.io/
  49. 49. Getting Started http://www.getmdl.io/started/index.html
  50. 50. Button Example http://www.getmdl.io/components/index.html#buttons- section
  51. 51. Card Example http://www.getmdl.io/components/index.html#cards-section
  52. 52. Navigation Layout Example http://www.getmdl.io/components/index.html#layout-section
  53. 53. *LEMBRETE FINAL
  54. 54. LEVEZA É PERFORMANCE
  55. 55. Muito Obrigado! Danilo Vitoriano @danvitoriano fullcircle.com.br tableless.com.br/author/vitoriano/

×