Design de Interface Digital

Prévia do material em texto

Cleane Fernandes dos Santos
VISUAL DESIGN E 
USABILIDADE
Sumário
INTRODUÇÃO ������������������������������������������������� 3
CICLO DO DESENVOLVIMENTO DE 
INTERFACE DIGITAL �������������������������������������� 5
EQUILÍBRIO VISUAL (ORDEM, CORES, 
CONTRASTE) �������������������������������������������������������17
Equilíbrio visual: ordem ������������������������������������������������������ 20
Equilíbrio visual: cores �������������������������������������������������������� 25
Equilíbrio visual: contraste ������������������������������������������������� 30
MOODBOARD E DESIGN SYSTEM ����������������� 34
TESTE DE USABILIDADE ������������������������������ 41
TENDÊNCIAS EM UX E UI ����������������������������� 46
CONSIDERAÇÕES FINAIS ���������������������������� 51
REFERÊNCIAS BIBLIOGRÁFICAS & 
CONSULTADAS �������������������������������������������� 52
2
INTRODUÇÃO
Neste e-book abordaremos assuntos de suma 
importância como o ciclo do desenvolvimento de 
interface digital, o equilíbrio visual (ordem, cores 
e contraste), moodboard e design system, teste de 
usabilidade e tendências em UX e UI�
Já sabemos que o design de interface é uma práti-
ca de desenvolvimento de interfaces baseada em 
planejamento que visa a aplicar uma solução por 
meio de um produto, mantendo como prioridade 
a experiência do usuário que irá interagir com o 
produto físico e/ou digital�
Nesse sentido, UX (user experience) e UI (user in-
terface) design precisam estar em sintonia para se 
criar uma boa experiência para o usuário, foco da 
UX, de forma leve e fácil, ou seja, o usuário deve 
ser dispensado de muitos esforços físico e/ou 
cognitivo durante uma experiência� Sendo assim, 
o UI designer tem como missão desenvolver solu-
ções que atendam às necessidades dos usuários, 
conduzindo a interação humano-computador de 
maneira simples, intuitiva e amigável�
Há estudos que defendem a interface como uma 
extensão do corpo humano, de tão próxima à 
realidade� Para comprovar essa tese podemos 
observar a nós mesmos e à nossa relação diária 
3
com os aparatos tecnológicos, pelos quais nos 
comunicamos por meio da interface� É exatamente 
por essa ideia, cada vez mais viva, que a interface 
do usuário se torna prioridade na mediação da 
comunicação humana com computadores�
A interface é um lugar em que o usuário “permanece” 
durante uma experiência; a interatividade, portan-
to, faz parte do processo de desenvolvimento de 
interfaces digitais� Ela deverá cumprir o papel de 
atender às necessidades do usuário e, ao mesmo 
tempo, ser uma experiência agradável�
O visual design e usabilidade andam de mãos da-
das; a ausência de qualquer um afeta diretamente 
a experiência do usuário e o sucesso de um pro-
duto digital� A interface representa a qualidade de 
um sistema e, por isso, precisa ser amigável, leve, 
simples, útil e visualmente equilibrada�
A usabilidade é a soma das aplicações de uma 
interface com a interatividade e o funcionamen-
to do sistema conectado à Interface gráfica do 
usuário (GUI), e é uma grande responsabilidade 
atribuída ao UX/UI designer desenvolver produtos 
e/ou interfaces digitais�
4
CICLO DO DESENVOLVIMENTO 
DE INTERFACE DIGITAL
Figura 1: UX e a interface digital�
Fonte: Freepik�com�
Iniciaremos nosso estudo falando sobre o ciclo do 
desenvolvimento de interface digital e, para isso, 
precisaremos retomar alguns conhecimentos que 
serão sempre necessários, por exemplo, saber a 
diferença entre UX e UI�
Resumidamente, UX (user experience) refere-se ao 
processo de construção da experiência do usuário, 
a qual é contemplada por métodos de pesquisas, 
descobertas, ferramentas e testes com usuários�
UI (user interface) é tudo que se refere ao desen-
volvimento de interface do usuário, que também 
5
se utiliza de métodos, ferramentas e testes do 
usuário� O UI designer deve acompanhar todas 
as etapas de um projeto para que compreenda as 
necessidades do usuário e, assim, possa convertê-
-las em soluções por meio de interfaces digitais, 
meio pelo qual os usuários poderão resolver seus 
problemas ao interagir com um sistema� UX/UI 
design é a soma de conceitos, métodos e práticas 
de design e tecnologia que entrega soluções com 
ênfase na melhor experiência para o usuário�
Desenvolver uma interface digital requer conhe-
cimentos técnicos e conceituais de UX� Por isso, 
atualmente, há uma diferença entre designers no 
mercado: nem todo designer gráfico está apto 
a desenvolver um projeto de UI design, esse é o 
profissional voltado para o desenvolvimento de 
interfaces digitais para aparatos tecnológicos 
como smartphones, tablets, computadores desktop, 
interfaces para videogames e games digitais etc�
O primeiro requisito de um profissional de UI design 
é repertório: você precisa saber exatamente o que 
está fazendo, qual é a finalidade do produto final, 
o que norteia o desenvolvimento desse produto, 
quais são as regras e quais os métodos e os con-
ceitos por trás de uma interface digital�
Todo design é baseado em conceitos� O UI design 
deve seguir o mesmo caminho, ou seja, os prin-
6
cípios básicos de visual design� Esses princípios 
são fundamentais no design de interface, porque 
é por meio dessas diretrizes que o produto se 
apresentará amigável para o usuário final.
Um dos segredos de sucesso de uma interface é 
a antecipação das etapas de desenvolvimento de 
um projeto com foco em experiência para o usuário 
(UX), já que, nesse segmento, é essencial conhecer 
o usuário para além de dados sociodemográficos. 
Os hábitos, a cultura, os gostos, os desejos e as 
necessidades são colocados com o usuário no 
centro do processo de UX/UI design�
Sendo assim, uma interface digital não se resume 
a uma tela com ícones, botões, menu, textos, barra 
de rolagem e/ou troca de telas� Cada elemento 
simbólico de uma interface digital precisará ser 
testado e aprovado em sua performance de in-
teratividade e usabilidade junto ao usuário final.
[���] o design de interface propõe diferentes formas 
de ressignificação e interação, prevendo a qualidade 
do sistema e a melhor comunicação com os usuários 
[���]� Os aspectos que envolvem a interação devem 
ser planejados cuidadosamente em uma interface: 
os diversos formatos de telas, a composição visual, 
os botões, os menus e até as barras de rolagem, 
que podem integrar projetos com grande conteúdo 
textual (CARDOSO, 2022, p� 152)�
7
Analise a figura a seguir, é um protótipo de alta fide-
lidade de um aplicativo fictício chamado “Estrela”.
Figura 2: Modelo de protótipo – interface de aplicativo�
Bom te ver 
Estrela!
LOG IN
Sign up with
Forget password Create account
Create an account
Don’t have and account?
E-MAIL
PASSWORD
Bom te ver 
Estrela!
LOG IN
Sign up with
Forget password Create account
Create an account
Don’t have and account?
E-MAIL
PASSWORD
Fonte: Elaboração própria, com a ferramenta de 
prototipação Figma�
O objetivo da figura anterior é mostrar como os 
princípios de design para o desenvolvimento de 
interfaces são importantes� Sem essa noção, de 
conhecimento conceitual e técnico, é praticamente 
impossível desenvolver interfaces amigáveis, que 
agradem o usuário e que façam sentido para o 
contexto ao qual o produto é destinado�
8
Note que, no exemplo à esquerda da figura, o visual 
está harmonioso, mais agradável, alinhado, com 
respiro, mais legível, completamente oposto ao 
exemplo à direita, que apresenta cores que não 
contrastam bem, com elementos desalinhados e 
mal distribuídos pelo layout, pela tela� Qual dos 
dois exemplos você acha que tem maior chance 
de oferecer uma boa experiência para o usuário?
O design de interface é a representação de um 
sistema e isso resume o trajeto de um profissional 
UX/UI designer, pois será necessário conhecer 
as funcionalidades do sistema, como os usu-
ários poderão executar as tarefas e o grau de 
conhecimento do usuário em relação ao projeto 
de interface�
Daí a importância de pensarmos em contexto: 
não podemos simplesmente desenvolveruma 
interface para mecânicos e destiná-la para usu-
ários que não possuem conhecimento nenhum 
em mecânica, em linguagem técnica da área, em 
ferramentas e diretrizes básicas da profissão, 
seria um projeto totalmente descontextualiza-
do, além disso, os usuários, mesmo interessa-
dos no assunto, poderiam ficar frustrados� O 
ideal é sempre direcionar ao usuário final, ao 
público-alvo, ou, se for um projeto de interface 
9
para iniciantes, começar com especificações e 
contextualização básica�
Isto faz parte do UX/UI design: informar o usuá-
rio o que é o produto, para que serve, a quem é 
destinado� O projeto deverá seguir um modelo 
conceitual e considerar o ponto de vista do usu-
ário� Não é uma tarefa fácil, mas é realizável�
O ciclo de desenvolvimento de interfaces digitais, 
centradas no usuário, possui quatro principais 
fases, são elas:
 y A especificação do contexto de uso;
 y A especificação de requisitos;
 y A criação de soluções;
 y A avaliação de propostas�
