ebook-uidesignerleiaesseebook-2022

Prévia do material em texto

Esse ebook foi criado para responder e mostrar 
o que um UI Designer precisa estudar
@ui.insights
Leia 
esse 
ebook!
UI Designer,
Introdução
Nós UI Designers estamos cansados de ver textos explicando o 
que é UI, o que fazem, o que comem, onde vivem… 
Então nesse ebook, não falarei sobre isso!
Vou ser prática. Quero te mostrar o que você precisa saber para ser 
um excelente UI Designer.
Você tem obrigação de entender o que os usuários precisam e 
garantir que a interface tenha elementos fáceis de acessar, 
entender e usar.
Já enrolei demais, espero que aproveite essas dicas.
Bons estudos!
Mônica Mesquita 
UX/UI Designer
A ferramenta 
do UI Designer 
Existem vários softwares de Design de Interfaces no mercado 
atualmente, os queridinhos são: 
 
Figma 
(Windows e MAC, incluindo web / gratuito)
 
 
 
Adobe XD 
(Windows e MAC / versão gratuita e paga) 
Sketch 
(Somente para MAC / pago) 
5 Tools que você 
terá que dominar
Essas são as 5 ferramentas que você mais utilizará, então fique fera
em usá-las. Todos os softwares de UI Design citados anteriormente 
possuem essas ferramentas: 
Artboard 
Formas 
Modelo de cores em HSB 
Texto 
Camadas 
Cores
Regra 60 30 10
CORES
Essa regra se aplica da seguinte forma. Escolha três cores para sua
interface e divida as cores dentro das porcentagens 60%, 30% e 10%. 
Exemplo: 
60% - cor principal 
é a cor dominante da interface
 
30% - cor secundária 
é a cor para complementar 
a principal
10% - cor de destaque 
é a responsável por dar a 
relevância e destaque para 
informações importantes
https://dribbble.com/shots/6794395-Storages-Management-App
HBS
CORES
Trabalhar com combinações de cores é uma das coisas mais 
complicadas para mim. Acredito que para muitos designers também. 
Mas a primeira coisa que você precisa saber é que não vamos mais 
trabalhar com RGB na criação de interface, vamos usar o HSB 
(hue, saturação e brilho).
H: Matiz é a cor pura
 
 
 
S: Saturação é o quão vívida a cor está
 
B: Brilho é o quão clara ou escura ela está
H: 220
S: 75 
B: 100
H: 220
S: 50 
B: 100
H: 220
S: 25 
B: 100
H: 220 
S: 100 
B: 100
H: 220
S: 100
B: 75
H: 220
S: 100
B: 50
H: 220
S: 100
B: 25
Variações de cores
CORES
Para criar variações de cores é muito simples: 
Diminuir ou aumentar saturação! 
Diminuir ou aumentar o brilho!
H: 150 
S: 70 
B: 70
H: 150 
S: 70 
B: 70
H: 150 
S: 60 
B: 80
H: 150 
S: 80 
B: 60
H: 150 
S: 50 
B: 90
H: 150 
S: 90 
B: 50
Mais claras
Mais escuras
+ Brilho
- Saturação
- Brilho
+ Saturação
Esses contrastes de cores são ideais para criar botões: 
ativo, ao passar o mouse, desativado.
Cores complementares 
e análogas
Cores complementares: são combinações 
entre tons com o foco no contraste, uma cor 
mais clara e uma mais escura.
Cores análogas: são combinações com tons 
muito próximos, com menos contraste entre si.
É importante saber algumas técnicas para usar as cores 
corretamente. Claro, você pode usar seu bom senso e não precisa 
seguir a regra a risca (toda regra em design pode ser quebrada, desde 
que você entregue algo muito bem construído e bonito!)
Veja como escolher suas cores aqui: 
https://color.adobe.com/pt/
CORES
Significado das cores
CORES
É muito importante entender sobre as cores e o poder que elas têm 
de influenciar determinadas ações. Trouxe um pequeno resumo 
para dar um norte nos seus estudos.
O assunto sobre cores é bem grande, então separei o que mais você pode 
estudar: Psicologia das cores / System colors / Padrões de acessibilidade em 
cores (WCAG)
Cores frias: 
transmitem a sensação de frio, bem estar, 
credibilidade, confiança.
Cores quentes: 
transmitem a sensação de calor, vibração, 
atenção, fome.
Cores neutras: 
Transmitem elegância, formalidade. Elas são 
utilizadas para harmonizar com cores frias e quentes.
Tipografia
Escala tipográfica
TIPOGRAFIA
Muitos designers têm dificuldades em encontrar uma harmonia entre 
os tamanhos das fontes e deixá-las agradáveis em suas interfaces. 
E minha dica aqui é começar a utilizar a escala tipográfica. Existem 
muitos padrões já prontos e várias formas de criar uma escala 
tipográfica.
Um outro padrão para criar escala é o Modular Scale.
Projetar com escalas modulares é uma forma de fazer escolhas 
mais conscientes.
A escala mais utilizada é 1,5. 
E o que eu faço com isso? Vamos lá!
Exemplo de escala já pronta:
12px, 14px, 16px, 18px, 20px, 24px, 30px, 36px, 48px, 60px, 72px
Modular Scale
Defina um tamanho de fonte inicial - Ex: 16px. 
Multiplique esse valor por 1,5 - Ex: 16px * 1,5 = 24px 
O resultado será o tamanho da próxima fonte, ou seja 24px. 
E assim por diante! 
Hierarquia tipográfica
TIPOGRAFIA
Tamanho, peso e cor são formas de expressar a hierarquia de um 
texto. A informação deve ser colocada em uma ordem que permita ao 
usuário entender a prioridade de um trecho em relação a outro. 
Sem hierarquia 
Com hierarquia 
Aprenda como fazer 
um café sensacional!
7 passos para um 
café perfeito em casa
Baixar ebook
Aprenda como 
fazer um café 
sensacional!
7 passos para um 
café perfeito em casa
Baixar ebook
Aprenda como 
fazer um café 
sensacional!
Regras de ouro
TIPOGRAFIA
O tamanho da fonte mais utilizada para web é 16px e para 
mobile é 12px. 
Crie parágrafos com uma quantidade de 45 -75 caracteres por linha. 
Parágrafos curtos melhora a legibilidade da interface.
Um bom espaçamento entre as linhas, dá ritmo a interface. Você pode 
criar uma altura agradável com a seguinte regra: Modular Scale. 
Olha ela aqui de novo!
Tamanho da fonte
Bloco de parágrafos
Espaço entre linhas
Para títulos: multiplique por 1,1 ou 1,2 
 Ex: Fonte do título 40px * 1,2 = 48px
 Ex: Fonte do título 40px * 1,1 = 44px
 
