1

Módulo 4 - UX e UI Design
– 60h

Instrutor (a): _________________________

Aluno (a):____________________________

111
2

Copyright 2022 por CETAM-AM. Todos os direitos reservados.

Elaboração: Mauro Lima Da Silva

Revisão Técnica:

Revisão Final:

Instituto Benjamin Constant (IBC)

Endereço: Rua Ramos Ferreira, 991, Centro.

CEP: 69050-010

E-mail: ibc@cetam.am.gov.br

Telefone: (92) 3878 – 7474/ 7473

Horário de funcionamento: 8h às 22h.

211
3

Sumário
INTRODUÇÃO 6
1. FUNDAMENTOS DE USER EXPERIENCE 7
1.1 Por que UX Design é importante? 8
1.2 Vantagens do UX Design 9
1.3 Os cinco elementos básicos de UX 11
1.4 Como o UX é feito? 12
1.5 O que faz um profissional de UX? 13

2. FUNDAMENTOS DE USER INTERFACE 15

2.1 O que é UI Design e quais são as diferenças entre ele e UX? 15
2.2 Como é aplicado o UI Design no seu projeto 17

3. IDENTIFICAR SUAS CARACTERÍSTICAS 17

3.1 As características de UX Design e UI Design 18

4. COMPREENDER E APLICAR OS CONCEITOS EM PROJETOS REAIS 18

5. ESPAÇO 24
5.1 O que é Espaço em Interfaces? 24
5.2 Os dois tipos diferentes de espaço em uma interface 24
5.3 Espaço em interfaces 26
5.4 Espaço em excesso 30
5.5 3 maneiras de ajustar a quantidade de espaço em uma interface 31

6. ALINHAMENTO 34
6.1 Alinhamento vertical 34
6.2 Alinhamento horizontal 36
6.3 Alinhamento superior e inferior 38
6.4 Alinhamento centralizado vertical 38
6.5 Alinhamento horizontal na esquerda e direita 39
6.6 Alinhamento de elementos, grupos e seções em interfaces 41

311
4

7. CONSISTÊNCIA E PADRÕES 46
7.1 Consistência externa 48
7.2 Camadas de consistência 49
7.3 Layout de página e botão 50
7.4 O Impacto da Consistência 51

8. HIERARQUIA VISUAL 52
8.1 Os princípios da hierarquia visual 53

9. USABILIDADE 56
9.1 Como e onde é aplicado o conceito de usabilidade 58
9.2 Benefícios da usabilidade 59
9.3 Técnicas de usabilidade para você testar 61

10. DESIGN VISUAL 63

10.1 O termo o Design Visual? 64
10.2 Fundamentos do Design Visual 64

11. TEORIA DE CORES 65

11.1 As ferramentas para escolher as cores 69

12. TIPOGRAFIA 71
12.1 Famílias Tipográficas 74
12.2 Tamanho da fonte 75

13. FERRAMENTAS DE APOIO AO UX e UI DESIGNER 83

13.1 InVision 83
13.2 Notion 84
13.3 Adobe XD 85
13.4 Figma 85
13.5 ProtoPie 87
13.6Maze

411
5

14. WIREFRAME 89
14.1 Wireframes no UX Design 90
14.2 Criando um wireframe 91

15. MOCK-UP 96
15.1 Tipos de mockups 97
15.2 Mockups online 102

16. PROTÓTIPO 105

16.1 Protótipo de alta fidelidade 109
16.2 Fazendo um Protótipo 110

17. EXPERIÊNCIAS FUNCIONAIS, CONFIÁVEIS, USÁVEIS E PRAZEROSAS 112

18. FONTES DE INSPIRAÇÃO 117
19. UI E UX VOLTADO PARA DISPOSITIVOS MÓVEIS 119

REFERÊNCIAS BIBLIOGRÁFICAS 126

511
6

INTRODUÇÃO

Antes de falarmos qual a diferença entre UX e UI, devemos explicar que ambas
as áreas se complementam, mas cada uma trabalha de determinada forma
para oferecer a melhor experiência ao usuário. Desse modo, é fundamental
saber como utilizá-las a favor do cliente.

Antes de compreender melhor as siglas, é importante ter em mente o conceito

que as permeia na prática. Busque na sua memória uma experiência muito
agradável e observe qual produto ou serviço está presente nela, fazendo parte
do seu mundo e dos seus desejos. Nesse ponto, você acessou o
encantamento e a marca em questão alcançou seu objetivo com sucesso.

Neste sentido, definimos encantamento como a transformação de situações e

relacionamentos, que podem ocorrer durante uma transação no varejo, uma
negociação no nível corporativo ou em uma simples observação nas redes
sociais. Quando praticado de forma correta pelas empresas, ele se torna um
poderoso aliado de persuasão e influência nas tomadas de decisões.

611
7

1. FUNDAMENTOS DE USER EXPERIENCE

A sigla UX vem de User Experience, ou, traduzindo, Experiência do Usuário.

Trata-se, na verdade, de uma estratégia que se preocupa em entregar ao

consumidor experiências com base em um design responsivo, agradável,
organizado e intuitivo. Para entender melhor esse conceito, pare por um
instante e pense em plataformas como Netflix ou Facebook, por exemplo. Já
reparou como tudo ali é fácil de navegar?

Às vezes, parece até que esses sites sabem exatamente o que estamos
pensando – e a ideia é essa, mesmo. É tudo para não passar raiva ou perder
tempo com interfaces desorganizadas ou que ficam travando a cada 5 minutos.

Para isso, existem os profissionais de UX, que trabalham garantindo que a

experiência do usuário em determinados aspectos seja a melhor possível.

Mas isso não vale apenas para sites, vale dizer.

O UX designer quer despertar boas emoções nos usuários em diversos níveis

e ambientes, como pontos físicos de venda ou aplicativos, por exemplo.

Isso também se estende para a experiência que temos ao utilizar um produto

novo, como um celular. No caso do iPhone, não é de se admirar que a marca
reúna tantos fãs fidelíssimos no mundo inteiro.

Para eles, certamente, esses aparelhos são melhores porque não travam, têm
um design totalmente intuitivo e despertam sensações positivas.

Seja como for, um bom UX é uma das peças-chave para fidelizar clientes e
fazer com que sempre voltem em busca daquela boa experiência novamente.

711
8

1.1 Por que UX Design é importante?

Para entender a importância do UX Design, vale fazer um breve exercício.

Imagine que você recebeu no seu e-mail uma oferta de um produto ou serviço
que tenha lhe despertado interesse.

Você já conhece a loja física da marca e já até comprou com ela antes, mas a
promoção é válida apenas para as compras online.

Quando você tenta acessar o site, nota que ele demora para carregar.

Mas tudo bem, você pensa. Pela promoção, vale a pena esperar um pouco
mais.

Então, depois que o site finalmente carrega, você procura pelos itens em
oferta, mas não sabe muito bem como fazer.

A promoção não está estampada na página inicial e você sequer encontra o

botão de localizar para fazer a busca manualmente.

Também repara que nada ali é muito organizado e, de repente, cai a ficha: você
está totalmente perdido dentro de um site e não faz a menor ideia de como
achar o que precisa. Como última alternativa, procure por um telefone de
contato que deve estar estrategicamente localizado para você tirar sua dúvida,
mas nem isso.

Pronto.

Eu suspeito que, depois dessa aventura, você não só saiu da página com
“sangue nos olhos”, como nunca mais vai voltar a comprar dessa loja.

E é por isso que um UX Design é tão importante.

A velocidade de carregamento, a navegabilidade, a adaptação para

visualização nos mais variados dispositivos e a facilidade de encontrar tudo o
que precisa em poucos cliques são algumas características que podem fazer
toda a diferença nos resultados de um negócio.

E é evidente que a boa experiência do usuário está diretamente relacionada ao

aumento das suas conversões e vendas, você não acha?

Se você experimenta sensações boas em um site, não apenas finaliza uma

compra, como é levado sem perceber a explorar outras opções ali dentro e
conhecer outros produtos.

811
9

Afinal, com tudo tão eficiente e organizado, as chances de você permanecer na

mesma página são bem maiores. No fim das contas, esse diferencial talvez
seja ainda mais relevante do que o preço em si para o aumento das vendas.

Sobre isso, pense sobre os exemplos das lojas físicas. Muita gente prefere
pagar mais caro, mas ainda assim contar com o conforto de uma loja
organizada, com ar condicionado e atendimento personalizado, do que pagar
mais barato em uma feira, que apresenta pouca ou nenhuma estrutura para o
cliente. São trabalhos que, quando bem feitos, nós chamamos de invisíveis.

Você não percebe que ele foi feito quando encontra tudo o que precisa, mas,
se algo dá errado, sabe imediatamente que está faltando organização ali.

1.2 Vantagens do UX Design

Agora que você já sabe qual o significado de User Experience, vou aproveitar
para explicar detalhadamente as vantagens que esse tipo de trabalho pode
trazer.

E já adianto que não são poucas! Veja só as principais:

Mais tráfego

Um site bem construído, bonito, rápido e fácil de navegar, obviamente, atrai um

bom número de visitantes. Isso também gera uma taxa de rejeição baixa, já
que um site responsivo dificilmente vai decepcionar o consumidor logo nos
primeiros segundos de acesso.

Mais conversões

O mesmo raciocínio do item anterior vale também para as conversões.

Ora, se o usuário não encontra obstáculos de navegação, as chances de

concluir uma ação são bem maiores, seja para fechar uma compra ou
simplesmente preencher um formulário de forma rápida e prática.

Fidelidade

O cliente que tem uma boa experiência com a sua loja sempre volta.

São os pequenos detalhes que tendem a diferenciar a sua marca da

concorrência.

911
10

Menos gastos

Quanto mais funcional o seu site for, menos você precisará gastar
constantemente com melhorias, reparos e manutenção.

Além disso, um site que entrega tudo que o usuário precisa em um só lugar
dispensa a contratação de funcionários para fazer determinados tipos de
trabalhos (e de retrabalhos).

O termo UX apareceu pela primeira vez lá em meados da década de 1990.

E quem popularizou a sigla foi Don Norman, cientista da computação, e, na

época, funcionário da Apple.

Norman já sabia, mais de 30 anos atrás, que entregar ao usuário uma

experiência encantadora era um forte diferencial para conquistar sua confiança.

Como você já viu ao longo deste artigo, o trabalho do UX designer pode se

estender à experiência do usuário com diversos tipos de produtos, sejam eles
digitais, como um site, ou físicos, como um celular ou um carro, por exemplo.

No caso dos produtos digitais, não preciso nem mais dizer o quanto esse
trabalho é importante para garantir a satisfação do seu cliente, não é mesmo?

Basta lembrar do exemplo que usei alguns tópicos atrás – e que, por sinal,
acontece com mais frequência do que você imagina. É por isso que o trabalho
do UX deve ser muito bem pensado.

Então, vamos logo dar uma olhada no que um bom UX deve levar em
consideração para encantar os seus clientes.

1011
11

1.3 Os cinco elementos básicos de UX

Confira agora cinco características que não podem faltar em um bom trabalho
de UX:

1. Carregamento do site

Você sabia que 53% dos usuários de mobile abandonam um site se ele demora
até 3 segundos para carregar?

Com isso, você já consegue ter uma noção de como a velocidade de

carregamento de um site importa.

2. Search Engine Optimization

O profissional de UX também trabalha para que os sites conseguem ser mais

facilmente encontrável nas ferramentas de busca.

Afinal, a organização e a navegabilidade de um site têm tudo a ver com SEO,

que representa um conjunto de técnicas de otimização para melhorar a
experiência do usuário e alcançar os mais altos rankings no Google.

3. Adaptação a diferentes dispositivos e plataformas

A experiência do usuário também está intimamente relacionada à facilidade e

usabilidade que ele encontra em acessar o mesmo conteúdo em diferentes
dispositivos.

Até porque, hoje em dia, o celular já é a principal forma de acesso à internet

entre os brasileiros.

Em consequência, os sites que não são mobile friendly não têm nenhuma
chance.

Logo, tudo isso também deve fazer parte das estratégias de UX.

4. Produção de conteúdo

Um projeto de UX, que é a forma, também deve estar alinhado ao conteúdo.

Isso porque de nada adianta pensar em uma estrutura incrível se o conteúdo é

fraco e vazio.

1111
12

Quando a arquitetura da informação, o design e o conteúdo do projeto

conversam, encantar o usuário é uma consequência natural.

5. Visual Design

O visual do site ou produto também é um grande diferencial para atrair e

manter os usuários na página.

É por isso que existe todo um estudo sobre a harmonização dela, tamanho dos
textos e imagens, psicologia das cores, entre outros elementos.

Tudo para transmitir diversas emoções positivas aos usuários.

1.4 Como o UX é feito?

Para entendermos como é feito o UX, temos sempre de pensar em

interdisciplinaridade.

Esse é um processo complexo que envolve em sua composição um pouco de

biblioteconomia, psicologia, design, jornalismo, ergonomia, entre muitas outras
áreas.

E, também por isso, profissionais dessas áreas costumam se adaptar bem ao

campo de UX.

De maneira geral, existem ainda algumas metodologias intrínsecas à rotina de

um UX designer.

A arquitetura da informação

Determina a estrutura e a forma com que as informações serão distribuídas no

sistema.

Projeto de interação

Organiza toda a parte da interação e engajamento com o usuário, integração

com redes sociais, etc.

Fluxos das tarefas

É um esquema que mostra o passo a passo de todas as tarefas realizadas,

ajudando a deixar as ações do usuário mais fluidas.

1211
13

Wireframes

Representam de que maneira será feita a composição do site, como

distribuição de ícones, botões, entre outros conteúdos.

Wireflows

É o fluxo que traça todo o caminho que o usuário pode percorrer durante sua
jornada no site ou aplicativo, por exemplo.

Basicamente, ele mostra quais opções o usuário tem quando clica em um ou

outro ícone.

Sitemaps

É o mapa do site, um fluxograma com todos os detalhes e principais

informações das suas páginas e as relações entre elas.

O Google também adora os sitemaps na hora de fazer a indexação das

páginas, contando aí alguns pontos para quem deseja ocupar as primeiras
posições no motor de busca.

1.5 O que faz um profissional de UX?

Como já vimos até agora, um profissional de UX é aquele que se preocupa em

entregar ao usuário a melhor experiência possível ao ter acesso a um produto,
um sistema ou um serviço.

No caso de um site, por exemplo, o UX Designer, como é conhecido, vai

pensar em formas de oferecer uma página rápida, com design agradável e
responsivo, fazendo com que a navegação ali seja fácil e intuitiva.

1311
14

Assim, ele trabalha com algumas etapas essenciais, como:

● Criação de mapas de navegação

● Fluxogramas lógicos e hierárquicos
● Design agradável e harmonioso
● Testes de usabilidade do site
● Interação dos usuários com a página
● Otimização de plataformas
● Mensuração de resultados
● E muita, muita pesquisa!

Na prática, esse profissional pode criar botões, trocar ícones de lugar, inserir ou
retirar texto, determinar cores e linhas de um projeto, enfim.

O que importa é sempre a satisfação do usuário. Sempre!

Uma das principais características do UX, portanto, é a capacidade de lidar

com diferentes metodologias de áreas de atuação variadas.

Porém, mais do que qualquer outra habilidade, como ser comunicativo, criativo,
desenvolver raciocínio lógico e estar sempre antenado, é importante que um
profissional de UX tenha empatia.

Em outras palavras, que ele seja capaz de se colocar no lugar do usuário.

Só assim ele conseguirá pensar em soluções realmente efetivas, que abracem

as dores e as principais dificuldades que as pessoas têm ao navegar na
internet ou acessar qualquer outro sistema.

Para quem pretende ingressar nessa área, existem hoje cursos, leituras e
eventos voltados para o aprimoramento das habilidades necessárias a um bom
UX Designer.

1411
15

2. FUNDAMENTOS DE USER INTERFACE

Lembra do ditado “a primeira impressão é a que fica“? Essa não é uma frase
vazia. Realmente, quem está interessado em comprar um produto ou conhecer
mais sobre a sua empresa, leva em consideração o visual do site institucional.

Quando se está querendo comprar ou contratar algo pela internet, o usuário vai
prestar atenção, em primeiro lugar, na aparência do site. Portanto, quanto mais
agradável for essa primeira impressão, maior segurança ele terá para navegar,
comprar no e-commerce ou adquirir um sistema.

Em outras palavras, sem esse tipo de design, o usuário não se sentirá

identificado e seguro com a sua marca. Isso gera, portanto, uma série de
consequências negativas, como alta taxa de rejeição, perda de ranqueamento
nos motores de busca e lucros mais baixo

Falamos sobre as vantagens que o UI Design pode oferecer para os usuários.

E para a empresa? O que ela pode agregar à marca perante ao mercado?
Confira quais são as vantagens que você pode ter ao apostar nesse tipo de
estratégia:

Geração de valor: um produto mais bem acabado e que valoriza a experiência

do usuário, ganha mais valor no mercado. Empresas como Netflix e Disney têm
muito valor não só pela qualidade na produção de conteúdo, mas, acima de
tudo, no zelo com o cliente.

Fidelização: uma marca tende a ter clientes fiéis a partir do momento que ela
se sente prestigiada pela empresa. Ou seja, quando o usuário tem uma boa
experiência, percebe a preocupação da marca com ele.

Fortalecimento da marca: com valor no mercado e clientes fiéis, não tem

jeito, a sua marca vai ganhar força. Resumindo, todos vão saber quem você é,
o que vende e como trata bem os clientes.

2.1 O que é UI Design e quais são as diferenças entre ele e UX?

