Google Material Design - Conceito, aplicações, código e web components
•Als PPTX, PDF herunterladen•
5 gefällt mir•1,008 views
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.
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Google Material Design - Conceito, aplicações, código e web components
Ähnlich wie Google Material Design - Conceito, aplicações, código e web components (20)
Mehr von Dan Vitoriano
Mehr von Dan Vitoriano (20)
Google Material Design - Conceito, aplicações, código e web components
- 1. Google Material Design Conceito, aplicações e código @danvitoriano
- 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?
- 16. O nosso mundo é 3D Profundidade, camadas e sombras
- 20. Smart Paper Solução física aplicada à interface humano-computador
- 28. Flat Design PRINCÍPIOS • 3D • Cores sólidas • Minimalista • Carregamento leve • Responsiva
- 29. Flat Design ESCOLAS • International Typographic 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 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)
- 42. SVG CSS3 HTML5 Novos padrões de usabilidade humano- computador facilitados por: #FRONTEND
- 43. Qual o diferencial do Google Material Design?
- 44. Aplicações
- 45. Janelas
- 47. Blocos
- 49. Cards
- 51. Chame como quiser. O conceito é o mesmo: AGRUPAR INFORMAÇÃO
- 54. UX/UI
- 55. SUPERFÍCIE
- 56. CORES IMAGENS
- 57. TIPOGRAFIA
- 58. LAYOUT
- 59. ANIMAÇÕES
- 60. ÍCONES
- 62. COMPONENTES
- 63. Código
- 67. Microsoft e Web Components https://blogs.windows.com/msedgedev/2015/07/15/microsoft-edge-and-web-components/ Suporte: Chrome Mozilla Safari Opera
- 72. WEB COMPONENTS Polymer paper elements 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. 2. Paper elements Controles https://www.polymer-project.org/0.5/components/paper-elements/demo.html
- 77. Google Material Design Lite Web Framework http://www.getmdl.io/
- 82. *LEMBRETE FINAL