Para parágrafos: multiplique por 1,5 ou 1,6 
 Ex: 16px * 1,5 = 24px
 Ex: 16px * 1,6 = 25,6px (26px)
Valor do espaço entre linhas
Valor do espaço entre linhas
Regras de ouro
TIPOGRAFIA
Diz respeito à facilidade com que uma letra pode ser distinguida de 
outra. Então muito cuidado ao escolher as fontes para sua interface.
Diz respeito à facilidade com que o olho absorve a mensagem e se 
move ao longo da linha.	
Legibilidade
Tipografia
Tipografia
Tipografia
Tipografia
(Alta legibilidade)
(Alta leiturabilidade)
(Baixa leiturabilidade)
(Baixa legibilidade)
Leiturabilidade
Layout
Grid Bootstrap
LAYOUT
A grid é utilizada para alinhar e organizar todo o conteúdo da 
interface. A grid Bootstrap tem por base 12 colunas que divide a 
página em partes uniformes. Usada para manter um alinhamento em 
diferentes dispositivos e proporcionar um equilíbrio visual e estrutural.
Grid 8pts
LAYOUT
A grid de 8pts utiliza múltiplos de 8 para definir os alinhamentos e 
distanciamentos. Com ela é possível manter o design balanceado e o 
famoso pixel perfect (Google e Apple recomendam). É utilizada para 
organizar, escalar e dar espaçamentos entre elementos, sempre em 
múltiplos de 8.
Filmes
Monstros S.A.
Toy Story
Meu Malvado Favorito
16pts
24pts
24pts
8pts
8pts
8pts
Escaneamento Z
LAYOUT
É a forma como fazemos a leitura de um website (países ocidentais).
A dica é criar interface seguindo essa técnica:
1) Apresente a marca 
2) Ofereça opções para ação 
3) Apresente a proposta de valor 
4) Crie um call to action 
https://dribbble.com/shots/11544368/attachments/3164945?mode=media
https://dribbble.com/shots/11545929-Lay-s-Web-UI-exploration
https://dribbble.com/shots/11529053-Home-Page-Mockup/attachments/3149251?mode=media
1
1
2
2 3
3
4
4
1
2
3
4
Escaneamento F
LAYOUT
Outra forma de escaneamento é em formato em F. Esse tipo de 
escaneamento é feito em grandes textos, em conteúdo de blogs 
e portais.
https://www.crazyegg.com/blog/lessons-eye-tracking-studies/
F
Princípios de design 
de interface
LAYOUT
Em qualquer área vão existir princípios básicos que guiamvocê na 
direção correta, e em UI não é diferente. São conjuntos de normas 
que ajudarão os designers a tomar as melhores decisões em suas 
interfaces. Se procurar no Google, verá um monte de princípios de 
design. Eu separei alguns:
Eixo: é uma linha imaginária usada para alinhar um 
grupo de elementos da interface. Deixando assim o 
layout ordenado.
Simetria: é responsável pelo equilíbrio visual. Existe 
também a Assimetria, ainda há um equilíbrio presente, 
porém um pouco desequilibrado.
Hierarquia: é quando um elemento ganha mais 
destaque, prioridade, importância em relação aos 
demais. Com ela podemos orientar e se comunicar 
com o usuário.
Princípios de design 
de interface
LAYOUT
Ritmo: o ritmo é criado por elementos de repetição 
que dão a sensação de movimento.
Consistência: é determinada por um padrão visual 
estabelecido. Interfaces com muitas inconsistências 
visuais passam a impressão de algo que foi feito às 
pressas. Podemos criar uma boa consistência 
mantendo o padrão de espaço, escala de tamanhos, 
tipografia, cores, hierarquia visual. 
Contraste: tem a função de definir prioridade entre os 
elementos. O contraste pode ser por cor, por peso e 
por tamanho! 
White space: Os espaços em branco são utilizados 
para tornar o layout mais escaneável e não 
sobrecarregar o usuário. O espaço em branco guia 
nossos olhos pela composição e cria a sensação de 
ordem, sofisticação e elegância. 
Styleguide
LAYOUT
Style guide é um guia de padronização visual da interface. Nele 
definimos cores, grid, componentes, tipografia, etc. Com ele 
podemos manter o alinhamento entre a equipe, facilitando a 
organização e o padrão da identidade visual. 
https://dribbble.com/shots/8945880-PSIM-Design-system
Design System
LAYOUT
Foi criado para manter a padronização e evitar inconsistência em 
projetos escaláveis em grandes times de design. Com o DS os 
designers criam regras claras de como determinado componente deverá 
ser aplicado, a fim de manter a consistência em todo o produto. Com 
componentes já criados, o processo de criação ganha mais agilidade e 
velocidade. Com uma interface padronizada é possível garantir uma 
interface usável e de fácil entendimento para o usuário.
https://dribbble.com/shots/10452538-React-UI-Components
Componentes
LAYOUT
Botões de ação: Responsáveis por permitir ações como 
salvar, continuar, excluir. É através de botões que fazemos 
as principais interações dentro de uma interface.
Checkboxes: É um botão que permite que o usuário 
marque ou desmarque quantas opções achar necessário.
Radio Button: Diferente do checkbox, somente um botão 
pode ser ativado por vez. 
Menus: O principal propósito é possibilitar navegação em 
uma interface.
Formulários: Servem para preencher informações e 
coletar dados.
Seletores: É como se fosse um formulário, porém, com 
opções já pré-estabelecidas em formato de lista de 
seleção.
Cards: São componentes muito úteis para agrupar e 
organizar informações. 
Livros e 
+Dicas
Livros
LIVROS
Alguns livros que já li, que me ajudaram a entender um pouco mais 
sobre UI, UX, pessoas, usuários:
Para agregar ainda mais em seus projetos, estude também sobre:
Estudos 
Complementares
+ DICAS
Benchmark 
Moodboard 
Heurística de Nielsen 
Gestalt 
UX (métodos, princípios e ferramentas) 
Metodologias ágeis (em especial Lean UX) 
Design Thinking (Design Sprint do Google) 
 
 
Como criar contratos? 
Como criar briefing? 
Quanto cobrar?
Para freelancer
https://unsplash.com/
https://pixabay.com/pt/
https://www.flaticon.com/ https://www.freepik.com/
https://blush.design/https://www.streamlineicons.com/
http://free.spline.one/
https://uikits.com.br/
https://psdrepo.com/https://freephotos.cc/pt
https://pt.videezy.com/
https://land-book.com/
https://dribbble.com/
https://www.lapa.ninja/
https://mobbin.design/
https://picular.co/
https://color.adobe.com/pt/
Resources 
Gratuitos
+ DICAS
Imagens
Ícones Ilustras
UI kits
Vídeos
Inspirações
Cores
Eu espero que esse ebook possa 
te guiar em sua jornada como 
Designer de Interface. 
Ah, me adicione no Linkedin e me 
mande a sua opinião sobre o que 
faltou colocar nesse ebook. :)
Ufa, 
terminei!
Mônica Mesquita 
UX/UI Designer
Mônica Mesquita
ui.insights
Referências:
Nina talks, UI Lab, UX Unicórnio, Chief of Design, Lucas 
Assis, Gabriel Silvestri, Papai designer, UX Now, Apparício 
Jr, Ayama Design, Feux Design, UX Lab, Aela, Layer Comp,
Medium, Dribbble. E Google!