Quando foi fazer a pesquisa no Google por estratégias de design, certamente

apareceu essa sopa de letrinhas para você.

UX é o estudo da experiência do usuário como um todo. A partir de

informações, descobrindo as dores e necessidades do cliente, é criado um
sitemap e wireframe. Oferecendo as soluções necessárias para quem está
navegando.

1511
16

Já o UI é a parte visual do site. A partir dos estudos e das informações obtidas,

é possível escolher cores, tipografia, imagens, transições, protótipos e muito
mais. Por outro lado, com as ferramentas de design, a equipe irá dar vida ao
estudo feito previamente. É o momento, portanto, de usar todo o conhecimento
no Photoshop, Sketch, Adobe XD e outros softwares de desenvolvimento.

Um completa o outro. É como se fosse Ying e Yang. Sem a pesquisa para

identificar as dores e as necessidades do usuário, não é possível criar uma
interface voltada para ele. É como jogar futebol no escuro, será praticamente
impossível trocar passes e fazer um gol.

Em suma, o trabalho de UX é a base para o UI. Para entregar algo de

qualidade e que satisfaça o usuário, terá que trabalhar com os dois juntos.

O UI Design é uma estratégia que está sempre se reinventando. Cada ano que
passa, novas tendências surgem para a criação de sites mais agradáveis para
o usuário.

Animações avançadas e deslocamento: animações, rolagens e gatilhos são

fundamentais para o usuário interagir no seu site. Os objetos animados podem
ser usados no logotipo, por exemplo, ícones de sites e nas transições entre os
estados de objetos na interface. Uma maneira de se destacar no mercado são
com imagens em 360º e algumas animações de realidade virtual.

Voice User Interface: reconhecimento de voz e utilização da fala para

transformar em texto já é uma tendência. Essa é uma ferramenta usada em
aplicativos dos bancos e pelo Google, por exemplo. Implementando essa
técnica, você pode dar outro tipo de experiência ao seu cliente. Utilize essa
ferramenta a seu favor.

Modelação 3D e Rendering: mesmo a tecnologia 3D sendo usada há muitos

anos, ela ainda não foi 100% aproveitada. Imagina o usuário entrar no seu site
e ter uma experiência tridimensional? Isso com certeza, irá chamar a atenção
dele.

Inteligência Artificial: uma ferramenta nova no mercado e que terá ainda mais
desenvolvimento nos próximos anos. Prova disso é que o Sensei da Adobe
está tornando as ferramentas de IA mais acessíveis aos desenvolvedores web.
Use isso dentro do seu nicho e como resultado, ofereça ao seu cliente um outro
nível de experiência.

1611
17

2.2 Como é aplicado o UI Design no seu projeto

Se está nesse tópico do artigo, é porque está interessado em começar a aplicar

o UI Design no seu projeto. Confira como essa estratégia pode ser
implementada dentro de um site.

● Briefing e pesquisa de referências: para começar a criar um layout

voltado ao usuário, será necessário um material base da sua empresa,
além de uma pesquisa para conhecer o perfil do seu cliente. Em suma,
será possível criar um produto que passe e transmita os valores da
companhia.

● Planejamento da arquitetura da informação e sitemap: o seu site terá

que ser um mapa para o usuário encontrar a solução que ele precisa.
Portanto, será pensando em como montar o menu do site e o
posicionamento dos ícones. Ninguém merece passar horas procurando
pelo carrinho de compras no e-commerce.

● Construção de wireframes: antes de começar a montar o site, é

necessário montar um protótipo, indicando o tamanho das imagens,
posicionamento dos textos e muito mais.

● Prototipação, testes de usabilidade e iterações: antes de

disponibilizar o site para o usuário final, monte um protótipo e faça
testes. Em outras palavras, será possível identificar o que precisa ser
ajustado e não está funcionando 100%. Isso é fundamental para o
produto chegar prontinho para o usuário.

3. IDENTIFICAR SUAS CARACTERÍSTICAS

Convencer pessoas a criar um sonho e materializá-lo por meio de seus

produtos e serviços parece audacioso, mas é possível se o foco é a
experiência do usuário.

Neste ponto, o design está intimamente ligado ao projeto. Tanto em User

Experience (UX) quanto User Interface (UI), a excelente experiência do
usuário/cliente é a chave-mestra.

1711
18
A área de UX trata de como uma pessoa se sente enquanto usa qualquer
produto ou serviço, digital ou não, oferecido pela sua empresa e tem a ver com
a sensação dessa pessoa, depois deste uso.

Já o mecanismo que guia o usuário pelas interfaces gráficas e visuais, ou seja,

sua aplicação durante o tempo em que ele a utiliza é UI Design.

Traduzindo melhor, enquanto você visita e lê o site de alguma marca, existem

ações específicas que aquela empresa deseja que você tome neste trajeto.
Esta é a missão do UI Design, conduzir sutilmente os usuários pela navegação,
levando-os a tomar ações de forma natural.

3.1 As características de UX Design e UI Design

Existem algumas diferenças entre UX e UI. O segundo só existe com uma

parte visual, e UX não, pois, em muitos casos, a sensação do usuário com
relação à experiência de navegação não tem nada a ver com uma tela em si.

UI vai para o lado racional e UX lida com o emocional. Porém, UI e UX Design

são as metas que se completam. Se praticados com inteligência estratégica em
um site ou app, por exemplo, o primeiro guia o que o usuário deve fazer,
enquanto o segundo torna esta navegação a mais agradável possível.

De forma separada, cada um deles pode trazer bons resultados para uma
empresa, mas usar os dois em conjunto é muito mais vantajoso.

Entre os benefícios de usar UX e UI, podemos citar a geração de alto valor

para o público, maiores chances de engajamento e o fortalecimento de uma
marca. Logo, a qualidade do trabalho de UI e UX, em parceria sinérgica, é uma
poderosa arma do bem para os negócios dinâmicos e sensoriais da Era Digital.

4. COMPREENDER E APLICAR OS CONCEITOS EM PROJETOS REAIS

Para ficar ainda mais claro o conceito, vamos mostrar na prática exemplos de
user experience reais de empresas que estão preocupadas com seus usuários:

1811
19

Figura 1. Duolingo: derrubando fronteiras

O Duolingo deseja te ajudar a aprender um novo idioma, que é uma tarefa que te
desafia e pode parecer quase impossível. Após três perguntas simples, os usuários já
estão começando a aprender um novo idioma e estão com uma meta para este
aprendizado. Essa abordagem sem atrito é contrária a muitos concorrentes.

1911
20

Figura 2. Paypal: Simplicidade é a palavra-chave

Antes do Paypal lançar seu novo site em 2014, o site era bastante complexo. De lá
para cá, o Paypal está tornando cada vez mais simples o site e a experiência com
aplicativos para dispositivos móveis. Eles estão aplicando as principais leis de
simplicidade de John Maeda: redução, organização, posicionamento, criação de
contexto, adição de significado e economia de tempo.

O MailChimp dá uma cara à sua aplicação web, embora não humana. Seu mascote,
um chimpanzé chamado Frederick von Chimpenheimer IV (ou Freddie para abreviar),
aparece em toda a interface, adicionando humor, toca a boca e uma conexão
emocional com os usuários.

Essa humanização da tecnologia adiciona profundidade à experiência estéril e

francamente chata de gerenciar seu marketing por email. O aplicativo se torna menos
como uma ferramenta e mais como um membro da equipe com quem você está
trabalhando para realizar o trabalho.

2011
21

Figura 3. MailChimp: Humanizar a Tecnologia

Figura 4. Starbucks: Tornando Pessoal

2111
22
A Starbucks usa personalização inteligente em seu aplicativo móvel para pedidos
on-line, entendendo o histórico e os padrões de compra dos usuários. Os seres
humanos são criaturas de hábitos e geralmente pedem a mesma coisa repetidamente
ou alternam a partir de uma pequena lista de coisas.

Portanto, para a maioria das pessoas, é mais fácil escolher o que você deseja em uma
lista de itens encomendados anteriormente do que em um menu completo. Eu uso o
aplicativo Starbucks pelo menos uma vez por semana e raramente uso a opção para o
menu completo, olho para a guia “Em destaque” para ver se há algo novo e, em
seguida, seleciono o que quero nas “Recentes” aba.

Figura 5. Google: carregando super rápido desde 1997

O carregamento rápido sempre foi uma prioridade para o Google, em suas mais
diversas ferramentas. Mas é especialmente importante para o comércio eletrônico. Ser
rápido e eficiente ajuda os usuários a obterem o que desejam sem esperar. O site da
Google Store é carregado em pouco mais de um segundo, o que é bom porque cada
segundo extra que um usuário precisa esperar aumenta a probabilidade de sair.

A Google Store não é apenas um carregamento rápido. Também é eficiente. O

processo de checkout permite que o usuário mude sem atritos do carrinho para a
confirmação. O Google sabe se você é um usuário novo ou que está retornando,
mesmo que não esteja logado, para que não se incomode em perguntar se você é um
usuário novo / que está retornando ou se deseja se registrar / continuar como
convidado. Todas essas perguntas desnecessárias dificultam o check-out do usuário.

2211
23

Figura 6.Yelp: tudo que pode ser encontrado

O Yelp faz muitas coisas certas, as quais resultam em uma descoberta excepcional.
Primeiro, eles usam padrões inteligentes usando sua localização atual, permitindo
pesquisar e fornecer uma lista de opções pesquisadas com frequência. Na página de
resultados da pesquisa, uma combinação de análises e filtros úteis ajudam o usuário a
chegar ao destino perfeito. O Yelp também usa o Google Maps para usuários que têm
uma região geográfica específica em mente.

O mapa ajuda o usuário a refinar sua pesquisa (rosquinhas de cinco estrelas em um

raio de dois blocos). O uso do Google Maps também proporciona uma sensação de
familiaridade instantânea para a maioria dos usuários. Quem não usou o Google
Maps? Na página de detalhes do local, você pode obter rapidamente todas as
informações necessárias, incluindo horários, menus, rotas, principais críticas e dicas.
Além disso, o Yelp agora está dando um passo adiante e permitindo que você solicite
a coleta ou entrega.

2311
24

5. ESPAÇO

5.1 O que é Espaço em Interfaces?

Em sombra de dúvidas um dos aspectos principais de uma boa interface é o

espaço em branco que ela possui. Também conhecido como espaço negativo
ou espaço em branco. É um princípio que diz a respeito do espaço que você
define entre os demais elementos de uma interface.

Existem dois tipos de espaço em uma interface: O espaço macro e o espaço

micro.

Uma interface com uma boa legibilidade, usabilidade e elegância possui muito
espaço em branco. É através da aplicação de espaço que você consegue
definir com maestria, Ordem, Organização e Ênfase nos elementos de uma
interface. E essa preocupação toda com espaço é o que torna uma interface
visualmente agradável.

Provavelmente você conhece aplicativos como:

Nubank

Gmail

Instagram

Todos esses aplicativos possuem um ótimo trabalho de espaçamento.

É evidente que cada um desses aplicativos possui uma preocupação com o

espaçamento entre os elementos. Cada grupo de elementos está organizado e
espaçado de uma maneira consistente e agradável. Esse cuidado todo é o que
dá uma cara mais “chique” para a sua interface.

5.2 Os dois tipos diferentes de espaço em uma interface

Existem dois principais tipos de espaço:

Espaço micro

Espaço macro.

Espaço micro diz a respeito do espaço interno dos elementos de uma

interface assim como esse formulário:

2411
25

Já o espaço macro diz a respeito do espaço entre grupos de elementos

conforme você pode ver no exemplo abaixo.

É através da manipulação do espaço macro e micro que é possível melhorar a

legibilidade e hierarquia de uma interface.

Estes espaçamentos não podem ser aleatórios. Você precisa definir uma regra
clara e consistente de cada um desses espaçamentos.

2511
26

Assim você garante que a sua interface ficará organizada, consistente e elegante.

5.3 Espaço em interfaces

Ao manipular o espaçamento dos demais elementos de uma interface é

possível organizar e priorizar o que realmente é importante.

E é através das regras de espaçamento que a nossa mente consegue

diferenciar os diferentes elementos em uma interface.

Vamos a um exemplo… Observe esse grid de retângulos:

2611
27

Claramente você consegue identificar que isso tudo faz parte de um grupo só.

Agora veja o que acontece se eu adicionar um pouco mais de margem lateral

entre esses elementos.

Agora são vários grupos de colunas ao invés de um grande grupo alinhado.

Esse é o poder do espaçamento.

De acordo com a Gestalt, nós percebemos diferentes elementos através de sua

proximidade.

E isso por si só está muito relacionado à espaço em uma UI.

Conforme você aproxima ou afasta os diferentes elementos em uma interface

você estará dando forma e função a estes elementos.

No exemplo do formulário no início do artigo o label está a exatamente 4 pixels

de distância do campo de formulário.

2711
28

Essa proximidade faz com que o label pertença a este formulário e indique
sobre o que se trata.

Essa é uma aplicação de espaço MICRO (vamos falar mais sobre isso em
breve).

Agora veja o caso contrário…

Se você afastar demais a label será praticamente impossível entender que

esse elemento pertence ao formulário.

2811
29

Agora veja este outro cenário: Ajustar o espaçamento de um grupo de

formulários.

O espaço entre cada grupo não pode ser nem muito pequeno nem muito
exagerado.

Se você se distanciar demais automaticamente você estará acabando com a

relação de proximidade destes elementos.

Com o ajuste certo de espaço você mostra que todos aqueles formulários
fazem parte de um grupo específico.

É através do espaço em uma interface que você agrupa, aproxima e distancia

elementos que fazem parte de um determinado grupo.

Em um exemplo mais “macro” veja como um bom espaçamento faz a

diferença:

Observe a quantidade de textos, instruções e botões que essa home possui.

É muita coisa para o usuário prestar atenção ao mesmo tempo.

2911
30

5.4 Espaço em excesso

A interface do Google Analytics possui muitos dados a serem lidos.

A aplicação de espaço micro e macro facilita muito a legibilidade dessa

interface.

Mas nem sempre foi assim… Observe como essa interface era quando não
existia uma preocupação com espaço, hierarquia visual.

3011
31

Observe a quantidade de informações esmagadas e mal espaçadas nesta

versão antiga. Muitos pesos tipográficos chamando atenção demais… Falta de
espaço micro e macro e por aí vai. Agora volte e olhe a imagem da interface
atual do Google Analytics.

Percebe o preocupação com espaçamento, hierarquia visual, tipografia e

cores? É bastante evidente.

5.5 3 maneiras de ajustar a quantidade de espaço em uma interface

Maneira 01: Padding (Preenchimento)

O padding diz a respeito do espaço INTERNO de um elemento.

Em um botão é o espaço interno das laterais e altura, assim como na imagem

abaixo:

3111
32

Você poderá ajustar e definir um padrão para a altura e largura do padding de

um elemento.

Cuidado ao usar padding horizontal fluido.

A fluidez (ou padding lateral automático) é uma tag de CSS que deixa
automático o preenchimento lateral de um botão. Nem sempre essa opção vai
funcionar bem.

Será que é realmente necessário ter um botão tão largo neste formulário?
Vamos ajeitar…

Maneira 02: Margin (Margens)

A margem de um elemento está diretamente relacionada com a manipulação

do espaço macro.

Vamos voltar ao exemplo dos formulários. Observe os componentes

destacados e perceba que todos eles possuem uma regra de margem.

3211
33

Todas as margens entre os elementos estão consistentes assim deixando a

interface mais usável e organizada.

Maneira 03: Line Height (Altura de linha)

Bom, a altura de linha é uma maneira bem mais intuitiva de realizar um ajuste
de espaço.

Veja o texto abaixo:

3311
34

legibilidade de um texto longo e com pouco espaçamento é terrível

Quando você aumenta o espaçamento entre linhas você melhora a legibilidade.

Mas ainda assim… Esse texto tem linhas longas demais, isso pode dificultar
um pouco a leitura, que tal se diminuirmos um pouco?

Na web é interessante ter textos com linhas mais curtas, dessa maneira você
facilita a legibilidade.

6. ALINHAMENTO

6.1 Alinhamento vertical

O alinhamento vertical ocorre quando você alinha um ou mais elementos com

base em uma linha invisível no topo, centro ou parte inferior de um elemento ou
grupo de elementos em uma interface.

No exemplo abaixo você pode ver em detalhes como funciona:

3411
35

Esse tipo de alinhamento facilita a legibilidade e organiza um determinado

grupo de elementos na sua interface.

Porém, nem sempre você conseguirá criar esse efeito com tanta precisão, em
alguns momentos a parte inferior do seu grupo de elementos talvez fique maior.

Perceba que no exemplo acima eu escolhi alinhar somente o topo e centro do

card, dessa forma os elementos ainda ficam legíveis.

3511
36

6.2 Alinhamento horizontal

Sem muito mistério nesse tipo de alinhamento, vamos analisar o exemplo

anterior porém agora com uma nova seção de elementos.

Alinhei os 3 novos cards com base na linha invisível no lado esquerdo e direito
dos cards superiores.

Você pode seguir essa mesma ideia para alinhar vários outros elementos no
lado esquerdo ou direito da sua interface.

3611
37

Aqui está um exemplo de como um usa o logo de uma landing page para
alinhar os títulos de cada seção.

Observe a linha invisível que o logo cria assim possibilitando um alinhamento

organizado à esquerda.

3711
38

6.3 Alinhamento superior e inferior

Alinhe no topo ou inferior quando a altura dos dois elementos forem

drasticamente diferentes.

No exemplo abaixo eu coloquei dois títulos de dois textos diferentes, ambos

alinhados de maneira inferior.

O ideal é sempre ter certeza que as linhas invisíveis estão alinhando os

