SlideShare uma empresa Scribd logo
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!

Mais conteúdo relacionado

Mais procurados

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)Edu Agni
 
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 UXEdu Agni
 
Ux design antes do wireframe
Ux design antes do wireframeUx design antes do wireframe
Ux design antes do wireframeFabricio Teixeira
 
Desenvolvimento Centrado no Usuário
Desenvolvimento Centrado no UsuárioDesenvolvimento Centrado no Usuário
Desenvolvimento Centrado no UsuárioEdu Agni
 
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 DigitalMarconi Pacheco
 
Lean UX + Agile UX
Lean UX + Agile UXLean UX + Agile UX
Lean UX + Agile UXMarcos Souza
 
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óciosPriscilla Albuquerque
 
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 2015Luisa Ambros
 
Niveis maturidade UX
Niveis maturidade UXNiveis maturidade UX
Niveis maturidade UXSuzi Sarmento
 
Ux nas organizações
Ux nas organizaçõesUx nas organizações
Ux nas organizaçõesEdu Agni
 
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...Alessandra Rosa
 
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...DEXCONF
 
UX é o novo SEO
UX é o novo SEOUX é o novo SEO
UX é o novo SEOEdu Agni
 
Workshop • UX design •
Workshop • UX design •  Workshop • UX design •
Workshop • UX design • Suzi Sarmento
 
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 MobileLuiz Reolon, PMP, PSD
 
UX Design para Desenvolvedores
UX Design para DesenvolvedoresUX Design para Desenvolvedores
UX Design para DesenvolvedoresAnderson Façanha
 
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...Patricia De Cia
 

Mais procurados (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...
 

Destaque

UX - UI DESIGN / MÉTODOS
UX - UI DESIGN / MÉTODOSUX - UI DESIGN / MÉTODOS
UX - UI DESIGN / MÉTODOSDiego Moraes
 
Processo de design digital
Processo de design digitalProcesso de design digital
Processo de design digitalMário Barros
 
Simplificando o design digital
Simplificando o design digitalSimplificando o design digital
Simplificando o design digitalMarconi Pacheco
 
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...Paula Azevedo Macedo
 
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....EDIT. - Disruptive Digital Education
 
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 conectadosHenrique Gogó
 
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 aula06Leandro Alves
 
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)Gustavo Gobbi
 
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 aula04Leandro Alves
 
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 aula05Leandro Alves
 
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_granrioAnna Cruz
 
Desenvolvimento de Games com Phaser
Desenvolvimento de Games com PhaserDesenvolvimento de Games com Phaser
Desenvolvimento de Games com Phaserleandroide
 
Design Thinking - Aula 01
Design Thinking - Aula 01Design Thinking - Aula 01
Design Thinking - Aula 01Israel Lessak
 

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

Semelhante a UI e UX no Material Design

Carreira em ux research
Carreira em ux researchCarreira em ux research
Carreira em ux researchDiana Fournier
 
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”Neue Labs
 
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 2014Fabio Couto Oliveira
 
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 Juliana Gaiba
 
Design Centrado no Usuário
Design Centrado no UsuárioDesign Centrado no Usuário
Design Centrado no UsuárioDavi Busanello
 
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
 
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çãoUXPA-Rio
 
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 componentsDan Vitoriano
 
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ç...Dhiego Bicudo
 
Mobile First | DZ Estúdio
Mobile First | DZ EstúdioMobile First | DZ Estúdio
Mobile First | DZ EstúdioDZ 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 digitalHuge
 
Eduardo Rocha - Criando produtos invisíveis
Eduardo Rocha - Criando produtos invisíveis   Eduardo Rocha - Criando produtos invisíveis
Eduardo Rocha - Criando produtos invisíveis Agile Trends
 
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 LocawebAndreza 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 bimReuel Lopes
 
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 LiferayFernando Fernández
 
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?Alessandra Rosa
 
Vacaciones interfaces
Vacaciones   interfacesVacaciones   interfaces
Vacaciones interfaceselisa gijsen
 
UXconf 2017 - Review
UXconf 2017 - ReviewUXconf 2017 - Review
UXconf 2017 - ReviewRafael Burity
 

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