Pensando em UX / UI com o material design
•Transferir como PPTX, PDF•
7 gostaram•1,215 visualizações
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.
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (20)
Semelhante a Pensando em UX / UI com o material design
Semelhante a Pensando em UX / UI com o material design (20)
Pensando em UX / UI com o material design
- 1. Pensando em UX/UI com o Material Design Thiago Marques
- 3. UX & UI
- 7. UX is not UI
- 8. UX Designer Lado Emocional Facilidade de Uso Fuidez e Clareza Parte Criativa e Visual Elementos consistentes O famoso "Designer" UI Designer
- 11. O Material Design em si www.google.com/design
- 12. Objetivo 1
- 13. Objetivo 2
- 14. Os 3 princípios
- 15. 1.Metáfora
- 16. 2. Forte, gráfico e intencional
- 18. 3D World
- 19. Luz e Sombra
- 20. Propriedades 1 dpi Density-independent Pixels 9mm, o que corresponde a cerca de 48dp. margem de 8dp
- 21. Dos & Dont's
- 30. 1. Status bar 2. App bar 3. Background 4. Cards/Dialogs
- 31. Cores Recomendacao Google: 500 (cores primárias) 3 - primária 1 - secundária
- 32. Opacidade
- 33. Opacidade
- 34. Barra de Status
- 35. Cor Destaque
- 36. Cor Destaque
- 37. Cor Destaque
- 44. Integracao
- 45. Roboto
- 46. Roboto
- 48. E não para...
- 49. E agora? Por onde comecar?
Notas do Editor
- 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.