elementos de maneira correta.

6.4 Alinhamento centralizado vertical

Em alguns casos o alinhamento no topo ou inferior não funcionará tão bem. Um

exemplo clássico disso é o alinhamento dos botões de um menu superior
Nesse caso eu costumo alinhar os elementos de maneira centralizada.

3811
39

Dessa maneira os elementos ficam organizados e bem distribuídos.

Outro detalhe interessante, perceba que existem 2 grupos de elementos no

print anterior: o logo e os botões.

O logo está alinhado na extremidade esquerda e o grupo de botões está

alinhado na extremidade direita, aqui está outro exemplo de alinhamentos
verticais, vou explicar melhor sobre isso agora.

6.5 Alinhamento horizontal na esquerda e direita

Sempre quando você for criar uma interface seja ela mobile ou desktop você
precisará definir uma largura máxima (max-width) e uma margem (margin),
você poderá fazer isso através de um sistema de grids.

Definir uma largura máxima ajudará você a alinhar os elementos de uma interface
conforme no exemplo anterior.

Não existe um valor certo ou errado, desktop eu costumo usar 1366px e 200px de
margem

Alinhamento centralizado horizontal

Esse tipo de alinhamento funciona muito bem quando existem poucos elementos a
serem alinhados.

Um bom exemplo disso é uma quebra de seção com uma chamada e botão de ação.

3911
40

Esse tipo de alinhamento funciona bem, porém não abuse dele. Se você criar toda
uma interface alinhado ao centro e horizontal ficará algo meio monótono.

Outro detalhe importante sobre esse tipo de alinhamento é que a legibilidade é um

pouco menor. Isso acontece porque nós estamos acostumados a ler da esquerda para
a direita. Ou seja, utilize esse tipo de alinhamento somente quando houver pouco texto
e poucos elementos.

Alinhamento de objetos e textos

Aqui vai um micro detalhe porém muito importante.

Quando você for alinhar um ícone + texto procure alinhar os ícones de maneira
separada, não inclua eles logo após o texto.

Esse mesmo exemplo também se aplica em qualquer outro elemento que dá suporte a
um texto.

4011
41

Alinhamento ótico

Quando você trabalhar com formas orgânicas você perceberá que o

alinhamento automático do software talvez não faça muito sentido.

Isso acontece porque o peso de uma forma orgânica é percebida de forma

diferente por nós.

Nesses casos é recomendado que você faça um ajuste visual e deixe o

elemento alinhado de maneira ótica.

6.6 Alinhamento de elementos, grupos e seções em interfaces

Uma interface é composta de diversos elementos únicos, grupos de elementos

e seções.

Em alguns casos você misturará diferentes tipos de alinhamentos em uma

única seção ou grupos.

Ou seja, você poderá combinar diferentes tipos de alinhamentos em uma única

seção ou grupos de elementos.

4111
42

Alinhamento de textos em interfaces

Evite usar alinhamento justificado em interfaces. Esse é um erro bem comum,

alinhamento justificado pode até parecer legal, mas não é. Justificar um texto
em interfaces causa muitos caminhos de rato e deixa o texto praticamente
ilegível.Procure sempre que possível alinhar corpo de texto à esquerda.Nós
estamos acostumados a ler da esquerda para direita.

Isso por si só já melhora absurdamente a legibilidade de um texto em uma

interface.

Alinhamentos ao centro e direita são utilizados somente em momentos

específicos e detalhes.

Desmistificando GRIDS

Um grid é nada mais nada menos que um sistema de organização e

alinhamento.

Inconsciente (ou conscientemente) você possui um sistema de organização

dos objetos da sua mesa, ou seja, um grid.No mundo do Design de Interfaces
um grid é como se fosse o esqueleto da sua interface.

4211
43

O principal uso de um grid é definir uma regra de organização e alinhamento

dos diversos elementos que uma interface possui.

Um grid de interface é composto por 3 elementos:

● Colunas
● Gutters
● Margens

Grids de interfaces digitais não necessariamente possuem linhas horizontais

(rows).

Isso se deve ao fato de que não existe um controle 100% exato da altura e
largura de uma tela.

No mundo das interfaces existem milhares de tamanhos de telas e você

precisará sempre levar isso em consideração ao criar uma interface.

Todas as interfaces que você criar vão precisar se adaptar conforme o tamanho
da tela do usuário. Ou seja, é praticamente impossível você definir uma regra
clara quanto à altura e largura de todas as interfaces do mundo.

Grids em interfaces digitais é um assunto que pode chegar a níveis mais

complexos de cálculos, breakpoints e responsividade adaptativa.

Se você está iniciando agora não se preocupe.

Você não precisa quebrar a cabeça tentando dominar todos esses cálculos e
mínimos detalhes.

Foque em alinhamento e não em GRIDS

O que você realmente precisa aprender é sobre alinhamento. Ao invés de focar

em tentar entender como os grids funcionam, foque em aprender a alinhar
elementos com base em uma estrutura simples de grid.

Existem 2 simples estruturas de grids que eu gosto muito de utilizar:

A estrutura de 3 linhas

Essa estrutura consiste em criar 3 linhas guia na sua interface.

Uma no canto direito com uma pequena margem de 30px uma no centro e
outra no canto esquerdo também com 30px.

4311
44

Essa estrutura serve tanto para mobile quanto desktop, veja como funciona no
exemplo abaixo:

Utilizei essa simples estrutura para alinhar os demais elementos da minha

interface.

Sem estresse e sem cálculos complexos, somente 3 linhas que servem como
estrutura.

A estrutura de 12 colunas

Essa estrutura é utilizada especificamente para interfaces desktop.

Primeiro crie um frame novo com o tamanho de 1260×2500 e defina um grid

com as seguintes especificações:

● 12 Colunas
● 70 Width
● 30 Gutter

Alinhado ao centro

Essa é uma estrutura bastante versátil e fácil de utilizar.

Grande parte dos desenvolvedores front-end já estão acostumados a trabalhar

com essa estrutura, o que facilita ainda mais o fluxo de trabalho.

4411
45

4511
46

7. CONSISTÊNCIA E PADRÕES

A quarta das dez heurísticas de Jakob Nielsen — consistência e padrões — é a

chave para criar aplicativos que façam sentido para os usuários. Pense nos
sites e aplicativos que você usa: todos eles dependem de convenções bem
estabelecidas. O texto sublinhado em azul é clicável, o ícone do carrinho de
compras mostra os itens que você planeja comprar, o logotipo do site está no
canto superior esquerdo, um ícone de lupa significa pesquisa - todos esses são
exemplos de convenções usadas o tempo todo em produtos digitais e que
facilitam a vida dos usuários.

Defender a consistência e os padrões pode parecer que estamos pressionando

para que todos os aplicativos tenham a mesma aparência e ajam da mesma
forma , mas esse não é o caso. Em vez disso, quando sites e aplicativos
aderem aos padrões, os usuários sabem o que esperar, a capacidade de
aprendizado aumenta e a confusão é reduzida.

Um Continuum de Consistência

Para serem fáceis de aprender e usar, os sistemas devem aderir à consistência

interna e externa - eles devem usar os mesmos padrões em todos os lugares
dentro do sistema e também devem seguir convenções específicas da Web, da
plataforma e do domínio.

Consistência interna

A consistência interna refere-se à consistência dentro de um produto ou família

de produtos, seja em um único aplicativo ou em uma família ou conjunto de
aplicativos.

Uma família de produtos refere-se a vários produtos, vendidos individualmente

ou em grupo, produzidos pela mesma empresa sob a mesma marca. A maioria
dos conjuntos de aplicativos listará os componentes de menu na mesma ordem
( File , Edit , View e assim por diante) ou usará ícones consistentes para as
mesmas funções em todos os aplicativos e layouts familiares para caixas de
diálogo e modais.

4611
47

As muitas camadas de consistência no Microsoft Office: Além da consistência

nos ícones de aplicativos, janelas iniciais e menus principais, o Microsoft Office
utiliza uma faixa de opções em seus produtos que é usada para realizar tarefas
em cada ferramenta. Embora a faixa de opções seja contextual com base em
qual produto está em uso no momento, uma tarefa pode ser concluída da
mesma maneira em todos os produtos. Por exemplo, um usuário pode
personalizar o texto da mesma maneira no Word (superior), Excel (meio) e
PowerPoint (inferior).

A consistência interna em um único produto ou aplicativo pode ser vista com

frequência nas cores e nos layouts de página usados. Por exemplo, um
aplicativo pode usar laranja como sua cor primária, que é então aplicada a
todos os links de texto e botões primários. Ele também pode utilizar modais
projetados com o botão principal à direita e os botões secundários à esquerda.

Adobe Acrobat: O Acrobat utiliza menus contextuais para dar suporte a

diferentes tarefas, mas cada menu segue o mesmo layout e design.

4711
48

7.1 Consistência externa

A Lei de Jakob afirma que as pessoas passam a maior parte do tempo em sites
que não o seu, o que significa que elas trazem suas expectativas de outros
sites quando visitam seu site. Os contextos e os tipos de usuário variam em
cada site, portanto, ainda há espaço para adaptação e ajuste, mas a maioria
das interações deve ser consistente com o que as pessoas esperam. Ao
projetar seu aplicativo, concentre-se em ajudar os usuários a atingir seus
objetivos da forma mais eficiente possível, em vez de criar uma interface não
convencional que as pessoas precisarão descobrir.

Por exemplo, um padrão em design de navegação é o link da página inicial .

Ele fornece um caminho fácil de volta para a página inicial do seu site,
independentemente de onde um usuário esteja atualmente em seu site. Você
provavelmente pode imaginar onde esse link normalmente reside em um site
apenas por mencioná-lo.

Vários exemplos de consistência externa podem ser vistos em sites de

comércio eletrônico ao comprar produtos. Existem diretrizes para visualizar um
produto , salvar um item para mais tarde e adicionar um item ao carrinho de
compras , para citar alguns. Essas diretrizes transcendem os tipos de usuários,
fornecendo padrões que podem ser aplicados a qualquer site de comércio
eletrônico.

Navegação de utilitários de comércio eletrônico : Apesar dos diferentes setores

representados nas capturas de tela acima (IKEA, Target, Etsy e Grainger),
esses sites de comércio eletrônico seguem os mesmos padrões de navegação
de utilitários. Uma barra de pesquisa proeminente, acesso fácil à conta e um
carrinho de compras claro são exibidos de maneira semelhante.

4811
49

7.2 Camadas de consistência

Há várias camadas de consistência a serem consideradas ao projetar seu

aplicativo. Ao projetar ou avaliar seu site, tente manter a consistência em cada
uma das categorias a seguir.

Visual

Os símbolos, iconografia e imagens usadas devem ser consistentes em todo o

site. Se você estiver usando imagens, certifique-se de que todas elas recebam
um tratamento visual semelhante. Por exemplo, a cor e o peso da borda devem
ser consistentes em todas as imagens na página do produto.

Ao escolher símbolos ou ícones para representar ações, selecione ícones que

se alinhem com a forma como outros sites representam o mesmo conceito. Por
exemplo, use a lupa padrão para pesquisa, para que os usuários a reconheçam
facilmente.

AllRecipes.com oculta a navegação principal atrás de um ícone de menu (que é

um padrão de design que não recomendamos na área de trabalho ). No
entanto, em vez do menu sair da esquerda quando clicado, como é típico nesta
convenção, ele é exibido em um modal. No desktop, os modais são
comumente associados a inscrições em boletins informativos e ofertas
especiais; portanto, os usuários podem descartá-lo imediatamente sem
perceber que devem usar o modal para navegar até o conteúdo desejado.

4911
50

7.3 Layout de página e botão

Você provavelmente terá vários tipos diferentes de páginas em um site, mas há

componentes que permanecerão consistentes nas páginas. Pense nas
semelhanças e diferenças entre as páginas. Por exemplo, como uma página de
produto difere de uma página de atualização de pedido? Há estilos e elementos
que você pode reutilizar, como títulos, botões de apelo à ação e navegação.
Decida onde esses elementos ficarão e torne-os consistentes em todas as
páginas, sempre que aplicável.

Garanta a consistência no posicionamento dos campos e botões do formulário,

especialmente para formulários de várias páginas ou assistentes. Você
colocará a frase de chamariz à esquerda e o botão Cancelar à direita ou
vice-versa? Como você designará os campos como obrigatórios?
Independentemente das respostas a essas perguntas, certifique-se de que
cada formulário no site seja projetado da mesma maneira.

O processo de check-in de consulta da Sutter Health inclui o preenchimento de

um formulário de várias páginas, que coleta informações sobre pagamento,
alergias e problemas de saúde. O botão Concluir mais tarde está localizado à
direita do botão de ação principal na primeira e na segunda captura de tela,
mas muda de posição à esquerda da ação principal na terceira captura de tela.
Essa inconsistência de layout facilmente faz com que os usuários pressionem
acidentalmente o botão Concluir mais tarde em vez de enviar o formulário e
fiquem confusos ao descobrir que não fizeram check-in para seus
compromissos.

5011
51

7.4 O Impacto da Consistência

Os benefícios da consistência vão além de ter uma interface de usuário bem

projetada para seu aplicativo.

Atenda às expectativas do usuário

Quando os usuários encontram seu produto ou serviço, eles trazem consigo

suas próprias expectativas de experiências anteriores. Quando essas
expectativas são atendidas, a confiança é construída e eles sentirão domínio
sobre a interface .

Os balcões de check-in geralmente estão localizados na frente dos hotéis. A

ação que os clientes realizam ao entrar em um hotel pela primeira vez é fazer o
check-in em seu quarto. Essa consistência de ter um balcão de check-in
próximo à porta de entrada atende às expectativas dos clientes.

5111
52

Curvas de Aprendizagem Inferiores

Os usuários devem poder transferir seu conhecimento usando outros sites e

aplicativos, o que diminuirá sua curva de aprendizado ao interagir com um novo
site. Não sinta que precisa reinventar a roda quando se trata de projetar
componentes comuns, como notificações , modais, menus suspensos e assim
por diante.

Se o seu site apresentar esses componentes da mesma maneira que a maioria

dos outros sites, quando as pessoas chegarem ao seu site, elas saberão como
interagir com eles. Quando eles não precisam aprender novas interações, seu
foco estará inteiramente no conteúdo, nas mensagens e nos serviços que você
está oferecendo. Alternativamente, quando você faz algo diferente por ser
chique, as pessoas ficam confusas e podem acabar saindo e encontrando
outra coisa que satisfaça suas necessidades.

8 HIERARQUIA VISUAL

A Hierarquia visual é o princípio de organizar os elementos para mostrar sua

ordem de importância, distribuindo-os de forma lógica e estratégica para
influenciar as percepções dos usuários e os orientar para as ações desejadas.

De modo geral, é a hierarquia visual que determina quais elementos receberão

atenção do usuário, atraindo seus olhos diretamente para o foco desejado no
momento correto.

Isso pode acontecer para incentivar inscritos em newsletters, promover algum

conteúdo específico, destacar um produto novo ou até mesmo guiar uma
sequência de ações em uma aplicação ou cliques em call to actions (CTAs).

Outro fator relevante é a experiência do usuário. Na construção de um layout

responsivo, deve sempre ser levada em conta uma visita agradável e intuitiva,
fazendo com que o usuário realmente goste de fazer o que é pedido.

“A hierarquia visual controla a entrega da experiência. Se você tiver dificuldade

em descobrir onde olhar em uma página, é mais do que provável que seu
layout não tenha uma hierarquia visual clara.” – Grupo Nielsen Norman.

Objetivos da hierarquia visual

Na prática, o cuidado com o design e o estudo da hierarquia visual tem 3

funções básicas que devem ser levadas em conta:

5211
53

Orientação:

Construir um layout pensando em conduzir o usuário de ação em ação, sem

que ele se sinta pressionado ou forçado a navegar.

Comunicação:

criar links na mente do usuário com o intuito de diminuir a carga cognitiva que
ele recebe, diminuindo o seu esforço para achar informações e o caminho que
deve trilhar.

Impacto emocional:

sua aplicação deve conter elementos que envolvam o usuário de forma que ele
se conecte com o conteúdo e as ações, tornando sua experiência divertida e
mais leve.

8.1 Os princípios da hierarquia visual

Para auxiliá-lo em seu design, existem algumas regras de ouro nas quais você
deve ficar atento:

1. Tamanho e escala: elementos maiores são mais importantes.

2. Cor e contraste: cores vivas se destacam mais do que cores escuras.
3. Tipografia: o tamanho e o tipo de fonte proporcionam diferenciações e
destaques.
4. Proximidade: separa os elementos uns dos outros e cria sub-hierarquias.
5. Espaço em branco: torna mais fácil a visualização.
6. Alinhamento: cria ordem entre os elementos.
7. Repetição: atribui significado em relação aos elementos.
8. Linha principais: guiam o olhar.
9. Regra dos terços: imagine a tela dividida em 9 quadrados (como um
jogo da velha) e descentralize o objeto, colocando-o na intersecção das
linhas.

Estude cada um dos princípios e entenda que você não precisa (e às vezes
não deve) utilizar todos eles ao mesmo tempo, mas sim, analisar o design de
acordo com suas necessidades, aplicando o que cabe em cada caso.

5311
54

Ao lado direito, post it mostrando uma má hierarquia visual, onde o texto do site
não possui distinção de tamanho, fonte ou espaçamento. Já na imagem ao
lado mostra uma boa hierarquia visual, seguindo um grid (regra dos terços) e
diferenciando a fonte dos títulos para o restante do texto.

Para facilitar a compreensão e o seu trabalho, vamos abordar mais

