Handoff - Como o Designer pode facilitar a vida do Desenvolvedor - Diego Velazquez

Handoff - Como o Designer pode facilitar a vida do Desenvolvedor
- Diego Velazquez

1. HANDOFF
PROTOTIPAÇÃO DIGITAL &

2. USER INTERFACE?
O QUE É
É o meio pelo qual uma pessoa interage ou
controla um dispositivo, software ou aplicativo.

Essa interação pode ser feita através de
elementos que forneçam ações entre o
dispositivo e o usuário.

3. USER
INTERFACE
TIPOS DE
GUI
Graphical User Interface -
Permite a interação por meio
de elementos gráficos.
VUI
Voice User Interface - Permite
a interação através da voz.
MUI
Multimedia User Interface - É
uma junção das duas acima.
No nosso caso iremos focar nas interfaces
digitais, ou seja, nas interfaces gráficas de
sites, aplicativos, entre outros.

4. USER
INTERFACE
PRINCIPAIS ESTILOS DE
ESQUEUMORFISMO
Faz referência aos objetos
reais no meio digital/gráfico.
FLAT DESIGN
Estilo minimalista que utiliza
cores e formas chapadas,
com poucos efeitos de
volume, sombras e texturas.
MATERIAL DESIGN
Utiliza as características do
Flat Design, porém adiciona
outros artifícios como efeitos
3D. Ele utiliza a física e um
pouco de Skeumorfismo para
comunicar e criar o visual.
METRO UI
É muito parecido com o Flat
Design, porém um pouco
mais minimalista.
Originalmente criado para o
Windows phone.

5. ESQUEUMORFISMO
REALISMO

6. FLAT DESIGN
SIMPLICIDADE

7. METRO UI
TIPOGRAFIA, ÍCONES E FORMAS GEOMÉTRICAS

8. MATERIAL DESIGN
GRIDS, RESPONSIVIDADE E PROFUNDIDADE

10. PROTOTIPAÇÃO
FERRAMENTES DE
Ferramentas que simplificam e agilizam todas as
etapas do processo de desenvolvimento de
protótipos digitais.

Photoshop? Illustrator? Corel?

11. https://uxtools.co/tools/prototyping

12. DESENVOLVEDOR
FACILITE A VIDA DO
USER FLOW
O fluxo de navegação do
usuário;
ASSETS
Elementos de interface como
imagens, fontes e ícones;
Se você terminou seu trabalho de projetar a
interface do seu produto digital, nunca se
esqueça de passar para os desenvolvedores pelo
menos:
ATRIBUTOS
Elementos como cor,
tamanho, posição;
GUIA DE ESTILO
Elementos reaproveitáveis
como botões, forms e outros
componentes;
INTERFACE
Posicionamento dos
elementos no grid da
interface;

13. MÃOS À OBRA!!

14. OBRIGADO