O documento fornece instruções sobre como iniciar um projeto de design de interface do usuário (UI), abordando tópicos como wireframes, grids, definição de cores e estilos, organização de arquivos e preparação para entrega ao time de desenvolvimento.

1. Como começar um
projeto de UI Design
Welliton Matiola
UI
01 20
08
16

2. Sobre mim
• Formado em design (SATC)
• Trabalho com UI há 2.5 anos
• Co-fundador do UI Lab
• Product Designer na homeyou
• Tenho 22 anos
Como começar um projeto de UI DesignUI

3. Introdução ao Workshop
O que é UI Design?
Wireframe
Grids
Iniciando a interface
Finalizando arquivo para enviar ao DEV
Como começar um projeto de UI DesignUI

4. O que é UI Design?
Como começar um projeto de UI DesignUI

5. O que é UI Design?
Definição simples
UI Design é o meio pela qual uma pessoa interage e controla um dispositivo,
so!ware ou aplicativo. Esse controle pode ser feito por meio de botões,
menus e qualquer elemento que forneça uma interação entre o dispositivo
e o usuário.
Como começar um projeto de UI DesignUI

6. Como começar um projeto de UI DesignUI
Fonte: https://dribbble.com/davestinnette

7. Como começar um projeto de UI DesignUI
Fonte: https://dribbble.com/andrewcullen

8. Como começar um projeto de UI DesignUI
Fonte: https://dribbble.com/dhl & https://dribbble.com/instagram

9. O que é UI Design?
Responsabilidades de um UI Designer
• Concepção das telas que o usuário interage;
• Garantir uma linguagem visual consistente;
• Prototipação da UI;
• Implementação da interface em conjunto com o DEV;
• Documentação e styleguide
Como começar um projeto de UI DesignUI

10. Wireframe
O que é?
Como começar um projeto de UI DesignUI
É uma ferramenta para definir a hierarquia de informações da sua interface,
facilitando o planejamento e garantindo que o usuário processe as
informações de acordo com o que você planejou.

11. Como começar um projeto de UI DesignUI
Fonte: https://dribbble.com/kerem

12. Como começar um projeto de UI DesignUI
Fonte: https://dribbble.com/cuberto

13. Como começar um projeto de UI DesignUI
Fonte: https://dribbble.com/Deiv

14. Grids
O que é?
Como começar um projeto de UI DesignUI
A grid é uma estrutura usada para alinhar espaços negativos, garantindo que
o conteúdo fique organizado e flua naturalmente.

15. Grids
Bootstrap
Como começar um projeto de UI DesignUI
É um framework front-end com um grid system responsivo e fluido de 12
colunas, atendendo as necessidades de diferentes dispositivos e viewports.

16. Como começar um projeto de UI DesignUI
Fonte: https://dribbble.com/kerem
Grid bootstrap

17. Iniciando
#partiu criar os arquivos
Como começar um projeto de UI DesignUI
• Arquivo 1440px ou 1920px
• Arquivo para style guide

18. Como começar um projeto de UI DesignUI
Fonte: https://marvelapp.com/styleguide

19. Como começar um projeto de UI DesignUI
Fonte: https://dribbble.com/focuslab

20. Como começar um projeto de UI DesignUI
Fonte: https://dribbble.com/AlexDeruette

21. Como começar um projeto de UI DesignUI
Fonte: https://frontify.com

22. Iniciando
Definindo cores
Como começar um projeto de UI DesignUI
• Um pouco sobre cores
• Contraste
• Acessibilidade (daltonismo)
• Ferramentas para criação de paleta de cores

23. Iniciando
Um pouco sobre cores
Como começar um projeto de UI DesignUI
Cor é uma força poderosa nas mãos de um designer. Chama a atenção dos
olhos, evoca emoções e comunica significados. (Jonathan Z. White)
Um estudo chamado The Impact of Color on Marketing descobriu que 90% das
decisões rápidas são feiras baseadas nas cores.
Combinar cores é difícil.

24. Como começar um projeto de UI DesignUI
Fonte: https://dribbble.com/mailru

25. Como começar um projeto de UI DesignUI
Fonte: https://dribbble.com/rafaeltorales

