Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UI e UX no Material Design

820 views

Published on

Slides da palestra UI e UX no Material Design feita no Google I/O Extended 2015 Maceió.

Published in: Design
  • Be the first to comment

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!

×