UI e UX no Material Design
23
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
-
Upload
gustavo-gobbi -
Category
Design
-
view
202 -
download
1
Transcript of UI e UX no Material Design
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
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
Thank you!