profundamente 3 dos aspectos mais importantes para que você dê o start que
seus projetos precisam.

Hierarquia tipográfica

O texto está presente em grande parte das interfaces que se relacionam com o
usuário e é por isso que ele desempenha um papel fundamental quando
falamos de hierarquia.

Sabendo disso, talvez você pense “então é só colocar tudo grande e pronto,
terminei o trabalho?” Bom, não funciona dessa forma. Para dar ênfase e
importância precisamos trabalhar com várias características do texto além do
tamanho. É uma mistura de tamanho, estilo, peso e cor que vão influenciar no
resultado final.

Além disso, para definirmos isso da melhor maneira para o usuário, é preciso
ter atenção nos diferentes tipos de elementos contidos em um texto, que vão
desde o título, subtítulo, parágrafos, captions, citações, entre outros.

Crie uma ordem que faça sentido para o conteúdo, é aí que teremos os
diferentes níveis de importância, fazendo o usuário compreender por onde ele
começa a escanear os elementos.

5411
55
Dessa forma garantimos a eficácia da transmissão da mensagem e isso reflete
diretamente na experiência e relação do usuário com o produto.

Hierarquia com cores

A cor contribui bastante para a hierarquia como um todo. As cores possuem

sua própria hierarquia, isso quer dizer que um preto ou um azul escuro
chamam menos atenção se comparados com tons claros, tal como amarelo e
tons pastéis. Cada cor tem um peso diferente na interface e é o seu bom uso
que irá garantir a hierarquia ideal.

Hierarquia com tamanhos

Ao trabalhar em uma interface com tamanhos, temos a necessidade de ter um

cuidado para não exagerar ou achar que o fato de um elemento estar grande é
o suficiente para uma boa hierarquia. É necessário haver harmonia na
composição para que os elementos não sejam desproporcionais.

Tenha em mente que, embora o grande seja mais perceptível, isso nem sempre
é o melhor. O título, por exemplo, não é mais importante que o texto, mas ele
ser visto primeiro norteia o entendimento sobre o assunto abordado. Vale
destacar que elementos maiores favorecem o clique e merecem cuidado
dobrado, sobretudo em dispositivos mobile no qual as telas são menores e
precisamos usar os dedos para completar as ações.

Essa hierarquia pode influenciar, nas formas, objetos e tipografias. Veja na

Netflix, por exemplo, o tamanho define a relevância dos filmes, dando ênfase
aos filmes originais do streaming.

Outro princípio importante relacionado a esse conceito é a escala, relacionada

ao tamanho de um objeto em relação a outro. Um único objeto, não importa o
quão grande ou pequeno seja, não tem escala até ser comparado a outro. Isso
nos permite criar equilíbrio em um design e foco nos elementos dominantes.
Quanto maior a escala de diferença, maior a ênfase.

Execução e testes

Destacamos 3 elementos que são os principais e mais recorrentes em

interfaces, prestar atenção neles nos auxilia a ter uma boa hierarquia, mas é

5511
56
necessário que você leve em conta todos os aspectos na construção de seu
site ou aplicativo.

Ao desenvolver soluções, faça testes A/B e use ferramentas que auxiliam na

análise do comportamento, como o Hotjar, que representa visualmente como
os usuários interagem com seu site. Não tenha medo de falhar e entenda como
funciona a mente de seus clientes, cada situação é única e demanda
estratégias personalizadas.

Definir uma hierarquia ideal auxilia no bom posicionamento da sua marca e de

seu negócio. Vale lembrar que tudo em uma interface é importante e essa
organização apenas fornece a importância que você precisa, no momento
correto.

9 USABILIDADE

Usabilidade é um termo muito utilizado para definir o grau de facilidade que as

pessoas têm ao utilizar, por exemplo, ferramentas, sites ou até mesmo
produtos. Seu objetivo é entender se o usuário consegue localizar as funções e
compreender como tudo funciona rapidamente e, caso seja identificado algum
problema, os erros são estudados e corrigidos.

Entra ano, sai ano, tendências surgem, tendências somem e um termo

continua em alta: a usabilidade. Mas você sabe por que ele nunca sai de

Esse campo de estudo toma conta das melhores práticas para atender às
necessidades do usuário.

O usuário, por sua vez, tem hábitos e costumes mutáveis e moldados pelas
novas tecnologias. Logo, a usabilidade precisa se adaptar. Estudá-la é o
mesmo que compreender o desejo das pessoas e realizar ajustes para melhor
atendê-las em questões de tecnologia.

5611
57

Usabilidade é o termo utilizado para se referir à facilidade com que os usuários

lidam com uma ferramenta. Em outras palavras, é a maneira com a qual um
dispositivo ou funcionalidade tecnológica é aplicado para o cumprimento de seu
objetivo.

A usabilidade abraça as interações entre seres humanos e computadores,

simplificando as atividades para as quais foram criados por meio de noções de
ergonomia.

Ou seja, falamos sobre a capacidade de uso da interface de um programa de

computador, aplicativo, website ou outro elemento que aceite comandos diretos
de uma pessoa. Para que algo seja útil, precisa ser simples e prático. Afinal,
você não quer que o usuário quebre a cabeça para realizar ações teoricamente
descomplicadas. Ao falarmos em uso de softwares e marketing digital, a
dificuldade em aplicar uma função pode ter consequências desastrosas. O mau
uso do programa, o fechamento da aba do blog, a má impressão da marca.
Mas há muito mais por trás do conceito de usabilidade.

Quando você acessa um site na internet, deve saber que, ao clicar no logotipo
localizado no canto superior direito, será redirecionado à página inicial, não é
mesmo?

Essa percepção foi adquirida ao longo do tempo e modificada de acordo com

os padrões de usabilidade na web.

Hoje, esse é o local ideal para inserir um link direto para a home page, mas
somente porque os usuários se acostumaram com essa prática.

Esse é um belo exemplo para entender que, mesmo que você não saiba, se
beneficia da usabilidade todos os dias. Você já se perguntou o porquê de
hesitar toda vez que vê um ícone marcado com a cor vermelha?

Experiências e convenções.

O mesmo ocorre com um botão em uma rede social, uma ação em uma loja
virtual ou o envio de uma mensagem em um aplicativo de mensagens. As
cores exercem uma influência direta, mas não se trata apenas delas. É a
usabilidade que visa oferecer a melhor e a mais rápida experiência possível.

Para isso, faz uso de componentes como intuição, memorização, aprendizado

e experiência do usuário, hoje um conceito tão em alta.

E vale dizer ainda que ela sempre tem como objetivo fazer com que esse
usuário realize a tarefa desejada, sem precisar pensar ou testar muitas vezes.

5711
58

9.1 Como e onde é aplicado o conceito de usabilidade

Se você utilizar o termo “usabilidade” em seu caráter natural, poderá aplicá-lo

em qualquer área. Vou dar um exemplo bem básico para que entenda isso
melhor. Quando você compra um liquidificador, precisa que ele seja fácil de
usar. Por conta disso, sua função mais básica (triturar) é acionada por meio de
um grande botão redondo ao centro do aparelho.

Por outro lado, funções extras como auto-limpeza e picar, têm botões laterais
menores. Ao mesmo tempo, os números 1, 2 e 3 indicam velocidades de giro
cada vez maiores da hélice. Você provavelmente não precisaria ler o manual
para saber de cada uma dessas informações, não é mesmo?

Isso porque é aplicado o conceito da usabilidade em basicamente tudo,

incluindo brinquedos, livros ou roupas. Entretanto, esse termo ganhou muita
força no ambiente tecnológico. Por causa disso, é aplicado toda vez que você
precisa interagir com uma interface digital. Isso ocorre em softwares, em sites,
em aplicativos, em videogames e em outros tipos de ferramentas e
dispositivos. Ou seja, tem a função de fazer com que uma pessoa manuseie e
interaja facilmente com qualquer ligação entre sistemas.

Quando alguém desenvolve um projeto, o faz esperando que ele seja aplicado
por outras pessoas.

No entanto, há uma relação desproporcional aí: enquanto o grupo de

desenvolvedores é pequeno, o público pode abranger milhões de pessoas.
Cada uma delas pode ter um nível de dificuldade diferente na aplicação, o que
exige que mesmo o maior deles seja atendido pelo projeto.

Portanto, para que haja uma boa aderência, é necessário que seja fácil de usar
e funcional, concorda?

O usuário não pode dispor de horas de treinamento ou estudo apenas para

compreender os principais recursos do projeto. Quanto mais rápido o
aprendizado, melhor será sua experiência. E, caso a interface utilize
experiências gerais de consumidores com a interface para melhorar as
interações, ótimo.

Vamos pegar como exemplo uma das empresas que mais crescem no Brasil, a
fintech Nubank.

Um dos grandes diferenciais do banco é justamente a facilidade nas operações

e usabilidade do aplicativo.

5811
59

Geralmente qualquer ação é realizada com, no máximo, três toques. Além

disso, são realizados updates regulares. Para isso, a organização recolhe
dados de usabilidade, levando em consideração o comportamento do
consumidor na plataforma e pesquisas de mercado realizadas com frequência.

Isso assegura que os usuários vão ficar satisfeitos com o serviço e serve como
estratégia de fidelização.

9.2 Benefícios da usabilidade

Para que um sistema seja utilizável, as pessoas precisam ser capazes de

aprender a manipulá-lo com facilidade.Isso significa que deve ser intuitivo,
prático e exigir o menor número possível de interações para a realização do
objetivo.

Por exemplo, se o seu negócio é um software de gestão financeira que facilita

a emissão de notas fiscais, essa ação deve ser realizada em poucos cliques.
Isso não significa que todas as outras atividades não necessitem de clareza.
Muito pelo contrário, pois a usabilidade facilita qualquer que seja o objetivo de
quem a utiliza.

Em outras palavras, você não deve depender da experimentação para que o

usuário entenda como interagir com a plataforma.

Facilidade de memorização

Depois do impacto do primeiro uso, o usuário deve lembrar facilmente como

utilizar a interface do produto. Ou seja, mesmo que ele retorne após algum
tempo, sua navegação deve ser guiada pelas experiências do passado.

Um bom exemplo de uma aplicação cuja memorização é facilitada é a Netflix.

Muitas pessoas ficam meses sem acessá-la, mas conseguem facilmente

navegar e encontrar filmes e séries por conta de suas memórias e do design
intuitivo.

Educação gradual do usuário

Você sabia que uma plataforma como o Facebook recebe atualizações diárias?

Pode parecer complexo, mas é absolutamente necessário. Se observamos

uma versão da rede social há dois anos e compará-la com a atual,
provavelmente, teríamos bastante dificuldade em utilizá-la. Com isso, quero
dizer que a usabilidade também educa o usuário, mostrando a ele caminhos
mais fáceis para realizar seus objetivos.

5911
60

Ao modificar completamente a interface de um item, há grandes chances de

causar estranheza e até rejeição.

Baixa taxa de erros

Eu já citei algumas vezes que a grande razão pela qual devemos aplicar a
usabilidade é a melhoria da experiência do usuário. Isso quer dizer,
obviamente, que as funcionalidades da sua ferramenta devem conter uma
baixa taxa de erros.

Links quebrados, funções defeituosas e crashs são muito comuns em

dispositivos tecnológicos. Comuns, mas não aceitáveis. Uma boa maneira de
identificar para eliminar é por meio da monitoração do comportamento do
usuário.

Se uma grande quantidade de pessoas abandona o sistema em uma

determinada página, por exemplo, há grande chances de existir algum
problema por lá.

Navegação

Embora sejam vistos como elementos separados, a navegação e a usabilidade

são interdependentes. Em um website, por exemplo, o usuário deve ter sua
navegação facilitada pela estrutura das informações. Menus, links e páginas se
comunicam e permitem a fluidez na caminhada do internauta.

A pessoa deve chegar ao seu objetivo em poucos cliques e sem precisar forçar
a vista para encontrar os botões corretos. Lembre-se disso e o usuário
agradecerá.

Simplicidade

Acredite, houve um tempo em que os mecanismos de buscas tinham mil e uma

funções, todas elas agregadas em menus verticais. Ao passar o mouse sobre
eles, novas opções eram abertas. Era simplesmente um caos, embora não
parecesse na época, por razões de costume.

Hoje em dia, por mais versátil que seja a sua ferramenta, ela deve ser simples.

O exemplo mais clássico disso é quando você acessa o Google.

Na página inicial, há uma única caixa para que seja realizada a pesquisa,
principal funcionalidade da plataforma. Opções mais avançadas estão à
distância de um clique, mas dispostas de maneira amigável.

6011
61

Tempo de carregamento

Quando falamos em usabilidade, não há como ignorar o tempo de

carregamento de uma página. Afinal, o usuário está a apenas um clique de
distância da saída. Para mantê-lo satisfeito, suas páginas devem carregar
instantaneamente, mesmo em conexões remotas.

Para isso, vale a pena investir em menores quantidades de elementos e

componentes leves para compor sites e ferramentas.

Qualidade do conteúdo

Apesar de geralmente ser atribuída a fatores técnicos, a qualidade do conteúdo

também está relacionada à usabilidade. Em estratégias de marketing de
conteúdo e SEO, por exemplo, é responsabilidade do texto (ou de qualquer
outro formato) reter o usuário e mantê-lo atento à leitura. Isso vale do início ao
fim do conteúdo, vale dizer. Essas ações são responsáveis por aprofundar o
usuário no funil de vendas e melhorar o ranqueamento de páginas de
resultados do Google.

9.3 Técnicas de usabilidade para você testar

Depois de tudo o que vimos até aqui, é chegado o momento de conhecer

alguns testes para medir a usabilidade de suas ferramentas. Separei duas
técnicas que você precisa utilizar.

Testes de usabilidade e avaliações de Ergonomia

Nesse formato de teste, é selecionada uma amostragem significativa de

usuários para representar uma parcela dos internautas. Funciona mais ou
menos como em uma pesquisa de mercado, mas observando as ações
realizadas quando em contato com o produto. Assim, são coletados dados que
serão posteriormente analisados.

Dizem respeito a pontos como:

● Percurso
● Tomada de decisão
● Relação entre pessoas e sistemas
● Padrões
● Inspeção de checklists
● Reconhecimento
●
● Navegação
● Entrevistas e questionários.

6111
62

Com base nas informações recolhidas, são realizados ajustes e melhorias no

sistema.

Avaliação heurística de usabilidade

A avaliação heurística de usabilidade leva em consideração os pontos comuns

realizados por uma série de pessoas ao interagir com uma ferramenta.

Esse é considerado o método mais barato e rápido para encontrar falhas e

oportunidades em um sistema.

Em 1990, Rolf Molich e Jakob Nielsen desenvolveram diretrizes para a

verificação da usabilidade de plataformas.

São elas:

● Visibilidade do status do sistema:

● Correspondência entre o sistema e o mundo real
● Controle do usuário e liberdade
● Consistência e padrões
● Prevenção de erros
● Reconhecimento em vez de lembrança
● Flexibilidade e eficiência de uso
● Design estético e minimalista
● Auxílio ao reconhecimento, diagnóstico e recuperação de erros
● Documentação.

Ao averiguar o comportamento geral dos pesquisados diante de tais itens, é

possível tomar medidas que facilitam a utilização do sistema.

Qual a relação entre usabilidade, acessibilidade e UX?

relação entre usabilidade e UX

Existe uma relação inegável entre a usabilidade, a acessibilidade e a

experiência do usuário (UX).

Muitas pessoas, inclusive, confundem esses termos e acabam empregando da

maneira errada.

Por isso, vamos saber exatamente qual é a ligação entre eles.

Como dito, a usabilidade se refere à facilidade de usar o sistema.

Ou seja, à simplicidade de interações com um elemento tecnológico e suas

funcionalidades. Já a acessibilidade diz respeito ao acesso.

6211
63

Isso quer dizer que as funções devem ser realizadas perfeitamente para
diferentes condições do usuário.

Por exemplo, alguém que acesse as páginas de um site via um computador de

mesa deve ter a mesma experiência que aquele que o faz via tablet,
smartphone ou notebook.

O mesmo vale para diferentes velocidades de conexões. Nesse ponto, também

entram as tecnologias inclusivas, voltadas a pessoas surdas e cegas, por
exemplo. Já a experiência do usuário abraça todas as questões relativas ao
usuário.

Isso quer dizer que inclui a usabilidade e a acessibilidade, mas também outros
itens como:

● Design
● Arquitetura da informação
● Interações
● Funcionalidade
● Rastreabilidade
● Tipografia
● Conteúdo

E qualquer outro elemento que influencie na jornada do usuário.

10. DESIGN VISUAL

O Design Visual ou Visual Design é um ramo do design que se debruça no

estudo da comunicação visual. Para tanto, um bom profissional da área
precisará ter expertise no manuseio dos softwares gráficos (como Adobe
Photoshop, Adobe Illustrator, Figma, entre várias outros) mas também, e
principalmente, deverá conhecer os fundamentos do Design Visual, como
tipografia, cores, gestalt, grid, semiótica, entre outros.

Vale ressaltar que não existe um consenso normativo sobre essa área ou
termo, na verdade, se pararmos para analisar, o termo em si diz respeito ao
trato da programação visual, portanto, um profissional de outras áreas do
design, tais como o design gráfico, poderiam se enquadrar nesse como Visual
Designer.

Isso porque ambas as áreas dizem respeito a comunicação visual e utilizam de

elementos visuais, tais como signos,imagens, gráficos, dentre outros recursos,
que juntos, compõem um projeto de comunicar uma ideia e conceito

6311
64

Apesar disso, trata-se sim de uma criação sistematizada, onde é possível

observar um projeto de design com as etapas de planejamento, a pesquisa, as
soluções, as prototipações, etc.

