SlideShare une entreprise Scribd logo
1  sur  23
Télécharger pour lire hors ligne
UI E UX NO
MATERIAL DESIGN
Qual a importância desses dois conceitos?
Onde encontramos a aplicação deles no Material Design?
Google I/O Extended Maceió
Maio 2015
• Estudante de Ciência da
Computação
• Front-end developer
• Colunista no DobreaDireita.com
• Imitador da Marília Gabriela (só
quando insistem muito)Gustavo Gobbi
Quem sou eu?
UI Designer UX Designer
Parte criativa e visual
Elementos consistentes
O famoso “designer”
Lado emocional
Facilidade de uso
Fluidez e clareza
Material Design
Material Design
• Anunciado na Google I/O 2014 e
introduzido primeiramente no Android
5.0 Lollipop
• "Create a visual language that
synthesizes classic principles of good
design with the innovation and
possibility of technology and science”
• Também presente na web através de
frameworks como Polymer, Materialize,
Leaf e outros
• Keep calm: a Google não vai mudar para
outra guideline nessa Google I/O
• Confirmação visual
instantânea no ponto de
contato
• Mecanismo Touch Ripple
• Articulação de ataque e
duração do evento do
toque
Calculadora
Surface reaction
Light and Shadow
• Elevação: O conteúdo
embaixo ainda é visível,
mas é escurecido como
uma sombra
• Hierarquia: Ao ser ativada
uma pequena janela,
sabemos que ela pertence
à janela anterior
Popcorn Time
Floating action button
• Promoted actions
• Não à ditadura das
toolbars!
• Experiência de leitura
continua ótima
Periscope
Meaningful transitions…
• Direcionamento da
atenção do usuário
• Movimento com precisão
• Conexão entre transações
Relay
…and delightful details
Pocket Casts
…and delightful details
Pocket Casts
…and delightful details
Netflix
…and delightful details
Netflix
Icons
https://github.com/google/material-design-icons
• System icons
Icons
• App icons
Hangouts Keep SeriesGuide
Colors
• Coesão com a marca
• Paleta de cores
• Cores primárias e
secundárias
SeriesGuide
#523991
#65459F
#2A2A2A
#029688
Tipografia
https://github.com/google/roboto
• Roboto
Cards
• Separação de conteúdos
• Contém diferentes elementos
• Hierarquia
Soundcloud
Chips
Data tables
Dialogs
Dividers
Lists
Menus Pickers
Progress & activity
Selection controls
Sliders
Snackbars & toasts
Tabs
google.com/design
fb.com/gobbigustavo
@GobbiGustavo
+GustavoGobbi
gustavogobbi@ic.ufal.br
Thank you!

Contenu connexe

Tendances

Tendances (20)

Mobile First (ou boas razões para investir em Mobile)
Mobile First (ou boas razões para investir em Mobile)Mobile First (ou boas razões para investir em Mobile)
Mobile First (ou boas razões para investir em Mobile)
 
O papel do Front-End na UX
O papel do Front-End na UXO papel do Front-End na UX
O papel do Front-End na UX
 
Ux design antes do wireframe
Ux design antes do wireframeUx design antes do wireframe
Ux design antes do wireframe
 
Desenvolvimento Centrado no Usuário
Desenvolvimento Centrado no UsuárioDesenvolvimento Centrado no Usuário
Desenvolvimento Centrado no Usuário
 
Design Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface DigitalDesign Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface Digital
 
Lean UX + Agile UX
Lean UX + Agile UXLean UX + Agile UX
Lean UX + Agile UX
 
UX como estratégia para conquistar clientes e impactar negócios
UX como estratégia para conquistar clientes e impactar negóciosUX como estratégia para conquistar clientes e impactar negócios
UX como estratégia para conquistar clientes e impactar negócios
 
Ux design/Experiência do Usuário - Conexão KingHost 2015
Ux design/Experiência do Usuário - Conexão KingHost 2015Ux design/Experiência do Usuário - Conexão KingHost 2015
Ux design/Experiência do Usuário - Conexão KingHost 2015
 
Niveis maturidade UX
Niveis maturidade UXNiveis maturidade UX
Niveis maturidade UX
 
Ux nas organizações
Ux nas organizaçõesUx nas organizações
Ux nas organizações
 
Agile User Experience
Agile User ExperienceAgile User Experience
Agile User Experience
 
Interação e relacionamento PO com equipe de UX e Designers do Instituto de Pe...
Interação e relacionamento PO com equipe de UX e Designers do Instituto de Pe...Interação e relacionamento PO com equipe de UX e Designers do Instituto de Pe...
Interação e relacionamento PO com equipe de UX e Designers do Instituto de Pe...
 
