Guia de Boas Práticas Criação Nterfaces

UI EBOOK
Guia de boas práticas
aplicáveis para a criação

de interfaces
Um guia com foco em UI sobre o que fazer e o que
não fazer na criação de interfaces mobile ou web.
Rendimento total
+48%
R$ 18.545,44 novos membro
te-se a nós!
parte do grupo de
sionais que ajudam.
+851.54
Contribuir atualizar lista
Julia Denoch
Emails enviados Product Designer
R$ 515,41
854 +16% Uma product designer atuando na
Ganhos em relação
ao mês passado
área há mais de 12 anos. Apaixonada
pelo que faz, e em busca de novas...
Conversar
por Andrey Knabbenn VERSÃO 2.0
Licensed to Camila Castro - camilahcastro89@gmail.com - HP62716865649110

Guia de boas práticas
aplicáveis para a criação

de interfaces
por Andrey Knabbenn | 2023

AVISO LEGAL
Este material é protegido juridicamente
pelo certi ficado Avctoris:
9ff399832c19cd2ac23502b5fa59fc7ac7ec26a
63583670e25343292ea838c66
O presente certi ficado comprova, mediante as tecnologias de hashcode (SHA 256),

TimeStamping (Padrão UTC fornecido pelo BIPM - Bureau International des Poids et
Mesures) e Assinatura Digital que a pessoa supra indicada declarou-se autor da obra
mencionada neste documento. O presente comprovante está em conformidade com:
Berne Convention (INTL), Metre Convention (INTL), Lei 9.610 (BR), WIPO Copyright Treaty
(INTL), US Copyright Law (US), UCC Geneva (INTL) e demais legislações
pertinentes ao Direito Autoral dos países signatários dos referidos tratados.

Sumário
Int rodução 8
Tipografia 15 dicas neste capítulo
Utilize um espaçamento entre linhas com tamanhos ideais 14

Evite palavras avulsas na última linha do texto 16
Crie hierarquia textual 18
Divida as “paredes de texto” em parágrafos menores 23
Cuidado com as letras maiúsculas para texto corrido 24
Evite utilizar a função justificar 28
Quebrando blocos de textos em estilo de lista 29
Cuidados e boas práticas com o espaçamento entre caracteres 30
Não faça sobre-uso de fontes 35
Utilize os diferentes estilos de fontes com um contexto 37
White space na construção de blocos de textos 39
Evite os parágrafos de textos com largura total de página 41
Utilize uma escala tipográfica adequada nas interfaces 43
+2 Dicas extras 45
Cores 13 dicas neste capítulo
Adicionando matiz para gerar tons neutros mais atrativos 47
@andreyknabbenn Sumário 3

Cuidados com o baixo contraste 50
Utilize a cor primária da marca com sabedoria 54
Cor para criar identificação rápida entre itens selecionados 57
Cores para gerar significados e informações corretas 58
Não use tons de cinza em backgrounds coloridos 59
Evite o tom de cor 100% preto 62
Uso de cor para realçar ações destrutivas 63
Sempre defina uma cor para destaque de ação primária 64
+4 Dicas extras 66
Botões 10 dicas neste capítulo
Crie distinção entre botões primários e secundários 69

Sempre pense nos estados de interação dos botões 72
Use o white space para não criar botões sufocados 75
Não utilize o drop-shadow padrão em botões 79
Mantenha as palavras nos botões em linha única 82
Seja consistente com o estilo dos botões 83
Utilize ícones conhecidos para reforçar signi ficado em botões 85
Utilize formas conhecidas para criar botões 88
+ 2 Dicas extras 89

Grid e Layout 12 dicas neste capítulo
Seja consistente no uso de espaçamentos de itens na grid 91

Considere o alinhamento horizontal ao criar interfaces 95
Respeite o alinhamento vertical ao criar listas e menus 98
Utilize margens laterais mínimas para evitar falta de white space 99
Gerando alinhamento correto em listas de features 101
Utilize grids em cards para gerar alinhamentos consistentes 102
Utilize white space para criar interfaces que respiram 104
Mantenha um sentido de leitura único para gerar consistência 108
Cuidado com os espaços invisíveis que geram desalinhamento 109
+ 3 Dicas extras 110
Ícones 12 dicas neste capítulo
Utilize ícones em vetores ao invés de ícones em .PNG 113

Não utilize ícones como ilustrações grandes 116
Não remova os ícones das caixas delimitadoras padrões 118
Use espaços iguais entre ícones 120
De fina estilos de textos que deem “match” com o ícone 122
Utilize ícones com a mesma linha de estilo na interface 124
Escolha ícones simples para a sua interface 126
Utilize ícones identi ficáveis em tamanhos menores 128

De fina tamanhos de ícones amigáveis ao toque 130
Utilize ícones reconhecíveis para dispensar textos 133
+ 2 Dicas extras 135
Imagens e Textos 8 dicas neste capítulo
Utilize imagens de qualidade e com uma boa de finição 137

Fuja das imagens comuns de bancos de imagens 139
Associe as cores da imagem com a cor da marca 140
Avalie a ideia de utilizar imagens “edge to edge” 142
Utilize imagens pensando no propósito e contexto 143
Crie contraste ao usar imagens com textos 144
+2 Dicas extras 151
Dicas extras 10 dicas neste capítulo
Não utilize fontes pesadas em parágrafos de textos longos 154

Não utilize drop-shadow em conteúdos textuais 157
Crie indicativos que induzam ao scroll dos usuários 160
Utilize os estados vazios para sugerir ações úteis 162
Avalie a ideia de utilizar botões “full width” 164
Sugira o tipo de teclado correto para o input a ser preenchido 166
Crie leveza ao trabalhar com separação de conteúdos 167

Utilize ícones para botões e categorias em estilo carrossel 171
Não ignore o uso das labels aparentes em formulários 173
Crie botões de ação evidentes em formulários 174

Boas-vindas!
Olá, pessoal
É uma satisfação enorme poder finalmente apresentar um material

preparado por mim, que traz dicas aplicáveis para uma das áreas que
compõe o Design de Produto que tanto amo: o mundo de UI
(user interface).
A ideia é trazer aquilo que eu gostaria de ter aprendido quando

migrei da área de Design Gráfico para Design de Produto, mas que
custei a assimilar por falta de orientação sobre como iniciar.
Este material foi desenvolvido com a integração de exemplos

didáticos e baseados em práticas do dia a dia em UI, trazendo dicas
essenciais e fundamentais para a área.
Além de apontar os erros comuns de interface, o material indica

também as boas práticas que você pode utilizar para corrigi-los.
Também é importante saber que apesar de a UI estar diretamente

ligada a área de UX (user experience) - áreas dependentes uma da
outra, o material aborda dicas especí ficas para o campo de UI.
@andreyknabbenn Introdução 8

Para quem o material é recomendado?
O material ensina técnicas essenciais e fundamentais sobre
interfaces, ideal para quem está começando do zero, ou para aqueles
que já estão na área e querem aprimorar o conhecimento com boas
práticas na criação de interfaces.
É útil também para designers grá ficos que estão migrando para a
área de UX e UI e se sentem perdidos com a transição, servindo como
um caminho para poupar tempo na caçada de informações
pela internet.
Por último, é um material que pode auxiliar desenvolvedores a

conhecer melhor a área de UI design, para melhor aplicá-la na sua
rotina de trabalho em conjunto com designers.
A estrutura deste material

Ao longo deste material você encontrará 80 dicas para a criação de
interfaces, 20 links de materiais e ferramentas complementares e
mais uma lista que agrega +120 links bônus com vários recursos úteis
para a área de UX e UI! (Acesso ao bônus disponível na página 11).
Para você que adquiriu este ebook, o acesso às eventuais

atualizações desta edição é garantido, que podem trazer além de
correções e melhorias, também, novas dicas para os tópicos
já disponíveis.

Feito com muito amor, para aqueles que já me
acompanham e para quem está chegando agora!
O formato e as dicas apresentadas neste ebook trazem a minha
didática e forma de compartilhar os conteúdos no meu Instagram e
LinkedIn, motivado com base nos feedbacks e incentivos que recebo
por lá. Portanto, aqui vai um agradecimento profundo e especial para
todos vocês!
Compartilhando minha trajetória

Coloquei neste material muito do que aprendi até agora atuando
como Product Designer, incluindo a experiência que obtive
trabalhando por 3 anos como Web Designer e depois migrando para
a área de produto, onde pude contribuir para o crescimento do
aplicativo de finanças pessoais Organizze durante 3 anos.
Atualmente, trabalho há 3 anos na Simples Dental, o maior software

odontológico da América Latina e parte do maior grupo Odontológico
do mundo, Henry Schein.
Espero ajudar você nesta jornada!

Desejo que este material agregue conhecimento na sua trajetória e
corresponda às suas expectativas, minha missão estará cumprida se
eu conseguir contribuir de alguma forma para o seu crescimento.
Fique à vontade para postar stories das suas leituras e

me enviar feedbacks, ficarei feliz demais em ver!

Para finalizar
Este ebook levou meses de muito trabalho e dedicação para ficar
pronto, algumas dicas deste material foram aprendidas enquanto me
desenvolvia como Product Designer.
Caso você conheça alguém que gostaria de adquirir este ebook, está
estudando, mas não pode ter acesso ao material na íntegra, por
motivos financeiros, recomende que entre em contato com
contato@andreyknabbenn.com para que eu possa ajudar.
Por fim, muito obrigado e boa leitura!
Andrey Knabbenn
@andreyknabbenn
Um presente incrível para

você começar bem!
Minha lista pessoal com +120 links
e recursos para você iniciar bem
em UI e UX Design. Aproveite!
Resgatar meu presente

Desejo todo o sucesso do mundo para você nesta
nova jornada que se inicia!

CAPÍTULO 1
Tipografia
A tipogra fia é um elemento fundamental numa interface, e
neste tópico são abordados alguns dos erros mais comuns e
dicas para criar textos e blocos de parágrafos ideais.
15 DICAS NESTE CAPÍTULO
@andreyknabbenn Boas práticas de Tipogra fia 13

D I CA # 1
Utilize um espaçamento entre

linhas com tamanhos ideais
O espaçamento entre linhas (ou line-height) é a distância entre uma
linha e outra no sentido vertical. Os erros mais comuns que podem
ocorrer são 2:
Pouco espaço entre linhas, criando falta de white space e

deixando o texto com uma escaneabilidade difícil
Após dois anos espreitando as ruas como Batman, Bruce

Wayne se encontra nas profundezas mais sombrias de
Gotham City. Com poucos aliados confiáveis, o vigilante
solitário se estabelece como a personificação...
Line-height: 100%
Muito espaço entre linhas, criando um white space além

do necessário e gerando a sensação de desagrupamento

Line-height: 200%

Espaçamento ideal, causando fluidez na leiturabilidade
e deixando o bloco de texto visualmente melhor

A solução na prática
Os valores ideais de espaçamento entre linhas funcionam em 120% e
150%, porém, considere que o valor pode variar de acordo com
tamanho e família de fonte escolhida.
Após dois anos espreitando Fonte: 24px
Line-height:
as ruas como Batman 120% ou 32px
Após dois anos espreitando as ruas como

Fonte: 16px
Batman, Bruce Wayne se encontra nas Line-height:

profundezas mais sombrias de Gotham. 150% ou 24px
Você pode identificar um line-height base para o

parágrafo com um cálculo: 1,6 multiplicado pelo tamanho
da fonte, o resultado será o line-height próximo do ideal.

D I CA # 2
Evite palavras avulsas na

última linha do texto
Palavras avulsas na última linha do texto prejudicam a legibilidade,
pois, fazem com que o ritmo de leitura da pessoa usuária seja
interrompido abruptamente, além de, contribuir para que o bloco do
texto na interface fique com uma aparência ruim, dando a sensação
de que está faltando algo.
Uma crítica Uma crítica

sincera sobre o sincera sobre o
filme Batman... filme Batman...
Acertos e controvérsias Acertos e controvérsias
caminham lado a lado caminham lado a lado
quando falamos de quando falamos de
lançamentos da
lançamentos da DC.
DC.
Dicas para evitar este problema

De forma geral, existem algumas alternativas e meios que podemos
utilizar para contornar este problema:

Fazer um ajuste adicionando ou eliminando
palavras do parágrafo.
Ajustar a largura do bloco do texto para um

modo onde a última palavra não fique
avulsa.
Fazer ajustes no tamanho da fonte ou

espaçamento entre caracteres, de modo que a
última palavra não fique solta.
Eliminar palavras avulsas pode ser um desa fio quando

se trata de design responsivo, porém, não use isso
como motivação para não cuidar dos cenários mais
críticos ou dos casos e dispositivos onde a interface
será mais visualizada.

D I CA # 3
Crie hierarquia textual

A hierarquia textual é uma das melhores formas de conduzir a pessoa
usuária a ler e consumir informações por um caminho ordenado,
visualizando itens e textos por ordem de prioridade.
A falta de hierarquia consequentemente faz com que a pessoa

usuária não saiba qual informação visualizar primeiro na sua
interface, isso gera confusão, cansaço e insatisfação.
Dicas de carros seminovos em 2023

Algumas dicas para comprar carros seminovos bons e
com preços que caibam no bolso em 2023.
Fox Connect
O Fox Connect 2023 é a configuração de entrada e apela
para a boa relação custo-benefício.
Up TSI
O Up TSI nasceu pedindo para ser algo mais do que a VW
queria que ele fosse, assim surgiu um dos poucos...

Fonte com cor
mais forte,
Dicas de carros maior e peso
seminovos em 2023 ExtraBold por
se tratar de
um título.
Algumas dicas para comprar carros
seminovos bons e com preços que
caibam no bolso em 2023. Título de
tópicos em
tamanho menor,
pois não é a
Fox Connect informação
O Fox Connect 2023 é a configuração principal.
de entrada e apela para a boa...
Textos de
Up TSI parágrafo com
O Up TSI nasceu pedindo para ser um tom 70%
preto, tamanho
algo mais do que a VW queria que... menor que os
subtítulos e
peso Regular.
Entendendo a técnica para gerar hierarquia

Podemos entender com os exemplos o quanto a hierarquia faz
diferença. No primeiro exemplo, as informações competem entre si,
não sabemos com clareza o que devemos ler primeiro, tudo faz parte
do mesmo contexto, tudo tem a mesma importância.
N o segundo exemplo, temos um bloco de texto que nos orienta com