10.1 O termo o Design Visual?

Diferentemente de outras áreas e termos do design, o design de comunicação

visual é uma terminologia que não se tem muitos estudos sobre como e onde
surgiu, porém, sabe-se que se trata de uma nova terminologia que começou a
ganhar força na mesma época que o UX e UI design, talvez, justamente para
diferenciar e segmentar as camadas do design dentro de um projeto de um
produto digital.

Basicamente o termo em si diz respeito ao design gráfico, só que voltado a

produtos digitais. Ele seria mais uma etapa dentro de um projeto de digital,
onde temos várias etapas no processo.

Desse modo, de forma resumida e prática, esse novo termo foi,ou é, uma
alternativa para Designers gráficos se realizarem ou prospectar novas
oportunidades no mercado criativo, principalmente no digital.

É importante ressaltar que além desses sentidos associados ao termo, a

expressão em si pode ganhar novos sentidos a partir do uso e de quem usa,
por exemplo:

Existem designers que utilizam o termo com o objetivo de mostrarem que são
designers especializados em design visual e estética, enquanto outros utilizam
para se referir a uma forma mais abrangente, ou seja, que podem fazer design
gráfico, mas também web design, ui design e outras coisas dentro do campo do
design visual.

10.2 Fundamentos do Design Visual

Os Fundamentos do Design Visual são um conjunto de conhecimentos

essenciais para quem trabalha com comunicação visual e que podem ser
utilizados em qualquer segmentação do design, como por exemplo, na web,
etc.

Entendendo isso, você precisará aprender sobre várias coisas, já que trata-se
de uma área multidisciplinar. Podemos listar algumas mais técnicas como por
exemplo:

6411
65

● formas;
● imagens;
● texturas;
● composição;
● cores;
● tipografia;
● gestalt;
● grids, entre outros.

Importância do Visual Design para empresas

O Visual Design é um segmento do design que pode ser aplicado em diversas

áreas. Sendo assim, pensando no uso para empresas, a sua principal
contribuição é uma melhor composição visual de produtos, serviços e da
identidade da empresa.

Para isso é preciso ter um profissional que ajuda a sistematizar, concatenar e

ajustar os elementos visuais com os propósitos da marca ou produto.

Manter uma estética agradável, uma identidade visual, e coerência visual é de

extrema importância para qualquer negócio. Isso porque você consegue
comunicar a ideia principal de uma empresa, e conectar, de forma natural, o
público a sua marca.

11. TEORIA DE CORES

A cor é uma impressão emitida na retina dos olhos pela luz que é refletida
pelos objetos que visualizamos.

Geralmente, os nossos olhos conseguem identificar 12 cores. Elas são

classificadas como cores primárias, secundárias e terciárias. Todas fazem parte
do círculo cromático.

O material ajuda o profissional a entender melhor a distribuição das cores de

acordo com as suas propriedades. Por meio dele, é possível descobrir quais
são as tonalidades que combinam entre si para alcançar um determinado efeito

Como é feita a hierarquia das cores?

6511
66

O círculo cromático é distribuído entre 12 cores.

3 primárias;

3 secundárias;

6 terciárias.

A mistura dessas tonalidades ajudam a construir outras cores, que podem ser
mais ou menos intensas. O formato depende da quantidade utilizada.

Cores primárias: amarelo, vermelho e azul. Elas são as mais básicas do

círculo. Servem como base para outras cores;

Cores secundárias: combinação de duas cores primárias. A laranja é a junção

de amarelo e vermelho. O verde é a junção de azul e amarelo. Já o roxo é a
junção do vermelho e azul;

Cores terciárias: são construídas a partir da junção de uma cor primária e uma
cor secundária.

Círculo cromático. Imagem retirada do site Voxel Digital

6611
67

Por que a teoria das cores é importante para o design?

As cores de um projeto de design não podem ser escolhidas de qualquer

forma. Você deve conhecer a teoria para transmitir a mensagem mais
adequada para audiência. Assim, é mais fácil conseguir os resultados
desejados.

Os profissionais que estudam essa teoria conseguem desenvolver peças mais

impactantes e que criam uma conexão incrível com o público.

Como usar a Teoria das Cores no design?

A partir de agora, vamos listar diversas dicas para você aprender como utilizar
a teoria das cores no design. Conheça abaixo quais são as técnicas mais
importantes.

Conheça o objetivo do trabalho

O primeiro passo é entender qual é o objetivo do trabalho, ou seja, qual a

mensagem que deve ser compartilhada com o público e quais são as
sensações que devem provocar na audiência por meio do material visual.

Estude a audiência

Um dos erros mais comuns dos designers na hora de construir um projeto é

não pensar na audiência. Ignorar esse tipo de informação pode trazer
consequências negativas para a sua rotina de trabalho, como a temida refação
e a insatisfação dos clientes.

Conhecer as características do público é essencial para construir um ótimo

projeto. Afinal, uma peça que é desenvolvida para pessoas mais jovens não
terá o mesmo impacto para as pessoas da terceira idade.

Por isso, você deve entender quais são as dores da audiência, os seus
objetivos, estilos de cores que elas mais gostam, entre outras questões.

Uma dica interessante é ter um contato mais próximo com o time de marketing.
Esses profissionais buscam constantemente alcançar o cliente ideal de um
negócio. Então, eles podem ser uma excelente fonte de informação para
compartilhar dados interessantes sobre a audiência.

Em um primeiro momento, para alguns profissionais, essa dica pode parecer

óbvia. No entanto, a falta de experiência ou o excesso de tarefas faz com que
muitas vezes o trabalho seja desenvolvido de forma automática. Dessa forma,
o projeto não consegue atingir as expectativas da empresa e do cliente.

6711
68

Crie projetos acessíveis

Grande parte dos profissionais também não se lembram dos daltônicos quando
escolhem as tonalidades de um projeto. Mark Zuckerberg, o fundador do
Facebook, optou pelo azul como cor primária porque é a tonalidade que
consegue enxergar com mais facilidade, uma vez que ele é daltônico. Portanto,
antes de iniciar um projeto, pense como aquele material pode ser acessível
para todas as pessoas, e não somente para um grupo de indivíduos.

Alinhe o projeto com a marca

Não reinvente a roda. Um designer de sucesso é aquele profissional que

desenvolve um projeto de acordo com as cores da marca de uma empresa. Se
ela trabalha com as tonalidades azul e verde, mantenha o mesmo tom no
projeto, mesmo que você não concorde com a harmonização das cores.

Para garantir um diferencial competitivo no mercado ou surpreender as

pessoas da empresa, você pode oferecer algumas sugestões sobre quais
seriam as cores mais adequadas para a audiência. Assim, é possível mostrar
que está envolvido com o negócio e quer construir um excelente trabalho.

No entanto, para a tarefa deste momento, seja fiel às cores e não deixe que a
sua opinião influencie na qualidade do projeto. Faça o seu melhor e encante as
pessoas que serão responsáveis por aprovar o material.

Verifique o contraste

Uma das principais vantagens em trabalhar com design é a possibilidade de

variar as paletas de cores. Ao contrário do que grande parte das pessoas
imagina, nem sempre elas impactam na harmonia do projeto.

Imagine que você está desenvolvendo uma peça que remete ao meio
ambiente. Para apresentá-lo da melhor forma, as cores análogas são
bem-vindas. O conjunto de cores lembra bastante a harmonia que pode ser
identificada na natureza.

Pense na interação com o público

Outra dica interessante é não esquecer o tempo de interação do público com a

sua peça. Se você vai desenvolver um layout grande, recomendamos não
utilizar os tons complementares ou diminuir a quantidade de cores vibrantes,
uma vez que elas deixam a vista do público cansada.

6811
69

Trabalhe o contraste

Nunca é demais lembrar o quanto o contraste não pode ser ignorado em um

projeto. Ele será responsável por auxiliar o usuário a identificar as informações
da peça com mais agilidade.

Use o guia emocional das cores

O sentimento que você deseja passar no seu projeto é importante e as cores

são fundamentais para passar sua mensagem:

Imagem retirada do site Geração Criativa

11.1 As ferramentas para escolher as cores

O lado positivo da área de design é que existem diversas ferramentas que

ajudam o profissional a escolher quais são as tonalidades mais indicadas para
os projetos. Conheça abaixo as características de cada uma e como elas
funcionam.

6911
70

Adobe Color CC

A primeira ferramenta da nossa lista é a Adobe Color CC. Ela é indicada para
profissionais seniors, pois contém personalizações avançadas, além de
trabalhar com regras de cores específicas.

Compostos;

Tríades;

Monocromático.

Uma dos principais benefícios da ferramenta é que ela pode ser utilizada nos
painéis disponíveis no Illustrator, InDesign e Photoshop. Recentemente, ela
lançou recursos interessantes para os usuários, como o verificador de
contraste. Trata-se de uma funcionalidade que permite analisar o contraste das
cores do texto e de fundo.

A ferramenta faz com que o profissional garanta a acessibilidade visual das

cores que foram definidas em um projeto e faça comparações para identificar
quais são as melhores tonalidades.

Outro ponto positivo da Adobe Color CC é que ela contém diversos temas que
são indicados para daltônicos. Dessa forma, você constrói temas acessíveis
para pessoas que têm deuteranopia, protanopia e tritanopia.

Deuteranopia: dificuldade para diferenciar as cores verdes;

Protanopia: dificuldade para diferenciar as cores vermelhas;

Tritanopia: dificuldade para diferenciar as cores azul e amarelo.

Colormind

Outra dica bastante interessante de ferramenta é a Colormind. Aqui, você pode

trabalhar com as cores de uma paleta de um jeito mais avançado. Depois de
apresentar o esquema de cores, ela indica quais são as melhores opções para
utilizar sombras, destaques ou planos de fundo.

Se você deseja melhorar o UI do seu projeto, a ferramenta é uma das melhores

opções. A Colormind mostra como as tonalidades se apresentam em alguns
itens de UI, como botões e guias.

Paletton

7011
71

Paletton

A próxima opção da nossa lista é um gerador de paleta de cores avançado. Ela

contém um conjunto de personalizações que permite os profissionais
experimentarem cores de um jeito prático e eficiente.

Você pode customizar a ferramenta por cores monocromáticas, adjacentes e

tríades. Após fazer definir um esquema de cores, a Paletton permite aplicar
uma simulação para descobrir como as tonalidades ficarão no daltonismo e em
vários tipos de tela.

Aqui, destacamos quais são as melhores ferramentas que podem ajudá-lo

durante a rotina de trabalho. Apesar delas otimizarem várias funções,
recomendamos não se esquecer da identidade da marca da sua empresa ou
do seu cliente, caso trabalhe como freelancer. Dessa forma, será mais fácil
garantir uma ótima nota para o seu projeto.

12. TIPOGRAFIA

Tipografia significa a “impressão dos tipos”, nome mais comum para fontes de
letras. Contudo, atualmente este é o nome dado ao estudo, criação e aplicação
de caracteres, estilos, formatos e disposição visual de palavras.

Todas as peças de design que possuem textos utilizam a tipografia para definir
em qual formato e estilo as palavras irão aparecer. Além disso, a tipografia é a
base da comunicação verbal. Por isso, é preciso bastante cautela na hora de
trabalhar com o texto, que precisa estar de acordo com a mensagem
transmitida e com os demais elementos gráficos e precisa ser legível.

Popularmente, a tipografia consiste nas mais diversas possibilidades de fontes

de letras, que podem variar bastante umas das outras. Por isso, podemos
classificar as fontes em quatro tipos primários:

Tipografia – Classificação de Fontes de Letras

● Serif (com serifa);

● Sans Serif (sem serifa);
● Script (simula a escrita à mão);
● Display (fontes artísticas).

7111
72

Serif

As fontes com serifa, ou simplesmente fontes serifadas, são as que possuem

pequenos prolongamentos e traços nas extremidades das letras. Além disso,
essas fontes são bastante usadas em textos contínuos, como revistas, jornais e
livros.

As fontes serifadas são utilizadas para esse fim porque promovem conforto aos
olhos humanos em leituras mais longas. Isso ocorre pois as palavras são lidas
de forma completa, unindo as letras entre si.

Sans Serif

As fontes sem serifa, ou simplesmente não serifadas, são todas as fontes que
não possuem os prolongamentos nas extremidades das letras como as fontes
serifadas. Além disso, essas fontes são bastante utilizadas para textos mais
curtos e para a criação de peças de design gráfico.

7211
73

Script

A tipografia script, também chamada de cursiva ou manuscrita, consiste no

estilo de fonte que simula a escrita manual humana. Por isso, estas são as

fontes mais clássicas, elegantes e suaves, sendo mais utilizadas também na

criação de designs gráficos como convites de formatura.

Display

A tipografia display consiste nas fontes de letras mais artísticas, que não
podem ser classificadas em nenhum dos tipos anteriores. Esse tipo de fonte
possui letras mais enfeitadas, podendo trazer símbolos e figuras no lugar do
alfabeto às vezes.

7311
74

12.1 Famílias Tipográficas

As fontes de letras podem se encaixar em uma determinada família, tendo

como principal aspecto determinante para esta classificação o desenho da
fonte. No entanto, as fontes participantes de uma mesma família possuem
variações, tais como a espessura, altura, inclinação e outros detalhes. Sendo
assim, as principais variações em uma família tipográfica são:

Light;

Regular;

Bold;

Extra Bold;

Itálico;

Condensado;

Estendido.

Você sabe usar tipografia em UI Design?

A tipografia está em todos os lugares. Passamos por milhares de mensagens

tipográficas todos os dias, a maioria das quais ignoramos ou nem mesmo

7411
75

enxergamos. Seja nas contas, nas embalagens, na TV ou na internet, você

com certeza se envolve com os tipos durante muitos momentos do seu dia.

Você pode não perceber ou simplesmente não fazer ideia mesmo, mas existe
uma complexidade bem grande por trás da tipografia. Seria justo dizer que a
utilização dos tipos é a parte mais difícil da UI Design. Mas vou tentar tornar
isso um pouco mais fácil compartilhando algumas dicas para você usar em
seus projetos.

12.2 Tamanho da fonte

O primeiro passo é encontrar o tamanho certo para o corpo de seu texto

principal. Lembrando que um tamanho que parece ideal no mobile pode
aparentar ser pequeno na tela de um computador. As pessoas tendem a
segurar o celular próximo ao rosto, enquanto sentam mais longe das telas
desktop.

Um bom ponto de partida para desktop é 16px. Em dispositivos móveis, os

tipos podem ser menores, porque o usuário pode ajustar a distância entre a
tela e seu rosto para obter o tamanho mais adequado às suas necessidades.
Já para mobile o tamanho pode começar em 12px.

O mais importante é garantir que o texto esteja em um tamanho confortável

para leitura. Acredite na sua percepção. Não confie apenas no tamanho em
pixels. Por exemplo, abaixo temos duas fontes com a mesma medida em px,
porém não possuem o mesmo tamanho visualmente.

7511
76

Escalas modulares

Basicamente é você criar proporções relacionadas a partir de um primeiro

tamanho de fonte definido — vale lembrar a dica acima e começar definindo o
corpo do texto. Você pode criar essa relação usando a proporção áurea, por
exemplo, multiplicando 16px por 1,618 para encontrar o próximo tamanho, ou
dividir pelo mesmo número para encontrar o valor anterior.

7611
77

O Modular Scale é uma ferramenta online que facilita esse cálculo. Na imagem
acima, usamos 16px como tamanho de base e determinamos a proporção
1,618. Do lado direito da imagem podemos ver o resultado.

“Uma escala modular é um conjunto preestabelecido de proporções

harmoniosas, como uma escala musical..”

—Robert Bringhurst

Projetar com escalas modulares é uma forma de fazer escolhas mais

conscientes. Usar proporções agradáveis, cria harmonia visual. Dificilmente
você chegará nesse resultado usando valores aleatórios.

7711
78

Você não precisa — e nem deve — se prender apenas na proporção áurea.

Existem diversas escalas que você pode usar. Recomendo a leitura do artigo
Tips for choosing a scale'', do Billy Whited.

Esse assunto pode ir bem longe e merece um artigo só pra ele. Caso você se
interesse em saber mais, leia o artigo More Meaningful Typography, do Tim
Brown. Nele, o autor, explica tudo detalhadamente, deixa claro que é um
direcionamento e não uma regra cravada em pedra, fala um pouco de como
trabalhar com duas escalas e mais algumas coisas. É excelente e bem
esclarecedor. ;)

Blocos de parágrafo

O comprimento da linha é a distância entre as margens laterais de um bloco de

texto. As linhas excessivamente longas (acima de 100 caracteres) são um

problema muito comum. Linhas mais curtas farão uma grande diferença na
legibilidade e profissionalismo de seu layout.

Como o comprimento de um bloco de texto pode variar de acordo com o

tamanho da fonte utilizada, a forma mais eficaz de controlar essa medição é
por meio da quantidade de caracteres.

Linhas mais curtas são mais confortáveis de ler. Linhas mais longas — como
nosso olho precisa viajar mais longe da extremidade de uma linha para o início
da próxima — são mais difíceis de acompanhar e se manter engajado com a
leitura.

7811
79

“A linha de 66 caracteres é considerada como ideal.” — Robert Bringhurst

Procure usar um comprimento médio de linha de 45–75 caracteres, incluindo

espaços e pontuação. Na prática, as limitações de espaço ou as ordens de uso
especial podem exigir comprimentos maiores ou menores. Em todo caso,

mantenha-se atento para perceber quando o bloco está extremamente longo

ou curto a ponto de prejudicar uma boa leitura.

Alinhamento

