UI e UX no Material Design
- 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
- 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
- 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
- 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
- 23. Thank you!