Observe a figura a seguir, ela apresenta um mo-
delo de infográfico detalhado sobre o ciclo de 
desenvolvimento de interface digital�
10
Figura 3: Ciclo de Desenvolvimento de Interface Digital�
O sistema funciona e 
atende os requisitos? 
Está alinhado em 
funcionalidade com a 
interface?
Verificação de 
satisfação do 
sistema
Como implementar as 
melhorias nos 
problemas 
identificados? Quais as 
possíveis soluções?
Gerar e ter 
alternativas como 
soluções
Quais são as 
necessidades do 
usuário?
Identificar as 
necessidades 
PESQUISA
O usuário resolverá que 
tipo de problema?
Especificar o 
contexto de uso 
OBJETIVOS
Considerar testes de AI 
(Arquitetura da 
informação) com 
usuários, de 
funcionalidades do 
sistema e de interface 
por meio de wireframes 
e protótipos.
Pesquisa UX/UI;
Esboços;
Wireframes;
UI KIT;
Protótipos, Testes do 
Usuário.
Garantia de Uso
Eficácia e Eficiência do 
sistema, Segurança de 
Informações e dados 
do usuário, a Utilidade 
na realização de 
tarefas, de fácil 
Aprendizagem e 
intuitivo, o usuário 
guarda na memória.
Envolve interatividade 
e como o usuário 
transita de uma tela 
para outra;
Testes do Usuário.
Pesquisa;
O trajeto do usuário 
pelo sistema;
Comandos e tarefas 
do usuário;
Ações e feedbacks;
Conclusão das tarefas; 
Experiência; Testes.
Estrutura das Informações, 
grupos e categorias 
baseadas no modelo 
mental do usuário, Testes.
Testes ao longo do 
processo de 
desenvolvimento
Quais são os 
requisitos do usuário 
e do sistema
Identificar e 
especificar os 
requisitos
CICLO DE DESENVOLVIMENTO DE INTERFACE
Visual Design Usabilidade Arquitetura da Informação
Transição de 
telas Navegação
Fonte: Elaboração própria�
11
O que o usuário deverá fazer primeiro na interface? 
O cadastro no site e/ou aplicativo? Quais dados 
ele precisará, somente e-mail e senha ou mais 
informações pessoais? Como serão as primeiras 
telas, com design mais minimalista, com contrastes 
marcantes de cores? Tudo dependerá do objetivo, 
do perfil dos usuários e suas necessidades e da 
identidade visual da empresa/marca�
Você já sabe o que é um UI kit, certo? Bem, ele é 
bastante confundido com design system, a diferença 
é que o UI kit é o conjunto de elementos gráficos de 
uma interface, como variedades de botões, textos, 
cores, imagens, ícones etc., é toda a parte gráfica 
desenvolvida em UX/UI design para a interação 
do usuário com o sistema� Conheceremos o que 
é design system no decorrer deste e-book�
O designer de interface precisará criar um UI kit a 
ser utilizado em seu projeto, é como uma identidade 
visual baseada na identidade visual da marca e/ou 
empresa� O UI kit otimiza o processo de criação 
da interface porque o padrão do visual design já 
foi definido quando o UI kit é desenvolvido.
Acesse o site “UI kit crafted by professionals” para co-
nhecer modelos profissionais de UI kit. Disponível em: 
https://uikit�to/� Acesso em: 20 set� 2022�
SAIBA MAIS
12
https://uikit.to/
Para que você tenha uma ideia melhor sobre o 
ciclo de desenvolvimento de interface digital, na 
prática, vamos entender quais são os elementos 
da interface do usuário� Toda interface deve con-
ter elementos que são conhecidos pelo usuário, 
e aqui nos referimos aos elementos que já foram 
aprendidos, que fazem parte da cultura digital, que 
são comumente utilizados�
No caso de novos e/ou diferenciados elementos, 
devemos sempre considerar um método para 
ensinar o usuário o significado do símbolo e/ou 
ícone diferenciado em uma interface� Como assim? 
Observe a imagem a seguir, que apresenta alguns 
ícones a que você, e boa parte da população mun-
dial, está familiarizado�
Figura 4: Exemplo de ícones comuns em interfaces 
digitais�
Fonte: Elaboração própria�
Elementos gráficos como os ícones apresentados 
anteriormente são considerados de fácil aprendi-
zagem porque é possível ao usuário assimilar a 
simbologia, por exemplo, de “casa” com a página 
inicial de um aplicativo e/ou ícone� Isso vem sendo 
13
ensinado e repassados na cultura digital desde os 
primórdios da interface digital, tempos nos quais 
os primeiros profissionais de computação e desig-
ners gráficos passaram a criar as conexões entre 
representação simbólica com a ação do usuário na 
realização de uma tarefa, mirando um resultado�
Você provavelmente reconhece cada um dos 
elementos gráficos apresentados, no entanto, se 
há algum que você não conseguiu associar às 
ações do usuário em uma interface, sugiro que 
faça pesquisas sobre UX/UI Design – elementos 
de interfaces digitais� Quanto mais você buscar 
referências, mais preparado e apto para desenvolver 
interfaces digitais você será�
Observe a tabela a seguir, ela é de suma importância 
para que você complemente seu entendimento sobre 
o ciclo de desenvolvimento de uma interface digital�
Tabela 1: Ciclo de desenvolvimento de interfaces 
centradas no usuário�
CICLO DE DESENVOLVIMENTO DE INTERFACES
CENTRADAS NO USUÁRIO
Você deverá pensar na consistência, o uso inteligente de co-
res, hierarquia, ícones que ajudem o usuário a tomar decisões 
em sua experiência, de modo que ele possa fazer assimila-
ções sem frustração no momento da interação pela interface�
14
CICLO DE DESENVOLVIMENTO DE INTERFACES
CENTRADAS NO USUÁRIO
Outro ponto que você deve considerar no desenvolvimento 
de uma interface são os atalhos facilitadores como o tão 
utilizado Ctrl+C e Crtl+V� Dependendo dos objetivos da inter-
face e das tarefas a serem realizadas pelo usuário, além da 
tecnologia utilizada, os atalhos, quando possíveis, devem ser 
implementados, desde os mais usuais quanto os necessários, 
que facilitem as tarefas� No entanto, se o usuário tiver que 
aprender os atalhos, mostre o caminho do recurso, de modo 
simples e agradável�
Os feedbacks são mais que necessários: em uma intera-
ção via interface há comandos, ações e comunicação, e os 
feedbacks são uma maneira de mostrar ao usuário como a 
interação está fluindo. Portanto, feedbacks bem apresentados 
e contextualizados com cada ação devem ser pensados na UX 
e implementados no projeto de UI Design�
Cometemos erros constantemente� Um sistema pode dizer 
ao usuário que há um erro em relação à tarefa que ele não 
conseguiu realizar com sucesso, os erros devem ser apresen-
tados de maneira amigável na interface, mostrando ao usuário 
o caminho correto para conseguir finalizar a tarefa desejada.
Devemos pensar nos casos de ansiedade do usuário, para 
isso, a reversão de ações deve ser prevista no sistema UX/UI 
design, e o usuário deve identificar que é possível desfazer o 
que não queria fazer ou um possível erros cometido, isso está 
bastante ligado aos atalhos, como o Ctrl+Z que altera o último 
resultado de uma ação�
Todo sistema tem que oferecer suporte de controle ao usuá-
rio. Um ambiente seguro e com informações úteis o suficiente 
para que ele se sinta capaz de resolver problemas, apoiado e 
no controle de suas ações durante sua experiência� O usuário, 
tendo o total suporte, poderátomar decisões sem se sentir 
frustrado ou prolongar a concretização de uma tarefa, e isso 
faz parte do pacote de user experience: soluções simples, 
fáceis, encontráveis e/ou visíveis, assim, o usuário não se 
sentirá inútil e ficará muito mais satisfeito por concluir o que 
desejava, ou seja, atingir um resultado�
15
CICLO DE DESENVOLVIMENTO DE INTERFACES
CENTRADAS NO USUÁRIO
Sabemos que o usuário deve ser poupado o máximo possível 
de muitas informações, pois o cenário no qual vivemos, das 
tecnologias e da conexão dia e noite, acaba sufocando-o� Há 
muita demanda de informações para processar de diversos 
meios e pontas, por isso quanto menor a carga de memória 
um produto digital e/ou sistema exigir do usuário maior será 
o sucesso em experiência para o usuário. Isso significa que o 
usuário precisa de menos ações para realizar as tarefas em 
um sistema pela user interface, menos cliques, menos telas e 
subtelas, menos textos e informações gerais� Isso dentro do 
possível, pois é importante não deixar o usuário no escuro, 
sem informações que são necessárias� As tarefas do usuário 
também devem ter um curto espaço de tempo, ou seja, curta 
duração, para que ele não se sinta fatigado e desista do obje-
tivo inicial�
Fonte: Elaboração própria�
16
EQUILÍBRIO VISUAL 
(ORDEM, CORES, CONTRASTE)
Agora você saberá o que é o equilíbrio visual, de 
modo que possa aplicar em seus projetos pessoais 
e/ou profissionais, por meio da ordem dos elemen-
tos, considerando a hierarquia das informações, 
das cores e do contraste entre cores, textos e 
elementos gráficos. Vamos lá?
Vamos analisar, a seguir, quais são os princípios 
básicos do UI design:
 y Cor e contraste: refere-se às cores utilizadas 
