O documento discute as diferenças entre interface do usuário (UI) e experiência do usuário (UX), e por que ambos os conceitos são importantes. Ele também apresenta o framework de design Material Design do Google e como ele pode ser aplicado para melhorar a UI e UX.

1. USER INTERFACE (UI)
X
USER EXPERIENCE (UX)
Qual a diferença?
Por que ambos os conceitos são tão importantes?
Alagoas Dev Day
Abril 2015

2. • Estudante de Ciência da Computação
• Front-end developer
• Entusiasta do Material Design
• Colunista no DobreaDireita.com
• Imitador da Marília Gabriela (só
quando insistem muito)
Gustavo Gobbi
Quem sou eu?

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

4. Modelo de Dan Saffer

5. “Sua aplicação é uma moto"

6. No começo…

7. Módulos, muitos módulos…

8. E finalmente…

9. Sem mais motos.
Vamos falar sobre o que a gente sabe.

10. Material Design

11. 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
• Curiosidade: O líder de desenvolvimento do
MD é latino-americano. Não perca a fé.

12. • Confirmação visual
instantânea no ponto de
contato
• MecanismoTouch Ripple
• Articulação de ataque e
duração do evento do toque
Calculadora
Surface reaction

13. Navigation drawer
• Pense fora da caixa: há muito
mais do que um retângulo
• Elevação: o conteúdo
embaixo ainda é visível, mas é
escurecido como uma
sombra
• Senso de localização: sempre
deve mostrar aonde você está
Netflix

14. Floating action button
• Promoted actions:Atividades
de alta prioridade no app
• Não à ditadura das toolbars!
• Experiência de leitura
continua ótima
Evernote

15. Por que eu devo ligar tanto para isso?
http://bit.ly/botao300
"The $300 million button"

16. “Together we stand, divided we fall”
Pink Floyd

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

18. Obrigado a todos e que a Força esteja com vocês!