O documento discute a importância dos conceitos de UI e UX e como eles são aplicados no Material Design. O Material Design é uma linguagem visual introduzida pelo Google em 2014 para aplicativos Android e web, que sintetiza princípios clássicos de design com inovação tecnológica. Ele incorpora elementos como animações, ícones, cores e tipografia para melhorar a experiência do usuário.

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

2. • 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?

4. UI Designer UX Designer
Parte criativa e visual
Elementos consistentes
O famoso “designer”
Lado emocional
Facilidade de uso
Fluidez e clareza

5. Material Design

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

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

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

9. Floating action button
• Promoted actions
• Não à ditadura das
toolbars!
• Experiência de leitura
continua ótima
Periscope

10. Meaningful transitions…
• Direcionamento da
atenção do usuário
• Movimento com precisão
• Conexão entre transações
Relay

11. …and delightful details
Pocket Casts

12. …and delightful details
Pocket Casts

13. …and delightful details
Netflix

14. …and delightful details
Netflix

15. Icons
https://github.com/google/material-design-icons
• System icons

16. Icons
• App icons
Hangouts Keep SeriesGuide

17. Colors
• Coesão com a marca
• Paleta de cores
• Cores primárias e
secundárias
SeriesGuide
#523991
#65459F
#2A2A2A
#029688

18. Tipografia
https://github.com/google/roboto
• Roboto

19. Cards
• Separação de conteúdos
• Contém diferentes elementos
• Hierarquia
Soundcloud

20. Chips
Data tables
Dialogs
Dividers
Lists
Menus Pickers
Progress & activity
Selection controls
Sliders
Snackbars & toasts
Tabs

21. google.com/design

22. fb.com/gobbigustavo
@GobbiGustavo
+GustavoGobbi
gustavogobbi@ic.ufal.br

23. Thank you!