Google Material Design

Conceito, aplicações e código
Por Danilo Vitoriano
#FEMUGABC

Transcript

1. Google Material Design Conceito, aplicações e código @danvitoriano
2. @danvitoriano frontendpro.com.br
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. ?
5. Lugar onde pessoas constroem coisas. Software como matéria. Como no mundo físico.
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. COMO USAR
8. Matéria • Animações • Sombras • Profundidade • Camadas Usadas como dicas para o usuário encontrar o que procura
9. Usabilidade • Mostrar onde a informação está • Como a informação está organizada • Qual a hierarquia
10. Os princípios do design industrial e de produtos aplicados às interfaces de software.
11. Software tornou-se uma ferramenta tão comum no nosso cotidiano quanto uma cadeira ou a roupa que vestimos.
12. O QUE QUEREMOS COM ISSO?
13. Funcionalidade. Estética. Leveza*.
14. DE ONDE PARTIMOS?
16. O nosso mundo é 3D Profundidade, camadas e sombras
19. Smart Paper Solução física aplicada à interface humano-computador
22. PRAZER, MATERIAL DESIGN.
23. ORIGENS DO PROBLEMA
24. FLAT vs. SKEUMORFISMO
26. Flat Design PRINCÍPIOS • 3D • Cores sólidas • Minimalista • Carregamento leve • Responsiva
27. Flat Design ESCOLAS • International Typographic Style - Swiss Style (1950/60) • Modernismo • Bauhaus
28. 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
32. 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)
40. SVG CSS3 HTML5 Novos padrões de usabilidade humano- computador facilitados por: #FRONTEND
41. Qual o diferencial do Google Material Design?
42. Aplicações
43. Janelas
45. Blocos
47. Cards
49. Chame como quiser. O conceito é o mesmo: AGRUPAR INFORMAÇÃO
51. COMPONENTES ISTO DEFINE
52. UX/UI
53. SUPERFÍCIE
54. CORES IMAGENS
55. TIPOGRAFIA
56. LAYOUT
57. ANIMAÇÕES
58. ÍCONES
60. COMPONENTES
61. Código
64. Comunidade Web Components http://webcomponents.org/about/
65. Microsoft e Web Components https://blogs.windows.com/msedgedev/2015/07/15/microsoft-edge-and-web-components/ Suporte: Chrome Mozilla Safari Opera
70. WEB COMPONENTS Polymer paper elements Material Design para aplicações web https://www.polymer-project.org/0.5/docs/elements/
71. 1. Polymer core elements Animações, Layouts e Scaffolding https://www.polymer-project.org/0.5/components/core-elements/demo.html
72. 2. Paper elements Controles https://www.polymer-project.org/0.5/components/paper-elements/demo.html
73. Código Polymer https://www.polymer-project.org/0.5/docs/elements/material.html
74. Hello World Polymer https://github.com/webcomponents/hello-world-polymer
75. Google Material Design Lite Web Framework http://www.getmdl.io/
76. Getting Started http://www.getmdl.io/started/index.html
77. Button Example http://www.getmdl.io/components/index.html#buttons-section
78. Card Example http://www.getmdl.io/components/index.html#cards-section
79. Navigation Layout Example http://www.getmdl.io/components/index.html#layout-section
80. *LEMBRETE FINAL
81. LEVEZA É PERFORMANCE
82. Muito Obrigado! Danilo Vitoriano @danvitoriano fullcircle.com.br tableless.com.br/author/vitoriano/