Google Material DesignConceito, 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ÁGICA
Conceito
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 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
Os princípios do design industrial e de produtos
aplicados às interfaces de software.
Software tornou-se umaferramenta tão comum
no nosso cotidianoquanto uma cadeira ou a
roupa que vestimos.
O QUE QUEREMOS COM ISSO?
Funcionalidade.
Estética.
Leveza*.
DE ONDE PARTIMOS?
O nosso mundo é 3DProfundidade, camadas e sombras
Smart PaperSoluçã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 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)
SVG
CSS3
HTML5
Novos padrões de usabilidade humano-
computador facilitados por:
#FRONTEND
Qual o diferencial do Google Material
Design?
Chame como quiser. O conceito é o mesmo:
AGRUPAR INFORMAÇÃO
COMPONENTES
ISTO DEFINE
Comunidade Web Componentshttp://webcomponents.org/about/
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
2.Paper elementsControles
https://www.polymer-project.org/0.5/components/paper-elements/demo.html
Código Polymerhttps://www.polymer-project.org/0.5/docs/elements/material.html
Hello World Polymerhttps://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
LEVEZA É PERFORMANCE
Muito Obrigado!
Danilo Vitoriano@danvitoriano
fullcircle.com.brtableless.com.br/author/vitoriano/