clareza sobre como devemos priorizar as informações, pois os itens
mais importantes foram evidenciados em maior escala e peso.

Algumas formas de gerar hierarquia
No exemplo correto, mostrei apenas algumas formas que podemos
utilizar para gerar hierarquia textual em blocos de textos e
informações. Abaixo, trago uma lista com algumas dicas e boas
práticas para fazer isto com excelência:
Você irá ler este bloco

Gerando
hierarquia
de texto aqui primeiro
textual por Depois você verá este aqui
escala / E depois, todo o texto restante, já que
tamanho:
o título, por ser maior, ganhou a sua
atenção no primeiro instante.
Gerando Você irá ler este bloco de

hierarquia texto aqui primeiro
textual por E depois, todo o texto restante, já que
cor de o título, por ser maior, ganhou a sua

destaque atenção no primeiro instante.

bold
Você irá ler este bloco

Gerando
hierarquia
de texto aqui primeiro
textual por Depois você verá este aqui
peso de E depois, todo o texto restante, já que
fonte
o título, por ser maior, ganhou a sua
regular
Gerando hierarquia textual por opacidade de cor
Você irá ler este bloco de texto aqui primeiro

E depois, este parágrafo de exemplo com todo o texto
restante, já que o título, por ser maior, ganhou a sua
Cor de texto: #000000
Você irá ler este bloco de texto aqui primeiro

E depois, este parágrafo de exemplo com todo o texto
restante, já que o título, por ser maior, ganhou a sua
Cor de texto: #6B6B6B

Outros pontos gerais
Não esqueça da regra básica: itens importantes devem possuir
destaque maior em meio às informações, seja por peso de fonte,
escala, cor ou outras formas.
A hierarquia deve ser de fácil compreensão. O item maior

geralmente é o título, acompanhado de um subtítulo menor, de
um corpo de texto menor ainda, e assim vai.
Cuidado com as regras de contraste ao trabalhar com cor e

opacidade em textos, certifique-se de usar cores que não
dificultem a leitura, lembre-se que uma interface pode ser
utilizada por públicos de todas as idades.

D I CA # 4
Divida as “paredes de texto”

em parágrafos menores
Parágrafos de textos corridos sem uma pausa visual pode frustrar e
desencorajar muitos usuários a ler e consumir o conteúdo da sua
interface, por isso, uma ótima dica é quebrar estes textos extensos
em blocos de parágrafos menores.
It is a long established It is a long established

fact that a reader will be fact that a reader will be
distracted by the readable distracted by the readable
content of a page when content of a page when
looking at its layout. The looking at its layout.
point of using Lorem

Ipsum is that it has a The point of using Lorem
more-or-less normal Ipsum is that it has a
distribution of letters, as more-or-less normal
opposed to using distribution of letters, as
'Content here, content opposed to using.
here', making it look like

readable English. Many Content here, content
desktop publishing here', making it look like
packages and web page readable English.
editors now use...

D I CA # 5
Cuidado com as letras

maiúsculas para texto corrido
O texto em letra maiúscula pode funcionar bem em alguns casos,
mas não em parágrafos de textos longos. Isto ocorre, pois, como não
vemos este tipo de escrita com frequência, investimos mais tempo
para conseguir interpretar, escanear e identi ficar as palavras, algo
que prejudica muito a leiturabilidade.
Batman tornou-se Batman tornou-se

popular assim que foi popular assim que foi
apresentado, apresentado, acabando
acabando por ganhar por ganhar a sua própria
a sua própria revista revista de banda
de banda desenhada em desenhada em
1940, Batman.
1940, Batman.
Enquanto as décadas Enquanto as décadas

progrediram, foram progrediram, foram
surgindo divergências surgindo divergências
sobre a interpretação sobre a interpretação do
do personagem. personagem.
Parece que este
texto está gritando

Quando as letras maiúsculas podem
ser uma boa solução?

Geralmente, quando utilizadas para descrever trechos menores de
palavras ou causar destaque em meio a alguma informação. Abaixo,
alguns exemplos de aplicação de texto em letra maiúscula que
podem funcionar para alguns casos:
Quando utilizada em call to actions
CRIAR UMA CONTA CADASTRAR DELETAR CON
Quando utilizada como pré-títulos
NEWSLETTER
Faça parte da nossa
newsletter hoje!
Dica extra: brincar com o espaçamento entre caracteres

ou “letter-spacing” pode deixar um pré-título de letras
maiúsculas ainda mais elegante.

Quando utilizada em títulos curtos e de grande ênfase
WEBHOSTING
POWERFULL
HOSTING
SERVICES
SUBSCRIBE NOW
Não se limite apenas a estes casos. Os exemplos destacados são

apenas algumas sugestões de uso, você é livre para explorar, brincar
e descobrir novas maneiras que também podem funcionar.

90% do
design é
tipografia.
#typographymatters

D I CA # 6
Evite utilizar a função justi ficar

A função justificar utilizada em blocos de texto cria “rios” entre as
palavras - os longos espaços em branco que ocorrem entre uma
palavra e outra, gerando a sensação de leitura interrompida e
tornando os conteúdos mais difíceis de serem lidos.
Batman tornou-se popular Batman tornou-se

assim que foi popular assim que foi
apresentado, acabando apresentado, acabando
por ganhar a sua própria por ganhar a sua própria
revista de banda revista de banda
desenhada em
desenhada em
1940, Batman.
1940, Batman.
Enquanto as décadas Enquanto as décadas

progrediram, fora... progrediram, fora...
A solução é simples!
Trabalhe com o texto alinhado à esquerda (ou direita, dependendo
do propósito e lógica de grid utilizada na sua interface). Mesmo
que as linhas pareçam irregulares, será mais fácil para a pessoa
usuária ler o texto, já que o fluxo de leitura deste modo
não será interrompido.

D I CA # 7
Quando possível, quebre o

bloco de texto no estilo de
lista de recursos
Uma técnica que facilita a escaneabilidade do conteúdo textual é
subdividir o texto por tópicos. Além de facilitar a leitura, torna o texto
muito mais atrativo e organizado.
Batman e seus codinomes conhecidos: Homem-Morcego, O

Cavaleiro das Trevas, O Cruzado Encapuzado, O Detetive das
Sombras, O Maior Detetive do Mundo.
Batman e seus codinomes conhecidos

Homem-Morcego O Cruzado Encapuzado
O Cavaleiro das Trevas O Detetive das Sombras
O Cruzado de Capa O Maior Detetive do Mundo
Sinta-se livre para inovar no uso dos bullets. Às vezes,

trazer mais personalidade conforme o contexto pode ser
melhor que usar o simples ícone de círculo comum.

D I CA # 8
Cuidados e boas práticas com o

espaçamento entre caracteres
Assim como o espaçamento entre linhas, o espaçamento entre
caracteres também pode melhorar a leiturabilidade de uma frase, ou
prejudicar, quando utilizada da maneira errada.
Falta de espaçamento entre caracteres
Apósdoisanosespreitandoas -2.0 px
ruascomoBatman
Espaçamento entre caracteres em excesso
Após dois anos espreitando 1.5 px

ruas como Batman
Espaçamento ideal entre caracteres
Após dois anos espreitando 0 px

ruas como Batman

Isso significa que espaçamento em 0px
resolve tudo?
Geralmente sim, porém, existem alguns casos onde diminuir ou
aumentar o espaçamento entre caracteres pode ser uma boa opção,
vou exemplificar melhor:
Utilizando em pré-títulos pequenos

letter-spacing:4.0 px
SUPER HERÓIS
Após dois anos espreitando

as ruas como Batman
Após dois anos espreitando as ruas como Batman,
Bruce Wayne se encontra nas profundezas mais
sombrias de Gotham.
Neste exemplo acima, o espaçamento entre caracteres em 4px foi

uma boa escolha pelo fato de que o tamanho da fonte é pequena,
foi basicamente uma técnica de “compensação”. Se a palavra
“super- heróis” fosse utilizada com letter-spacing em 0px, sua
legibilidade seria mais dificultada, ficaria assim:
SUPER HERÓIS

Utilizando em headlines maiores
NEWSLET TER
newsletter hoje!
letter-spacing:-1.2 px
Diferente do caso anterior, onde o tamanho da fonte era pequena,

agora temos um título onde a fonte possui um tamanho maior.
Neste caso, o espaçamento entre caracteres foi reduzido para

alcançar um resultado mais elegante e compensar o espaço
excedente devido ao tamanho da fonte.
Abaixo, um exemplo de como ficaria o espaçamento entre caracteres

no tamanho original da fonte:
NEWSLET TER
newsletter hoje!

Não existe um valor padrão ou universal de espaçamento
entre caracteres, já que as fontes possuem formatos e
espaçamentos diferentes entre si. O segredo é explorar
e testar para entender se os textos na interface
possuem uma boa taxa de leiturabilidade.

A “legibilidade” baseia-se
na facilidade com que uma
letra pode ser distinguida
da outra.
Legibilidade é a facilidade
com que o olho pode
absorver a mensagem e se
mover ao longo da linha.
por Types of Typefaces (1967)

D I CA # 9
Não faça sobre-uso de fontes

O fato de existir várias fontes não significa que todas devem ser
utilizadas na mesma interface.
Utilizar apenas 1 família de fontes é o suficiente para a criação de

interfaces. Trabalhar com cor, peso e tamanho de forma inteligente
pode garantir que você atinja bons resultados apenas com uma
família de fonte específica.
Quando utilizada de maneira errada

font:Times New Roman - Regular font:Montserrat - Regular
ANIMAIS
As novas espécies de
aves descobertas
Saiba mais sobre as novas espécies
de aves raras descobertas no Brasil
no ano de 2023.
font:Inter - Regular

Quando utilizada da maneira correta
font:Inter - Semibold font:Inter - Bold
ANIMAIS
As novas espécies de
aves descobertas
Saiba mais sobre as novas espécies
de aves raras descobertas no Brasil no
ano de 2023.
font:Inter - Regular
A diferença na prática
Na prática a solução foi simples. O exemplo não adequado na página
anterior utiliza 3 tipos de fontes diferentes para gerar distinção entre
textos, não trabalha com diferenciação de cor e nem com peso.
Na versão adequada, temos o uso de apenas uma fonte, porém,

gerando hierarquia e destaque utilizando cor (que no caso do
exemplo: azul), peso (ou font-weight: bold), e também, tamanho,
sendo mais proeminente no título que, por ser a informação mais
importante hierarquicamente, ganha um destaque maior em meio
aos outros textos.

D I CA # 1 0
Utilize os diferentes estilos de

fontes com um contexto
Um problema comum em interfaces é o uso de fontes com um estilo
não adequado para o contexto do projeto, como no exemplo abaixo
(e não é exagero, isso é comum):
SEGURANÇA
Alarmes e aparelhos para segurança

residencial
Acesse e conheça nossos aparelhos voltados para a área de
segurança comercial e residencial.
Esta é uma chamada para um contexto que deveria ser encarado

com seriedade, porém, o uso de uma fonte em estilo “escrita a mão”
acaba transmitindo uma mensagem distorcida, não causa a
sensação que deveria causar.
Isso significa que esta fonte ou este estilo jamais deveria ser
utilizado? Não, apenas deve ser usada com atenção e considerando
o objetivo que se quer atingir, a sensação que você quer transmitir
conforme o contexto.

Salvador
VISITE
Acima, um exemplo que prova sobre o contexto de uso da fonte, que

agora ficou adequada, legível e agradável, transmitindo a sensação
de ser algo amigável e convidativo.
É tudo sobre contexto.
Outros pontos importantes

