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.
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.
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.