Material Design - do smartphone ao desktop
-
Upload
hillary-sousa -
Category
Design
-
view
351 -
download
4
Transcript of 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 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
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
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
Princípios do Material Design
• Material é a metáfora
• Extremamente intencional
• Movimento propõe significado
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
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
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
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?
#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)