O SlideShare utiliza cookies para otimizar a funcionalidade e o desempenho do site, assim como para apresentar publicidade mais relevante aos nossos usuários. Se você continuar a navegar o site, você aceita o uso de cookies. Leia nosso Contrato do Usuário e nossa Política de Privacidade.
O SlideShare utiliza cookies para otimizar a funcionalidade e o desempenho do site, assim como para apresentar publicidade mais relevante aos nossos usuários. Se você continuar a utilizar o site, você aceita o uso de cookies. Leia nossa Política de Privacidade e nosso Contrato do Usuário para obter mais detalhes.
O slideshow foi denunciado.
Ative o seu período de avaliaçõo gratuito de 30 dias para desbloquear leituras ilimitadas.
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.
Transcrição
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
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
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
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)
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.
Transcrição
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
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
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
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)