Baixado 20 vezes
Carregado porDan Vitoriano
Google Material Design - Conceito, aplicações, código e web components
O documento descreve os princípios e aplicações do Material Design do Google. Apresenta o conceito de design baseado na metáfora de materiais do mundo físico e como isso é aplicado às interfaces digitais por meio de elementos como animações, sombras e profundidade. Também explica como componentes como janelas, blocos e cards podem ser usados para agrupar informações de forma hierárquica e facilitar a usabilidade.
Mais conteúdo relacionado
![Luciana [Lumyx] Portfolio Moda 1](https://cdn.slidesharecdn.com/ss_thumbnails/flagmoda-090817165945-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Semelhante a Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
- 1. Google Material Design Conceito,aplicações e código @danvitoriano
- 2.
- 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 pessoasconstroem coisas. Software como matéria. Como no mundo físico.
- 6. Ele quer encontraro que procura. O usuário não está nem aí para experimentar sua interface. Só isso. E é aí que muita gente falha.
- 7.
- 8. Matéria • Animações • Sombras •Profundidade • Camadas Usadas como dicas para o usuário encontrar o que procura
- 9. Usabilidade • Mostrar ondea informação está • Como a informação está organizada • Qual a hierarquia
- 10. Os princípios dodesign industrial e de produtos aplicados às interfaces de software.
- 11. Software tornou-se uma ferramentatão comum no nosso cotidiano quanto uma cadeira ou a roupa que vestimos.
- 12. O QUE QUEREMOS COMISSO?
- 13.
- 14.
- 16. O nosso mundoé 3D Profundidade, camadas e sombras
- 20. Smart Paper Solução físicaaplicada à interface humano-computador
- 23.
- 25.
- 26.
- 28. Flat Design PRINCÍPIOS • 3D •Cores sólidas • Minimalista • Carregamento leve • Responsiva
- 29. Flat Design ESCOLAS • InternationalTypographic Style - Swiss Style (1950/60) • Modernismo • Bauhaus
- 30. 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
- 34. Material by GoogleDesign • 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)
- 42. SVG CSS3 HTML5 Novos padrões de usabilidadehumano- computador facilitados por: #FRONTEND
- 43. Qual o diferencialdo Google Material Design?
- 44.
- 45.
- 47.
- 49.
- 51. Chame como quiser. Oconceito é o mesmo: AGRUPAR INFORMAÇÃO
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 62.
- 63.
- 66.
- 67. Microsoft e WebComponents https://blogs.windows.com/msedgedev/2015/07/15/microsoft-edge-and-web-components/ Suporte: Chrome Mozilla Safari Opera
- 72. WEB COMPONENTS Polymer paperelements Material Design para aplicações web https://www.polymer-project.org/0.5/docs/elements/
- 73. 1. Polymer core elements Animações,Layouts e Scaffolding https://www.polymer-project.org/0.5/components/core-elements/demo.html
- 74.
- 75.
- 76.
- 77. Google Material DesignLite Web Framework http://www.getmdl.io/
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.