UI Designer,

Leia
esse
ebook!
Esse ebook foi criado para responder e mostrar
o que um UI Designer precisa estudar

@ui.insights
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 (escrevo no ano de 2020), os queridinhos são:

Adobe XD
(Windows e MAC / versão gratuita e paga)

Sketch

(Somente para MAC / pago)

Figma

(Windows e MAC, incluindo web / gratuito)

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

H: 220

S: 100
B: 100

S: Saturação é o quão vívida a cor está

H: 220
H: 220
H: 220

S: 75 S: 50 S: 25

B: 100 B: 100 B: 100

B: Brilho é o quão clara ou escura ela está

H: 220
H: 220
H: 220

S: 100
S: 100
S: 100

B: 75 B: 50 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!

Mais claras
+ Brilho
H: 150 H: 150 H: 150
S: 70 S: 60 S: 50
- Saturação B: 70 B: 80 B: 90

Mais escuras
- Brilho
H: 150 H: 150 H: 150
S: 70 S: 80 S: 90
+ Saturação B: 70 B: 60 B: 50

Esses contrastes de cores são ideais para criar botões:

ativo, ao passar o mouse, desativado.

Botão Botão Botão
Cores complementares
e análogas
CORES

É 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!)

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.

Veja como escolher suas cores aqui:

https://color.adobe.com/pt/
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.

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.

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

Exemplo de escala já pronta:

12px, 14px, 16px, 18px, 20px, 24px, 30px, 36px, 48px, 60px, 72px

Modular Scale

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á!

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.

Aprenda como fazer

um café sensacional!

7 passos para um
Sem hierarquia
café perfeito em casa

Baixar ebook

Aprenda como
fazer um café
sensacional!
Com hierarquia
7 passos para um

café perfeito em casa

Baixar ebook
Regras de ouro
TIPOGRAFIA

Tamanho da fonte
O tamanho da fonte mais utilizada para web é 16px e para

mobile é 12px.

Bloco de parágrafos

Crie parágrafos com uma quantidade de 45 -75 caracteres por linha.

Parágrafos curtos melhora a legibilidade da interface.

Espaço entre linhas

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!

Para títulos: multiplique por 1,1 ou 1,2

Ex: Fonte do título 40px * 1,2 = 48px

Valor do espaço entre linhas

Ex: Fonte do título 40px * 1,1 = 44px

Para parágrafos: multiplique por 1,5 ou 1,6

Ex: 16px * 1,5 = 24px

Valor do espaço entre linhas

Ex: 16px * 1,6 = 25,6px (26px)
Regras de ouro
TIPOGRAFIA

Legibilidade
Diz respeito à facilidade com que uma letra pode ser distinguida de
outra. Então muito cuidado ao escolher as fontes para sua interface.

Tipografia Tipografia

(Alta legibilidade) (Baixa legibilidade)

Leiturabilidade

Diz respeito à facilidade com que o olho absorve a mensagem e se

move ao longo da linha.

Tipografia
(Alta leiturabilidade)

Tipografia
(Baixa 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 16pts

24pts
Monstros S.A.
8pts

Toy Story
8pts

Meu Malvado Favorito

8pts 24pts
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

2
1

4
1 2 3

1
3 2
4

3
4

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

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.

F
https://www.crazyegg.com/blog/lessons-eye-tracking-studies/
Princípios de design
de interface
LAYOUT

Em qualquer área vão existir princípios básicos que guiam você 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:

Estudos
Complementares
+ DICAS

Para agregar ainda mais em seus projetos, estude também sobre:

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)

Para freelancer
Como criar contratos?

Como criar briefing?

Quanto cobrar?
Resources
Gratuitos
+ DICAS

Imagens UI kits
https://unsplash.com/ http://free.spline.one/
https://pixabay.com/pt/ https://uikits.com.br/
https://freephotos.cc/pt https://psdrepo.com/

Ícones Ilustras
https://www.flaticon.com/ https://www.freepik.com/
https://www.streamlineicons.com/ https://blush.design/

Vídeos Cores
https://pt.videezy.com/ https://picular.co/
https://color.adobe.com/pt/
Inspirações
https://land-book.com/
https://www.lapa.ninja/
https://dribbble.com/
https://mobbin.design/
Ufa,
terminei!
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. :)

Mônica Mesquita
UX/UI Designer
Referências:

Nina talks, UI Lab, UX Unicórnio, Chief of Design, Lucas Mônica Mesquita

Assis, Gabriel Silvestri, Papai designer, UX Now, Apparício
Jr, Ayama Design, Feux Design, UX Lab, Aela, Layer Comp,

Medium, Dribbble. E Google! ui.insights