Successfully reported this slideshow.
Material Design:
do smartphone ao desktop
Sobre mim
mais de 3 anos de experiência
web designer e front-end developer
atualmente trabalhando na Addtech
Para me encon...
Afinal, o que é
Material Design?
Uma olhada no início
• Google anuncia o Material Design durante o evento Google I/O 2014
• Utiliza Polymer (biblioteca des...
Objetivos do Material Design
• Criar uma identidade visual que sintetiza princípios clássicos do bom
design com a inovação...
Princípios do Material Design
• Material é a metáfora
• Extremamente intencional
• Movimento propõe significado
Certo, certo…
Mas cadê os
exemplos?
Exemplos de aplicativos mobile com Material Design
Exemplos de aplicativos mobile com Material Design
E o Material Design
no desktop?
Desafios na implementação
• Fator “clean” torna a aplicação um desafio
• Hábitos do usuário não incentivam
• Uso excessivo...
Exemplos de sites desktop com Material Design
Exemplos de sites desktop com Material Design
Exemplos de sites desktop com Material Design
Ok, mas como
mudamos isso?
FRAMEWORKS
FRONT-END!
(e temas)
(e amor)
1. Material Design Lite: https://getmdl.io/ (em inglês)
2. Materialize CSS: http://materializecss.com/ (em inglês)
3. MDL ...
Prós e contras
• Facilidade na implementação
• Hábitos de uso de outros frameworks
torna o desenvolvimento mais intuitivo
...
Resumindo
Material Design é uma tendência irada em web design, UX e UI, mas um tanto
inexplorada (principalmente em terras...
#mandalinks
• Material Design guidelines: https://material.google.com/ (em inglês)
• Material icons: https://design.google...
PERGUNTAS?
OBRIGADA!
Prochain SlideShare
Chargement dans…5
×

Material Design - do smartphone ao desktop

459 vues

Publié le

Você já deve ter visto, no seu celular, a mais nova tendência em web design: o Material Design. Mas como ele funciona? E, o principal, como levar essa nova tendência do smartphone para o desktop?

No 19º WordPress Meetup Rio de Janeiro, Hillary Sousa falará sobre Material Design, o framework de design da Google.

Publié dans : Design
  • Soyez le premier à commenter

Material Design - do smartphone ao desktop

  1. 1. Material Design: do smartphone ao desktop
  2. 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. 3. Afinal, o que é Material Design?
  4. 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. 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. 6. Princípios do Material Design • Material é a metáfora • Extremamente intencional • Movimento propõe significado
  7. 7. Certo, certo… Mas cadê os exemplos?
  8. 8. Exemplos de aplicativos mobile com Material Design
  9. 9. Exemplos de aplicativos mobile com Material Design
  10. 10. E o Material Design no desktop?
  11. 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. 12. Exemplos de sites desktop com Material Design
  13. 13. Exemplos de sites desktop com Material Design
  14. 14. Exemplos de sites desktop com Material Design
  15. 15. Ok, mas como mudamos isso?
  16. 16. FRAMEWORKS FRONT-END! (e temas) (e amor)
  17. 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. 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. 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. 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. 21. PERGUNTAS?
  22. 22. OBRIGADA!

×