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.

COMO USAR

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?

Aplicações

Janelas

Blocos

Cards

Chame como quiser. O conceito é o mesmo:

AGRUPAR INFORMAÇÃO

COMPONENTES

ISTO DEFINE

UX/UI

SUPERFÍCIE

CORES

IMAGENS

TIPOGRAFIA

LAYOUT

ANIMAÇÕES

ÍCONES

COMPONENTES

Código

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

*LEMBRETE FINAL

LEVEZA É PERFORMANCE

Muito Obrigado!

Danilo Vitoriano@danvitoriano

fullcircle.com.brtableless.com.br/author/vitoriano/