Mamãe, Polícia!” — As interfaces conversacionais e seus desafios criativos pa...
Mamãe, Polícia!” — As interfaces conversacionais e seus desafios criativos pa...Mamãe, Polícia!” — As interfaces conversacionais e seus desafios criativos pa...
Mamãe, Polícia!” — As interfaces conversacionais e seus desafios criativos pa...
 
UX é o novo SEO
UX é o novo SEOUX é o novo SEO
UX é o novo SEO
 
style guide ui
style guide uistyle guide ui
style guide ui
 
Workshop • UX design •
Workshop • UX design •  Workshop • UX design •
Workshop • UX design •
 
Lean UX + Scrum: Aplicado em projetos Mobile
Lean UX + Scrum: Aplicado em projetos MobileLean UX + Scrum: Aplicado em projetos Mobile
Lean UX + Scrum: Aplicado em projetos Mobile
 
Lean UX
Lean UXLean UX
Lean UX
 
UX Design para Desenvolvedores
UX Design para DesenvolvedoresUX Design para Desenvolvedores
UX Design para Desenvolvedores
 
Como designers e desenvolvedores podem trabalhar juntos para fazer produtos m...
Como designers e desenvolvedores podem trabalhar juntos para fazer produtos m...Como designers e desenvolvedores podem trabalhar juntos para fazer produtos m...
Como designers e desenvolvedores podem trabalhar juntos para fazer produtos m...
 

En vedette

En vedette (20)

UX - UI DESIGN / MÉTODOS
UX - UI DESIGN / MÉTODOSUX - UI DESIGN / MÉTODOS
UX - UI DESIGN / MÉTODOS
 
Processo de design digital
Processo de design digitalProcesso de design digital
Processo de design digital
 
Simplificando o design digital
Simplificando o design digitalSimplificando o design digital
Simplificando o design digital
 
O que é Arquitetura de Informação e UX Design: visão de uma bibliotecária inf...
O que é Arquitetura de Informação e UX Design: visão de uma bibliotecária inf...O que é Arquitetura de Informação e UX Design: visão de uma bibliotecária inf...
O que é Arquitetura de Informação e UX Design: visão de uma bibliotecária inf...
 
UX Design: desenvolver experiências positivas - #8 Industry Sessions by EDIT....
UX Design: desenvolver experiências positivas - #8 Industry Sessions by EDIT....UX Design: desenvolver experiências positivas - #8 Industry Sessions by EDIT....
UX Design: desenvolver experiências positivas - #8 Industry Sessions by EDIT....
 
WPI Aula 01
WPI Aula 01WPI Aula 01
WPI Aula 01
 
Hack2B Startups - UX?
Hack2B Startups - UX?Hack2B Startups - UX?
Hack2B Startups - UX?
 
Backbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectadosBackbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectados
 
WPI Aula 05
WPI Aula 05WPI Aula 05
WPI Aula 05
 
WPI – Pós Design de Interação IEC PUC Minas aula06
WPI – Pós Design de Interação IEC PUC Minas aula06WPI – Pós Design de Interação IEC PUC Minas aula06
WPI – Pós Design de Interação IEC PUC Minas aula06
 
User Interface (UI) x User Experience (UX)
User Interface (UI) x User Experience (UX)User Interface (UI) x User Experience (UX)
User Interface (UI) x User Experience (UX)
 
WPI – Pós Design de Interação IEC PUC Minas aula04
WPI – Pós Design de Interação IEC PUC Minas aula04WPI – Pós Design de Interação IEC PUC Minas aula04
WPI – Pós Design de Interação IEC PUC Minas aula04
 
WPI – Pós Design de Interação IEC PUC Minas aula05
WPI – Pós Design de Interação IEC PUC Minas aula05WPI – Pós Design de Interação IEC PUC Minas aula05
WPI – Pós Design de Interação IEC PUC Minas aula05
 
Front end, back end, full stack. onde vivem o que comem hoje na uni_granrio
Front end, back end, full stack.  onde vivem  o que comem   hoje na uni_granrioFront end, back end, full stack.  onde vivem  o que comem   hoje na uni_granrio
Front end, back end, full stack. onde vivem o que comem hoje na uni_granrio
 
Programação web e o front-end
Programação web e o front-endProgramação web e o front-end
Programação web e o front-end
 
Desenvolvimento de Games com Phaser
Desenvolvimento de Games com PhaserDesenvolvimento de Games com Phaser
Desenvolvimento de Games com Phaser
 
WPI Aula 04
WPI Aula 04WPI Aula 04
WPI Aula 04
 
Design Responsivo
Design ResponsivoDesign Responsivo
Design Responsivo
 
Design Thinking - Aula 01
Design Thinking - Aula 01Design Thinking - Aula 01
Design Thinking - Aula 01
 
UX Samsung
UX SamsungUX Samsung
UX Samsung
 

Similaire à UI e UX no Material Design

