Baixar para ler offline
Carregado porHillary Sousa
Material Design - do smartphone ao desktop
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.
Mais conteúdo relacionado
Semelhante a Material Design - do smartphone ao desktop
Material Design - do smartphone ao desktop
- 1. Material Design: do smartphoneao desktop
- 2. Sobre mim mais de3 anos de experiência web designer e front-end developer atualmente trabalhando na Addtech Para me encontrar: ● Portfólio: http://hillarysousa.com/ ● E-mail: [email protected] ● 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 noiní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 MaterialDesign • 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 MaterialDesign • Material é a metáfora • Extremamente intencional • Movimento propõe significado
- 7. Certo, certo… Mas cadêos exemplos?
- 8. Exemplos de aplicativosmobile com Material Design
- 9. Exemplos de aplicativosmobile com Material Design
- 10. E o MaterialDesign 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 sitesdesktop com Material Design
- 13. Exemplos de sitesdesktop com Material Design
- 14. Exemplos de sitesdesktop com Material Design
- 15. Ok, mas como mudamosisso?
- 16.
- 17. 1. Material DesignLite: 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 Designguidelines: 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.
- 22.