Material design

25
Material Design

Transcript of Material design

Page 1: Material design

Material Design

Page 2: Material design

Bruno Castro Designer de interfaces na Take.netBacharel em Artes pela UEMGEstudante de Análise e Desenvolvimento de Sistemas

dribbble.com/brunocastro

codepen.io/bruno_castro/

portfolio.brunocastro.me/

Page 3: Material design

Material Design?O que é

Page 4: Material design
Page 5: Material design

O Material Design é um divisor de águas na experiência do usuário. Ele está fundamentado na realidade tátil, inspirado em um estudo de papel e tinta com imaginação e magia: Superfícies e sombras sugerem uma estrutura física para dar indícios do que pode ser tocado e o que pode se mover.

(Huge INC)

?

Page 6: Material design
Page 7: Material design

Em interface?Como traduzir

Page 8: Material design
Page 9: Material design

Não faça isso!

Page 10: Material design
Page 11: Material design

e o belo.O Binário

Page 12: Material design

961272 x 360

408 x 288 792 x 288

1272 x 24

Page 13: Material design
Page 14: Material design

Pixel perfect

Page 15: Material design

Cores

Page 16: Material design

As cores no material design são inspiradas por tons ousados, justapostos com ambientes suaves, sombras profundas, e destaques brilhantes. O Material tem influências da arquitetura contemporânea, sinais de trânsito, marcação de pavimento e quadras esportivas. A cor deve ser inesperada e vibrante.

Page 17: Material design
Page 18: Material design

Material fontRoboto:

Page 19: Material design
Page 20: Material design

MaterialMaterialMaterialMaterialMaterialMaterial

MaterialMaterialMaterialMaterialMaterialMaterial

Page 21: Material design

WebComponentsFrameworks e

Page 22: Material design

Polimerpolymer-project.org

Angular Materialmaterial.angularjs.org

Bootstrap material fezvrasta.github.io/bootstrap-material-design/

Materializematerializecss.com

Page 23: Material design

GuidelinesDesign / coder

Page 24: Material design

Guidelines Google de design

http://g.co/design/Guidelines Google para developers

https://goo.gl/Pd5g8Bônushttps://dribbble.com/google