AngularJS

Material Design

http://www.meetup.com/AngularJS-Sao-Paulo/

@americoneto1

Especificação de uma identidade visual unificada, com animações e design de interação que se adapta em diferentes dispositivos e tamanhos de tela.

Conteúdo

• Princípios
• Animações
• Estilo
• Layout
• Componentes

Material

 

Superfícies tangíveis

Profundidade

Eixo Z (3D)

Luz e sombreamento

Transformações do material

Foco no conteúdo

 

Animações

 

Authentic Motion

Responsive Interaction

Meaningful Transitions

Delightful Details

Transformações do material

 

 

Gráficos

 

Iconografia

Tipografia

Equilíbrio de cores

 

 

Layout

Contexto

Margens

Espaçamento

Componentes

• Bottom Sheets
• Buttons
• Cards
• Chips
• Dialogs
• Cards
• ...

Exemplos de Aplicações

WhatsApp Web - https://web.whatsapp.com/

SConverter - https://play.google.com/store/apps/details?id=com.SabriApps.SConverter

Google Design

http://www.google.com/design/

Angular JS Material Design

https://material.angularjs.org/#/

Frameworks

• Materialize CSS
• Lumx
• MaterialUI - ReactJS

Demos

• Topeka
• Paper Elements
• Polymer Designer

• Angular 1.4 - 30% mais rápido
• Release mais curtos (1.4, 1.5, 1.6...)
• Typescript 1.5
• Melhorias no ngAnimate
• Angular Material + Angular 2

NgConf Playlist

Obrigado