O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

UI e UX no Material Design

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Próximos SlideShares
UX Design
UX Design
Carregando em…3
×

Confira estes a seguir

1 de 23 Anúncio
Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Quem viu também gostou (20)

Anúncio

Semelhante a UI e UX no Material Design (20)

Mais recentes (20)

Anúncio

UI e UX no Material Design

  1. 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. 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?
  3. 3. UI Designer UX Designer Parte criativa e visual Elementos consistentes O famoso “designer” Lado emocional Facilidade de uso Fluidez e clareza
  4. 4. Material Design
  5. 5. 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
  6. 6. • 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
  7. 7. 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
  8. 8. Floating action button • Promoted actions • Não à ditadura das toolbars! • Experiência de leitura continua ótima Periscope
  9. 9. Meaningful transitions… • Direcionamento da atenção do usuário • Movimento com precisão • Conexão entre transações Relay
  10. 10. …and delightful details Pocket Casts
  11. 11. …and delightful details Pocket Casts
  12. 12. …and delightful details Netflix
  13. 13. …and delightful details Netflix
  14. 14. Icons https://github.com/google/material-design-icons • System icons
  15. 15. Icons • App icons Hangouts Keep SeriesGuide
  16. 16. Colors • Coesão com a marca • Paleta de cores • Cores primárias e secundárias SeriesGuide #523991 #65459F #2A2A2A #029688
  17. 17. Tipografia https://github.com/google/roboto • Roboto
  18. 18. Cards • Separação de conteúdos • Contém diferentes elementos • Hierarquia Soundcloud
  19. 19. Chips Data tables Dialogs Dividers Lists Menus Pickers Progress & activity Selection controls Sliders Snackbars & toasts Tabs
  20. 20. google.com/design
  21. 21. fb.com/gobbigustavo @GobbiGustavo +GustavoGobbi gustavogobbi@ic.ufal.br
  22. 22. Thank you!

×