Pensando em UX / UI com o material design

698 visualizações

Publicada em

ESSA PALESTRA É PARA VOCÊ QUE, DESENVOLVEDOR, QUER SABER MAIS SOBRE UX (USER EXPERIENCE - EXPERIÊNCIA DO USUÁRIO) E UI (USER INTERACTION - INTERAÇÃO COM O USUÁRIO) PARA O DESENVOLVIMENTO DE SEUS APLICATIVOS. É IMPORTANTE, MESMO NÃO SENDO O FOOC, QUE O DESENVOLVEDOR TENHA UMA NOÇÃO DE COMO O DESIGN IRÁ INFLUENCIAR EM SEU PROJETO. IREMOS CONVERSAR UM POUCO SOBRE COMO PENSAR EM UX/UI UTILIZANDO O MATERIAL DESIGN DO GOOGLE.

Publicada em: Software
0 comentários
7 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
698
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
11
Comentários
0
Gostaram
7
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • CARD SORTING
    STORYBOARD
    WIREFRAME
    PERSONAS
    MÉTRICAS
    PROTÓTIPO
    FLUXOGRAMA
  • "Nós nos desafiamos para criar uma linguagem visual para nossos usuários que sintetiza os princípios clássicos de um bom design com a inovação e possibilidade de tecnologia e ciência." Google Designers

  • Desenvolver um único sistema subjacente que permite uma experiência unificada em todas as plataformas e tamanhos de dispositivos. Preceitos móveis são fundamentais, mas toque, voz, mouse e teclado são todos os métodos de entrada de classe primeiros.
  • Uma metáfora material é a teoria unificadora de um espaço racionalizado e um sistema de movimento. O material é fundamentada na realidade tátil, inspirado no estudo de papel e tinta, mas tecnologicamente avançado e aberto à imaginação e magia.
    Superfícies e bordas do material fornecem dicas visuais que são fundamentadas na realidade. O uso de atributos táteis familiares ajuda os usuários a compreender rapidamente affordances. No entanto, a flexibilidade do material cria novas affordances que substituem aqueles que no mundo físico, sem quebrar as regras da física.
    Os fundamentos da luz, a superfície, e movimento são essenciais para transportar objectos como circular, interagir, e existem no espaço e em relação uns aos outros. Iluminação realista mostra costuras, divide espaço, e indica partes móveis.
  • Os elementos fundamentais do projeto-tipografia baseada em impressão, grades, espaço, escala, cor e uso de imagens-guiar tratamentos visuais. Estes elementos fazem muito mais do que agradar aos olhos. Eles criam hierarquia, significado e foco. Opções de cores deliberadas, aparência edge-to-edge, tipografia em grande escala, e espaço em branco intencional criar uma interface corajoso e gráfico que mergulhar o utilizador na experiência. Uma ênfase em ações do usuário faz funcionalidade central imediatamente aparente e fornece pontos de interesse para o usuário.
  • Movimento respeita e reforça o usuário como o motor primário. Ações do usuário primárias são pontos de inflexão que iniciam movimento, transformando todo o projeto. Toda a ação ocorre em um único ambiente. Os objetos são apresentados ao usuário sem quebrar a continuidade da experiência, mesmo quando eles se transformam e reorganize.Motion é significativo e apropriado, que serve para concentrar a atenção e manter a continuidade. O feedback é sutil, mas clara. As transições são eficientes e ainda coerente.
  • The material environment is a 3D space, which means all objects have x, y, and z dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the positive z-axis extending towards the viewer. Every sheet of material occupies a single position along the z-axis and has a standard 1dp thickness.
    On the web, the z-axis is used for layering and not for perspective. The 3D world is emulated by manipulating the y-axis.
  • dont, dont, do
  • App bar
    4dp
  • Raised button
    Resting state: 2dp
    Pressed state: 8dp
  • Card
    Resting state: 2dp
    Picked-up state: 8dp
  • Menus and sub menus
    Menus: 8dp
    Sub menus: 9dp (+1 dp for each sub menu)
  • Dialogs
    24dp
  • This color palette comprises primary and accent colors that can be used for illustration or to develop your brand colors. They’ve been designed to work harmoniously with each other.
    The color palette starts with primary colors and fills in the spectrum to create a complete and usable palette for Android, Web, and iOS. Google suggests using the 500 colors as the primary colors in your app and the other colors as accents colors.
  • O quão importante a informação é
  • A barra de status deve ser o mais escuro 700 tonalidade de sua cor primária.
  • Use a cor de destaque para o seu botão de ação primária e componentes como interruptores ou controles deslizantes. ASSCENT COLOR
  • Use a cor de destaque para o seu botão de ação primária e componentes como interruptores ou controles deslizantes. ASSCENT COLOR
  • don'’!
  • icons are an essential vehicle for communicating your brand.
    Physical prototype
  • Estudo de luz
  • prototipo do material
  • estudo da cor
  • Imagens de alta qualidade
  • Escrita
    Acessibilidade
    imagens



  • getmdl.io -a library of components & templates in vanilla CSS, HTML and JS
  • Polymer é uma biblioteca que facilita a criação de Web Components, que são elementos HTML customizados, independentes e reutilizáveis.
  • Pensando em UX / UI com o material design

    1. 1. Pensando em UX/UI com o Material Design Thiago Marques
    2. 2. Olá! Thiago Marques
    3. 3. UX & UI
    4. 4. User EXperience User Interaction
    5. 5. User Experience
    6. 6. Dann Saffer (http://www.odannyboy.com)
    7. 7. UX is not UI
    8. 8. UX Designer Lado Emocional Facilidade de Uso Fuidez e Clareza Parte Criativa e Visual Elementos consistentes O famoso "Designer" UI Designer
    9. 9. O Material Design em si www.google.com/design
    10. 10. Objetivo 1
    11. 11. Objetivo 2
    12. 12. Os 3 princípios
    13. 13. 1.Metáfora
    14. 14. 2. Forte, gráfico e intencional
    15. 15. 3. Movimento fornece significado
    16. 16. 3D World
    17. 17. Luz e Sombra
    18. 18. Propriedades 1 dpi Density-independent Pixels 9mm, o que corresponde a cerca de 48dp. margem de 8dp
    19. 19. Dos & Dont's
    20. 20. 1. Status bar 2. App bar 3. Background 4. Cards/Dialogs
    21. 21. Cores Recomendacao Google: 500 (cores primárias) 3 - primária 1 - secundária
    22. 22. Opacidade
    23. 23. Opacidade
    24. 24. Barra de Status
    25. 25. Cor Destaque
    26. 26. Cor Destaque
    27. 27. Cor Destaque
    28. 28. Integracao
    29. 29. Roboto
    30. 30. Roboto
    31. 31. Devices design.google.com/devices
    32. 32. E não para...
    33. 33. E agora? Por onde comecar?
    34. 34. Material Design Lite getmdl.io
    35. 35. Polymer polymer-project.org
    36. 36. Obrigado! thiagomartins.marques@gmail.com Twitter @althi

    ×