no design e à relação entre elas e se o contraste 
é adequado – permite que usuários com determi-
nados problemas de visão, como astigmatismo, 
possam ver o conteúdo de modo legível;
 y Respiro: diz respeito à quantidade de elementos 
utilizados em um layout para tela� Se o layout es-
tiver poluído, na tela será igual; é preciso avaliar a 
distribuição dos elementos e o espaçamento entre 
eles, ou seja, os elementos como textos, formas, 
imagens etc� Devem ter um espaço entre eles, uma 
margem de respiro entre uma informação e outra;
 y Hierarquia: refere-se à organização dos ele-
mentos em tela/layout� Quando vamos trabalhar 
na construção de uma interface, devemos saber 
priorizar o conteúdo que aparecerá para o usuário, 
criando uma sequência coerente de categorias e 
17
adequando-as aos layouts para as telas, trabalhan-
do destaques em títulos e/ou comandos para os 
usuários e avisos – com destaques adequados e 
textos em tamanhos legíveis� Em uma interface, 
além do design, devemos pensar na hierarquia das 
ações do usuário, todas as ações iniciais até as 
finais e desenvolvê-las no design da interface. O 
que é prioridade é apresentado primeiro e/ou com 
maior destaque, o que merece atenção especial 
precisa de um destaque para que o usuário veja;
 y Proporção: em UI design, diz respeito aos pa-
drões reconhecidos e já utilizados em elementos 
de interfaces, como tamanhos de botões, textos e 
ícones� Muitos elementos podem ser adaptados, 
não é preciso seguir regras a risco, no entanto, 
dependendo da tela para a qual a interface será 
aplicada, é preciso tomar certos cuidados para 
não utilizar elementos desproporcionais, um botão 
muito grande, um texto muito grande, cores que 
não contrastam bem, tamanhos de caixas, formas, 
ícones e imagens� A experiência do usuário se dará 
por intermédio da interface, por isso, compreender 
e aplicar adequadamente a proporção entre os 
elementos nos layouts é fundamental, você pre-
cisará escalonar os elementos gráficos seguindo 
algumas regras na diagramação e distribuição dos 
elementos no layout;
 y Clareza: diz respeito à identificação e leitura 
dos elementos de uma interface� Os botões, por 
18
exemplo, precisam parecer botões, o usuário deve 
olhar para um botão e diferenciá-lo de outros elemen-
tos� Às vezes encontramos aplicativos e/ou sites 
com informações que se misturam, não sabemos 
diferenciar um box para inserir informações de um 
botão que, embora possa ter o nome do comando/
ação, confunde quando olhamos para a tela� Os 
botões têm design próprio, cores, sombras e/ou 
ondulações, por exemplo� Outro elemento impor-
tante são as informações textuais, títulos possuem 
destaques para que se caracterizem como títulos, 
por isso, as fontes em tamanhos maiores ou com 
destaque “bold” são formas de gerar destaque;
 y Consistência: refere-se aos grupos de informa-
