O documento descreve o Material Design, uma abordagem de design desenvolvida pelo Google para criar uma experiência de usuário consistente entre dispositivos. O Material Design objetiva criar uma identidade visual que combina princípios clássicos de design com inovações tecnológicas, permitindo uma experiência unificada em plataformas diferentes. Exemplos demonstram como o Material Design foi aplicado em aplicativos móveis e sites desktop.

1. Material Design:
do smartphone ao desktop

2. Sobre mim
mais de 3 anos de experiência
web designer e front-end developer
atualmente trabalhando na Addtech
Para me encontrar:
● Portfólio: http://hillarysousa.com/
● E-mail: falecom@hillarysousa.com
● Behance: https://www.behance.net/hillarysousa
● Dribbble: https://dribbble.com/hillarysousa
● LinkedIn: https://www.linkedin.com/in/hillarysousa
● Slideshare: http://pt.slideshare.net/hillarysousa
● Twitter: @hillaryhp
● Instagram: @hillaryhp
● Facebook: /hillaryhp

3. Afinal, o que é
Material Design?

4. Uma olhada no início
• Google anuncia o Material Design durante o evento Google I/O 2014
• Utiliza Polymer (biblioteca desenvolvida e mantida pelo Google para o
desenvolvimento de Web Components em browsers atuais)
• Material Design começa a ser aplicado em 2015 nos apps Google

5. Objetivos do Material Design
• Criar uma identidade visual que sintetiza princípios clássicos do bom
design com a inovação e as possibilidades que a tecnologia e a ciência
trazem
• Desenvolver um sistema único que permita uma experiência unificada
entre plataformas e dispositivos de diversos tamanhos

6. Princípios do Material Design
• Material é a metáfora
• Extremamente intencional
• Movimento propõe significado

7. Certo, certo…
Mas cadê os
exemplos?

8. Exemplos de aplicativos mobile com Material Design

9. Exemplos de aplicativos mobile com Material Design

10. E o Material Design
no desktop?

11. Desafios na implementação
• Fator “clean” torna a aplicação um desafio
• Hábitos do usuário não incentivam
• Uso excessivo de JavaScript pode atrapalhar performance

12. Exemplos de sites desktop com Material Design

13. Exemplos de sites desktop com Material Design

14. Exemplos de sites desktop com Material Design

15. Ok, mas como
mudamos isso?

16. FRAMEWORKS
FRONT-END!
(e temas)
(e amor)

17. 1. Material Design Lite: https://getmdl.io/ (em inglês)
2. Materialize CSS: http://materializecss.com/ (em inglês)
3. MDL Wordpress Theme: http://mdlwp.com/ (em inglês)
4. MaterialWP : http://materialwp.com/ (em inglês)
Quarteto fantástico

18. Prós e contras
• Facilidade na implementação
• Hábitos de uso de outros frameworks
torna o desenvolvimento mais intuitivo
• São responsivos
• Altamente customizáveis
• São Open Source e estão no GitHub
• Podem afetar a performance do site
• Não possuem todos os componentes do
Material Design
• Dependem de jQuery para animações

19. Resumindo
Material Design é uma tendência irada em web design, UX e UI, mas um tanto
inexplorada (principalmente em terras tupiniquins).
Vamos quebrar um pouco a tradição do header-content-footer e nos aventurar
mais em novos caminhos?

20. #mandalinks
• Material Design guidelines: https://material.google.com/ (em inglês)
• Material icons: https://design.google.com/icons/ (em inglês)
• Material Design para Android:
https://developer.android.com/design/material/index.html
• Angular Material: https://material.angularjs.org/latest/ (em inglês)
• Polymer: https://elements.polymer-project.org/browse?package=paper-
elements (em inglês)

21. PERGUNTAS?

22. OBRIGADA!