google material design - conceito, aplicações, código e web components
TRANSCRIPT
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
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.
Matéria
• Animações
• Sombras
• Profundidade
• Camadas
Usadas como dicas para o usuárioencontrar o que procura
Usabilidade
• Mostrar onde a informação está
• Como a informação está organizada
• Qual a hierarquia
Software tornou-se umaferramenta tão comum
no nosso cotidianoquanto uma cadeira ou a
roupa que vestimos.
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 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
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)
Microsoft e Web Componentshttps://blogs.windows.com/msedgedev/2015/07/15/microsoft-edge-and-web-components/
Suporte:ChromeMozillaSafariOpera
WEB COMPONENTS
Polymer paper elementsMaterial Design para aplicações web
https://www.polymer-project.org/0.5/docs/elements/
1.Polymer core elementsAnimações, Layouts e Scaffolding
https://www.polymer-project.org/0.5/components/core-elements/demo.html