Material Design - do smartphone ao desktop

320 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Design
0 Kommentare
3 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
320
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
1
Aktionen
Geteilt
0
Downloads
2
Kommentare
0
Gefällt mir
3
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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!

×