UX e Métodos Ágeis: Adversários ou Parceiros?
UX e Métodos Ágeis: Adversários ou Parceiros?UX e Métodos Ágeis: Adversários ou Parceiros?
UX e Métodos Ágeis: Adversários ou Parceiros?
Carlos Rosemberg
 
Experiência do Usuário como prática na Locaweb
Experiência do Usuário como prática na LocawebExperiência do Usuário como prática na Locaweb
Experiência do Usuário como prática na Locaweb
Andreza Godoy
 
Pesquisas em usabilidade de interfaces e interação - 2 bim
Pesquisas em usabilidade de interfaces e interação -  2 bimPesquisas em usabilidade de interfaces e interação -  2 bim
Pesquisas em usabilidade de interfaces e interação - 2 bim
Reuel Lopes
 
Vacaciones interfaces
Vacaciones   interfacesVacaciones   interfaces
Vacaciones interfaces
elisa gijsen
 

Similaire à UI e UX no Material Design (20)

Carreira em ux research
Carreira em ux researchCarreira em ux research
Carreira em ux research
 
Um novo olhar sobre as “funcionalidades matadoras”
Um novo olhar sobre as “funcionalidades matadoras”Um novo olhar sobre as “funcionalidades matadoras”
Um novo olhar sobre as “funcionalidades matadoras”
 
Aprimimoramento acadêmico SenacRS #2 abril 2014
Aprimimoramento acadêmico SenacRS #2 abril 2014Aprimimoramento acadêmico SenacRS #2 abril 2014
Aprimimoramento acadêmico SenacRS #2 abril 2014
 
Como não ferrar com a user experience - Campus Party 2012
Como não ferrar com a user experience - Campus Party 2012 Como não ferrar com a user experience - Campus Party 2012
Como não ferrar com a user experience - Campus Party 2012
 
Design Centrado no Usuário
Design Centrado no UsuárioDesign Centrado no Usuário
Design Centrado no Usuário
 
Agile UX vs Lean UX
Agile UX vs Lean UXAgile UX vs Lean UX
Agile UX vs Lean UX
 
UX e Métodos Ágeis: Adversários ou Parceiros?
UX e Métodos Ágeis: Adversários ou Parceiros?UX e Métodos Ágeis: Adversários ou Parceiros?
UX e Métodos Ágeis: Adversários ou Parceiros?
 
Manuela Quaresma | UX Design(er): mercado e formação
Manuela Quaresma | UX Design(er): mercado e formaçãoManuela Quaresma | UX Design(er): mercado e formação
Manuela Quaresma | UX Design(er): mercado e formação
 
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web componentsGoogle Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
 
User experience
User experienceUser experience
User experience
 
Engenharia de Usabilidade - Aula 1 de 3 - Pós em Desenvolvimento de Aplicaç...
Engenharia de Usabilidade - Aula 1 de 3 - Pós em Desenvolvimento de Aplicaç...Engenharia de Usabilidade - Aula 1 de 3 - Pós em Desenvolvimento de Aplicaç...
Engenharia de Usabilidade - Aula 1 de 3 - Pós em Desenvolvimento de Aplicaç...
 
Mobile First | DZ Estúdio
Mobile First | DZ EstúdioMobile First | DZ Estúdio
Mobile First | DZ Estúdio
 
A importância da UX para o consumo de conteúdo digital
A importância da UX para o consumo de conteúdo digitalA importância da UX para o consumo de conteúdo digital
A importância da UX para o consumo de conteúdo digital
 
Eduardo Rocha - Criando produtos invisíveis
Eduardo Rocha - Criando produtos invisíveis   Eduardo Rocha - Criando produtos invisíveis
Eduardo Rocha - Criando produtos invisíveis
 
Experiência do Usuário como prática na Locaweb
Experiência do Usuário como prática na LocawebExperiência do Usuário como prática na Locaweb
Experiência do Usuário como prática na Locaweb
 
Pesquisas em usabilidade de interfaces e interação - 2 bim
Pesquisas em usabilidade de interfaces e interação -  2 bimPesquisas em usabilidade de interfaces e interação -  2 bim
Pesquisas em usabilidade de interfaces e interação - 2 bim
 
LPUG Meetup #15 - Reinvenção do Liferay
LPUG Meetup #15 - Reinvenção do LiferayLPUG Meetup #15 - Reinvenção do Liferay
LPUG Meetup #15 - Reinvenção do Liferay
 
Agile UX vs Lean UX | Eu devo escolher uma delas?
Agile UX vs Lean UX | Eu devo escolher uma delas?Agile UX vs Lean UX | Eu devo escolher uma delas?
Agile UX vs Lean UX | Eu devo escolher uma delas?
 
Vacaciones interfaces
Vacaciones   interfacesVacaciones   interfaces
Vacaciones interfaces
 
UXconf 2017 - Review
UXconf 2017 - ReviewUXconf 2017 - Review
UXconf 2017 - Review
 

UI e UX no Material Design