Escolha um estilo de alinhamento que se adapte à estrutura de seu layout e a

personalidade dos elementos individuais do conteúdo. Cada modo de
alinhamento tem suas vantagens e desvantagens.

7911
80

Excelente trabalho de alinhamento neste projeto. Podemos observar

alinhamentos à esquerda (em azul) e outros centralizados (em vermelho) em
diversos pontos do layout. Um belo exemplo de que não precisamos nos
prender a apenas um estilo.

A tipografia centralizada é elegante e atraente, mas pode ser difícil de alinhar o

texto com outros elementos. No entanto, funciona super bem dentro de
espaços delimitados, como por exemplo: botões e barras de menu.

O texto justificado possui intervalos feios se não for hifenizado corretamente.

Dificilmente será possível ter controle de uma boa hifenização em um conteúdo
dinâmico.

O alinhamento à esquerda é a composição mais comum na web. Não há

variação nos espaços entre palavras, de modo que nunca há grandes buracos
dentro das linhas de texto. Este formato respeita o fluxo da nossa direção
natural de leitura.

O texto alinhado à direita é difícil de ler já que o ponto inicial de cada linha é
completamente irregular. No entanto, esse formato pode ser bastante eficiente
em trechos curtos de texto, como legendas ou citações, agregando um
elemento de movimento e surpresa à composição.

Espaçamento entre linhas

O espaçamento entre linhas, também chamado de entrelinha ou altura de linha,

molda a aparência dos parágrafos e estrutura da página, dando ritmo vertical à
medida em que o usuário acompanha o texto.

“Espaço na tipografia é como o tempo na música. É infinitamente divisível, mas

alguns intervalos proporcionais podem ser muito mais úteis do que uma
escolha ilimitada de quantidades aleatórias” —Robert Bringhurst

Um texto composto por entrelinhas muito apertadas estimula o movimento

vertical dos olhos, o usuário pode facilmente se perder —esse estilo pode ser
usado para passar uma ideia de urgência ou exagero. Da mesma forma, tipos
compostos com entrelinha muito afastada criam listras que também distraem a
leitura.

8011
81

Praticamente todos os softwares tomam como entrelinhamento padrão o valor

de 120% do tamanho do tipo (um tipo de 10px é composto com uma entrelinha
de 12px, um tipo de 12px por uma entrelinha de 14,4px). Um espaçamento de
150% é muito comum na web. No entanto, você pode aplicar outros estilos
usando as proporções.

Espaçamento entre caracteres

Existem pares específicos de caracteres, como Ty e We, que podem precisar

de ajustes nos espaços entre eles. Chamamos essa prática de kerning. A
maioria das fontes digitais possuem tabelas de kerking embutidas, não exigindo
o processo manual. Mas há exceções, principalmente ao compor títulos em
tamanhos grandes, que evidenciam o espaçamento ruim.

O tracking se refere ao espaço entre os caracteres de uma linha ou bloco

de texto. Quando o tamanho do tipo aumenta muito, principalmente em
títulos, é uma boa ideia apertar um pouco o tracking. Também é comum
ver esse espaçamento bem evidenciado dentro de sequências de
maiúsculas ou versaletes em títulos, subtítulos e menus.

8111
82

Em resumo, o kerning é o ajuste entre dois pares de caracteres, sem

interferir no restante da palavra. Já o tracking é o ajuste feito em todo
bloco de texto por igual.

Cor na expressão tipográfica

A cor tipográfica diz respeito somente a mudanças na intensidade da luz
ou valor. Uma composição em preto e branco, por exemplo, pode
apresentar uma coloração tipográfica muito dinâmica — contrastes de
dimensão, valor de cinza e espaçamento — mesmo que o tipo só
apareça em preto. Entretanto, a cor cromática também pode
desempenhar um papel importante na tipografia.

A utilização de diversos tamanhos e pesos cria uma variedade de cor

tipográfica na imagem acima.

8211
83

13. FERRAMENTAS DE APOIO AO UX e UI DESIGNER

Embora existam ferramentas de UX design mais robustas, com diversas

funcionalidades em um único programa, vamos apresentar para você na
nossa lista algumas que são específicas para a sua necessidade em
cada momento de um projeto.

Por exemplo: algumas ferramentas de UX design são ótimas para fazer o

teste A/B de forma rápida e eficiente, enquanto outras são totalmente
voltadas para prototipagem de produtos digitais.

Ou seja, não existe a melhor das ferramentas de UX design ou apenas

uma única opção para quem é designer UI e UX. De uma forma geral, as
ferramentas se complementam para tornar o trabalho mais dinâmico.

Por isso mesmo, citei o termo “caixa de ferramentas”, já que um conjunto

de softwares vai ser necessário para auxiliar o seu trabalho no
desenvolvimento de um site mais agradável para que as pessoas
naveguem ou de um aplicativo mais eficiente.

Algumas ferramentas de UX design têm funções interessantes que vão

além da prototipagem, como recursos para gestão de projetos e equipes.

13.1 InVision

Uma das ferramentas de UX Design mais conhecidas do mercado por ser bem
básica, especialmente para quem está começando ou evoluindo na carreira, é
a InVision. O grande diferencial desse software é que ele é bem fácil de usar.

Ou seja, será muito mais simples aprender a aplicar as ferramentas de UX

design se você optar por softwares como este, que permite soltar e arrastar
recursos de forma bem intuitiva, criar protótipos interativos e telas estáticas e
clicáveis.

Os testes de protótipos, por exemplo, podem ser realizados pelo iPhone com
áudios, vídeos e gravações de tela. Uma das possibilidades de interação da
ferramenta é a prototipagem com gestos. Mais um destaque é que os layouts
criados por você se adaptam às telas de diferentes tamanhos. Os projetos
podem ainda ter elementos atualizados e implementados e as equipes podem
receber bibliotecas de ativos que chegam por compartilhamento. Resumindo, é
bem útil, completa e fácil de compartilhar, inclusive com os/as clientes.

8311
84

Interface da Logo da InVision

13.2. Notion

Notion é um aplicativo de gerenciamento de tarefas e anotações.

Com ele, você consegue criar listas de To-Dos, organizar tarefas em tabelas,
Kanban e organizar atividades em calendários.

Nesse sentido, o Notion é uma ótima ferramenta para organizar seus projetos e
trabalhar em equipe. Além de ser uma ferramenta de organização, o Notion
permite criar Wikis, que são como bibliotecas que podem contemplar políticas
das empresas, objetivos dos projetos e outros documentos. Tudo isso para
facilitar as tarefas do time e deixar todas as informações em um único lugar.

É possível também utilizar o Notion para realizar a documentação da sua

pesquisa de projeto, incluindo todas as notas e links necessários, além de
trabalhar em colaboração com a equipe.

Interface da Logo do Notion

8411
85

13.3 Adobe XD

Essa é uma das ferramentas de UX design que é totalmente voltada à

experiência. Embora seja uma tecnologia mais recente quando comparada com
outros programas, a evolução do software foi muito grande nos últimos tempos.

Este programa da Adobe permite criar protótipos de produtos para ver o

resultado final o mais próximo da realidade. Em suma, é uma maneira de
pré-visualizar com mais fidelidade o seu trabalho, com foco em UI e UX, em
projetos de apps e sites.

E tem vários recursos interessantes na ferramenta, como receber feedbacks

em tempo real e de forma repetida. A visualização em dispositivos móveis
também é bem interessante.

Interface da Logo InVision

13.4 Figma

O Figma é uma das ferramentas de UX design que mais se destacam entre os

grupos de profissionais da área de UX e UI. Ele é ótimo para a realização de
trabalhos em equipe, pois permite que vários/as designers criem no mesmo
arquivo, de forma simultânea.

A ferramenta ainda permite a criação de grids individuais, mesmo que você

esteja usando objetos que são interdependentes. Os objetos ficam agrupados e
podem ter suas próprias características, entre elas dimensões automáticas que
estejam vinculadas a algum template, por exemplo.

8511
86

As pessoas que trabalham com o Figma gostam da possibilidade de unir o time

em um mesmo ambiente de criação. Para fazer a gestão de projetos, enviar
permissões de uso ou organizar o papel de cada colaborador/a, essa
ferramenta de UX Design é muito boa.

Mais uma vantagem: a tecnologia WebGL, na qual o Figma se baseia, permite

rodar em qualquer navegador, além de Windows e Mac.

Interface do Logo site da Figma

13.5 ProtoPie

O ProtoPie é uma das ferramentas de UX design mais usadas do momento por

causa das suas ótimas funcionalidades. Além do básico, queremos destacar
que você pode dispensar o navegador para criação de protótipos, pois é
possível realizar essa tarefa direto no computador. No PC, roda muito mais
rápido!

A interface do software é muito bem estruturada e organizada, assim você não

vai se confundir quando estiver realizando suas tarefas. A ferramenta é bem
intuitiva e você consegue identificar os botões e saber para o quê cada um
deles serve.

Diferente de outras ferramentas de UX design, o ProtoPie faz a geração de

todas as mudanças que você executar no protótipo em poucos segundos, para
serem visualizadas no seu PC. Assim, fica muito mais fácil acompanhar todos
os ajustes feitos.

8611
87

Outra vantagem: é possível atualizar o protótipo direto do computador para

visualização no smartphone, sem barreiras, sem ter que ficar entrando e saindo
do projeto, algo comum em outras ferramentas.

As animações dos elementos são bem mais simples de serem feitas na

ferramenta, além de rotações, ações de scroll, redimensionamento de objetos,
inclusão de opacidade, timeline, cliques e muito mais.

Interface do Logo site do ProtoPie

13.6 Maze

O Maze é uma das ferramentas de UX design que se destaca por ser uma das
boas novidades na área aqui no Brasil.

O próprio software se apresenta como um dos mais completos do segmento.

Com ele, você vai criar e testar seus protótipos com muita facilidade.

A grande diferença da ferramenta é que ela permite que os/as usuários/as

enviem insights muito importantes para as alterações que devem ser feitas com
foco em UX.

O Maze é uma das ferramentas de UX Design que tem um sistema de teste

rápido para que o/a designer não encontre limitações para verificar as
funcionalidades dos seus protótipos.

8711
88

Por exemplo: a ferramenta tem funcionalidades para identificar mapas de calor

e cliques errados, entrega essas informações para você corrigir, sem ter que
fazer sessões de pesquisas com os/as usuários/as para descobrir estes
problemas.

Os testes podem ser compartilhados por uma simples URL, e isso torna o
trabalho muito mais prático. Essa funcionalidade é excelente, principalmente
quando você precisa lançar um novo recurso em um produto digital.

Além disso, o Maze também facilita a interação, compartilhamento e

colaboração de todas as pessoas do time no projeto. Experimente essas
ferramentas de UX Design e perceba como elas vão melhorar a fluidez dos
seus projetos.

Interface do Logo site do Maze

8811
89

14. WIREFRAME

Wireframes são esboços simples de telas de produtos digitais, como sites e

aplicativos. O intuito é estruturar e validar ideias, por isso os wireframes não
contam com detalhes como cores, fontes, ícones e imagens.

Dessa forma, os wireframes conseguem demonstrar de forma direta a

arquitetura final de uma interface, posicionando os elementos de forma simples
e organizada. Portanto, o wireframe reflete apenas o necessário da proposta de
uma interface digital.

Os wireframes, possuem dois objetivos principais:

● Auxiliar o UX Designer na diagramação e aplicação da identidade

visual;

● Alinhar a expectativa do cliente quanto ao que o usuário quer e ao

projeto criado.

Além disso, visam responder três perguntas fundamentais do projeto:

O quê? – Quais são os grupos de conteúdos que serão utilizados;

Como? – Como será a visualização da interface e como ela será utilizada pelo
usuário;
Onde? – Definir o posicionamento e estrutura da informação e conteúdo na
interface.

Wireframes desenvolvidos por Victor Rosato, aluno do bootcamp Master Interface Design (MID)

8911
90

O wiframe é uma ferramenta muito flexível e os elementos que o compõem

variam de projeto para projeto. Ou seja, o nível de detalhe de cada wireframe
vai depender da sua finalidade, dos seus objetivos.

No entanto, existem alguns elementos básicos necessários em todos os

wireframes, como:

● Cabeçalhos;
● Rodapés;
● Barras laterais;
● Áreas de conteúdo.
Portanto, sem esses elementos fica impossível desenvolver um bom wireframe.

Wikipédia Redesign – Projeto por Sofia Coeli, aluna do bootcamp Master Interface Design (MID)

14.1 Wireframes no UX Design

A grande vantagem do wireframe é que através dele é possível demonstrar as

informações e elementos da interface de forma simples e prática.

Dessa forma, o UX Designer consegue compreender diversos aspectos de seu

projeto, como:

Os tipos de conteúdo que ele deve conter;

Onde esses conteúdos devem ser posicionados na interface. Expor de maneira

correta textos, imagens e call-to-action com base na estratégia e objetivo final
do projeto. Portanto, com o uso de wireframes é possível criar uma interface
final amigável e intuitiva para o usuário, que cumpra sua proposta de negócio e
passe a mensagem correta de forma assertiva. O UX Designer cria um
produto/serviço de alta qualidade e performance. Além disso, os wireframes
também ajudam.

9011
91

A entender quantas telas o projeto precisará e como elas devem ser

desenhadas e desenvolvidas;

Os desenvolvedores a solucionarem suas dúvidas sem ter que recorrer a fazer

várias perguntas para o designer;

Na comunicação com o cliente e demais stakeholders, ao demonstrar como as

ideias se comportaram na interface.

Além disso, os wireframes podem ajudar a diminuir os custos de um projeto

porque a sua revisão e adaptação são mais baratas de serem feitas do que em
mockups ou em protótipos.

Exemplo de Wireframe feito pela Louise Santos, aluna do bootcamp Master Interface Design (MID)

14.2 Criando um wireframe

Assim como em qualquer atividade técnica, criar um wireframe pode ser mais
difícil para quem está começando. Mas, com certeza, com o tempo e acúmulo
de experiência, esse processo vai ficando cada vez mais fácil e rápido.

Confira a seguir um pequeno guia com dicas para te ajudar no

desenvolvimento de um wireframe.

1. Procure inspiração e referências

Antes de começar a criar seu wireframe, procure projetos similares ao que você
irá desenvolver para buscar inspiração e referência.

9111
92

A maioria dos portfólios de UX Design contém wireframes, então você pode dar
olhada em modelos de wireframes em sites como Behance.

No entanto, você não precisa passar muito tempo nisso nem preparar um
material sobre essa busca. Esse é apenas um momento para se inspirar antes
de iniciar o seu próprio wireframe.

2. Tenha o seu fluxo de usuários mapeado

Para não se perder em seu próprio projeto, faça um mapeamento do fluxo que
deseja que seu usuário siga antes de começar a desenhar wireframes. Nesse
sentido, é essencial que você tenha o conceito e objetivo bem definidos.

Uma boa estruturação de interface permite que os usuários sejam

autossuficientes e naveguem intuitivamente. Assim, você diminui o nível de
frustração do usuário e garante que ele permaneça por mais tempo em sua
interface.

Wireframes Estudo de Caso Wikipédia – Nível 2 Bootcamp MID Aluno Diego Crovador

9211
93

3. Crie blocos no seu wireframe

Agora é hora de começar a trabalhar em seu projeto. Portanto, pegue papel e

caneta e tenha o usuário final e objetivos de negócios muito bem definidos para
esta fase.

Nesta etapa, você deve pensar em fatores como:

Expectativas do usuário: o que ele espera encontrar em certas áreas da

interface;A posição da sua mensagem principal e de seu logo. Qual será a
primeira coisa que o usuário encontrará quando entrar em sua interface;

Onde posicionar sua call-to-action.

Com isso em mente, você pode separar o seu conteúdo em diferentes blocos e
posicioná-los de acordo com o seu objetivo ao longo da página. Lembre-se de
utilizar somente tons de cinza e apenas representar os espaços das imagens
que serão inseridas.

4. Preencha os detalhes

Agora que você já tem seu fluxo de usuários e telas desenhadas, o próximo
passo é adicionar alguns detalhes para preparar o wireframe para a etapa
seguinte do projeto (mockup).

Mas lembre-se: o seu wireframe é o esqueleto do projeto, portanto pense em

detalhes funcionais, como:

Posicionar o logo e a home no canto superior esquerdo;

Colocar uma caixa de pesquisa do canto superior direito;

Entre outras formas simples e eficientes de chamar a atenção do usuário.

Wireframe para projeto de Débora Seibert, aluna do bootcamp Master Interface Design

9311
94

5. Estabeleça um prazo para finalizar o wireframe

Definir os prazos de um processo de trabalho é bastante comum e

recomendado para qualquer atividade. No desenvolvimento de wireframes não
é diferente.

Portanto, estabeleça um prazo factível para conseguir desenvolver e entregar o

material.

No entanto, tome cuidado com algumas questões:

O objetivo do wireframe é validar e comunicar ideias, portanto, não há

necessidade de criar algo complexo e que tome muito do seu tempo;Não crie
apego emocional com o wireframe, afinal, ele ainda não é o produto final e,
talvez, muitas ideias sejam descartadas até lá.

6. Não projete demais

O wireframe diz respeito à funcionalidade da interface e não ao design do

projeto.

Evite adicionar elementos visuais complexos. Neste momento, menos é mais.

Além disso, não use cores ou imagens. Esses elementos podem te distrair da
tarefa principal.

Para ajudar na visualização, você pode usar diferentes tons de cinza e definir
espaços e tamanhos para as imagens que for utilizar no futuro.

Wireframes feitos por André Borges, aluna do bootcamp Master Interface Design (MID)

9411
95