Na dúvida, as fontes da categoria Sans Serif que podem ser
encontradas no Google Fonts (https://fonts.google.com) resolvem
99% dos problemas, não reinvente a roda.

D I CA # 1 1
White space na construção
de blocos de textos
O white space (ou espaço negativo) é indispensável na elaboração
de interfaces. Quando utilizado de forma ideal, torna tudo mais
agradável e fácil de ser consumido, porém, quando utilizado em
excesso (ou em falta), pode gerar a sensação de “desagrupamento”,
causando um grande incômodo na escaneabilidade do conteúdo.
Um exemplo de falta de white space
SUPER HERÓIS

as ruas como Batman
Após dois anos espreitando as ruas como Batman,
Bruce Wayne se encontra nas profundezas mais
sombrias de Gotham.
Acima, um exemplo simulando a falta de white space entre os

elementos de um bloco de texto, causando a sensação de “falta de
respiro”. Além de causar uma sensação visual estranha, a legibilidade
do conteúdo é dificultada e os textos parecem disputar espaço.

Um exemplo de white space ideal
SUPER HERÓIS

as ruas como Batman
Batman, Bruce Wayne se encontra nas
profundezas mais sombrias de Gotham.
No exemplo acima, adicionei white space aos elementos usando um

espaçamento com base em múltiplos de 4, valores de referência que
ajudam a criar espaços de maneira harmoniosa.
A lógica envolvida é que, seguindo a Lei de Proximidade, elementos

do mesmo tipo devem ser espaçados uniformemente, para podermos
entender os conteúdos como parte do mesmo contexto ou assunto.
SUPER HERÓIS
4px
as ruas como Batman 8px
Batman, Bruce Wayne se encontra nas
profundezas mais sombrias de Gotham.

D I CA # 1 2
Evite os parágrafos de textos

com largura total de página
Não deixe que o tamanho de um bloco de texto ocupe a largura total
de uma página ou de um campo de visão, tamanhos longos de
parágrafo resultam em uma maior dificuldade para acompanhar a
leitura, já que o caminho que nossos olhos fazem para escanear o
que está escrito será mais longo e cansativo.
Após dois anos espreitando as ruas...

Ben Affleck, que interpretou o Batman no Universo Estendido DC (UEDC), foi definido para dirigir,
produzir, coescrever e estrelar The Batman em 2014, mas em 2017 desistiu devido à insatisfação
com seu próprio roteiro. Reeves foi contratado para assumir e retrabalhar a história de Affleck
para se concentrar em um Batman mais jovem; procurando explorá-lo como um detetive mais do
que os filmes anteriores, inspirado nas histórias em quadrinhos de 1987, 1996.
Após dois anos espreitando as ruas...

Ben Affleck, que interpretou o Batman no Universo
Estendido DC (UEDC), foi definido para dirigir, produzir,
coescrever e estrelar The Batman em 2014, mas em 2017
desistiu devido à insatisfação com seu próprio roteiro.
Reeves foi contratado para assumir e retrabalhar a história
de Affleck para se concentrar em um Batman mais jovem;
procurando explorá-lo como um detetive mais do que os
filmes anteriores, inspirado nas histórias em quadrinhos.

Entendendo a solução na prática
Uma dica para evitar este problema, é entender que o espaço vazio
faz bem para o texto, não se sinta mal em deixar white space ao
redor, pois isto (quando bem aplicado) facilita muito a leitura,
tornando o texto menos cansativo de ser lido.
Utilize como base o cálculo de 50 - 70 caracteres por

linha, é uma boa medida para a construção de parágrafos
de textos que não quebram o ritmo de leitura.
Quanto maior a largura da linha de texto, maior

dificuldade e cansaço a pessoa usuária terá para ler.
Ferramenta para contar caracteres
https://wordcounter.net/character-count/

D I CA # 1 3
Utilize uma escala tipográ fica

adequada nas interfaces
Uma escala tipográfica (ou type scale) organizada faz com que você
consiga trabalhar com textos utilizando uma progressão em
tamanhos de fontes ideais, facilitando a criação de
uma interface organizada e harmoniosa.
Exemplo de uma escala tipográ fica com base

na fonte Roboto
Imagem de https://material.io/design/typography/the-type-system

Porque devo utilizar?
Na prática, a escala tipográfica auxilia para que você não gere
tamanhos de fontes aleatórios. Quando usada consistentemente,
garante uma melhor organização entre os textos da sua interface por
tamanhos ideais, facilitando também a criação de hierarquia sem
perder a uniformidade. Consistência é tudo!
Gerando sua própria escala tipográ fica

Recomendo o uso do “type scale generator” disponibilizado pela
Google Fonts, permitindo que você selecione as opções de fontes
disponíveis na própria plataforma, e com opções de até 2 famílias de
fontes diferentes: uma para títulos e outra para corpo de texto.
Acesse o Type Scale Generator em
material.io/design/typography/the-type-system/

D I CA # 1 4 e # 1 5
Dicas extras para finalizarmos

este capítulo
Algumas dicas extras sobre tipografia:
Tamanhos de fontes ideais para corpo de texto

Para corpos de textos e parágrafos, 16px é um tamanho considerado
como “padrão” e ideal, porém, considere que os tamanhos de fontes
variam conforme a família escolhida, uma fonte 16px Montserrat
pode parecer maior que uma 16px Roboto, por exemplo.
Quando se trata de informações secundárias e tamanhos mínimos,

você pode considerar valores entre 12px e 14px, entretanto, tenha a
consciência de que estes tamanhos demandam maior esforço para a
leitura, e dependendo do público, se torna inviável.
Veja a interface no seu dispositivo real

Esta é uma dica importante: ao criar interfaces, certifique-se de ver
um preview no seu dispositivo, seja web ou mobile, pois a percepção
quase sempre difere da que temos enquanto estamos criando no
computador.
Para o Figma, por exemplo, existe o aplicativo Figma disponível

para iOS e Android, permitindo que você faça o espelhamento no
seu dispositivo e observe na prática como a interface ficará.

CAPÍTULO 2
Cores
Neste capítulo você aprenderá algumas dicas fundamentais
para o uso de cores em interfaces de uma maneira inteligente,
evitando alguns erros comuns (e outros pouco conhecidos).
@andreyknabbenn Boas práticas de Cores 46

D I CA # 1 6
Adicionando matiz para gerar

tons neutros mais atrativos
Uma dica para gerar interfaces com cores ainda mais atrativas é
evitar o uso do cinza puro, adicionando um tom de cor a ele,
como no exemplo abaixo:
9:41 9:41
Resumo geral Resumo geral

Sua conta em números
R$ 515,41 R$ 515,41
Ganhos em relação
Ganhos em relação
ao mês passado ao mês passado
Julia Denoch Julia Denoch

Product Designer Product Designer
Uma product designer atuando na Uma product designer atuando na

área há mais de 12 anos. Apaixonada área há mais de 12 anos. Apaixonada
pelo que faz, e em busca de novas... pelo que faz, e em busca de novas...
Conversar Conversar
#E6E6E6 #FFF5F2
Matiz nesta cor
Matiz nesta cor
definida em 0 definida em 12

A interface criada para o exemplo na página anterior possui
elementos com uma cor predominante: laranja. Ao usar esta cor com
um tom cinza como background, sentimos uma estranheza visual,
um certo ruído, pois, de certo modo, notamos que a interface parece
artificial, as cores parecem não “conversar” entre si.
O interessante, é que percebemos a segunda versão na página

anterior mais harmoniosa pelo fato de que a cor de background
laranja considerou a cor predominante dos outros elementos na tela,
que também é laranja. Isso é como se o fundo tivesse sido afetado
por essas cores, assim como ocorre na natureza.
Outro exemplo mostrando que o mesmo

funciona com outras cores, não apenas laranja
9:41 9:41

Sua conta em números Sua conta em números
R$ 515,41 R$ 515,41
Ganhos em relação
Ganhos em relação


Conversar Conversar

Muitos elementos do
design que consideramos

harmoniosos possuem
grande elo com os
elementos da natureza,
do mundo real.
Por isso, observe ao seu

redor, o mundo é inspiração.

D I CA # 1 7
Cuidados com o baixo contraste

No design, contraste é tudo. As pessoas usuárias encontrarão
dificuldade ao lidar com elementos na sua interface com uma taxa de
contraste baixa, já que, muito provavelmente, o conteúdo se tornará
difícil de ser entendido, visualizado ou lido.
Baixo contraste causa aumento da carga cognitiva para processar a

interface, maior dificuldade para entender o conteúdo e, por
consequência, maior tempo gasto na tela, contribuindo muito para a
diminuição da “carga de boa vontade” da pessoa usuária.
9:41 9:41

R$ 515,41 R$ 515,41
Ganhos em relação
Ganhos em relação


Contraste ruim Contraste adequado

O cuidado com o contraste vale para todo tipo
de elemento, listei aqui alguns exemplos onde
vejo este erro com frequência:
Em botões, isto não é tão raro acontecer:
Ainda em botões, alguns casos com erros mais gritantes:
Casos de contraste ruim em ícones:
Em blocos de textos, aplicados em tons neutros:
Leia a notícia completa... Leia a notícia completa...

Corrigindo e evitando este problema na prática
Vimos que o baixo contraste gera ruído, é perceptível o quanto nos
incomodamos em visualizar elementos com contraste ou
combinação de cores inadequadas, por isso, devemos sempre
almejar o contraste ideal, ou o alto contraste.
It is a long established It is a long established

fact that a reader will be fact that a reader will be
distracted by the readable distracted by the readable
content of a page when content of a page when
looking at its layout. looking at its layout.
Taxa de contraste Taxa de contraste
Ferramenta para medir taxa de contraste
https://coolors.co/contrast-checker/

Outros pontos gerais
No mais, lembre-se que geralmente o contraste ruim ocorre
quando a cor escolhida para o texto (ou ícone) é muito similar a
tonalidade da cor de fundo, como, por exemplo: textos pretos
aplicados em fundos escuros, ou textos brancos aplicados em
fundos claros.
Utilize a ferramenta mencionada na página anterior para medir as

taxas de contraste e garantir que sua interface esteja nos
padrões de leiturabilidade.
Não esqueça de uma das melhores formas de validação: testar

com as pessoas usuárias. Solicitar feedback, mostrar seus
protótipos e ver as reações das pessoas são ótimas formas de
validar suas criações.

D I CA # 1 8
Utilize a cor primária da marca

com sabedoria
Um erro comum em interfaces é utilizar cores em excesso, ou a
mesma cor repetidas vezes em componentes da mesma tela, criando
um sobre-uso de cor. A dica para corrigir este problema é definir uma
paleta de cores específica por segmentos antes de iniciar o projeto.
Geralmente, uma paleta de cores pode ser definida em cores

primárias, cores secundárias, cores de sucesso, de alerta, de avisos,
e mais. A ideia, é segmentar cores por contexto, assim você evita o
uso errado ou exagerado das mesmas.
9:41 9:41

Junte-se a nós! Junte-se a nós!

Faça parte do grupo. Faça parte do grupo.
Fechar Acessar Fechar Acessar


área há mais de 12 anos. área há mais de 12 anos.
Conversar Conversar

Corrigindo e evitando este problema na prática
No exemplo da página anterior, a principal mudança foi usar a cor
laranja apenas para as ações primárias, ações que demandam
mais atenção.
Se você comparar o exemplo errado com o correto, verá que no

exemplo errado a cor primária (laranja) é utilizada em excesso,
fazendo com que os botões não chamem tanta a atenção
e percam a exclusividade, gerando confusão para o usuário final.
Uma das dicas práticas e regras para evitar que isto aconteça é
trabalhar com o método 60-30-10.
9:41
Resumo geral
Cor base e
60%
dominante
Junte-se a nós!
Faça parte do grupo.
Fechar Acessar
Julia Denoch Cor

30%
Product Designer secundária
Uma product designer atuando na

área há mais de 12 anos.
Cor de
10%
Conversar destaque

Uma dica de ouro é pesquisar e se inspirar em como as grandes
marcas organizam suas cores, assim você forma um melhor
entendimento sobre a quantidade de cores utilizadas e como elas
aparecem na interface.
Imagem de https://www.onlinepalette.com/twitter/
Paletas de cores de várias marcas
https://www.onlinepalette.com/

D I CA # 1 9
Cor para criar identi ficação

rápida entre itens selecionados
Para a pessoa usuária, o tempo investido é um fator decisivo que
pode causar uma experiência boa, ou uma experiência ruim. Como
designers, temos o poder de usar técnicas e elementos que facilitam
e encurtam o tempo de processamento de decisões, contribuindo
para que a experiência da pessoa usuária seja boa e prazerosa.
Nesta dica, trago um exemplo de uso de cor que facilita a

identificação de itens selecionados entre itens não selecionados
mais rapidamente:
Maria Maria
Iniciante Iniciante
Lucas Lucas
Iniciante Iniciante
Juliana Juliana
Iniciante Iniciante
Destaque de item selecionado

Destaque de item selecionado
apenas com contorno com cor de preenchimento

D I CA # 2 0
Cores para gerar signi ficados
e informações corretas
Ao projetar interfaces, é indispensável entender sobre cores e seus
significados semânticos. Como exemplo, separei três casos
principais para explicar melhor:
Vermelho Amarelo Verde

Cor de perigo, Cor de alerta, Cor de confirmação,
sinaliza erro, sinaliza atenção, sinaliza sucesso,
exclusão, problema. cuidado, aviso. êxito, tudo certo.
Conhecendo esses básicos, você evita este

erro que frustra qualquer pessoa usuária:
Sua senha foi

Sua senha foi
alterada com sucesso alterada com sucesso

Tudo certo com a alteração Tudo certo com a alteração
da sua senha! da sua senha!
Parece mentira, mas o site do plano de saúde que acesso utiliza mensagens de
sucesso assim como no exemplo incorreto mencionado, isso sempre me assusta.

D I CA # 2 1
Não use tons de cinza em

backgrounds coloridos
A cor cinza para textos pode funcionar bem com um background
branco, mas quando o background é colorido, gera a sensação de
ruído (como no exemplo abaixo), deixando notável o quanto a cor
cinza causa um contraste ruim com o tom roxo de background,
prejudicando a legibilidade do texto.
Saiba mais Saiba mais

sobre Batman sobre Batman
lançamentos da DC. lançamentos da DC.
Tom de Cinza Cor com opacidade

Cor #AEAEAE com 100% Cor #FFFFFF com 70%
de opacidade de opacidade
O insight é que ao invés de usar a cor cinza no texto com o

background roxo, é mais viável utilizar a cor branca com uma
opacidade reduzida, assim, a cor automaticamente se ajustará
com o background escolhido.

Outro insight de ouro
Assim como a dica 16, a arte de saber utilizar a matiz correta pode
deixar sua interface muito mais elegante.
Separei no exemplo abaixo a melhor de finição que consegui criar

para exempli ficar o uso correto de matiz conforme a cor de
background escolhida. Sinto que quando descobri isso, dei um salto
na qualidade visual das minhas interfaces, por isto acho tão
importante compartilhar este aprendizado.
Saiba mais Preto aplicado em
background com matiz

sobre Batman diferente
#000000
Acertos e controvérsias
caminham lado a lado Cinza aplicado em
background com matiz

quando falamos de diferente
lançamentos da DC. #555555
Saiba mais Tom de roxo aplicado

em background com a
sobre Batman mesma matiz
#353264
Acertos e controvérsias
caminham lado a lado Tom de roxo aplicado
quando falamos de em background com a
mesma matiz
lançamentos da DC. #5D5C77

O que é a matiz? Como controlar?
Mencionei bastante sobre matiz, agora exemplifico melhor sobre o
que é e como fazer ajustes com base no sistema HSB, neste
exemplo, por meio do Figma.
Matiz (HUE): tonalidade de cor / gradação
No sistema de cor HSB do

Figma, matiz é representada
pela inicial H (HUE).
O uso do sistema de cor HSB facilita o controle e ajuste de cor

específico por Matiz, Saturação e Brilho, permitindo que você faça
um ajuste fino na cor que você quer obter.
Na prática, o segredo para atingir o resultado do exemplo da página

anterior é combinar matizes, de forma resumida, deixar a matiz da
cor do texto igual ou muito similar a matiz da cor de fundo.
Exemplo: a matiz da cor de background é 300? Utilize a matiz da cor

de texto também em 300 e trabalhe com os níveis de Saturação e
Brilho caso queira ajustar ou obter novas tonalidades de cores.

D I CA # 2 2
Evite o tom de cor 100% preto

Este é outro hack que pode deixar sua interface mais elegante.
Lembra que o design é inspirado nos elementos da natureza? Na
natureza, o tom de cor 100% preto raramente aparece, grandes
pintores impressionistas já sabiam disto e aplicavam essa
“limitação” em suas obras, algo que contribuía para o alcance da
harmonia visual.
Saiba mais Saiba mais

sobre Batman sobre Batman
lançamentos da DC. lançamentos da DC.
Título Parágrafo Título Parágrafo

#000000 #000000 #2F2F2F #686868

D I CA # 2 3
Uso de cor para realçar

ações destrutivas
Como vimos, o vermelho está muito associado a alerta, perigo e
aviso que merece total atenção. Em sistemas, redes sociais e
plataformas é também associado a ações relativas a exclusões,
seja de dados, perfis, imagens ou outras informações que em
alguns casos não há como desfazer ou trazer de volta.
Aplicadas em modais de con firmação
Excluir seus dados? Excluir seus dados?

Ao excluir, você perderá todas Ao excluir, você perderá todas
as suas informações. as suas informações.
Cancelar Excluir dados Cancelar Excluir dados
Ou aplicadas em botões de estilo texto
Editar cartão Atualizar Venc. Desbloquear cartão Deletar cartão
Editar cartão Atualizar Venc. Desbloquear cartão Deletar cartão

D I CA # 24
Sempre defina uma cor para

destaque de ação primária
Em uma interface, o “call to action” ou botão de chamada para ação
é geralmente o elemento de alta prioridade, criado para atrair a
atenção da pessoa usuária.
Um erro neste caso é fazer o sobre-uso de cores e deixar o botão

disputando atenção com os outros elementos da tela que possuem
a mesma cor. Veja um exemplo melhor na prática:
9:41 9:41
Assine a versão completa

Assine a versão completa
deste recurso deste recurso

E desbloqueie os melhores
E desbloqueie os melhores
recursos do nosso app! recursos do nosso app!
Mensal R$ 10,99 Mensal R$ 10,99
Trimestral R$ 19,99 Trimestral R$ 19,99
Anual R$ 59,99 Anual R$ 59,99
Comprar plano Comprar plano

Evitando este problema
Trago novamente o exemplo do método 60-30-10 para equilíbrio e
priorização de cores.
Ter uma paleta de cores definida e saber equilibrá-las na interface

pode aumentar drasticamente as chances de tornar suas ideias
mais efetivas, garantindo que a pessoa usuária tenha foco onde
precisa: em elementos e ações para realizar tarefas ou cumprir
objetivos do seu negócio.
9:41
Resumo geral
Cor base e
60%
dominante
Junte-se a nós!
Faça parte do grupo.
Fechar Acessar
Julia Denoch Cor

30%
Product Designer secundária
Uma product designer atuando na

área há mais de 12 anos.
Cor de
10%
Conversar destaque

D I CA # 2 5 á # 2 8

este capítulo
Algumas dicas extras sobre cores:
Entenda o signi ficado básico das cores

Apesar de o significado de algumas cores específicas variarem
culturalmente, é interessante que você pesquise e entenda sobre a
representação e significado básico delas, deste modo, você garante
que considerou o propósito, personalidade e o “porquê” de definir
uma paleta de cores para um novo produto no mercado, por exemplo.
Trabalhe com limites de cores

As inspirações em paletas de cores de grandes marcas mencionadas
neste capítulo e a regra 60-30-10 prova que trabalhar com poucas
cores contribui para um visual menos sobrecarregado, mais leve,
dando espaço apenas para cores que refletem a personalidade do
negócio / produto. Lembre-se da regra de ouro: menos é mais.

Acessibilidade importa
Como designers, devemos considerar o centro disto tudo: a pessoa
usuária. É nosso dever contribuir para um uso acessível nas
interfaces que criamos, como exemplo, pensando em pessoas com
deficiência de visão de cores e, também, com os diferentes tipos
de daltonismo.
Guia base para produtos acessíveis
https://guia-wcag.com/
Extensão do Chrome para simular diferentes

tipos de daltonismo
https://wearecolorblind.com/resources/
colorblindly-colorblindness-simulator/
Outras ferramentas que podem te ajudar

Alguns sites para inspiração em cores e construção de paletas:
Color Tool - Material Design
https://material.io/resources/color/
Gerador de sombras com base em cor
https://maketintsandshades.com/

CAPÍTULO 3
Botões
Os botões estão presentes em basicamente qualquer interface,
são eles que criam a possibilidade de interagir e gerar ações
entre usuário e produto. Vamos ver algumas boas práticas!
@andreyknabbenn Boas práticas para Botões 68

D I CA # 2 9
Crie distinção entre botões

primários e secundários
No uso de botões, um erro comum é a não priorização de ações
principais, a ação mais “desejada”, que deve ser identificada
facilmente pelas pessoas usuárias. No exemplo, podemos notar
como este problema ocorreria em um card de e-commerce,
simulando um conflito de botões primários:
Eletrônicos Eletrônicos
Smart TV 55" UHD Smart TV 55" UHD
Samsung 4k Samsung 4k
Processador Crystal 4k Tela Sem Limites Processador Crystal 4k Tela Sem Limites
Visual Livre de Cabos Alexa Built In. Visual Livre de Cabos Alexa Built In.
Comprar Comprar
Ver formas de pagamento Ver formas de pagamento
Informações do produto Informações do produto

Em uma interface, é possível solucionar este problema definindo um
guia de estilos para botões, criando uma priorização hierárquica por:
Botões primários
Utilizados nas ações mais importantes para a pessoa usuária realizar.
Geralmente associados a funções como: comprar, cadastrar,
prosseguir, avançar, entre outros...
Criar uma conta Cadastrar Adicionar ao
Nos botões primários é recomendado utilizar a cor

principal e predominante da marca, a cor de “destaque”.
A lógica é que a cor seja a mais exclusiva possível para o

uso de botões, facilitando o reconhecimento.
Botões secundários
Utilizados em ações não tão importantes quanto a ação principal.
Geralmente associados a funções que não impactam no sucesso
direto da pessoa usuária ao utilizar um fluxo.
Pular tutorial Personalizar Ver similare

Botões terciários
Associados a funções não tão importantes para a maioria dos
usuários na interface. Um botão que também é chamado “text
button” ou “botão de texto”, e que na ordem hierárquica é menos
importante que o botão secundário e primário.
Relatar problema Esqueci minha senha Saiba mais sobre
Na prática, estes botões são geralmente utilizados para

links externos ou opções menos corriqueiras, como, por
exemplo, a opção de “esqueci minha senha”, ou até
mesmo como link para expandir informações legais
do produto.
Dicas finais
De modo geral, pense que os botões mais importantes chamam
maior atenção, seja por uma fonte maior, uso de texto em bold ou
destacando a cor predominante da marca como background.
Por outro lado, os botões menos importantes usam de visuais para

passar mais despercebidos, geralmente são preenchidos apenas
com contornos e background vazios (ou com um tom de cor mais
opaco), fontes com um peso menor ou até mesmo utilizando apenas
de texto com um underline para se parecerem links.

D I CA # 3 0
Sempre pense nos estados de

interação dos botões
Quando pensamos em botões, não podemos esquecer dos estados
de interações, prevendo e considerando como o botão se parecerá
quando o usuário interagir com ele.
Pense que um botão pode envolver diferentes interações, e no

exemplo abaixo é destacado os principais, se não todos, os estados:
Botão padrão, normal
Botão inativo, indicando interação não permitida
Botão em hover, “ao passar o cursor por cima”

*Lembrando que em dispositivos mobile esta interação não existe

Botão pressionado, microinteração rápida ao
tocar ou clicar no botão
Estado ativo, indicando que o botão foi clicado
Estado de foco, indicando que o botão está

selecionado. (Importante para acessibilidade)
Estado de carregamento
Botão padrão Ao tocar no botão Concluído
Salvar dados Salvando... Salvo com s

Observações
Apesar de às vezes serem esquecidas ou não priorizadas, as
microinterações contribuem para gerar boas experiências às
pessoas usuárias. Interações visuais importam e funcionam, pois,
geram feedbacks, geram informações que para nós, usuários,
indicam que algo no sistema aconteceu.
De forma resumida, é uma maneira de o sistema se comunicar com

quem está por trás das telas.
Exemplos de tipos e estados dos botões no Design

System da Goldman Sachs
https://design.gs.com/components/button

D I CA # 3 1
Use o white space para não
criar botões sufocados

Como mencionado nas dicas anteriores, white space (ou espaço
negativo) deve ser pensado ao projetar os diferentes componentes,
não apenas cards ou textos.
Quando utilizado em botões, traz uma melhoria não apenas estética,

mas também funcional, já que uma área maior promove facilidade
para a pessoa usuária clicar ou tocar.
6px 6px 32px 32px
Criar conta 28px Criar conta 40px
O exemplo acima mencionado como correto utiliza os múltiplos de 8

como valores de referência para gerar white space, mas isto não é
uma regra absoluta.
Insights sobre a altura dos botões de texto

O tamanho em altura pode variar conforme o tipo de botão em nível
de prioridade: pequeno, médio ou grande. Por experiência própria,
utilizo no mínimo 36px para um botão de baixa prioridade. Em
botões primários para aplicações mobile eu costumo utilizar 48px
de altura, e isso tem funcionado bem.

Áreas de toque recomendadas para iOS
Recomendação da área de toque mínima conforme a Human
Interface Guidelines da Apple:
44px
Share options
example ui 44px
A imagem do ícone não

ocupa 44x44px, porém, ele
é afetado pela área
externa maior, criada
AirDrop Joe Group Luc para aumentar e facilitar
Samantha
4 People
a precisão do toque.
Áreas
iFood de toque
Uber recomendadas
WhatsApp Facebook para Android
Recomendação
Copy Link
da área de toque mínima conforme o Android
Material Design Guidelines:
48px
Thu, Jun 9 48px
June 2022 Note que igual ao iOS,
o ícone não ocupa

2015 2016 2017 48x48px, porém, ele
também é afetado pelo
2018 2019 2020 toque na área externa
maior que a ilustração
2021 2022 2023 em si.
2024 2025 2026
2027 2028 2029

Leituras complementares
Algumas leituras para você entender mais sobre a importância de
botões com áreas de toques acessíveis.
Lei de Fitts
https://lawsofux.com/fittss-law/
Áreas de toque em dispositivos mobile
https://www.nngroup.com/articles/touch-
target-size/

Quanto maior o
botão, mais fácil
será para a pessoa
usuária utilizá-lo.

D I CA # 3 2
Não utilize o drop-shadow

padrão em botões
Este também é um erro que ocorre com frequência em interfaces: a
falta de ajuste e refinamento nos valores de sombra (drop-shadow)
que são gerados automaticamente pelos softwares gráficos.
As sombras, quando utilizadas da maneira correta, podem gerar uma

sensação melhor de profundidade no layout, agregando para
destacar um elemento importante em meio a outras informações.
Eletrônicos Eletrônicos
Smart TV 55" UHD Smart TV 55" UHD
Samsung 4k Samsung 4k
Processador Crystal 4k Tela Sem Limites Processador Crystal 4k Tela Sem Limites
Visual Livre de Cabos Alexa Built In. Visual Livre de Cabos Alexa Built In.
Comprar Comprar
Sombra padrão, rígida Sombra refinada, diluída

Solucionando na prática
Um exemplo de configurações que utilizo para gerar drop-shadows
mais suaves e harmoniosos:
Drop shadow
X 0 Blur 16
Eletrônicos
Y 6 Spread 0
Smart TV 55" UHD
Samsung 4k FC825B 38% (opacidade)
Processador Crystal 4k Tela Sem Limites
Visual Livre de Cabos Alexa Built In.
Hover
Comprar
Uma dica complementar é utilizar a cor de background do

botão como cor de sombra, contribuindo para um
resultado mais suave e realista, como no exemplo acima.

Utilizando em cards
Indo além, mostrando um exemplo de uso de drop-shadow
que pode funcionar bem em cards:
novos membros
Drop shadow
X 0 Blur 50
+851.545 Y 50 Spread 0
000000 12% (opacidade)

atualizar listagem
Drop shadow
R$ 515,41 X 0 Blur 50
Ganhos em relação
ao mês passado Y 32 Spread 0
B467F3 33% (opacidade)

D I CA # 3 3
Mantenha as palavras nos

botões em linha única
A dica fundamental para isto é: não coloque mais de 3 palavras em
um botão. Um botão deve ser direto e conciso, com uma chamada
para ação, não um parágrafo.
Em interfaces mobile ou web, cuide e preveja as quebras de texto

para evitar que o botão fique quebrado como no exemplo abaixo.
Além de ficar ruim para a UI, o texto quebrado tira a “caracterização”

e faz com que o botão não se pareça mais com um botão.

Ver portfólio Ver portfólio completo

completo

D I CA # 3 4
Seja consistente com o estilo

dos botões
Defina um padrão de estilo para os botões e replique-os da mesma
forma ao longo das telas de uma interface, não utilize estilos
diferentes entre uma tela e outra, isto gera inconsistência.
A falta de consistência pode acontecer por vários problemas de

diferenças nos botões: arredondamento de bordas diferentes (o
mais comum), cores diferentes para botões primários, tamanhos
diferentes, capitalização de texto diferentes, entre outros.
Botões diferentes entre dois cards do mesmo contexto
Eletrônicos Funko
Smart TV 55" UHD Funko Pop! Disney
Samsung 4k Remix Eve
Processador Crystal 4k Tela Sem Limites Boneco Colecionável Funko Pop! Ideal
Visual Livre de Cabos Alexa Built In. para presentear ou colecionar.
Comprar Comprar
Ver outro produto Ver outro produto

Mesmo estilo de botões entre dois cards do mesmo contexto
Eletrônicos Funko
Smart TV 55" UHD Funko Pop! Disney
Samsung 4k Remix Eve
Processador Crystal 4k Tela Sem Limites Boneco Colecionável Funko Pop! Ideal
Visual Livre de Cabos Alexa Built In. para presentear ou colecionar.
Comprar Comprar
Ver outro produto Ver outro produto

D I CA # 3 5
Utilize ícones conhecidos para

reforçar signi ficado em botões
Os ícones, quando agregados como reforço em botões, podem
reduzir muito o esforço cognitivo da pessoa usuária para identificar
sobre o que se trata a ação a ser realizada.
Ícones podem resumir um texto através de uma ilustração, é uma

representação visual sobre a ação a ser executada, e que nós, como
humanos, nos adaptamos disto, já que nosso cérebro processa
imagens muito mais rapidamente do que processa textos.
Adicionar ao carrinho Adicionar ao carrinho
Salvar como favorito Salvar como favorito
Ver próxima página Ver próxima página

Dicas fundamentais
Como nos exemplos anteriores, não utilize ícones sem um porquê,
mas sim, com um contexto, representando a ação a ser executada.
Se o ícone utilizado não condizer com o texto que o acompanha,
você estará causando o efeito contrário: ao invés de garantir
entendimento fácil você deixará a pessoa usuária confusa.
Uma dica simples

A maioria das bibliotecas de ícones permitem que você pesquise
por um termo específico, trazendo ícones que já são conhecidos
para determinadas ações, isto por si só já diminui drasticamente as
chances de você utilizar um ícone que não condiz com a ação.
Google Material Symbols
https://fonts.google.com/icons

Em alguns casos, você precisará utilizar ícones menos
comuns para representar ações que as pessoas ainda
não conhecem. Nesses casos, é fundamental realizar
testes para entender se o ícone condiz com a ação a
ser realizada.

D I CA # 3 6
Utilize formas conhecidas
para criar botões

Não altere a convenção de algo que já é familiar para as pessoas
usuárias: as formas já conhecidas de botões.
Normalmente, os botões que podem ser facilmente reconhecidos

como botões utilizam formas totalmente retangulares, ou com
arredondamentos nas bordas, como nos exemplos mencionados
como corretos abaixo:
Comprar
Comprar Comprar
Comprar Comprar
Comprar Comprar
Botões com formas orgânicas Estes são botões que
Comprar
fazem o usuário ficar na se parecem com botões,
dúvida: é um botão? são familiares

D I CA # 3 7 e # 3 8

este capítulo
Algumas dicas extras sobre botões:
Trabalhe com escala e cor para gerar prioridade

Pense que quanto maior o botão, maior sua importância em meio a
interface. Por lógica hierárquica, usamos os botões menores para
funções secundárias ou terciárias, aquelas funções “extras”, que não
impactam diretamente no sucesso do fluxo de uma pessoa usuária.
Relatar problema Ver mais Comprar
baixa prioridade média prioridade alta prioridade
Crie e respeite um espaço mínimo entre botões

Quando trabalhamos com dois tipos de botões “lado a lado”, algo
comum em headers e chamadas principais, é fundamental
utilizarmos um espaçamento de, no mínimo, 8px entre eles.
(Particularmente uso 16px na maioria dos casos).
Comprar Favoritar produto
16px

CAPÍTULO 4
Grid e Layout
Neste capítulo você aprenderá princípios para o uso de
grids e alinhamentos nos layouts, contribuindo para o
fator de consistência no seu design.
@andreyknabbenn Boas práticas para Grids e Layouts 90

D I CA # 3 9
Seja consistente no uso de

espaçamentos de itens na grid
Manter a consistência no espaçamento entre itens contribui para
gerar equilíbrio e organização visual na interface, tanto em
espaçamento de itens na horizontal em uma grid (itens um ao lado
do outro), quanto na vertical (itens um acima do outro).

No exemplo correto, é utilizado o valor de 12px para espaçamento
entre itens, e este valor é replicado em todos os outros elementos,
tanto na horizontal quanto na vertical.
No exemplo incorreto, há uma falta de padrão, são utilizados valores

alternados para espaçar os itens, causando um desequilíbrio
na interface.
Espaçamento horizontal: 12px

Espaçamento horizontal: 12px
Espaçamento vertical: 4px Espaçamento vertical: 12px

Isto signi fica que eu devo usar 12px para
espaçar todas as partes da interface?
Nem sempre. Note que o valor de 12px é utilizado no exemplo abaixo
para agrupar os tons de cores, porém, isto não signi fica que você
não pode usar espaçamentos maiores para dividir os conteúdos ao
alternar para um tipo diferente de assunto.
Abaixo, é exemplificado melhor sobre o espaçamento com valor

maior para dividir as categorias de conteúdos ou separar os
assuntos, que neste caso, são as cores.
CORES CORES
Tons de Laranja Tons de Azul
12px 24px 24px 12px

Para finalizar, o exemplo abaixo mostra sobre a confusão visual que
aconteceria se o valor de 12px fosse utilizado em toda a interface,
dando a impressão de que tudo faz parte do mesmo assunto,
contexto ou conteúdo.
CORES CORES
Tons de Laranja Tons de Azul
12px 12px 12px

D I CA # 4 0
Considere o alinhamento
horizontal ao criar interfaces
O alinhamento horizontal facilita a leiturabilidade e escaneamento
dos itens em uma interface. Mesmo que “invisível”, o alinhamento
horizontal funciona como uma linha imaginária que gera simetria, um
padrão que nosso cérebro adora.
Features Resources Blog Pricing Start free
Itens do menu desalinhados
horizontalmente em relação ao logotipo e botão.
Itens do menu alinhados horizontalmente, considerando
a posição do logotipo e botão na borda do menu.

Exemplo de estrutura
Um erro que ocorre comumente é o descuido e falta de percepção
quanto ao alinhamento horizontal entre chamadas de texto e
imagens / vídeos laterais:
Discover +80 new

features created!
Discover +80 new features, all created
to help your business.
Create your account
Discover +80 new

features created!
to help your business.
Create your account

A lógica da linha imaginária
Tenha em mente uma linha imaginária que norteia o posicionamento
dos itens, um em relação ao outro.
Na imagem abaixo, por exemplo, a headline principal de texto tem

como relação o item de vídeo, e também, o tamanho da página em si,
itens que servem como âncora para gerar alinhamento.
Discover +80 new

features created!
to help your business,
Create your account
Headline posicionada horizontalmente em relação

às linhas imaginárias / ou norteadoras.

D I CA # 4 1
Respeite o alinhamento vertical

ao criar listas e menus
Certifique-se de manter ícones e textos alinhados verticalmente ao
criar listas ou menus (que acompanham ícones). Mantendo o
alinhamento você gera ritmo e faz com que a lista seja muito mais
organizada visualmente.
Início Início
Preços Preços
Nosso time Nosso time
Recursos Recursos
Con figurações Con figurações
Eu comento melhor sobre ícones e caixas delimitadoras

no capítulo de Ícones, onde existem várias dicas que
complementam esta.

D I CA # 4 2
Utilize margens laterais

mínimas para evitar falta de
white space nas telas
Esta é uma dica válida para qualquer interface: defina e respeite
margens laterais nas telas para não sufocar os conteúdos, como no
exemplo abaixo:
9:41 9:41

Junte-se a nós! Junte-se a nós!

Faça parte do grupo. Faça parte do grupo.
Fechar Acessar Fechar Acessar

Uma product designer atuando na área há Uma product designer atuando na

mais de 12 anos. área há mais de 12 anos.
Conversar Conversar
Margens laterais: 4px Margens laterais: 16px

De finindo tamanhos mínimos para
dispositivos mobile
Para dispositivos mobile, eu costumo utilizar grids com margens
laterais de, no mínimo 16px, e em alguns casos 24px.
Columns
Count Color
4 FF0000 10%
Type Width Margin

Stretch Auto 16
Gutter
8
Exemplo de grid com espaçamento

lateral em 16px, tamanho mínimo
ideal para não sufocar os
conteúdos internos.

D I CA # 4 3
Gerando alinhamento correto

entre texto e ícones em listas
de features
Quando utilizar listas de features com ícones, mantenha o ícone
“a parte” do bloco de texto, isso faz com que o fluxo de leitura não
seja quebrado. Ao contrário, usar o ícone junto ao título de um tópico
faz com que o texto fique deslocado, causando uma quebra e
desalinhamento visual.
Mais segurança Suporte direto

Nosso sistema foi criado Com suporte para lhe
para gerar segurança. atender a qualquer hora.


D I CA # 44
Utilize grids em cards para gerar

alinhamentos consistentes
Uma das funções da grid é servir como base para gerar alinhamentos
coerentes entre itens, e isso significa levar todos os elementos em
consideração, não apenas alguns, como acontece no exemplo
definido como inadequado na representação abaixo:
Eletrodomésticos Eletrodomésticos
Lava e Seca Samsung Lava e Seca Samsung
11kg - Inox Look - 220v 11kg - Inox Look - 220v
5.0 ver reviews 5.0 ver reviews
R$ 2.999,99 Comprar R$ 2.999,99 Comprar
Textos e informações
Textos e informações
desalinhadas a grid alinhados a grid

Abaixo, o exemplo de grid utilizada para manter
os itens alinhados nos cards anteriores
Note que os espaçamentos laterais importam não só nas telas gerais
(como na dica 42) mas também para serem utilizados em elementos
internos como cards, por exemplo.
Eletrodomésticos
Lava e Seca Samsung
11kg - Inox Look - 220v
5.0 ver reviews
R$ 2.999,99 Comprar
16px 16px

D I CA # 4 5
Utilize white space para criar

interfaces que respiram
Assim como uma grid irregular e desorientada, a falta de “respiro” ou
white space, mais uma vez, prova que pode arruinar qualquer
elemento, seja um card de conteúdo para blog, um botão, um banner
principal, ou qualquer outro componente que possua informações
textuais ou imagens.
Melhores locais para

jantar em São Paulo Melhores locais para
Uma lista com mais de 50 locais bons
jantar em São Paulo
e baratos para jantar em São Paulo. Uma lista com mais de 50 locais bons
e baratos para jantar em São Paulo.
Ler artigo
Ler artigo
Luiza Silveira 68
CEO na JustFood
Luiza Silveira
68
CEO na JustFood

Exemplo de espaçamento utilizado no card anterior
Abaixo, um exemplo de espaçamento utilizado para nortear a
interface criada na página anterior com base em múltiplos de 4.
16px
8px
12px
Ler artigo
16px
12px
Luiza Silveira
68
CEO na JustFood
12px
Espaçamentos com base em múltiplos de 4 ou 8 podem

te ajudar a obter consistência na interface, desde que
sejam utilizados da maneira ideal.

Outro cuidado: espaçamento muito
além do necessário
Como já abordado em outra dica, o espaçamento em excesso
também pode ser um problema, causando a sensação de
desagrupamento na interface.
Resumidamente, o espaço neste caso é tão além do necessário, que

nos dá a ideia de que os itens não fazem parte do mesmo assunto,
causando uma quebra grande no fluxo de leitura.
Na prática, este erro é representado desta forma:
Espaçamento diferente da
parte inferior, causando
inconsistência.
Espaçamento causando

desagrupamento e
quebra de ritmo.
Ler artigo
Espaçamento além do
ideal na parte superior
Luiza Silveira e inferior, ocupa espaço
68 desnecessário.
CEO na JustFood

O espaço em branco
no design é o mesmo
que o uso do silêncio
em uma música...
Sem o uso proporcional do silêncio, a música não é
estruturada. Alguns podem chamá-la de ruído. Da
mesma forma, sem o espaço em branco, o design
não é estruturado e é difícil de consumir.
adaptada do blog Prototypr.io

D I CA # 4 6
Mantenha um sentido de leitura

único para gerar consistência
Crie alinhamentos de textos e elementos que conversam entre si. O
elemento primário está centralizado? Siga o texto centralizado nos
elementos subsequentes.
O elemento primário está alinhado à esquerda? Siga os elementos

abaixo alinhados à esquerda. A lógica aqui é fazer com que o ritmo de
leitura não seja quebrado com um alinhamento inesperado ou fora
do padrão.
Melhores locais para Melhores locais para

jantar em São Paulo jantar em São Paulo
Uma lista de recomendações com Uma lista de recomendações com
mais de 50 locais bons e baratos mais de 50 locais bons e baratos
para jantar em São Paulo. para jantar em São Paulo.
Ler artigo Ler artigo
Luiza Silveira Luiza Silveira

68 68
CEO na JustFood CEO na JustFood

D I CA # 4 7
Cuidado com os espaços

invisíveis que geram
desalinhamento
Este é um erro para os olhos mais treinados, mas que causam um
desalinhamento onde, às vezes, sabemos que algo está errado, mas
não conseguimos explicar o que está causando isto.
A dica é, verifique se a causa do desalinhamento não é um espaço

excedente em blocos de textos, como no exemplo abaixo:
Melhores locais para Melhores locais para

jantar em São Paulo jantar em São Paulo
Uma lista de recomendações com Uma lista de recomendações com
mais de 50 locais bons... mais de 50 locais bons...
Espaçamento
fantasma Eu disse que
era para olhos
treinados...

D I CA # 4 8 á # 5 0

este capítulo
Algumas dicas extras sobre grids e layouts:
Veri fique o guia de grids e áreas seguras do iOS

Recomendo a leitura extra de alguns materiais, entre eles, este guia
oficial da Apple que comenta sobre grids, margens e áreas seguras
para dispositivos iOS.
Human Interface Guidelines - Layout
https://developer.apple.com/design/human-interface-
guidelines/foundations/layout/
Veri fique o guia de métodos de espaçamentos Android

Este é um guia do Material Design com métodos de espaçamentos
recomendados para dispositivos Android. Eu particularmente
considero bem completo, já que o guia comenta sobre o uso de grid
8dp, 4dp e também sobre tamanhos ideais para alvos de toque.
Material Design - Spacing methods
https://material.io/design/layout/spacing-methods

Plugin para gerar grids no Figma
Uma dica de plugin para o Figma que permite a criação de grids com
base em 4px, e visualização em tempo real com as grids sendo
aplicadas. Recomendo utilizar para aprendizado.
Grids Generator - por Jacky Lee
https://www.figma.com/community/
plugin/841313026689642442/Grids-Generator

CAPÍTULO 5
Ícones
Ícones podem expressar ideias e ações através de
representações visuais, e neste capítulo você conhecerá
exemplos e boas práticas para utilizá-los da forma correta.
@andreyknabbenn Boas práticas para Ícones 112

D I CA # 5 1
Utilize ícones em vetores
ao invés de ícones em .PNG

Esta é uma dica primordial para o uso de ícones.
Ao trabalhar com ícones em interfaces, prefira utilizar pacotes que

permitem baixá-los em .svg (um formato em vetor), já que este
formato permite que os ícones sejam ampliados sem perder
qualidade, como ocorre nos ícones em formato .PNG que ficam com
o aspecto “serrilhado” conforme você redimensiona.
png svg

Então não devo utilizar ícones em .PNG sob
hipótese alguma?
Não necessariamente. Por experiência própria, no desenvolvimento
e entrega de telas para dispositivos iOS existia um padrão: utilizar

ícones em .SVG no software gráfico, mas exportá-los em .PNG nas
escalas @1x, @2x e @3x, ou seja, o dobro e triplo do tamanho
original, devido às diferentes densidades de pixels dos dispositivos.
Neste caso, como o ícone “original” era montado em vetor, não havia
perda de qualidade mesmo ao exportá-lo para .PNG com o triplo do
seu tamanho, já que o software gráfico se encarregava de fazer um
cálculo com base no vetor e manter a boa qualidade do ícone
exportado em .PNG.
Hoje é comum o uso de ícones em .SVG no iOS desde que

o xCode (ferramenta de desenvolvimento para apps iOS)
começou a aceitar ícones em .SVG, porém, isso não é
uma regra geral, sempre converse com o seu time de
desenvolvimento para entender os melhores padrões.

Onde encontro ícones em .SVG?
Hoje praticamente qualquer biblioteca de ícones livres para uso
disponibiliza ícones em .SVG e .PNG. Abaixo, 3 bibliotecas para você
utilizar gratuitamente:
Phosphor Icons
https://phosphoricons.com/
Google Fonts Icons
https://fonts.google.com/icons
Eva Icons
https://akveo.github.io/eva-icons

D I CA # 52
Não utilize ícones como

ilustrações grandes
O motivo é simples: ícones podem servir também como
representações visuais de palavras, porém, não é uma boa escolha
utilizá-los como imagens de destaque ou em tamanhos grandes
demais, esse modo de uso causa desequilíbrio na interface.
Por este motivo, é interessante perceber o ícone como um elemento

visual de apoio, e não como item predominante na hierarquia visual
para a criação de cards ou listas de features.
Ative o alarme nas

suas configurações
Ative alarmes diretamente nas
Ative o alarme nas con figurações do dispositivo.
suas configurações
Ative alarmes diretamente nas Ativar alarme
con figurações do dispositivo.
Ativar alarme

Outro exemplo sobre a importância visual do
ícone na escala correta
Neste exemplo a ideia é mostrar ícones sendo utilizados como
elementos de apoio, e não como itens predominantes em listas
de features:

Nosso sistema foi criado Com suporte para te
para gerar segurança. atender a qualquer ho


D I CA # 5 3
Não remova os ícones das caixas

delimitadoras padrões
Os ícones geralmente acompanham uma “caixa delimitadora” que
excede o tamanho da ilustração, e é fundamental ter o cuidado para
não apagar ou arrastar o ícone para fora deste frame delimitador.
Este frame que delimita o espaço do ícone (geralmente 24x24 por

padrão) serve também como uma grid que facilita o alinhamento
consistente de ícones quando posicionados lado a lado.
Ícones em caixas delimitadoras funcionam melhor inclusive ao

utilizar o alinhamento automático no Figma, por exemplo.
Ícone fora da caixa Ícone na caixa

delimitadora delimitadora

Um exemplo prático mostrando os problemas de
remover ícones da caixa delimitadora
Uma comparação entre ícones com a caixa delimitadora, e
ícones fora da caixa delimitadora (ou frame / grid).
Com os ícones na grid fica

mais fácil gerar
espaçamentos com números
exatos.
16px
16px 24 x 24
Ícones fora da grid podem

ocasionar espaçamentos e
tamanhos irregulares /
quebrados.
14.2px
21.18px 18.82 x 18.82
As bibliotecas para download de ícones trazem as caixas

delimitadoras por padrão, por isso é sempre importante
utilizar bibliotecas completas ao invés de “garimpar” por
ícones individualmente.

D I CA # 5 4
Use espaços iguais entre ícones

Ao trabalhar com ícones lado a lado, certifique-se de utilizar um
espaçamento consistente entre eles. Se utilizou 24px de
espaçamento entre ícones, continue utilizando 24px ao adicionar
mais ícones no mesmo agrupamento, como no caso do exemplo
elaborado abaixo para um menu mobile.
O espaçamento equilibrado contribui para a sensação visual de

agrupamento, ritmo e consistência, portanto, nunca ignore este
cuidado fundamental ao criar itens que envolvam o uso de ícones.
28px 34px 46px 32px 32px 32px
Ícones no menu com

Ícones no menu com
espaçamentos irregulares
espaçamentos consistentes
e diferentes e iguais

A dica também vale para tamanho de ícones
Utilize a consistência não apenas no espaçamento entre ícones, mas
também, para o tamanho dos ícones utilizados na interface.
Se a ideia é gerar destaque em um ícone para informar que um item

de menu está selecionado, por exemplo, você pode utilizar cor ou um
ícone preenchido para causar destaque, mas nunca aumente ou
diminua o tamanho do ícone, esta é uma prática inadequada.
Este erro ocorre com maior frequência quando o ícone

está fora da caixa delimitadora (dica 53), pois fica difícil
determinar a escala ideal do ícone, já que os tamanhos
podem variar.

D I CA # 5 5
De fina estilos de textos que

deem “match” com o ícone
Ao trabalhar com ícones acompanhados de textos, certifique-se de
utilizar “pesos” que combinem em conjunto. Se o ícone é estilo “fino”,
prefira agregá-los com fontes estilo fina ou regular, caso contrário,
você passará a sensação de que os ícones e textos não estão
conversando entre si.
O mesmo acontece ao utilizar ícones em estilo bold para a interface,

neste caso, prefira agregá-los com fontes em estilo medium,
semibold ou bold (dependendo da família de fontes).
Início Perfil Salvos
Ícones estilo fino com font peso bold
Início Per fil Salvos
Ícones estilo fino com font peso regular

O mesmo cuidado vale para botões com ícones
Este cuidado não é exclusivo de menus, mas sim, de qualquer
cenário que envolva o uso de ícones e textos.
Não é necessário procurar por novos pacotes de ícones

caso não consiga combinar estilos entre ícone e texto.
Você pode ajustar o valor de contorno ou “stroke” do
ícone manualmente até alcançar um resultado que
combine com o texto, por exemplo.

D I CA # 5 6
Utilize ícones com a mesma

linha de estilo na interface
Misturar ícones de várias bibliotecas diferentes, ou alternar o estilo
de preenchimento / espessura entre ícones do mesmo grupo, é um
erro que pode acabar com a consistência e qualidade visual da
sua interface.
Este erro impacta na consistência visual, pois, misturar ícones com

estilos diferentes causará a impressão de que os ícones não
conversam entre si, já que não possuem estilos similares.
Conjunto de ícones com estilos, preenchimentos e
espessuras diferentes, fora de harmonia.
Conjunto de ícones compostos por uma biblioteca
única, mantendo o mesmo estilo e gerando harmonia.

Pontos fundamentais para evitar este erro
Mantenha o padrão de estilo nos ícones utilizados na interface,
não misture ícones com contornos diferentes.
Não misture ícones de estilo “preenchido” com ícones em estilo

“outline”. (Salvo em alguns casos para definir o estado de opção
selecionada, onde o ícone preenchido pode causar ênfase).
Abaixo, um exemplo mostrando que usar estilos de ícones

preenchidos com ícones em contorno pode causar uma confusão
de ideias, até com ícones da mesma biblioteca:
A dica vale também para a inconsistência entre ícones coloridos

e ícones monocromáticos:
Utilizar uma biblioteca de ícones pode evitar que estes

erros ocorram, já que os ícones em bibliotecas seguem
um estilo único.

D I CA # 5 7
Escolha ícones simples para a

sua interface
Ícones não são elementos decorativos, mas sim, informativos, com a
missão de facilitar a compreensão de uma informação no menor
espaço de tempo possível, por esse motivo, devem ser elaborados
para serem compreendidos facilmente em uma interface.
Para isto, escolha bibliotecas de ícones com estilos minimalistas e

simples, não utilize ícones extremamente detalhados para as ações,
principalmente em dispositivos mobile, já que a tela menor faz com
que ícones complexos sejam mais difíceis de serem reconhecidos.
Ícones complexos e detalhados
Ícones simples e facilmente reconhecíveis

Menos é
mais.
por Ludwig Mies van der Rohe
#lessismore

D I CA # 5 8
Utilize ícones identi ficáveis em

tamanhos menores
Ícones simples podem ser identificados e interpretados de forma
fácil e rápida, mesmo quando utilizados em tamanhos menores.
Já o ícone detalhado, por conter muitos detalhes e traços, acaba

gerando um visual confuso quando utilizado em tamanhos menores.
Por isso a importância de prever e imaginar elementos sendo
utilizados em telas pequenas, com tamanho reduzido, isso vale para
ícones, textos, imagens, botões, e outros componentes que fazem
parte da interface.
Início Início
Preços Preços
Nosso time Nosso time
Recursos Recursos
Con figurações Con figurações

Pense nisso quando estiver projetando: “Como este
componente se parecerá quando o tamanho for
adaptado para uma tela menor? Será legível?
Identi ficável? De que forma o texto irá quebrar? É fácil
entender ou gera dúvidas nas pessoas usuárias?”.

D I CA # 5 9
Defina tamanhos de ícones

amigáveis ao toque
Ícones pequenos dificultam a acessibilidade de toque, já que suas
áreas (ou alvos) são menores. Quanto maior o ícone, mais fácil será
para a pessoa usuária tocar, contribuindo para um aumento na
precisão de toque. Em contrapartida, um ícone menor diminui a taxa
de precisão de toque, já que os usuários provavelmente irão errar
com maior frequência ao tentar acertar o ícone.
A precisão de toque é dificultada também quando os ícones estão

organizados muito próximos mutuamente, demandando atenção
maior por parte do usuário para tocar no ícone sem cometer erros.
Running Up That Hill Running Up That Hill

Kate Bush Kate Bush
0:01 -4:57 0:01 -4:57

A solução na prática
É ideal manter as áreas de toque em, no mínimo, 44x44px
(recomendações da guideline Apple) ou 48x48px (recomendações
Android Material Design).
Tudo é questão de prioridade: alvos maiores são comumente usados

para ações principais, enquanto os alvos menores são utilizados para
ações secundárias, ações que (em algumas vezes) não causam
tanto impacto na jornada / missão / fluxo principal que a pessoa
usuária deve realizar.
Áreas de toque utilizadas

em 44x44px nos ícones
Running Up That Hill gerais e 58x58px no ícone
Kate Bush
“play”, ação que o
0:01 -4:57 Spotify define como
prioridade.
Alvos de toques pequenos = tempo maior e precisão

maior exigida para realizar a ação.

Não se limite apenas às regras que você já conhece
As indicações de tamanhos mencionados nas guidelines são valores
recomendados com base em pesquisas que consideram o tamanho
médio dos dedos das pessoas usuárias.
A recomendação, é que você não se limite a estes tamanhos como

regras permanentes, encorajo a experimentação com tamanhos e
espaçamentos diferentes, testando para validar se as mudanças
aplicadas funcionam e agregam com mais rapidez e precisão para o
usuário final. Testes importam, e realizá-los com uma pessoa é
melhor do que não testar com ninguém.
É tudo sobre contexto

Encorajo os testes pois entendo que design é sobre contexto.
Existem indicações para áreas de toque em, no mínimo 44x44dp,

porém, nem sempre este é o melhor valor dependendo do número de
informações que existem na interface, por isso os testes são
importantes, assim você entende a usabilidade na prática e aplica
mudanças que fazem sentido para o seu projeto.

D I CA # 6 0
Utilize ícones reconhecíveis

para dispensar textos
Uma dica indispensável quando se trata do uso de ícones é saber
utilizá-los para comunicar ideias rapidamente, considerando ícones
que sejam facilmente reconhecíveis, para assim, dispensar o uso de
rótulos ou textos adicionais.
Considere que várias plataformas (principalmente redes sociais) já

difundiram o significado de muitos ícones. Uma “lupa” para
simbolizar pesquisa, ou um “coração” para simbolizar uma curtida,
são grandes exemplos disto.
Curtir Comentar Enviar Salvar
Curtido por 1.354 pessoas Curtido por 1.354 pessoas

Saiba quando utilizar os ícones
Existem muitos ícones que hoje são reconhecidos como universais.
Ícones que representam funções como: salvar, pesquisar, fechar,
recarregar, comentar, reproduzir, compartilhar, voltar, e outros.
Nestes casos, o ícone serve muito bem para transmitir uma ideia e
proporcionar reconhecimento fácil, porém, existem casos onde os
ícones precisarão de rótulos ou textos adicionais para complementar
a sua funcionalidade, algo comum em ferramentas de edições
gráficas, por exemplo.
Neste exemplo, a ferramenta

Adobe Illustrator utiliza
rótulos para descrever os
ícones que não representam
ações tão comuns.
O uso do rótulo neste

contexto é importante, pois
existem ícones que
representam ações ambíguas,
como a “engrenagem” sendo
usada para “variáveis” ao
invés de “configurações”.
Se o ícone não é tão comum, pense se você realmente

deveria usá-lo, e ao criar ícones para representar ideias
novas, certifique-se de testar para entender se o ícone
transmite o significado correto para as pessoas usuárias.

D I CA # 61 e # 6 2

este capítulo
Algumas dicas extras sobre ícones:
Pre fira bibliotecas de ícones com opção Outline e Filled

Escolher bibliotecas que possuem ícones em estilo preenchido e
contorno pode contribuir para a sua agilidade no desenvolvimento
de uma interface, já que você provavelmente precisará dessa
versatilidade de estilos para sinalizar um menu preenchido, por
exemplo, que geralmente utiliza de ícones em estilo filled.
Outline = Contorno. Filled = Preenchido.
Pesquise e aprenda com base em apps e softwares

Ao desenvolver novas features que envolvam o uso de ícones,
recomendo que você faça pesquisas de inspiração em outros
aplicativos e softwares para entender padrões e ícones comumente
utilizados para comunicar ideias.
Você provavelmente encontrará padrões que se repetem, ícones que

podem ser vistos repetidas vezes para representar uma
funcionalidade, e se esse for o caso, considere utilizar o mesmo
ícone (se a função for a mesma). Este não é o momento de reinventar
a roda, seus usuários agradecem por não ter que descobrir a ação
que um ícone novo irá realizar.

CAPÍTULO 6
Imagens e
Textos
Princípios e dicas para usar imagens da maneira correta,
considerando boas práticas e exemplos de como utilizar
textos com imagens e gerar um bom contraste.
@andreyknabbenn Boas práticas para Imagens e Textos 136

D I CA # 6 3
Utilize imagens de qualidade
e com uma boa de finição

As imagens em uma interface devem ser tratadas com cuidado,
pois, não importa o quanto os elementos estejam organizados, uma

imagem ruim pode acabar arruinando todo o esforço investido em
outras partes da tela.
Além de tudo, é importante lembrar que processamos imagens

muito mais rápido do que processamos textos, este é outro motivo
para dar atenção ao tipo de imagem utilizada, já que nós, como
humanos, gostamos de focar em elementos visuais.
Luiza Silveira Luiza Silveira

68 68
Fotógrafa Fotógrafa

Pontos fundamentais para evitar este erro
Utilize imagens disponíveis em bancos de imagens. Essas
imagens são sempre disponibilizadas em tamanhos grandes e
com boa definição.
Evite o uso de imagens muito “batidas”, geralmente, as que

aparecem na primeira página de resultados por qualquer
pesquisa que você faça.
Evite o Google Imagens, além de várias imagens com qualidade

ruim, a maioria delas é protegida por direitos autorais, isso pode
acabar ocasionando um problema para você.
Onde posso encontrar imagens boas?

Alguns bancos de imagens gratuitos que você pode utilizar:
Unsplash
https://unsplash.com/
Pixabay
https://pixabay.com/pt/
Pexels
https://www.pexels.com/pt-br/

D I CA # 6 4
Por favor, fuja das imagens

comuns de bancos de imagens
Evite o uso de imagens antigas para representar uma ideia ou
cenário. Hoje, existem muitos bancos de imagens atuais, utilize-os
para coletar imagens modernas, novas e inclusivas, isto facilitará
para que você crie interfaces com um visual muito mais atrativo.
Eu particularmente fujo de imagens com cenários em fundo branco,

essas imagens geram a sensação de artificialidade, algo criado em
estúdio com cenário falso. Penso que faz sentido não gostarmos
destas imagens, pois conseguimos identificar (mesmo que
subconscientemente) que a imagem não é real.
Dicas para se sair Dicas para se sair

bem em reuniões bem em reuniões
Dicas fundamentais para se sair Dicas fundamentais para se sair
bem na área profissional. bem na área profissional.

D I CA # 6 5
Associe as cores da imagem

com a cor da marca
Agregue imagens que deem um “match” com as cores definidas pela
marca ou branding do produto com o qual você está trabalhando, o
resultado pode ficar muito mais atrativo.
Discover +80 new

features created!
for your business.
Create your account
Discover +80 new

features created!
for your business.
Create your account

Dica extra
Você pode pesquisar imagens por: nome da imagem + cor.
Isto ajuda a filtrar imagens por cores específicas. Ex:
laptop purple
Barra de pesquisa do https://unsplash.com/

D I CA # 6 6
Avalie a ideia de utilizar

imagens “edge to edge”
Esta dica é uma sugestão extra para o uso de imagens em cards.
A técnica de utilizar imagens “edge to edge” ou “borda a borda” não

é uma novidade, mas reforça a ideia que às vezes podemos quebrar a
grid definida para destacar uma imagem, tornando a visualização
mais atrativa, como no exemplo abaixo, onde a imagem do produto
ganha destaque e um preenchimento amplo para o card de compras.
Eletrodomésticos Eletrodomésticos
Lava e Seca Samsung Lava e Seca Samsung
11kg - Inox Look - 220v 11kg - Inox Look - 220v
5.0 ver reviews 5.0 ver reviews
R$ 2.999,99 Comprar R$ 2.999,99 Comprar

D I CA # 6 7
Utilize imagens pensando no

propósito e contexto
Imagens são elementos poderosos para transmitir sensações, ideias
e despertar desejos, portanto, escolha imagens relevantes.
Considere o uso de imagens que façam sentido com o assunto ou

tema. Imagens irrelevantes desperdiçam espaço, causam confusão
para a pessoa usuária e contribuem para que a pessoa não se sinta
convencida a ler e consumir um conteúdo.
Leve como regra a história a ser contada e o objetivo a ser atingido

com a imagem, pense no propósito.
Cinco cafeterias para Cinco cafeterias para

conhecer em SP conhecer em SP
Conheça as cafeterias que mais Conheça as cafeterias que mais
fazem sucesso em São Paulo! fazem sucesso em São Paulo!

D I CA # 6 8
Crie contraste ao usar

imagens com textos para
garantir legibilidade
Utilizar textos sob imagens requer um cuidado importante: o
contraste. Ao projetar cards ou elementos que envolvam textos e
imagens, verifique sempre a legibilidade do texto, pois é comum o
descuido com o contraste, contribuindo para um texto difícil de
ser visualizado e lido.
Nesta dica, você conhecerá técnicas que podem ser utilizadas

para corrigir e evitar este erro.
Locais para viajar Locais para viajar

Viagem e Férias Viagem e Férias
Imagem “pura”, sem overlay, Imagem com overlay para
prejudicando a leiturabilidade aumentar o contraste

Dicas e técnicas para evitar este erro
Algumas técnicas que utilizo para lidar com o uso de imagens e
textos, gerando uma boa legibilidade:
Utilizando uma camada de cor sólida para

escurecer a imagem
Discover +80 new Discover +80 new

features created! features created!
Discover +80 new features, all Discover +80 new features, all
created for your business. created for your business.
Create your account Create your account
Imagem sem Overlay cor #000000
overlay com opacidade 70%
Você pode ajustar a saturação da imagem para um modo

em que as cores não fiquem tão fortes, isso pode
aumentar o contraste entre o texto.

Utilizando uma camada com degradê para
enfatizar o texto
Conheça 10 lugares Conheça 10 lugares

para viajar para viajar
Imagem sem nenhum Degradê partindo de #000000

tipo de overlay
com 100% de opacidade no
e degradê. texto, até #000000 com 0% de
opacidade no topo.
Técnica complementar para esta dica
Você pode utilizar outras

cores de degradê ao invés
de #000000 (preto). Neste
exemplo ao lado, usei
#371F10 (marrom) por ser
uma cor predominante na
imagem, e o resultado
Conheça 10 lugares também ficou bom.
para viajar

Utilizando uma camada com degradê de cores
para enfatizar o texto

Imagem sem nenhum Degradê linear com 85%
tipo de overlay
de opacidade. Cores
e degradê #933EFF e #538DFF
Técnica complementar para esta dica
Discover +80 new

features created! Você também pode utilizar
como base as cores da
Discover +80 new features, all imagem para criar o
created for your business. degradê, assim o card ficará
mais natural.
Create your account

Utilizando uma camada com cor escura em
modo de mesclagem “Multiply”

Imagem sem nenhum Imagem com uma camada de cor

tipo de overlay
#197122 por cima em modo de
e degradê mesclagem “Multiply”
No Figma, ferramenta que utilizo como base, o modo de mesclagem

pode ser encontrado aqui:
Normal
Darken
Multiply
Color burn
Lighten
Screen
@andreyknabbenn 02
Color dodge
Utilizando o texto com a composição
Discover +80 new

features created!
Create your account
Discover +80 new

features created!
Create your account
Também funciona com textos laterais
Discover +80 new

features created!
Discover +80 new features, all
created for your business.
Create your account

Com imagens complexas, você pode utilizar um
degradê de texto diluído para imagem
Discover +80 new

features created!
Create your account
Neste exemplo acima, a cor pode ser usada para dar suporte ao
texto, e ainda assim, mostrar uma imagem colorida de fundo sem
afetar a legibilidade.
Funciona com qualquer imagem e cor, a

criatividade é o único limite
Discover +80 new

features created!
Create your account

D I CA # 69 e # 7 0

este capítulo
Algumas dicas extras sobre imagens e textos:
Pense nas imagens aplicadas em diferentes formatos

Ao desenvolver componentes que envolvam o uso de imagens,
pense que a mesma será vista (na maioria dos casos) não apenas no
seu computador, mas também num dispositivo mobile ou tablet,
sendo assim, pense em como esta imagem se comportará em
dispositivos menores.
Considere questionamentos como:

É possível entender o propósito / significado dessa imagem caso
seja visualizada em tamanho menor
Caso a imagem tenha textos em cima, como será o
comportamento de quebra em telas menores
Há algum elemento importante da imagem que, quando
visualizada em um celular, acaba não aparecendo?

Como capturar cores predominantes na imagem
Nas dicas anteriores, mencionei sobre utilizar camadas de cores e
sombras que façam sentido com a cor predominante da imagem.
Uma dica extra, é a ferramenta da Adobe que também faz a captura
automática das cores da imagem, algo que certamente irá ajudar no
seu workflow.
Acesse a opção de Extrair Tema da Adobe Color em
https://color.adobe.com/pt/create/image

CAPÍTULO EX TRA
Dicas extras
Um capítulo extra com dicas e boas práticas gerais
que também são importantes para lhe ajudar a criar
interfaces que as pessoas usuárias amam.
@andreyknabbenn Dicas extras e gerais 153

D I CA # 7 1 • T I P O G R A F I A
Não utilize fontes pesadas em

parágrafos de textos longos
A leiturabilidade pode acabar prejudicada quando utilizamos fontes
pesadas na tentativa de gerar destaque a um parágrafo inteiro,
principalmente pelo fato de precisarmos dedicar maior atenção
visual para interpretar as palavras neste estilo, contribuindo para
uma leitura não fluida, e mais lenta.
Este problema ocorre também, pois, fontes pesadas (bold, extra-

bold) servem principalmente para enfatizar ou destacar uma
informação. Se um bloco inteiro de texto possui destaque, a
tendência é que a pessoa usuária passe a ignorar as palavras, e
assim seu texto perde o senso de hierarquia.
Na madrugada do dia 26 Na madrugada do dia 26

de outubro de 1985, de outubro de 1985, Marty
Marty se encontra com se encontra com seu
seu amigo, o cientista Dr. amigo, o cientista Dr.
Emmett Brown, no Emmett Brown, no
Shopping Pinheiros Shopping Pinheiros
Gêmeos, a pedido do Gêmeos, a pedido do
Doutor. Lá, ele revela ao Doutor. Lá, ele revela ao
rapaz um DMC DeLorean rapaz um DMC DeLorean
modi ficado... modi ficado...

Este erro pode se destacar ainda mais quando
o parágrafo já acompanha um título
Quando um bloco de texto possui um título (o qual, por hierarquia,
deve ser mais importante) e o texto de parágrafo é de finido com uma
fonte pesada, fica ainda mais complicado gerar hierarquia:
Tudo sobre o filme De Volta

para o Futuro (1985)
Um jovem (Michael J. Fox) aciona acidentalmente
uma máquina do tempo construída por um
cientista (Christopher Lloyd) em um Delorean.
Sensação de que tudo tem a mesma prioridade
Tudo sobre o filme De Volta

para o Futuro (1985)
Um jovem (Michael J. Fox) aciona acidentalmente
uma máquina do tempo construída por um
cientista (Christopher Lloyd) em um Delorean.
Título em extra-bold + texto regular, gerando hierarquia

Dicas finais e importantes sobre o uso de
fontes pesadas em parágrafos de textos
De modo geral, as fontes pesadas são mais indicadas para uso em
títulos (por possuir uma hierarquia maior), para destacar pequenos
trechos de informações importantes, ou para destacar links
inseridos em parágrafos, e que por experiência própria, podem
funcionar bem com o estilo da fonte em “medium” ou “semi-bold”.
Para fechar, alguns exemplos sobre o uso ideal
de textos em bold para parágrafos:
Um jovem (Michael J. Fox) aciona acidentalmente uma

máquina do tempo construída por um cientista
(Christopher Lloyd) em um Delorean.
Para uso em links
Um jovem (Michael J. Fox) aciona acidentalmente uma

máquina do tempo construída por um cientista
(Christopher Lloyd) em um Delorean.
Para destacar trechos importantes
M ais sobre hierarquia textual na dica #3 deste material.

D I CA # 7 2 • T I P O G R A F I A
Não utilize drop-shadow em

conteúdos textuais
As sombras, ou “drop-shadow” em textos acabam poluindo e
prejudicando a leiturabilidade.
Na tentativa de enfatizar, gerar destaque, ou causar profundidade

em informações textuais, prefira trabalhar com cores, tamanhos, ou
pesos diferentes para as fontes, mas evite recorrer às sombras,
assim você mantém sua interface cada vez mais limpa e direta,
eliminando um ruído visual a mais para a pessoa usuária processar.
Tudo sobre o Tudo sobre o

filme De Volta filme De Volta
para o Futuro para o Futuro
Um jovem aciona Um jovem aciona
acidentalmente uma acidentalmente uma
máquina do tempo máquina do tempo
construída por um construída por um
cientista chamado... cientista chamado...

Mas não se preocupe, as sombras ainda são
ideais em vários outros cenários!
E abaixo, criei alguns exemplos para lhe mostrar apenas alguns dos
cenários onde as sombras podem funcionar bem.
Em background de cards com conteúdos textuais
novos membros
R$ 515,41
Ganhos em relação
ao mês passado
+851.545 Analisar gráfico
atualizar listagem Fechar opções
Sombra em #000000 Sombra colorida #A762FF
Em “hover” de botões para evidenciar interação
Cinco cafeterias para

conhecer em SP
Conheça as cafeterias que mais
fazem sucesso em São Paulo!
Ler artigo

Em “hover” para cards de artigos ou imagens
CASA & LAZER AUTOMÓVEIS LUGARES
as de arquitetura
Os carros mais
5 lugares que vo
fazem a diferença rápidos do ano precisa conhece
* Hover é uma interação que ocorre ao passarmos o cursor do mouse

sob algum elemento na interface.
Você pode entender ainda mais sobre maneiras e boas

práticas para gerar sombras na dica #32 deste material.

D I CA # 7 3 • I N T E R AÇÃO
Crie indicativos que induzam
ao “scroll” da pessoa usuária

Mostrar um “preview” ou deixar um elemento com aspecto “cortado”
na tela é uma boa técnica para mostrar à pessoa usuária que existe
mais conteúdo a ser visto ali, contribuindo para gerar curiosidade.
Também deste modo, a interface consegue comunicar (mesmo que

sem palavras), que para ver os conteúdos, basta realizar o gesto de
scroll, seja no modo horizontal, ou vertical.
9:41 9:41

Uma boa tarde! Uma boa tarde!
VIAGENS VIAGENS LIFESTYLE
Curiosidades sobre 5 pontos Curiosidades sobre 5 Dicas para ser mais
turísticos para conhecer no Brasil pontos turísticos produtiva em 2022

Saulo C. 1 hora atrás Saulo C. 1 hora atrás Samantha. 1 hora atrás
Descobrir ver mais Descobrir ver mais
RJ SC SP MG RJ SC SP MG AM
Tendências ver mais

Exemplo desta técnica utilizada na App Store
Este indicativo de preview na App Store (loja de aplicativos da Apple),
mesmo que menor, ainda é su ficiente para induzir a pessoa usuária a
realizar o gesto de scroll horizontal.

D I CA # 74 • U X D ES I G N
Utilize os estados vazios
para sugerir ações úteis

Não esqueça de pensar nas telas de estados vazios (ou empty
states) ao projetar interfaces.
É importante visualizar estas telas como uma oportunidade para

manter as pessoas usuárias engajadas no seu produto, ou até
mesmo como uma chance de apresentar e sugerir um recurso que
estas pessoas ainda não descobriram, gerando uma experiência
agradável e contínua, ao invés de apenas uma tela vazia.
9:41 9:41
Minha playlist Minha playlist
Sem músicas adicionadas

Sem músicas adicionadas :( Que tal começar adicionando
algumas músicas?
Nada para mostrar aqui.
Adicionar músicas

Exemplo desta técnica utilizada no Dropbox
Neste exemplo, o Dropbox utiliza o empty state da tela de arquivos
como uma sugestão para que o usuário realize alguma ação. A parte
textual desta tela também reforça a ideia de que a pasta está vazia,
e para resolver este “problema” o usuário tem como alternativa tocar

em um dos botões disponibilizados na interface.

D I CA # 7 5 • B OT Õ ES
Avalie a ideia de utilizar
botões “full width”

A técnica de utilizar botões “full width”, “largura cheia” ou ainda
“largura total” pode funcionar muito em interfaces, principalmente
quando é o único call-to-action evidente e não disputa por espaço
com outros botões lado a lado.
Além disso, o botão com largura cheia facilita o acesso ao toque

devido a sua amplitude, isto consequentemente contribui para uma
melhor usabilidade, considerando que alvos de toques maiores são
mais fáceis de atingir e exigem um menor esforço de precisão.
5 técnicas e dicas de 5 técnicas e dicas de

arquitetura para você arquitetura para você
Algumas recomendações para Algumas recomendações para
melhorar o seu ambiente... melhorar o seu ambiente...

Estes botões podem ser aplicados em
várias outras situações
Botões com largura cheia também podem gerar equilíbrio, desde que
acompanhem o sentido de organização dos outros elementos em
tela, de forma resumida: seguindo o mesmo ritmo, e sem quebrar os
limites laterais das grids.
Exemplo de botões que “seguem o ritmo”, não

quebram os limites das grids e geram equilíbrio
Screenshot do app Caria Screenshot do app Skyscanner

D I CA # 7 6 • I N T E R AÇÃO
Sugira o tipo de teclado correto

para o input a ser preenchido
É fundamental gerar eficiência e contribuir para a redução de passos
ao preencher formulários e inputs, principalmente por ser uma tarefa
(na maioria das vezes) longa e cansativa.
Uma sugestão simples para facilitar o preenchimento de dados é

fazer com que o teclado do dispositivo seja pré-aberto no modo
compatível com o tipo de informação que o input aceita, assim,
você elimina o risco de preenchimento de dados incorretos no input
e ainda contribui para uma maior agilidade na tarefa.
Repetir manutenção Repetir manutenção
Meses (quantidade de repetições) * Meses (quantidade de repetições) *
12 12
Valor da mensalidade* Valor da mensalidade*
R$ 120,00 R$ 120,00
Total R$ 1.440,00 Total R$ 1.440,00
Data da 1° mensalidade * Data da 1° mensalidade *

q w e r t y u i o p 1 2
ABC
3
DEF
16/06/2021 16/06/2021
aValor stotal R$
d 1.440,00
f g h j k l 4
G H total
I
5 6
ver datas Valor R$ 1.440,00J K L verMdatas
NO
z x c v b n m 7
PGRS
8
TUV
9
WXYZ
123 space return 0

D I CA # 7 7 • I N T E R FAC E
Crie leveza ao trabalhar com

separação de conteúdos
Existem diferentes formas para gerar a sensação visual de
agrupamento, continuidade ou ritmo entre conteúdos de uma
interface, seja com separação por linhas, por cor, por espaçamento,
ou até por divisões de blocos diferentes (irei exemplificar).
Abaixo, destaco uma maneira “pesada” e outra leve para gerar

separação de conteúdos por linhas, mostrando como a cor e até
mesmo a espessura da linha pode impactar o modo como notamos a
leveza da listagem na interface.
Compras recentes Compras recentes
Figma -R$ 49,99 Figma -R$ 49,99

21:59 21:59
Restaurante -R$ 60,00 Restaurante -R$ 60,00

16:12 16:12
Mc Donalds -R$ 29,90 Mc Donalds -R$ 29,90

20:58 20:58
Net flix -R$ 19,80 Net flix -R$ 19,80

21:00 21:00
Ebook - UI -R$ 125,00 Ebook - UI -R$ 125,00

15:25 15:25
Separador espesso e com tom

Separador com espessura leve
de cor chamativo e cor mais opaca

Outras maneiras de separar conteúdos e listas
Algumas das várias maneiras para separar conteúdos de forma
harmoniosa nas interfaces:
Com bordas em torno do conteúdo
Figma -R$ 49,99 Figma -R$ 49,99

21:59 21:59

16:12 16:12

20:58 20:58
Borda com cor #000000, Borda com cor #EAEAEA,

gerando peso na interface utilizada de forma leve
As cores acima são apenas exemplos. A ideia é que você

evite utilizar separadores com tons de cores que acabam
servindo apenas como peso ou ruído na sua interface.

Com preenchimento de fundo em torno do conteúdo
Figma -R$ 49,99 Figma -R$ 49,99

21:59 21:59

16:12 16:12

20:58 20:58
Neste exemplo, é evidenciado como o uso da cor em background é

su ficiente para gerar distinção entre os elementos da lista,
dispensando a necessidade de cores extras nas bordas.
Gerando um espaçamento maior entre itens
Figma -R$ 49,99 Figma -R$ 49,99

21:59 21:59
Restaurante -R$ 60,00

16:12 Restaurante -R$ 60,00
16:12
Mc Donalds -R$ 29,90
20:58 Mc Donalds -R$ 29,90
20:58
Net flix -R$ 19,80
21:00
Net flix -R$ 19,80
Ebook - UI -R$ 125,00 21:00
15:25
Ebook - UI -R$ 125,00

15:25

O espaço maior entre itens é uma ótima solução, pois
segue o princípio do “espaço em branco”, fazendo com
que a percepção dos itens da lista seja mais suave, sem
linhas ou decorações que tiram a nossa atenção.

D I CA # 7 8 • Í C O N ES
Utilize ícones para botões e

categorias em estilo carrossel
Assim como em botões convencionais, os ícones também são bem-
vindos para reforçar ações em botões no formato “slide” ou carrossel,
servindo como um grande aliado para ampliar a área de toque e
reforçar o significado da ação a ser realizada mais rapidamente.
Abaixo, vemos o uso de ícones para ações em uma interface de tema

“banking”, tema que também faz uso frequente deste estilo de botão
com ícones, principalmente por ser uma maneira de facilitar o
agrupamento de várias funções lado a lado, enquanto torna a ação
reconhecível e simples de acessar.
9:41 9:41
Balanço geral Balanço geral
R$ 119,514,11 R$ 119,514,11
Ações rápidas Ações rápidas
Cartões Wallet Crypto

Cartões Wallet Crypto

Exemplo do uso de ícones em interfaces que
acumulam várias funções em formato “carrossel”
Screenshot do app Digio Screenshot do app Nubank
Vale destacar que o uso de ícones em botões não é algo

exclusivo do formato “slide” ou carrossel. Ícones
funcionam em muitos outros estilos de botões para
reforçar o signi ficado da ação a ser executada, seja em
formato mobile ou web.

D I CA # 7 9 • F O R M U L Á R I O S
Não ignore o uso das labels

aparentes em formulários
Mantenha as labels com a informação a ser preenchida no input de
um formulário sempre visível, lembre-se que os usuários podem
acabar esquecendo a informação que precisavam preencher, deste
modo, vão precisar recorrer ao label.
Por experiência própria, é super frustrante ter que apagar o que

estava escrito em um input apenas para ler o placeholder novamente
e relembrar a informação solicitada para preenchimento.
Seu nome completo

Seu nome completo
Digite seu nome
con Seu email
con
Sugestões
Sugestões
Digite suas sugestões
Solicitar contato Solicitar contato
Ao preencher o campo de Ao preencher email com label,
email, sem label visível informação sempre visível

D I CA # 8 0 • F O R M U L Á R I O S
Crie botões de ação evidentes

em formulários
Ao criar formulários, seja para envio de mensagens, cadastro de
dados ou registros, certifique-se de que o botão de ação para envio
ou confirmação do mesmo seja evidente, não reinvente a roda
colocando botões longe dos campos de entrada ou em posições com
a qual as pessoas usuárias não estão acostumadas.
Lembre-se, preencher formulários pode ser uma tarefa cansativa,

não coloque barreiras extras com botões sem ordem de prioridade,
ou organizados de modo que leve a pessoa usuária ao erro e dúvida
sobre qual botão é correto a ser utilizado.
Digite seu nome

Seu nome completo
Digite seu nome Seu email
Digite seu email

Seu email
Digite seu email Sugestões

Sugestões
Solicitar contato
Solicitar contato
Voltar
Voltar

Outras situações a serem evitadas
Alguns casos que também podem comprometer a facilidade com
que a pessoa usuária entende e visualiza o botão:
Botão de ação principal sem ênfase

Digite seu email Digite seu email
Sugestões Sugestões
Digite suas sugestões Digite suas sugestões
Solicitar contato Solicitar contato
Botão de ação principal em ordem desconexa
Seu nome completo

Solicitar contato
Digite seu nome
Seu nome completo
Seu email
Digite seu nome
Digite seu email
Seu email
Digite seu email Solicitar contato

Leitura concluída!
Parabéns, você acaba de concluir a leitura deste ebook!
Encerro dizendo que o estudo sempre valerá a pena, ganhar

conhecimento e descobrir coisas novas nos permite evoluir, e eu sou
grato por fazer parte da sua evolução compartilhando aquilo que
aprendi, também, com estudos ao longo da minha carreira.
Outra mensagem que deixo para você que está estudando, é que
mantenha a calma, dê um passo de cada vez, pois, para tudo existe
um tempo. Todas as pessoas que lhe inspiram também já
começaram do zero um dia. Eu levo isso como meu mantra até hoje.
Mais uma vez, obrigado pela leitura! Sinta-se livre para avaliar
este produto na Hotmart e enviar seus feedbacks ou sugestões

para contato@andreyknabbenn.com
Andrey Knabbenn
@andreyknabbenn
© 2023 Andrey Knabbenn. Obra protegida juridicamente pelo

certificado Avctoris: 9ff399832c19cd2ac23502b5fa59
fc7ac7ec26a63583670e25343292ea838c66.

Guia de Boas Práticas Criação Nterfaces

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Guia de Boas Práticas Criação Nterfaces

Enviado por

Direitos autorais:

Formatos disponíveis

UI EBOOK

Guia de boas práticas

aplicáveis para a criação

não fazer na criação de interfaces mobile ou web.

por Andrey Knabbenn VERSÃO 2.0

Licensed to Camila Castro - camilahcastro89@gmail.com - HP62716865649110

aplicáveis para a criação

por Andrey Knabbenn | 2023

Licensed to Camila Castro - camilahcastro89@gmail.com - HP62716865649110

O presente certi ficado comprova, mediante as tecnologias de hashcode (SHA 256),

pertinentes ao Direito Autoral dos países signatários dos referidos tratados.

Licensed to Camila Castro - camilahcastro89@gmail.com - HP62716865649110

Tipografia 15 dicas neste capítulo

Utilize um espaçamento entre linhas com tamanhos ideais 14

Cores 13 dicas neste capítulo

Adicionando matiz para gerar tons neutros mais atrativos 47

Licensed to Camila Castro - camilahcastro89@gmail.com - HP62716865649110

Botões 10 dicas neste capítulo

Crie distinção entre botões primários e secundários 69

Licensed to Camila Castro - camilahcastro89@gmail.com - HP62716865649110

Seja consistente no uso de espaçamentos de itens na grid 91

Ícones 12 dicas neste capítulo

Utilize ícones em vetores ao invés de ícones em .PNG 113

Licensed to Camila Castro - camilahcastro89@gmail.com - HP62716865649110

Imagens e Textos 8 dicas neste capítulo

Utilize imagens de qualidade e com uma boa de finição 137

Dicas extras 10 dicas neste capítulo

Não utilize fontes pesadas em parágrafos de textos longos 154

Licensed to Camila Castro - camilahcastro89@gmail.com - HP62716865649110

Licensed to Camila Castro - camilahcastro89@gmail.com - HP62716865649110

É uma satisfação enorme poder finalmente apresentar um material

A ideia é trazer aquilo que eu gostaria de ter aprendido quando

Este material foi desenvolvido com a integração de exemplos

Além de apontar os erros comuns de interface, o material indica

Também é importante saber que apesar de a UI estar diretamente

Licensed to Camila Castro - camilahcastro89@gmail.com - HP62716865649110

Por último, é um material que pode auxiliar desenvolvedores a

A estrutura deste material

Para você que adquiriu este ebook, o acesso às eventuais

Licensed to Camila Castro - camilahcastro89@gmail.com - HP62716865649110

Compartilhando minha trajetória

Atualmente, trabalho há 3 anos na Simples Dental, o maior software

Espero ajudar você nesta jornada!

Fique à vontade para postar stories das suas leituras e

Licensed to Camila Castro - camilahcastro89@gmail.com - HP62716865649110

Por fim, muito obrigado e boa leitura!

Um presente incrível para

e recursos para você iniciar bem

Resgatar meu presente

Licensed to Camila Castro - camilahcastro89@gmail.com - HP62716865649110

nova jornada que se inicia!

Licensed to Camila Castro - camilahcastro89@gmail.com - HP62716865649110

15 DICAS NESTE CAPÍTULO

@andreyknabbenn Boas práticas de Tipogra fia 13

Licensed to Camila Castro - camilahcastro89@gmail.com - HP62716865649110

Utilize um espaçamento entre

Pouco espaço entre linhas, criando falta de white space e

Após dois anos espreitando as ruas como Batman, Bruce

Muito espaço entre linhas, criando um white space além

Após dois anos espreitando as ruas como Batman, Bruce

@andreyknabbenn Boas práticas de Tipogra fia 14

Licensed to Camila Castro - camilahcastro89@gmail.com - HP62716865649110