26. Como começar um projeto de UI DesignUI
Fonte: https://dribbble.com/erickmazer & https://dribbble.com/gneumann

27. Iniciando
Contraste
Como começar um projeto de UI DesignUI
O estado de ser muito diferente de qualquer outra coisa (Oxford Dictionaries)
Tudo se resume a instintos humanos primitivos: estamos programados para
notar a diferença porque elas nos ajudou a sobreviver. (Web UI Design for the
Human Eye)
Quanto mais contraste, mais dinstinguivel você torna o objeto em relação aos
elementos ao redor dele. (Good UI)

28. Como começar um projeto de UI DesignUI
Fonte: https://www.netflix.com

29. Como começar um projeto de UI DesignUI
Fonte: http://jxnblk.com/colorable/demos/text/

30. Como começar um projeto de UI DesignUI
Fonte: http://colorsafe.co

31. Iniciando
Acessibilidade
Como começar um projeto de UI DesignUI
Cerca de 8-10% de homens e 0.5% de mulheres tem alguma forma de
daltonismo.
Daltonismo é a inabilidade de distinguir certos tons no espectro de cores e é
resultado de uma mutação no cromossomo X.
Existem 3 tipos de daltonismo dicromatico: protanopia (vermelho),
deuteranopia (verde) e tritanopia (azul)

32. Como começar um projeto de UI DesignUI
Fonte: http://bit.ly/2bp4St7

33. Como começar um projeto de UI DesignUI
Fonte: http://bit.ly/2bp4St7
Normal
Protanopia
Deuteranopia
Tritanopia

34. Como começar um projeto de UI DesignUI
Fonte: https://dribbble.com/kylemeyer

35. Iniciando
Como projetar para daltônicos
Como começar um projeto de UI DesignUI
• Usar cores e símbolos
• Usar minimalismo
• Usar padrões e texturas
• Usar cores contrastantes
• Evitar combos como: vermelho e verde, verde e marrom, verde e azul, verde
claro e amarelo, azul e cinza, verde e cinza e verde e preto.

36. Iniciando
Definindo o tamanho dos títulos e parágrafos
Como começar um projeto de UI DesignUI
• Pesos
• Tamanhos
• Alinhamento
• Hierarquia

37. Iniciando
Pesos
Como começar um projeto de UI DesignUI
200 – Extra Light
300 – Light
400 – Regular
600 – Semi Bold (Demi Bold)
700 – Bold
900 – Black (Heavy)
Font: Source Sans Pro

38. Iniciando
Tamanhos
Como começar um projeto de UI DesignUI
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
Tamanhos padrões para o bootstrap
36
30
24
18
14
12

39. Iniciando
Alinhamento
Como começar um projeto de UI DesignUI
A esquerda A direita
Justificado Centralizado
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh
euismod tinci aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh
euismod tinci aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh
euismod tinci aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh
euismod tinci aliquam erat volutpat.

40. Iniciando
Hierarquia
Como começar um projeto de UI DesignUI
Lorem ipsum dolor
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed
diam nonummy nibh euismod tinci
aliquam erat volutpat.
Publicado por Welliton Matiola em UI Lab
48px
30px
22px

41. Organização
Como começar um projeto de UI DesignUI
Sim, precisamos deixar organizado!
• Artboards
• Grupos
• Layers
• Símbolos / Smart objects

42. Organização
Como começar um projeto de UI DesignUI
Símbolos e Smart objects

43. Organização
Como começar um projeto de UI DesignUI
Fechando o arquivo para enviar para o DEV
• Assets (cores, fonts, imagens, logo)
• Ferramentas que podem auxiliar

44. Como começar um projeto de UI DesignUI
Fonte: https://zeplin.io

45. Como começar um projeto de UI DesignUI
Fonte: https://avocode.com

46. Obrigado!
welliton.matiola@gmail.com
Outras formas de contato:
Como começar um projeto de UI DesignUI
fb.com/wellitonmatiola
twitter.com/ewllitonmatiola
br.linkedin.com/in/wellitonmatiola
www.uilab.com.br
01 20
08
16
www.uilab.com.br
fb.com/uilabschool