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: 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

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 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

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 de JavaScript pode atrapalhar performance

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 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)

PERGUNTAS?

OBRIGADA!