Se for apresentar o wireframe para alguém, não esqueça de deixá-lo limpo e

claro para facilitar a visualização do projeto!

7. Lembre do usuário

O wireframe tem o objetivo de validar ideias. Portanto, é importante não se

esquecer da experiência do usuário quando estiver desenvolvendo seu
documento.

Nesse sentido, lembre-se de levar em consideração as necessidades e as

expectativas do usuário com relação àquela interface. Dessa forma, o
desenvolvimento do seu wireframe terá mais funcionalidade e chances de bom
resultados.

8. Organize seu wireframe

Os sites e aplicativos normalmente são divididos em seções. É interessante

separar seu wireframe de forma lógica, representando cada uma das seções
importantes do seu produto, como:

Home Page;

Área para contatos;

Demonstração dos produtos.

Além disso, numere as páginas do wireframe. Dessa forma, você cria uma
jornada lógica e evita confusões no momento de apresentar ou revisar seu
documento.

Wireframe para projeto de Thiago Alvarenga, aluno do bootcamp Master Interface Design

9511
96

15. MOCK-UP

No design, mockup é uma representação digital de algo que existe no mundo

físico. Esse arquivo digital simula a cor, tamanho, proporções e outras
características de um projeto.

Para entender melhor, veja a imagem abaixo.

A imagem da esquerda mostra a arte de um cartão de visitas sem a utilização

de um mockup. Já a arte da direita mostra a mesma arte aplicada em um
mockup.

Conseguiu notar a diferença?

Um mockup serve para que a visualização de um determinado projeto (como

um cartão de visita, um cartaz, uma estampa de camiseta ou até mesmo um
site) seja bem próxima da realidade.

Geralmente um mockup é utilizado como complemento da apresentação de um

projeto para o cliente final.

Pense bem: a visão que o cliente terá sobre o projeto não vai ser,
necessariamente, igual a sua. Ao mostrar a arte “pura” de um arquivo (como o
exemplo da esquerda na imagem acima), talvez o cliente não conseguirá
imaginar todas as características físicas que aquele projeto terá.

O mockup é útil exatamente para essa situação: ele irá auxiliar a visualização
daquela arte simulando-a em uma situação bastante próxima da realidade.

Veja outro exemplo, agora com uma estampa de camiseta:

9611
97

Na imagem da esquerda, a estampa aparece de forma isolada. Não há como

saber sua proporção e nem como ela ficaria aplicada em uma camiseta.

Já a imagem da direita mostra a mesma arte em uma simulação de aplicação

bem próxima da realidade.

Ao utilizar um mockup como complemento em uma apresentação você irá

agregar mais valor ao seu trabalho, aumentando as chances de aprovação do
projeto.

Lembre-se que um dos papéis do designer é ter a empatia necessária para

procurar entender o ponto de vista do seu cliente sobre o projeto. O mockup
entra como um facilitador, uma ponte entre o que o designer quer passar e o
que o cliente precisa entender.

15.1 Tipos de mockups

você encontrará mockups de vários tipos, tais como:

Mockups para camisetas

Mockups de canecas

Mockups de fachadas

e muitos outros.

Outra dica é conferir nossa lista completa com os melhores sites de mockups
gratuitos. Guarde esses sites em seus favoritos e visite-os sempre que precisar
baixar um mockup para algum projeto específico.

9711
98

Como fazer um mockup?

Agora que você já sabe o que é, para que serve e quando usar um mockup,
talvez tenha ficado a seguinte dúvida: como criar um mockup?

Nós vamos explorar rapidamente as duas formas mais conhecidas para fazer
um mockup: utilizando o Photoshop ou criando online.

Como fazer mockups no Photoshop

A grande maioria dos mockups disponíveis para baixar (gratuitos ou não) são
arquivos editáveis no Photoshop (extensão .psd), permitindo que você abra o
objeto inteligente e altere apenas o seu interior, mantendo os efeitos de luz,
sombra, desfoque, profundidade e texturas.

Se você não tem muita familiaridade com o Photoshop, não se preocupe, o

processo é normalmente simples. É preciso apenas ter cuidado para não
alterar as camadas erradas.

Veja um passo-a-passo simplificado:

Passo 1 – Baixe o mockup e abra o arquivo no Photoshop

Primeiro faça o download do arquivo. Caso ele esteja compactado (.zip ou .rar),
descompacte-o. Você precisará localizar o arquivo com a extensão PSD e
abri-lo.

9811
99

Ao abrir o arquivo no Photoshop, confira suas camadas (layers). Geralmente a

camada que contém objeto inteligente está com algum nome específico (nesse
caso está como “Placeholder“).

Outra dica para identificar o objeto inteligente do mockup é prestar atenção ao

ícone. Ele é semelhante a uma página com um quadradinho dentro. É dentro
desse objeto que nós iremos inserir a arte no mockup.

Passo 2 – Abra o Objeto Inteligente

Para abrir o objeto inteligente (responsável pela arte que será substituída),
basta dar um duplo clique no ícone dessa camada.

9911
100

Você irá notar que, após o duplo clique, o objeto inteligente será aberto como
uma nova aba do programa.

Passo 3 – Substitua a arte

Nesse exemplo, o objeto inteligente é a área disponível dentro da camiseta

para que você possa preencher como desejar. Alguns mockups vêm com
marcações de área, como se fossem marcas de corte, para auxiliar o
posicionamento. Nesse mockup, a marcação está em uma camada separada.

Insira a sua estampa, logotipo, ilustração ou qualquer outro tipo de arte dentro
do objeto inteligente. Caso haja alguma arte demonstrativa, você deverá
apagá-la ou clicar no ícone de olho para deixá-la invisível.

Importante: Evite distorcer sua arte dentro desse espaço, pois os mockups
normalmente já tem uma distorção automática para se ajustar ao objeto da foto
(neste caso, a camiseta).

Passo 4 – Salve o arquivo

Depois de posicionar sua criação, é só salvar o arquivo desse objeto inteligente

apertando as teclas de atalho Ctrl + S. Se o seu mockup tem uma camada de
marcação, como nesse exemplo (camada T-Shirt Shape), não esqueça de
desativá-la antes de salvar.

10011
101

Após salvar o objeto inteligente, basta voltar na aba anterior e você conseguirá
visualizar a arte já ambientada no mockup que você baixou.

10111
102

Alguns arquivos vêm com opções de ajuste de cor ou de outras

características do objeto. Se você tiver um conhecimento maior de
Photoshop, poderá também fazer os seus próprios ajustes.

Nesse exemplo, o autor fez uma pasta com várias cores para a camiseta. A
variedade de opções vai depender de cada mockup. O segredo é baixar
várias opções e fazer os testes de aplicação para ver qual oferece um efeito
mais realista para seus projetos.

Após deixar o mockup do jeito que deseja, basta salvar o arquivo como
imagem para utilizá-lo em suas apresentações ou em qualquer outra
situação.

15.2 Mockups online

Outra maneira de criar mockups é fazer isso diretamente pelo navegador,

sem a necessidade de abrir o Photoshop.

Existem alguns sites que possibilitam fazer isso, mas o mais conhecido é o
Placeit.Você poderá criar mockups online de forma gratuita (opções
limitadas), comprando diretamente o mockup ou assinando o serviço para
poder baixar mockups de forma ilimitada.

10211
103

Nesse exemplo, vamos mostrar a criação de um mock up gratuito:

Passo 1 – Crie uma conta gratuita

Acesse o site do Placeit, clique em “Inscrever-se”, no canto superior direito e

depois preencha as informações para criar sua conta.

O processo é bem simples e em pouco tempo você terá criado uma conta
gratuita por lá. Após criá-la e ativá-la, basta fazer o login com suas
credenciais.

Passo 2 – Utilize a busca para escolher um mockup

Utilize a busca do site para encontrar o mockup perfeito para sua

necessidade. Nesse exemplo, nós buscamos pelo termo “caneca”.

O resultado da pesquisa mostrará itens gratuitos e pagos. Caso queira

visualizar apenas itens gratuitos, utilize o filtro no canto superior esquerdo,
escolhendo a opção “Free”.

10311
104

Depois, basta conferir as opções disponíveis e escolher aquela que mais te

agradar.

Passo 3 – Faça o upload da sua arte e personalize o mockup

Os passos restantes são bem intuitivos. O botão azul da esquerda serve

para você fazer o upload do seu design para o mockup. Basta clicar e
escolher algum arquivo de imagem do seu computador, ou arrastá-lo
diretamente para o botão.

Alguns mockups do site também permitem personalizar as cores e outras

características do objeto. Quando essas opções estiverem disponíveis, elas
aparecerão nos botões à direita.

10411
105

Passo 4 – Faça o download do mockup pronto

Após personalizar o mockup com sua imagem e as cores que você desejar,
basta clicar no botão de Download no canto superior direito.

Pronto, você irá baixar a imagem que pode ser utilizada da forma que achar
melhor.

16. PROTÓTIPO

Protótipo é um modelo inicial de um produto que está em fase de

desenvolvimento e testes. Essas versões são muito utilizadas para testar
funcionalidades, captar a opinião de pessoas usuárias em pesquisas e até
mesmo ser base para MVPs (Minimum Viable Product).

É sempre interessante, e preciso, pensar em protótipos como uma versão mais

inicial de uma ideia. Em alguns casos, essa versão não é tão inicial, uma vez
que já pode ter sido otimizada algumas vezes, mas certamente é ainda algo
não pronto. A ideia é justamente testar possibilidades e estudar a usabilidade.

Os protótipos têm um compromisso de parecerem com o produto final, mas não

a obrigação de serem 100% funcionais sempre. Em alguns momentos, pode
ser que um protótipo seja apenas uma representação visual de uma tela de um
aplicativo, por exemplo.

10511
106

No entanto, pode ser que esse protótipo já seja totalmente interativo, simulando
com certa fidelidade como será a experiência de uso às pessoas
consumidoras. Geralmente, esse modelo mais complexo e pronto, ainda que
em uma escala bastante reduzida de possibilidades e features, se tornam
MVPs de produtos.

Testes

A primeira função principal de um protótipo é testar algo. Se você vai criar uma
jornada de interações em um app bancário, por exemplo, o protótipo vai ter
todas essas telas e as funcionalidades que se espera. Assim, dá para testar
como acontece a progressão do ambiente diante das interações planejadas
para essa experiência.

O protótipo não precisa ser tão completo se você quer testar apenas uma
funcionalidade desta aplicação. A ideia é realmente ter algo concreto e que
tenha a ideia do que se pretende desenvolver ali, pronto para ser "mexido".
São os testes que vão ocorrer em cima dessa versão que vão definir o que está
pronto, o que precisa sair e o que precisa de ajustes.

Avaliações de pessoas usuárias

É muito comum também usar protótipos para aplicar pesquisas com pessoas
usuárias reais de serviços e produtos. Essa é uma prática recorrente nos times
de UX, quando precisam avaliar a experiência que estão oferecendo em seus
produtos. Nesses casos, quem usa o produto é convidado para interagir com o
protótipo e dar suas percepções.

Nesses testes, não há nenhuma intervenção do time de produto. Apenas é

observado o comportamento dessa pessoa usuária durante o processo. Depois
da interação com o protótipo, uma pessoa de UX research aplica um pequeno
questionário em que pode avaliar como foi a experiência aplicada com ajuda
desse protótipo.

É importante entender também que há diferentes tipos de protótipos e isso se

faz relevante para que pessoas dentro de times de produto saibam que podem
prototipar de diferentes formas. Portanto, se o time é limitado ou faltam
recursos, é possível ter modelos mais simples, mas que conseguem transmitir
a ideia principal de maneira bastante precisa.

10611
107

Em compensação, há também os protótipos em que se investe tempo de

trabalho e, muitas vezes, dinheiro na criação. Nesses casos, são versões mais
próximas do que vai para o mercado, ou o contexto é de empresas de grande
porte em que há a possibilidade de protestar dessa forma.

Para que você entenda as possibilidades e como pode trabalhar em diferentes

tipos de protótipos, vamos apresentar as principais categorias a seguir.

Protótipo de baixa fidelidade

Os protótipos de baixa fidelidade trazem uma ideia mais simplória de uma

interface de funcionamento da aplicação em questão. Consequentemente, nem
todas as funcionalidades podem ser testadas e também não há tanto realismo
na disposição de elementos. É somente uma tentativa de reprodução mínima,
com o menor custo e trabalho aplicado possível.

Em suas concepções, protótipos de baixa fidelidade conseguem apresentar as

funcionalidades da aplicação visualmente, mas com pouco detalhamento.
Também são limitadas, ou inexistentes, as possibilidades de interação. Por fim,
muitas vezes, esses protótipos são feitos em papel.

A ideia é realmente validar ideias bem básicas e essenciais para o projeto em

questão, justamente por isso a baixa fidelidade não interfere na análise que é
feita. Ou seja, esses protótipos podem ser usados muitas vezes, mas somente
quando essa falta de detalhamento não interfere negativamente.

Sketches

Os sketches nada mais são do que esboços desenhados a mão em papel.

Quando designers têm uma ideia consistente na cabeça e precisam concretizar
isso de alguma forma, os sketches são a melhor forma de representar
inicialmente o que foi pensado para a aplicação em questão.

10711
108

Ótimo exemplo de sketch mostrado por Sunny Cui

papel

Os protótipos de papel são bastante comuns em times de produto. Em testes

conduzidos pelo time de UX, são criadas as telas em papel e o usuário
convidado à testagem precisa interagir com essas telas como se estivesse
realmente utilizando um recursos digital.

A cada toque em um botão representado no papel, alguém do time de UX

precisa ir trocando as telas para criar essa experiência de progressão de
interação. Essa é uma técnica bastante comum para validar ideias e testar a
experiência de usuário.

Click-through

Podemos dizer que os protótipos click-through são os mais detalhados e

avançados dentro da categoria de baixa fidelidade, isso porque neles é
possível interagir com cliques para simular a progressão de telas.

10811
109

Fonte: Fluid UI

Protótipos do tipo são criados em softwares especializados e costumam ser

usados nas etapas iniciais, mas já com uma ideia mais sólida em relação às
interfaces.

16.1 Protótipo de alta fidelidade

O protótipo de alta fidelidade é a representação mais realista de um produto, já

bastante próximo da versão final. A ideia é que esse modelo já tenha todas as
funcionalidades de interação que se pretende para a versão que chegará ao
mercado.

Portanto, esses protótipos funcionam com interfaces bastante detalhadas e

fiéis a um modelo final. Da mesma forma, esses modelos já rodam como
aplicações reais e permitem um nível de interação bastante aprofundado a
quem vai testá-lo.

Interativos

Os interativos são versões em que apenas há as respostas das telas aos

toques ou cliques. Ou seja, não há uma estrutura de funcionamento totalmente
pronta para lançar o produto, mas se tratando de interfaces, há a simulação
perfeita de como essas telas vão reagir a cada interação da pessoa usuária.

10911
110

Em código

Os protótipos em código já são praticamente o produto pronto. Já há todo

código back-end por trás das interfaces e, com poucos ajustes, se necessários,
essa versão já se torna a final e fica pronta para ser lançada. Esse tipo de
protótipo é utilizado apenas para alguns ajustes finos que possam ser
necessários.

16.2 Fazendo um Protótipo

Parte deste processo de entender o que é protótipo passa por compreender em

quais momentos esses modelos podem ser utilizados. A prototipação tem
várias razões e é justamente isso que a torna uma solução essencial aos times
de produto. Entenda a seguir quando e por quais motivos prototipar.

Testar funcionalidades de um produto

Produtos digitais têm níveis diversos de funcionalidades que vão servir para
justificar sua existência entregando algum valor a pessoas usuárias. Durante o
processo de concepção e desenvolvimento, testar essas funcionalidades é algo
obrigatório e uma boa prática.

Por vezes, os protótipos vão ser essenciais para mostrar como essas
funcionalidades vão funcionar na prática. Nem sempre algo que foi pensado
como uma boa feature vai se comportar dessa maneira quando uma interação
concreta é planejada.

Testar funcionalidades e entender como se comportam faz parte desse

processo de desenvolvimento de produto. Portanto, sempre que for necessário
fazer esse tipo de teste, a prototipação é a melhor solução possível.

Recolher feedbacks de clientes

Os testes com clientes são outra etapa importante nesse processo de

desenvolvimento ou de melhoria de determinada solução. Nada melhor do que
as pessoas que fazem uso do produto para dizer exatamente o que pensam
sobre a solução, no geral, ou sobre funcionalidades.

Portanto, aqui é importante pensar em protótipos de diferentes formas. É

possível utilizar os de baixa fidelidade, como os de papel, quando é o caso de
testar a experiência de uso de maneira simples. Isso serve para validar

11011
111

algumas ideias e entender em que pontos há a necessidade de mudar seja

uma micro cópia, seja um botão.

As versões de protótipos de alta fidelidade podem ser utilizadas para testar

uma versão final de produtos. Assim, pessoas que serão, certamente, usuárias
dessa solução podem transmitir suas percepções sobre determinado app, site,
ou experiência dentro de uma solução.

Defender uma ideia para stakeholders

Dentro de times de produtos, stakeholders têm papel decisivo para que ideias
de features e outras questões sejam aprovadas e sigam nos projetos. Logo,
membros desse time precisam saber como argumentar suas propostas para
defendê-las diante dessas pessoas.

Nada melhor do que bons protótipos para ilustrar de maneira precisa de que
maneira a ideia em questão vai funcionar bem no produto. Nesses casos, cabe
ao time ou à pessoa membro em questão decidir qual tipo de protótipo tem
maior força para defender essa ideia diante de stakeholders.

Não necessariamente estamos falando de protótipos de alta fidelidade. O

