Material Design - do smartphone ao desktop
Transferir como PPTX, PDF4 gostaram766 visualizações
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.
Material Design - do smartphone ao 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?
- 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!