ções de uma determinada tela que se apresentam 
em harmonia� Na página de um log-in, por exemplo, 
onde há os campos de preenchimento de nome, 
telefone, e-mail, senha etc�, cada item deve seguir 
um padrão em tamanhos de box, texto e cores, por 
exemplo, para que a tela não seja desagradável e 
faça sentido para o usuário� A consistência deve ser 
mantida o máximo possível nos layouts, é preciso 
pensar na usabilidade entre telas, não pode haver 
mudanças drásticas em design e funcionalidades 
de uma tela para outra� Dentro do possível, deve-
mos manter a experiência entre as ações que o 
usuário irá realizar durante a interação, mantendo 
a consistência�
19
Faça estudos sobre princípios de design que serão 
bastante úteis para que você desenvolva interfaces 
amigáveis� Sempre há novas considerações em 
relação a padrões e diretrizes� Conforme produtos 
e/ou serviços são lançados, novos olhares para o 
desenvolvimento de interfaces são construídos�
Leia o artigo a seguir “10 princípios fundamentais de 
design para um UI Designer” e explore alguns princípios 
do UI design� O artigo apresenta exemplos que permitem 
observar a aplicação de cada princípio� Disponível em: 
https://chiefofdesign�com�br/ui-designer/� Acesso em: 
20 set� 2022�
EQUILÍBRIO VISUAL: ORDEM
A ordem no equilíbrio visual tem bastante relação 
com a hierarquia das informações no que se refere 
aos elementos gráficos, às cores, às tipografias, 
às imagens, aos ícones, aos símbolos, aos blocos/
grupos de informações e às formas como boxes 
que compõem uma interface� Dentro dessa lista, 
devemos considerar os elementos específicos de 
uma interface digital, como barra de progresso, 
campo de pesquisa, barra de rolagem, menus, bo-
tões, campos de digitação de textos e de avaliação 
de um sistema, por exemplo�
SAIBA MAIS
20
https://chiefofdesign.com.br/ui-designer/
O principal na ordem dos elementos de uma 
interface é considerar tudo que foi desenhado 
antes, como a AI (arquitetura da informação), a 
qual norteará o que deverá ser prioridade e/ou 
aparecer primeiro, em destaque, e o que deverá ser 
secundário� Ao desenvolver uma interface digital, 
a ordem das informações e dos elementos deve 
ser de conhecimento prévio do UX/UI designer, 
esse conhecimento facilitará a solução para às 
necessidades do usuário final.
Exemplo
Imagine que você recebeu duas demandas para 
desenvolver duas interfaces para aplicativos, 
pelos quais os usuários finais deverão realizar a 
inscrição para participar de workshops� A primeira 
interface, Grupo 01, será destinada a professores, 
pesquisadores e acadêmicos que receberão uma 
série de workshops; a segunda interface, Grupo 
02, será destinada para jovens “youtubers”, que 
também receberão uma série de workshops após 
a inscrição� Tendo em vista que você não partici-
pou de etapas anteriores ao desenvolvimento da 
interface:
1) Qual seria sua primeira tarefa para cumprir 
essa missão?;
2) Como você se planejaria para desenhar essas 
interfaces, elas seriam produtos diferentes ou duas 
21
etapas para dois tipos de usuários em um mesmo 
produto digital?
Pense sobre isso e, se achar interessante, tome como 
um desafio e desenvolva essa missão como um 
projeto de portfólio pessoal� Aí vão algumas dicas:
1) Sua primeira tarefa seria se apropriar de todas 
as informações existentes, relacionadas ao projeto, 
mas, no caso de um projeto que você começará 
do zero,faça pesquisas para conhecer bem cada 
perfil dos grupos de usuários, os quais são bem 
distintos; descubra informações como hábitos, cul-
tura, gostos, expectativas, observe referências de 
interfaces com o mesmo propósito da sua missão 
de UX/UI design; faça pesquisas estruturadas, como 
um formulário e descubra as reais necessidades 
de potenciais usuários do grupo 01 e do grupo 02;
2) Após obter as informações e conhecer melhor 
os perfis de usuários, faça personas para cada gru-
po das interfaces que você desenvolverá� Depois, 
desenvolva uma AI e, se possível, valide-a com 
testes de usuários, para verificar se faz sentido. 
Faça um sitemap com a jornada dos usuários� Você 
poderá, em seguida, criar esboços iniciais e fazer 
wireframes, pense nos modelos de elementos grá-
ficos, o que será preciso ter na interface para que 
os usuários realizem as tarefas de inscreverem-se 
nos programa de coleção de workshops, pense 
22
cada etapa, tela a tela, as interações necessárias, 
as trocas de telas e reveja o modelo de sitemap; 
defina a identidade visual, se haverá duas, para dois 
aplicativos diferentes, ou se haverá uma variedade 
de cores, por exemplo, em um mesmo aplicativo, 
direcionadas para cada um dos grupos de usuá-
rios. Esse é o momento de definir como será seu 
projeto final, mas você tem a opção de desenvolver 
as duas propostas, ou seja, duas versões de inter-
face para um mesmo produto digital, o aplicativo 
do programa de workshops, ou duas interfaces 
bem distintas, em relação ao UI design, para dois 
aplicativos, isso ficará por sua conta. Crie os UI kit 
e protótipos para testar com potenciais usuários 
finais (as redes sociais são um ótimo campo para 
conseguir contar com a participação de pessoas 
interessadas nos projetos, explore esse recurso);
3) Validando os protótipos, faça ajustes e com-
partilhe como portfólio em suas redes sociais� 
Bom projeto!
A hierarquia visual é essencial para mostrar ao 
usuário os pontos principais� Por exemplo, durante 
sua leitura em uma interface, as cores ajudam o 
usuário a selecionar o que é mais importante e/
ou a encontrar o que procura no momento que 
iniciou uma tarefa�
23
Não há como ler todas as informações constan-
temente, nosso cérebro e nossos olhos trabalham 
com filtros de informações em um contexto de 
necessidade, por isso, a ordem das cores e das 
informações precisam ser bem trabalhadas, elas 
criam relações entre as informações transmitidas 
aos usuários, informam, criam e geram emoções 
que conduzem, em uma experiência digital, as 
decisões do usuário� Entenda, a seguir, o que se-
ria uma desordem na interface digital para você 
compreender a necessidade da ordem�
Figura 5: A ordem na UI�
Te ver 
Estrela, bom!
LOG IN
Sign up with
Forget password Create account
Create an account
Don’t have and account?
E-MAIL
PASSWORD
Bom te ver 
Estrela!
LOG IN
Sign up with
Forget password Create account
Create an account
Don’t have and account?
E-MAIL
PASSWORD
Fonte: Elaboração própria�
24
Note as duas interfaces para um aplicativo: na 
primeira, à esquerda, está notável a falta de ordem 
visual e ordem das informações, afinal, não é só em 
relação às cores que devemos nos atentar; além da 
repetição de cores dos elementos em uma interface, 
é preciso que haja uma harmonia nos princípios 
de design da repetição e as informações devem 
seguir a ordem dos padrões preestabelecidos�
Por exemplo, a senha (password, em inglês), no 
cadastro em um site e/ou aplicativo, jamais apa-
rece antes do campo do e-mail; o botão de log-in 
deve aparecer na sequência, como a próxima 
ação a ser realizada pelo usuário após digitar o 
e-mail e a senha de cadastro� As cores estão em 
desarmonia e não há uma ordem de apresentação, 
eles se repetem sem uma estratégia inteligente de 
UX/UI design�
Compare a primeira tela de interface da imagem 
com a segunda, não há como negar a falta de 
ordem na primeira tela, não é mesmo? Considere 
esse exemplo a não ser seguido em seus projetos 
de design de interface digital�
EQUILÍBRIO VISUAL: CORES
Você, provavelmente, já entendeu a importância 
e o poder das cores em um projeto visual para 
interface digital� Muitas vezes podemos encontrar 
25
desafios em trabalhar com as cores em uma in-
terface, principalmente quando elas devem seguir 
uma identidade visual que não colabora com os 
princípios de design e com o desenvolvimento de 
uma interface amigável, centrada no usuário, não 
é mesmo?
Se você não passou por uma situação parecida, 
provavelmente ainda passará! Nem todas as marcas 
possuem uma identidade que conversa bem com 
interfaces digitais, principalmente quando há uma 
grande demanda de telas a serem desenvolvidas� 
É preciso pensar em alternativas para solucionar 
esse tipo de problema, como delimitar as cores 
apenas ao logotipo e/ou utilizar as cores princi-
pais da marca em destaques e/ou categorias e/ou 
sessões, deixando o conteúdo bruto menos denso 
quando as cores predefinidas forem fortes e/ou 
com alto teor de saturação�
Uma interface possui diversas informações, as 
quais os usuários darão atenção; as cores devem 
ser trabalhadas com estratégia e seguindo as 
diretrizes do bom design, conceitos como teorias 
das cores e estudos como cores para interfaces 
digitais são um ótimo caminho para você seguir�
Além disso, há um estudo que fará muita diferença 
e vale a pena você estudar: é a Semiótica, muito 
estudada pela psicologia, na relação com as emo-
26
ções humanas, como elas influenciam a percepção 
e os sentimentos� É exatamente por isso que todo 
UX/UI designer deve conhecer esse estudo para 
aplicar de modo consciente em seus projetos de 
user interface (UI)�
Por meio das cores podemos desenvolver uma 
interface com uma boa estética, o que favorece a 
experiência do usuário e a funcionalidade, tudo de-
penderá da harmonia entre essas partes� Somente 
a funcionalidade não é interessante e/ou agradável 
ao usuário, mostrar equilíbrio das cores em uma 
interface é um dos caminhos mais seguros para 
garantir excelência em experiência para o usuário� 
Observe a seguir o que seria o oposto ao equilíbrio 
visual em uma interface:
27
Figura 6: Exemplo de desequilíbrio visual em interface�
Bom te ver 
Estrela!
LOG IN
Sign up with
Forget password Create account
Create an account
Don’t have and account?
E-MAIL
PASSWORD
Fonte: Elaboração própria�
Você conseguiu perceber como as cores podem 
ser desagradáveis quando não trabalhadas em 
harmonia? O equilíbrio visual das cores depende 
desse fator, da harmonia e da simbologia das cores 
alinhadas às necessidades do usuário final em um 
projeto de user experience (UX)� Note como o fundo 
vermelho soa agressivo e embora haja repetição 
das cores elas estão organizadas de uma maneira 
que transmite uma total confusão na interface do 
28
usuário� O contraste entre as cores é outro fator 
que prejudica a usabilidade e a experiência do 
usuário. Utilize essa figura como exemplo a não 
seguir, hein?
Você poderá trabalhar bem as cores, definir uma 
paleta para seu projeto de interface quando estiver 
desenvolvendo a UI kit, as cores são fundamentais 
e devem ser previamente planejadas e testadas 
em protótipos, ninguém melhor que o usuário 
para indicar em um teste o que funciona e o que 
não funciona� É possível perceber o impacto das 
cores em uma interface mesmo antes de ouvir o 
usuário, pois as expressões durante uma sessão 
teste dizem bastante�
As cores, como já mencionado, têm impacto direto 
na tomada de decisão do usuário, sua permanên-
cia em um site e/ou aplicativo, por exemplo, pode 
ser influenciada pelo trabalho com as cores, uma 
estratégia bastante utilizada, há tempos, por em-
presas em ambientes físicos�
Quer se aprofundar no estudo das cores? Leia o livro A 
psicologia das cores, de Eva Heller�
SAIBA MAIS
29
Para trabalhar com as cores em interfaces digitais 
você precisa conhecer os conceitos e as teorias 
das cores e os sistemas como RGB e CMYK, sen-
do o primeiro destinadopara imagens digitais e 
o segundo para impressos� Faça seus estudos 
sobre cores e as utilize com consciência em seus 
projetos de interface do usuário� A qualidade de 
uma interface dependerá do todo e as cores são 
um dos elementos que compõem uma interface� 
Observe a figura a seguir e comece seus estudos 
pela observação do círculo cromático e seu pro-
cesso de composição�
Figura 7: As cores e o círculo cromático�
As cores primárias são 
as que não podemos 
criar, por isso elas 
recebem esse nome, 
são elas: amarelo, 
vermelho e azul.
As cores secundárias 
nascem da mistura 
das cores primárias, 
por exemplo: amarelo 
com vermelho, forma a 
cor laranja.
As cores terciárias são 
as que se originam das 
misturadas das cores 
primárias com as 
cores secundárias.
Círculo cromático, 
soma de todas as 
cores a serem 
utilizadas 
separadamente ou por 
combinações.
3 3 6 12
Fonte: Elaboração própria�
EQUILÍBRIO VISUAL: CONTRASTE
O contraste é a percepção marcante entre a dife-
rença de cores que reforça uma intenção desejada� 
Essa percepção é construída pela combinação de 
cores que são selecionadas, por exemplo, com 
base em estudos da psicologia das cores� Para 
30
criar uma composição de uma interface digital que 
seja harmoniosa, devemos conhecer matiz, brilho e 
saturação, desse modo poderemos trabalhar com 
as cores do círculo cromático e criar uma paleta de 
cores apropriada para um projeto de UX/UI design�
O contraste é um dos princípios de design� Em todo 
projeto gráfico o contraste entre as cores deve ser 
bem analisado e embasado em estudo das cores, 
considerando os efeitos emocionais que podem 
causar no usuário e os objetivos do produto digital�
Salve em sua biblioteca um livro que é bastante indicado 
para designers, independentemente de você ser designer 
UI ou designer gráfico de impresso. Os princípios e os 
estudos de design servem para todos da profissão, pois 
temos sempre regras e conceitos gerais e específicos. O 
livro Design para quem não é design não é apenas para 
principiante, é um guia de diversos designers profissio-
nais, você encontrará um ótimo conteúdo para aprender 
sobre cores� Disponível em: https://pt�slideshare�net/
man3lla/design-para-quem-no-designer-robin-williams� 
Acesso em: 20 set� 2022�
SAIBA MAIS
31
https://pt.slideshare.net/man3lla/design-para-quem-no-designer-robin-williams
https://pt.slideshare.net/man3lla/design-para-quem-no-designer-robin-williams
Analise a figura a seguir, observe como os elemen-
tos gráficos também foram contrastados com as 
cores, como as informações foram distribuídas e os 
pontos de destaque que mais chamam a atenção:
Figura 8: Cores e interface digital�
Fonte: Freepik
Você percebeu como as interfaces digitais da 
figura anterior são modernas e agradáveis. Ape-
sar do minimalismo em cor, elas têm o poder de 
despertar o interesse ao fisgar nossos olhos. O 
uso de poucas cores em uma interface é algo que 
32
é bastante praticado no UX/UI design, a visibilida-
de do que deve se destacar para o usuário pode 
ser realçada pela cor que é aplicada em pontos 
estratégicos nos elementos de interação de uma 
interface� O equilíbrio visual é uma das estratégias 
mais marcantes em uma interface, você deve estu-
dar constantemente cores e aprender a trabalhar 
com elas, fazendo combinações que criem um 
contraste agradável e harmonioso� Isso será um 
diferencial em seus projetos que ressignificará a 
experiência do usuário�
33
MOODBOARD E DESIGN 
SYSTEM
Agora falaremos sobre moodboard e design system� 
Começaremos entendendo o que é moodboard, 
mas antes de explorarmos o conceito analise a 
figura a seguir:
Figura 9: Exemplo de moodboard para interface digital�
Doctor’s Helpline
Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit, sed diam 
nonummy nibh euismod tincidunt ut 
laoreet dolore magna 
COMPANY NAME
Get Started
Categories
Lorem ipsumLorem ipsumLorem ipsum
Specialist
Lorem ipsum - Hospital
0422 831 21
Dr. Lorem Ipsum
Lorem ipsum - Hospital
0422 831 21
Dr. Lorem Ipsum
Lorem ipsum - Hospital
0422 831 21
Dr. Lorem Ipsum
Categories
Lorem ipsumLorem ipsumLorem ipsum
Doctor’s Helpline
Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit, sed diam 
nonummy nibh euismod tincidunt ut 
laoreet dolore magna 
COMPANY NAME
Get Started
Tela 1 Tela 2
Specialist
Lorem ipsum - Hospital
0422 831 21
Dr. Lorem Ipsum
Lorem ipsum - Hospital
0422 831 21
Dr. Lorem Ipsum
Lorem ipsum - Hospital
0422 831 21
Dr. Lorem Ipsum
Fonte: Adaptado de Freepik�
Note que na figura anterior, que traz um exemplo 
simplificado de moodboard, há uma seleção de 
elementos gráficos, ícones, textos/tipografias, 
componentes de interface e definição da paleta de 
cores� Você consegue perceber todos os elementos 
aplicados em layouts para telas de um aplicativo; 
as telas podem ser categorizadas como protóti-
pos de alta fidelidade, a versão mais próxima do 
produto final.
34
Moodboard é um termo do inglês que significa “pai-
nel de humor”, também é conhecido como painel 
semântico� Desenvolver um painel semântico para 
uma interface digital é como fazer uma colagem 
de elementos gráficos, imagens, ícones, elemen-
tos do UI kit e materiais que servem para que o UI 
designer apresente um conceito para a equipe de 
desenvolvimento de um produto digital, além de 
unificar os layouts da interface, evitando falhas na 
identidade como criar uma tela muito diferente da 
outra� O moodboard, ou painel semântico, é uma 
ferramenta que serve como guia na UI�
Como fazer o painel semântico? Primeiramente, 
você deve saber os objetivos do projeto, conhecer 
o perfil do usuário e ter um bom conhecimento 
sobre estrutura e identidade visual da marca e/
ou empresa� Com base nessas informações, você 
poderá selecionar os elementos e ir organizando-os 
no layout, testando as combinações, com elemen-
tos gráficos, imagens, tipografias, componentes 
da UI e cores�
Conforme você for montando-o, você descobrirá 
o caminho e conseguirá estabelecer uma relação 
semântica entre os elementos que norteará o de-
senvolvimento da interface� Utilizar essa ferramenta 
favorece seu trabalho porque ajuda a esclarecer, 
para você e para o time envolvido, as expectativas 
em relação ao projeto� Além disso, em relação à 
35
identidade, componentes principais da interface 
e elementos gráficos, é possível validá-los com 
clientes, equipe de desenvolvimento e/ou gestor 
de projeto o caminho visual e conceitual da user 
interface�
Criar moodboards, em diversos momentos, pode requerer 
o envolvimento de outros profissionais que trabalham 
com você em um projeto, uma prática inicial é a organi-
zação da equipe para sessões de brainstorming a fim de 
obter alguns insights� A primeira versão do moodboard 
pode ser um rascunho, depois ele vai sendo refinado 
quando a ideia geral estiver predefinida. Conforme você 
for montando seu moodboard, pode ocorrer algumas 
alterações em relação ao rascunho inicial e isso faz 
parte do processo de criação� O mais importante é re-
alizar validações das versões finais, isso evitará ruídos 
e problemas futuros no desenvolvimento do projeto de 
interface� Saiba que a ferramenta moodboard é utilizada 
para diversos projetos de design, não se restringindo 
apenas ao design de interface, inclusive para projetos 
impressos e eventos�
Falaremos agora sobre design system� O termo 
em inglês é o mesmo que “sistema de design”, 
porém, os profissionais de UX/UI design utilizam 
a versão original�
FIQUE ATENTO
36
Assim como o UI kit, ou kit de interface do usuário, 
o design system é uma forma de planejamento para 
manter a consistência de um projeto de interface 
digital� No processo de desenvolvimento de inter-
face digital, o UX/UI designer é quem determina 
o comportamento dos componentes visuais da 
interface, definindo como ocorrerá a interatividade 
do usuário durante uma experiência, como esses 
componentes da interface digital serão utilizados 
pelo usuário�
Ao utilizarmos uma interface, percebemosas fun-
cionalidades de componentes visuais que ocorrem 
de modo individual e em grupos, isso parte do 
design system, pois são as regras estabelecidas 
para os componentes e as funcionalidades na 
interatividade do usuário�
O UI designer cria os componentes da interface 
digital, isso você certamente já compreendeu� Den-
tro do processo de designer de interface há o que 
chamamos de guidelines, que é um guia de estilo 
de uma interface desenhado pelo UX/UI designer�
O guideline é a definição da estética da interface. 
Podemos dizer também que é a direção de arte 
dos componentes, o estilo da interface digital 
fundamentado em todas as informações de pes-
quisas realizadas no projeto como a pesquisa UX, 
AI (arquitetura da informação)�
37
É comum haver confusão em relação ao que é de-
sign system porque há duas partes que o envolvem: 
o guideline e a parte de programação, que envolve 
os códigos utilizados para os componentes da 
interface� É importante que esses componentes 
já programados sejam disponibilizados em uma 
biblioteca e, com esse processo, temos o design 
system�
Portanto, o design system é a junção dos elementos 
gráficos de uma interface digital programados e 
disponibilizados com as diretrizes de funcionalida-
des� Por exemplo, se um componente for restrito 
para funcionar apenas um grupo de componentes 
da interface, o programador será responsável por 
aplicar essa funcionalidade�
O NNgroup define de maneira objetiva e resumida o que 
é design System� Assista ao vídeo Design Systems and 
Their Benefits�
Disponível em: https://www�youtube�com/
watch?v=3TpiNrZlzt4� Acesso em: 20 set� 2022�
Uma biblioteca padronizada de componentes por 
si só não é design system, assim como somente 
o guideline de interface digital também não o é� 
SAIBA MAIS
38
https://www.youtube.com/watch?v=3TpiNrZlzt4
https://www.youtube.com/watch?v=3TpiNrZlzt4
Para entendermos o que é design system, deve-
mos considerar que é a soma do guideline (design 
dos componentes da interface como botões) e 
a programação, mais especificamente códigos 
(cada componente possui um código) e assets 
(ou ativos – elementos gráficos como ícones e/ou 
imagens e os componentes da interface) definidos 
em documentação consultável�
A parte da documentação precisa ser detalhada 
com informações de uso do componente, esse 
detalhamento é importante para a reutilização 
dos componentes. Podemos entender, por fim, 
que design system é composto por partes que se 
somam�
Quer compreender melhor, e com exemplos reais, o que 
é design system? Então explore o site da Apple que é a 
maior referência em tecnologia e design� Você poderá 
entender mais sobre componentes, layouts, guideline, 
códigos e assets, pra isso basta você selecionar, no 
menu da página principal, “Design” para explorar a parte 
de design como guideline, e “Develop” para acessar os 
conteúdos de programação como códigos e assets� 
Disponível em: https://developer�apple�com/� Acesso 
em: 20 set� 2022�
SAIBA MAIS
39
https://developer.apple.com/
O design system, portanto, é um padrão de design 
com um conjunto de ferramentas que estabelecem 
as diretrizes para uma interface� Seu contexto 
de uso dependerá do projeto e do design system 
elaborado pela equipe ou que serviu de referên-
cia� Apple e Google são duas gigantes que estão 
sempre na mira de profissionais de UX/UI design, 
isso porque as inovações em design e tecnologias 
da comunicação e da informação dessas empre-
sas são sempre inspiradoras e aceleradores das 
inovações em soluções digitais� Outra que não 
podemos esquecer é a Meta�
Assista ao vídeo Microsoft fluent design system para 
ter uma referência visual do que é design system� A 
Microsoft, assim como a Apple e o Google, é referência�
Disponível em: https://www�youtube�com/
watch?v=JwyjUcFQpfM� Acesso em: 20 set� 2022�
SAIBA MAIS
40
https://www.youtube.com/watch?v=JwyjUcFQpfM
https://www.youtube.com/watch?v=JwyjUcFQpfM
TESTE DE USABILIDADE
Agora, precisamos compreender melhor o que é o 
teste de usabilidade e como podemos aplicá-lo� Já 
estudamos anteriormente o conceito de usabilidade, 
certo? Por meio da usabilidade podemos projetar, 
testar, mensurar e melhorar a usabilidade de um 
produto digital com base na experiência do usuário�
A mensuração da usabilidade pode ser obtida 
mediante testes de usabilidade que podem ser 
aplicados antes do lançamento de um produto 
digital e/ou após, para confirmar o nível de usabi-
lidade e levantar possíveis falhas e/ou erros que 
possam ser melhorados�
Todo produto digital e/ou ferramenta precisa ser 
útil e para que isso ocorra os usuários devem con-
seguir utilizá-lo sem dificuldades. Quanto mais fácil 
for a utilização de um produto digital, maior é seu 
nível de usabilidade e, por consequência, melhor 
é a experiência do usuário�
Mas como realizar um teste de usabilidade? A primeira 
palavra que você deve ter em mente é planejamento; 
muitas das tarefas que realizados dependem de 
planejamento, principalmente se quisermos obter 
sucesso nos resultados, e o teste de usabilidade 
não é diferente, afinal, você irá tratar diretamente 
de potenciais usuários e/ou usuários finais.
41
Você deverá selecionar o grupo de usuários para 
o teste, ou testes� Durante o desenvolvimento de 
um produto digital é comum fazermos alguns 
testes, dentre eles está o de usabilidade, que nos 
mostrará o nível de usabilidade do produto digital 
e/ou sistema que estamos desenvolvendo� Observe 
a seguir algumas regras básicas que ajudarão em 
seu teste de usabilidade:
1) Formação de grupos de participantes do teste 
(pessoas da equipe e/ou usuários);
2) Definição de quem conduzirá as sessões de 
testes: a pessoa deverá se preparar bem para não 
influenciar os participantes durante o teste; a ses-
são não pode ser tendenciosa e cada participante 
deve testar a interface e/ou opinar de maneira livre;
3) Delimitar o que será investigado no teste, ou 
seja, o que você está querendo saber com o teste, 
quais funcionalidades e/ou elementos da interface 
estão sendo testadas;
4) Preparar dois tipos de roteiros, um com informa-
ções essenciais para os participantes e outro para 
quem irá conduzir� O roteiro ajuda na compreensão 
em relação ao teste, o que se espera, o que deve 
ser feito e quais são os objetivos� O roteiro é um 
método de garantir que todos estejam alinhados 
e saibam exatamente o que fazer;
42
5) Definir qual o melhor ambiente para a sessão: 
será presencial? Em que sala/lugar? Será on-line? 
Por qual ferramenta? Será a distância? Qual meio 
será utilizado, formulário, perguntas e respostas?;
6) A sessão será gravada? Áudio e vídeo ou só 
áudio? Você poderá tirar fotos durante o teste, 
mas lembre-se de pedir permissão aos partici-
pantes, isso pode requerer um termo de uso de 
imagem que deverá ser assinado por eles� Essas 
informações precisarão ser explicadas antes de 
se iniciar a sessão� Esteja aberto para ouvir um 
“não”, muitas pessoas não gostam de participar 
de sessões gravadas, de gravarem suas vozes ou 
serem fotografadas;
7) Separe todos os materiais que serão necessá-
rios, os protótipos, blocos de anotações, post-its, 
folhas para rascunhos, se for o caso, computadores 
e/ou smartphones� Se os usuários tiverem que 
utilizar seus próprios aparelhos, isso deverá ser 
negociado antes da sessão de teste; não pegue 
nenhum participante de surpresa;
8) Antes da sessão na prática, converse com os 
participantes e/ou usuários e, mesmo que eles 
tenham um roteiro em mãos, explique quais são 
as tarefas que eles deverão realizar, isso quebra 
a tensão e deixa os participantes mais à vontade� 
Depois que iniciar o teste, na prática, evite falar, deixe 
43
que o usuário tente sair sozinho das dificuldades 
que encontrar e, se por acaso ele não conseguir, 
é importante ter um meio para que ele registre as 
impressões, as dificuldades, o que não conseguiu 
fazer e o que poderia ser diferente, por exemplo;
9) Todo teste/tarefa precisa ter um tempo com-
binado e isso deveser esclarecido no roteiro do 
participante do teste e explicado durante a abertura 
da sessão;
10) Uma boa maneira de criar grupos de teste de 
usabilidade é ter dois perfis, se você se deparar com 
muitas pessoas que não queiram ser filmadas e/
ou ter suas participações no teste gravadas, tenha 
o grupo de pessoas mais reservadas;
11) Ao final da sessão de teste de usabilidade, 
lembre-se de conversar de maneira aberta e ami-
gável com os usuários, escute o que que cada um 
tenha a dizer e agradeça a todos pela participação�
Você pode aproveitar a sessão para fazer algumas 
perguntas, durante ou ao final, mas é importante 
que perguntas complementares sejam deixadas 
para o final da sessão, assim o usuário não se 
sentirá interrompido e você poderá observar mais 
os participantes�
Existe uma certa regra, como consideram muitos 
profissionais de UX/UI design, é a do “não mais do 
44
que cinco”, que foi criada por Jakob Nielsen, um 
dos maiores influenciadores em UX, fundador do 
Nielsen Norman Group�
Quer conhecer melhor quem é Jakob Nielsen? Acesse o 
site do Nielsen Norman Group� Disponível em: https://
www�nngroup�com/people/jakob-nielsen/� Acesso em: 
20 set� 2022�
SAIBA MAIS
45
https://www.nngroup.com/people/jakob-nielsen/
https://www.nngroup.com/people/jakob-nielsen/
TENDÊNCIAS EM UX E UI
Sabemos que as tecnologias estão por toda parte, 
principalmente as digitais, que otimizam os pro-
cessos de produção e automatizam tarefas que 
por muito tempo eram parte do trabalho humano� 
Uma das tendências para o futuro é sabermos 
utilizar mais o cérebro do que a nossa força física; 
precisaremos ter bem desenvolvidas as habilida-
des técnicas e emocionais, ou melhor, hard skills 
e soft skills�
Tudo bem, mas o que isso tem a ver com UX/UI 
Design? Saiba que tem tudo a ver! Primeiramente, 
se você deseja ser um profissional do mercado, atu-
alizado e que consegue acompanhar as constantes 
mudanças, você deverá desenvolver habilidades 
técnicas como UX/UI design, e comportamentais, 
como compreender as diferenças, ter empatia, 
aprender a aprender e escuta ativa, por exemplo�
Quando desenvolvemos produtos digitais, com 
design centrado no usuário, essas habilidades 
aprimoram nossa capacidade de identificar as 
reais necessidades, desejos e soluções para os 
problemas a serem resolvidos na sociedade, que 
é habitada por pessoas�
46
A experiência do usuário tem explorado constante-
mente o campo das emoções, de como o cérebro 
humano funciona, e soluções tecnológicas com 
interfaces digitais� Se formos analisar, atualmente 
temos um amplo terreno a ser explorado em UX/
UI design e uma das tendências é a evolução das 
tecnologias atuais e de novas descobertas conforme 
as tecnologias da informação e da comunicação 
forem evoluindo�
Estamos rodeados de aparatos tecnológicos que 
nos possibilitam experiências por meio do design 
e da tecnologia, por exemplo os smartwatches 
com monitoramento de atividades físicas, assis-
tentes virtuais como a Alexa (Amazon) e mesmo 
os sistemas que parecem simples porque já estão 
bastante naturalizados em nosso dia a dia, como 
os leitores de bilhete único em ônibus e metrôs� 
Essas tecnologias fazem parte do que chamamos 
de ubiquidade e interfaces invisíveis, que é um dos 
campos de estudo e tendência em UX/UI�
Existem algumas perspectivas em relação às 
tendências em UX/UI, como design centrado não 
apenas no usuário, mas no meio ambiente também, 
ou melhor, design centrado na vida. A influência 
para essa tendência está diretamente conectada 
às questões ambientais, como o aquecimento 
global que afeta a preservação da natureza e da 
vida, em qualquer parte do planeta�
47
Estamos cada vez mais vinculados aos compu-
tadores móveis e smartphones, isso influencia 
as mudanças futuras e, mesmo diante de tantas 
inovações tecnológicas e soluções em design de 
interface para esses aparatos, as mudanças não 
param�
Uma tendência que tem sido estudada é o controle 
de gestos de ar, você já ouviu falar nessa tendência? 
Bem, o controle de gestos de ar é uma tendência 
em design para dispositivos móveis que permitirá 
a realização de um ato, ou atividade, só com os 
gestos do corpo�
Por exemplo, você poderá tirar uma selfie sem a 
necessidade de se clicar no aplicativo “câmera”, 
apenas mostrar o gesto da palma da mão em 
direção à câmera do smartphone será suficiente 
para tirar uma selfie� Essa tecnologia pode até 
ser considerada parte da abordagem mobile-first, 
que é uma tendência contínua se considerarmos 
a migração constante de produtos e serviços di-
gitais adaptáveis e/ou construídos para acesso 
via smartphones�
As cores como background (fundo) estão cres-
cendo e é considerado uma tendência, o design 
clean sempre faz sucesso e para muitos produtos 
digitais é a melhor solução, mas há contextos nos 
quais a cor faz muita diferença e por isso é que 
48
as opções estão mudando o curso do design com 
background apenas branco e/ou preto�
Uma tendência que já está bastante notável são 
as experiências por realidade virtual (RV) e reali-
dade aumentada (RA), que antes estavam mais 
concentradas no contexto de jogos� Atualmente 
já são indicados os caminhos de expansão des-
sas tecnologias que deverão contar com ótimas 
soluções em UX/UI� Educação, Medicina (Saúde), 
indústria automobilística, varejo e viagens são 
alguns exemplos�
Muitos materiais de pesquisa e as melhores referências 
em UX/UI design são de língua estrangeira, como o in-
glês, que é um idioma que possui uma diversidade de 
estudos em UX/UI� O mercado de trabalho e o cenário de 
mudanças para o futuro destacam, dentre as habilidades 
técnicas e comportamentais, a fala e compreensão de 
outros idiomas como o inglês, que se encaixa em uma 
habilidade técnica� Fique atento às exigências e aos 
cenários com oportunidades em UX/UI Design, você 
pode pesquisar constantemente e acompanhar os 
meios de comunicação e informação que estão mais 
concentrados em sua área de interesse� O NNgroup 
(Nielsen Norman Group) é uma ótima fonte, que está 
sempre à frente em relação à UX/UI�
FIQUE ATENTO
49
Leia o artigo “UI/UX design trends of 2022 you need to 
catch up to” para obter mais informações sobre ten-
dências em UX/UI� Você irá encontrar sempre novas 
informações em relação às tendências, isso porque, 
como já sabemos, o mundo está cada vez mais rápido 
e com isso as mudanças também� Não conseguimos 
acompanhar tudo, mas podemos filtrar as informações 
mais relevantes e que impactam diretamente em nossa 
vida e em nossa carreira, por isso, pesquise sempre 
sobre tendências� Disponível em: https://uxplanet�org/
ui-ux-design-trends-of-2022-you-need-to-%D1%81atch-
-up-to-d02ff6623d5a� Acesso em: 20 set� 2022�
SAIBA MAIS
50
https://uxplanet.org/ui-ux-design-trends-of-2022-you-need-to-%D1%81atch-up-to-d02ff6623d5a
https://uxplanet.org/ui-ux-design-trends-of-2022-you-need-to-%D1%81atch-up-to-d02ff6623d5a
https://uxplanet.org/ui-ux-design-trends-of-2022-you-need-to-%D1%81atch-up-to-d02ff6623d5a
CONSIDERAÇÕES FINAIS
Neste e-book, falamos sobre o ciclo de desenvol-
vimento de interface digital, compreendendo os 
pontos principais com uma apresentação deta-
lhada das etapas do processo� Você aprendeu o 
que é equilíbrio visual (ordem, cores e contraste), 
podendo diferenciar a importância de cada ele-
mento para o desenvolvimento de interfaces com 
equilíbrio visual�
Estudamos o conceito e modelos de moodboard 
e design system, de modo que você seja capaz de 
entender os conceitos e utilizar cada um deles em 
seus projetos digitais� Aprendemos como realizar 
um teste de usabilidade, podendo contar com uma 
lista de regras básicas para realizar suas próprias 
sessões de testes e, por fim, vimos algumas ten-
dências em user experience (UX) e user interface 
(UI), que caminham juntas em qualquer projeto de 
desenvolvimento de interface do usuário�
51
Referências Bibliográficas 
& Consultadas
AROUCHA, B� Z� L� Design da informação� 
Curitiba: Intersaberes, 2021� [BibliotecaVirtual]�
BARRETO, J� S� Interface humano-computador� 
Porto Alegre: SAGAH, 2018�
BELMIRO, J� (org�)� Usabilidade interface 
homem máquina� São Paulo: Pearson Education, 
2017� [Biblioteca Virtual]�
CARDOSO, L� da C� Design de aplicativos� 
Curitiba: Intersaberes, 2022�
FERREIRA, M� B� Prototipagem e testes de 
usabilidade� Curitiba: Contentus, 2020�
KISTMANN, V� Design Emocional� Curitiba: 
Contentus, 2020�
LOWDERMILK, T� Design centrado no usuário: 
um guia para o desenvolvimento de aplicativos 
amigáveis� São Paulo: Novatec Editora, 2013�
NIELSEN, J� 10 Usability heuristics for user 
interface Design� NN/g Nielsen Norman Group, 
15 nov� 2020� Disponível em: https://www�
nngroup�com/articles/ten-usability-heuristics/� 
Acesso em: 19 set� 2022�
https://www.nngroup.com/articles/ten-usability-heuristics/
https://www.nngroup.com/articles/ten-usability-heuristics/
PAZ, M� Webdesign� Curitiba: Intersaberes, 2021� 
[Biblioteca Virtual]�
SOBRAL, W� S� Design de interfaces: introdução� 
São Paulo: Erica, 2019� [Minha Biblioteca]�
STATI, C� R; SARMENTO, C� F� Experiência do 
Usuário (UX)� Curitiba: Intersaberes, 2021� 
[Biblioteca Virtual]�
TAI, H� Design: conceitos e métodos� São Paulo: 
Blucher, 2018� [Minha Biblioteca]�
WILLIAMS, R� Design para quem não é designer: 
princípios de design e tipografia para iniciantes. 
4� ed� São Paulo: Callis, 2013�
	Introdução
	Ciclo do desenvolvimento de interface digital
	Equilíbrio visual (ordem, cores, contraste)
	Equilíbrio visual: ordem
	Equilíbrio visual: cores
	Equilíbrio visual: contraste
	Moodboard e design system
	Teste de usabilidade
	Tendências em UX e UI
	Considerações finais
	Referências Bibliográficas & Consultadas