importante mesmo é que o argumento seja sólido e, neste caso, a prototipação
seja uma base de apoio à ideia. Combinar esses dois fatores é importante para
transmitir com clareza e precisão o que se pretende.

Analisar possíveis falhas e problemas

Consequentemente, protótipos vão sempre trazer uma percepção acerca de

problemas que features, ou do produto como um todo, apresentam. Pode ser
que isso aconteça naturalmente, durante testes, ou que alguém queira
prototipar justamente para apontar esse erro, método que é também bastante
válido e permite coletar boas observações.

Quando determinado problema é analisado dentro de um contexto de uso da

solução, é possível perceber de que maneira essa falha vai impactar a
experiência de uso. Essa é a maneira mais precisa de entender questões
problemáticas e começar a pensar em ações de correção e solução.

11111
112

Portanto, não se preocupe com a possibilidade de detecção de falhas em

protótipos. Na verdade, este é o melhor cenário possível, uma vez que a
prototipação serve justamente para isso.

Fazer um lançamento experimental

Lançamentos experimentais fazem parte da estratégia de muitas marcas. A

ideia é validar um produto e entender o que o público pensa sobre. Se a
resposta é positiva, então uma versão em que há mais recursos e melhor
investimento é planejada para o mercado.

Na maioria das vezes, esses lançamentos são feitos com protótipos de alta
fidelidade, já com código, em que quase tudo funciona perfeitamente. Essas
versões de prototipação são bastante comuns e quando se detecta que tudo
funciona bem, a estratégia de mandar ao mercado é bastante comum.

Esses protótipos com funcionamento perfeito, mas em versões menos

completas são o ponto de partida para se tornarem um MVP. Assim, dá para
validar o produto como um todo e entender a resposta do público em relação à
ideia da empresa.

Entender o que é protótipo é fundamental para qualquer pessoa que pretende

atuar em UX e em produto, de maneira geral. Como essas equipes de trabalho
atuam em times ágeis, a prototipação acaba sendo muito benéfica para aplicar
a ideia de melhoria contínua nas aplicações.

17. EXPERIÊNCIAS FUNCIONAIS, CONFIÁVEIS, USÁVEIS E PRAZEROSAS

UX (Experiência do Usuário) é algo que se refere a como uma pessoa se sente

sobre uma determinada experiência. Isso inclui produtos, serviços, eventos e
interações.

“User Experience é tudo! É a forma com que você sente o mundo, é a forma
como você experiencia a sua vida, é a forma como você experimenta um
serviço, um aplicativo, um sistema de computador.

” –Don Norman, criador do termo “UX (User Experience)”

Então anota aí: UX vai além de telas ou interações, é a experiência como um

todo.

11211
113

UX Design ou (Design de Experiência do Usuário) é uma área multidisciplinar

que visa criar e aprimorar elementos que compõem uma experiência de uso.

Um dos principais objetivos é criar experiências que sejam Funcionais,

Confiáveis, Usáveis e Prazerosas. Assim, alinhando todas as necessidades e
expectativas de usuários e empresas.

UI e UX são duas coisas completamente diferentes

Uma das principais confusões que ocorrem no mundo do UX é achar que

UI(User Interface, interface do usuário) é a mesma coisa que UX (User
experience, experiência do usuário).

É diferente, UI tá inserido dentro de UX, mas não é a mesma coisa**.** UI é

somente uma interface/tela, um meio da pessoa interagir com algo.

Mas de certa forma é interessante que o profissional de UX conheça e entenda

um pouco sobre os princípios de design visual e softwares como Adobe XD e
Sketch.

Então lembre-se, que quando se fala sobre UX Design isso não se limita
somente a projetar telas de aplicativos, o profissional que é responsável por
projetar telas de aplicativos é o UI Designer ou o Designer Visual.

11311
114

Faça protótipos sempre

A melhor maneira de descobrir se uma ideia vai funcionar e dar certo é através
da prototipação que é algo super simples e fácil de fazer na maioria dos casos,
mas muitas vezes é ignorado ou esquecido.

Quando o usuário tem algo concreto para interagir e não só especulações tudo
fica mais fácil de decidir se aquilo resolve ou não um problema. Eu escrevi um
artigo bem completo sobre esse assunto.

Entenda o que é Empatia

Sem sombra de dúvidas empatia é a palavra que mais aparece no universo de

UX.

Eu acredito que não existe UX sem empatia, que é nada mais nada menos do
que a habilidade de se colocar no lugar de outra pessoa, sentir o que ela sente
e entender profundamente a situação dela.

Essa é uma área que sempre vai levar em consideração o ponto de vista das
pessoas, logo desenvolver a sua capacidade de ter empatia é algo
indispensável para quem almeja ser um bom profissional de UX.

Quando você de fato entender o porquê que as pessoas fazem o que fazem
você vai ter muito mais facilidade de projetar algo que funcione e faça bem às
pessoas.

Se você não está tentando melhorar a vida das pessoas, o que você está
fazendo então?

Pesquisa é indispensável

Um dos maiores erros de um UX Designer é tomar decisões com base em

suposições.

Ao pesquisar você vai conversar com o usuário de um determinado produto ou

serviço, e ao utilizar técnicas de etnografia você vai procurar entender
profundamente os objetivos, motivações e sentimentos dessa pessoa.

11411
115

Com base nesses dados, toda vez que você for tomar uma decisão de design,
você vai levar em consideração como o seu usuário se sente sobre essa
determinada decisão.

E por que isso é tão importante?

Porque é através da pesquisa que você entende de fato qual problema você
precisa resolver.

Encontrar o verdadeiro problema

Muitas vezes recebemos problemas “enlatados” para resolver, coisas como:

Projetar uma nova interface mais fácil de usar, melhorar o fluxo de uso de um
site, etc.

Mas será que esse é o problema real que você precisa resolver?

De acordo com o Don Norman autor do livro The Design of Everyday Things,
uma das melhores maneiras de descobrir o real problema que você quer
resolver é através do métodos “5 Whys” que consiste em questionar
repetidamente o por que de algo, exemplo:

Por que precisamos de uma nova interface? R: A atual é difícil demais de usar.

11511
116

Por que você acha que é difícil de usar? R: É muito demorado para fazer
operações básicas, registrar… Etc, etc etc…

Enfim, a história vai longe. Não necessariamente você precisa questionar cinco
vezes. Mas eu garanto pra você que o quão mais você questionar mais perto
você vai estar de descobrir o real problema que precisa ser solucionado.

Design é sobre pessoas, e UX é sobre como projetar elementos que vão

compor a experiência de uma pessoa.

Não realizar pesquisas ou levar em consideração o ponto de vista do seu

usuário é completamente contra todos os princípios de UX.

Observe

Depois da habilidade de ter empatia, a observação é uma das coisas mais

importantes que um profissional de UX deve se preocupar em desenvolver.

Muitas vezes as pessoas não conseguem descrever muito bem o que estão
sentindo ou pensando e é através da observação que você consegue entender
o que está acontecendo.

Além disso, devemos estar sempre atentos a todas as experiências ao nosso

redor.

O livro Roube como um artista sugere que você carregue consigo mesmo um
caderno de referências.

Anote todas as boas e más experiências que você observar no seu dia-a-dia.

Estes são os princípios básicos que me ajudaram a começar em UX.

No final das contas tudo está relacionado à como melhorar a experiência das
pessoas.

Então nunca se esqueça de sempre buscar maneiras de apresentar soluções

cada vez melhores e que resolvam os problemas das pessoas.

11611
117

18. FONTES DE INSPIRAÇÃO

Para te ajudar a ampliar seu repertório, segue uma pequena lista de sugestões
de sites para você se inspirar:

Awwwards

É um site que premia os melhores projetos de design digital em todo mundo.

Mas também é onde os profissionais de design digital encontram inspiração,
transmitem conhecimento e experiência, se conectam e compartilham críticas
construtivas e respeitosas.

interface do site awwwards

BEHANCE

A mais famosa, e talvez a principal plataforma online para mostrar e descobrir o

trabalho criativo.

Foi criada em 2006 com o objetivo de ajudar profissionais de criação a se

organizar e mostrar seus trabalhos de uma forma livre de burocracias. A ideia é
aproximar designers e artistas de múltiplas áreas de empresas que estejam
procurando seus serviços.

11711
118

interface do site behance

Dribbble

Dribbble é uma comunidade de designers e criativos que compartilham

pequenas partes que mostram seus trabalhos, processos e projetos atuais.

Fundada em 2009, Dribbble começou com um pequeno projeto, mas tornou-se

um recurso para descobrir e se conectar com designers em todo o mundo.

interface do site dribbble

11811
119

From Up North

Criada em 2009 como um blog de referências na Suécia, hoje é uma revista

on-line que fornece as melhores e mais recentes novidades da indústria
criativa. Compartilhando inspiração ao mostrar criativos surpreendentes em
todo o mundo.

interface do site from up north

Pinterest

É mais uma rede social que permite o compartilhamento de fotos e vídeos em

diferentes murais, de acordo com os gostos de cada usuário. Aliás, o próprio
nome pin + interest remete-nos para isso mesmo, uma parede virtual onde
cada pessoa pode pendurar aquilo que mais lhe interessa.É muito utilizado no
mundo todo e encontra-se referências de muitas áreas do design, artes,
decoração, e

interface do site pinterest

11911
120

Inspiration Grid

O site funciona como uma revista on-line, que reúne talentos criativos de todo o
mundo e em diversas áreas, tais como: design, arte, ilustração, tipografia,
fotografia, arquitetura, moda e muito mais.

interface do site inspiration grid

The Red List

O site foi projetado como um livro de tendências e uma fonte de inspiração,

oferece imersão total em todo o mundo das artes visuais, de modo a construir
pontes entre a criatividade histórica e contemporânea. Os pesquisadores de
imagens precisam ver o que é novo e inovador, mas eles também precisam
treinar seus olhos ao buscar referências, ecos e alusões à criação artística.

interface do site the red list

12011
121

19. UI E UX VOLTADO PARA DISPOSITIVOS MÓVEIS.

Uma experiência móvel positiva passa diretamente por um UX Design bem

trabalhado. Isso significa que não dar a devida atenção a esse aspecto do
desenvolvimento pode acabar com a imagem da marca na visão dos clientes.

Para falar um pouco mais a respeito de como criar experiências móveis

incríveis com base em um UX Design sólido e a sua importância para as
empresas, confira este artigo!

No ano de 2009, tivemos os primeiros lançamentos de sites mobile-friendly, ou

seja, que buscavam facilitar a navegação por meio de dispositivos móveis com
botões maiores, formulários adaptados e outras ações.

Já em 2012, a tecnologia dos smartphones já havia se tornado mais robusta.

Assim, notou-se uma grande evolução da experiência do usuário, com o
surgimento de vários apps de grandes marcas.

A partir de 2014, boa parte das pessoas deixou de ter o primeiro contato com
as companhias por meio de um desktop ou notebook e o mundo passou a ser
mobile-first. Essa consiste em uma das mudanças de hábito mais
emblemáticas de nossa época atual e demonstra o poder da transformação
digital sobre o consumo.

Ao realizar todas as necessidades por meio de smartphones, os usuários

colocam a experiência mobile como prioridade para as empresas. Hoje, é
impensável contar com um site que não seja adaptativo ou responsivo.

Segundo a FGV em uma pesquisa anual sobre TI, existem mais de 220
milhões de smartphones ativos no Brasil hoje, cerca de um por habitante. Além
disso, a Statista conduziu um estudo que determinou que o tempo médio gasto
pelos brasileiros nos dispositivos móveis chega a quatro horas e meia por dia.

Pilares do UX Design mobile

Entre os pilares para a construção de uma boa experiência para usuários

mobile estão os listados a seguir:

12111
122

Conteúdo

Não basta criar um layout incrível e contar com uma boa navegação e
velocidade se os usuários não conseguem encontrar o que buscam. Dessa
forma, eles não retornarão. Um conteúdo bem planejado figura como algo
fundamental.

Velocidade

Principalmente no Brasil, em que as redes de comunicação não são tão

turbinadas, é preciso cuidado na hora de desenvolver para mobile. A rapidez
com que o conteúdo é carregado pode ser a diferença entre contar com mais
visitantes ou ser esquecido rapidamente.

Design

O espaço consiste em um fator muito importante no mobile, pois ele é

altamente limitado. Com isso, deve-se organizar a tela e criar ambientes
intuitivos, de simples navegação.

Design adaptativo e responsivo

Existem duas maneiras básicas de se trabalhar o UX Design para dispositivos

móveis: o modelo adaptativo e o responsivo.

Responsivo

Esse tipo de design mostra o conteúdo com base no espaço que o navegador
determina como disponível, sendo que, ao alterar o tamanho da janela, o site
se auto-corrige para o novo formato.

Mesmo que à primeira vista possa parecer o modelo ideal, é necessário tomar
bastante cuidado: podem ocorrer quebras de elementos em tela conforme uma
grande variedade de tamanhos de smartphones acessam o portal.

12211
123

Adaptativo

Esse modelo é bem mais simples e consiste na construção de várias versões

do site de acordo com uma extensa gama de telas. Ao acessar o endereço, o
navegador indica o design mais adequado.

Isso garante mais assertividade na hora da montagem do site na tela do

smartphone, evitando qualquer tipo de quebra. Entretanto, consome mais
recursos para manter vários layouts.

Boas práticas de UX Design para mobile

Pesquise antes de desenvolver

Antes de começar a projetar modelos, faça uma pesquisa de campo com seus
consumidores e entenda o que gera valor para eles ao invés de criar protótipos
com base em um falso consenso.

Leitura complementar: UX Research & Design: como desenhar uma boa

experiência do usuário

Priorize recursos

Encher um site ou aplicativo mobile de recursos não faz dele mais atraente e
deixá-lo com aparência de inchado. Priorize aquilo que realmente interessa ao
seu usuário e faça isso funcionar bem. A maioria dos aplicativos bem
sucedidos são simples.

Mantenha tudo organizado

Uma interface sem clareza afeta a navegação e sobrecarrega o usuário com

informações. Dados em tela devem ser apenas o suficiente para a
compreensão, sem exageros. Textos em demasia não combinam com mobile.

Verifique a intuitividade

Navegar em um aplicativo deve ser uma atividade intuitiva, que não demande
várias explicações. O usuário precisa chegar à informação buscada em uma
primeira interação, sem problemas.

12311
124

Crie botões simples e fáceis de clicar

O ideal é que os botões sejam facilmente identificáveis e permitam o toque de

modo rápido e simples. Controles muito pequenos podem causar dificuldades
para pessoas que têm dedos maiores, prejudicando a utilização.

Forneça textos simples e legíveis

Grandes textos não combinam com as pequenas telas encontradas nos

smartphones. Portanto, use passagens de fácil entendimento e com o mínimo
possível de informações, além de escolher por determinadas tipografias.

Demonstre feedbacks sobre interações

Cada toque em tela deve desencadear uma reação visível ao internauta. Desta
maneira, ele compreende que sua entrada foi recebida e a informação
processada, criando interações melhores entre usuário e aplicação.

Minimize a necessidade de digitar

Digitar em dispositivos móveis consiste em uma atividade dificultosa para

muitas pessoas e pode levar a uma experiência negativa. Com isso, minimize
ao máximo essa necessidade.

Preocupe-se com a experiência

A experiência mobile deve seguir o padrão dos outros canais que a empresa
tem para contato com o cliente, resultando em uma complementação e não em
algo isolado. É preciso construir um padrão.

Teste constantemente o projeto

Até mesmo interfaces bem projetadas e pensadas podem ficar desatualizadas

com o tempo e o surgimento de novas soluções e modelos de aplicação.
Sendo assim, é vital manter um olhar atento sobre essas possíveis mudanças.

Péssimas práticas de UX Design para mobile

Para finalizar, confira alguns pontos que são considerados como péssimas
práticas de UX Design para mobile:

12411
125

não tente alcançar a perfeição na primeira versão, visto que ela será construída
com o tempo;

● não produza de forma isolada, pois o cliente deve ser o centro das
interações;
● não peça várias permissões logo no início da aplicação;
● não use telas de carregamento em branco;
● não se valha de jargões;
● Não utilize gestos personalizados.

Esses são alguns dos principais erros que você precisa evitar para garantir
uma melhor experiência ao seu usuário, assegurando que ele continuará
acessando o site ou utilizando o aplicativo.

O UX para Mobile figura como elemento fundamental para criar um ambiente

satisfatório ao seu consumidor, gerando layouts mais interativos e fáceis de
usar.

Source: Semantic Studios "User Experience Design"

12511
126

REFERÊNCIAS BIBLIOGRÁFICAS

INTRODUÇÃO. APLICATIVO. Transformação de Digital.

<https://transformacaodigital.com/aplicativo/experiencias-moveis-pensando-ux-
design-para-dispositivos-mobile/>Acesso em 21 Mai. 2022

JANY, Sites Como FONTES DE INSPIRAÇÃO Para Designers

.<https://designconceitual.com.br/2017/06/13/8-sites-como-fontes-de-inspiracao
/> Acesso em 10 Mai. 2022.

blog someterra. Protótipos para aplicações ui e ex. LCT –

<https://blog.somostera.com/ux-design/o-que-e-prototipo>, Acesso em 10 Mai.
2022.

CHILI GUM, Teorias de Cores.Disponível em

<https://chiligum.com.br/insights/teoria-das-cores/>, Acesso em 10 fev. 2022.

WEB TRENDS.EXPERIENCE UX DEFINIÇÃO DE DESIGN NAS TELAS

< https://webtrends.net.br/user-experience-ux-definicao/>
Acesso em 21 Mai. 2022.

12611