[E-book] User Experience Guias de Estilo

Prévia do material em texto

USER EXPERIENCE 
GUIAS DE ESTILO
Mundo Tech
SUMÁRIO
Guia de estilo: paleta de cores, tipografia e ícones ...............................................3
Paleta de cores ................................................................................................................9
Tipografia .......................................................................................................................10
Ícones ..............................................................................................................................14
Design system ou sistema de design .........................................................................16
Ferramentas de prototipação de interfaces .............................................................17
Técnicas de desenvolvimento de protótipos ............................................................18
Espaço em branco .........................................................................................................19
Cor ...................................................................................................................................19
Contraste ........................................................................................................................20
Escala...............................................................................................................................20
Alinhamento ..................................................................................................................21
Tipografia .......................................................................................................................22
Hierarquia visual ...........................................................................................................22
Referências ................................................................................................................24
3
GUIA DE ESTILO: PALETA DE CORES, 
TIPOGRAFIA E ÍCONES
As guias de estilos de interface, item que você conhecerá neste estudo, 
fornecem um padrão para a forma como um produto deve ser apresentado. Isso 
pode incluir cores da marca, fontes, ícones, botões, imagens/fotografias, pop-
ups e como os elementos são animados. Elas atuam como uma ferramenta de 
referência para ajudar as empresas a se comunicarem de maneira consistente. 
Isso se torna particularmente importante quando há vários colaboradores em 
diferentes equipes criando conteúdo para uma empresa.
Uma ferramenta de prototipagem permite que um designer crie elementos 
visuais, elementos de navegação e interações para fornecer uma representação 
sólida de como um design se comportará e se sentirá. Estas ferramentas são 
recursos essenciais no arsenal de qualquer designer de UI/UX. Por fim, você 
conhecerá algumas técnicas de desenvolvimento de protótipos. Com estas 
dicas, espera-se que seu processo de design seja mais adequado ao atender às 
necessidades dos usuários. 
Outro item pertencente a UI que merece destaque é a guia de estilo. Este 
tipo de documentação estática descreve vários padrões de design: como os 
componentes devem parecer e se comportar, casos de uso para padrões de 
UI, escalas tipográficas corretas, cores etc. A utilização deste guia tende a 
garantir a consistência do produto em diferentes equipes de design, empresas 
e marcas. Confira, nas figuras, a seguir, um exemplo de guia de estilo elaborada 
pelo governo do Distrito Federal e uma guia de estilo da plataforma de 
relacionamento do CNA.
4
5
6
7
8
Figura 1 - Guia de estilo do governo do Distrito Federal
Fonte: Governo do Distrito Federal (2022)
9
Figura 2 - Guia de estilo da plataforma de relacionamento do CNA
Fonte: Mello (2022)
Paleta de cores
Uma paleta de cores é uma combinação de cores usada por designers de 
interface do usuário ao projetar uma interface. Quando usadas corretamente, 
as paletas de cores formam a base visual da sua marca, ajudam a manter a 
consistência e tornam a interface do usuário esteticamente agradável e fácil de 
usar (AELASCHOOL, 2021; PAIVA, 2022).
As paletas de cores são comumente apresentadas como uma combinação de 
códigos hexadecimais no design digital. Os códigos hexadecimais comunicam 
a um computador a cor que você deseja exibir. Nos anos 90, a maioria das 
paletas de cores digitais incluía apenas oito cores. Agora, os designers têm uma 
infinidade de tons e matizes da roda de cores para escolher. Confira um exemplo 
de paleta de cores hexadecimais na figura, a seguir.
10
Figura 3 - Exemplo de paleta de cores
Fonte: do Autor (2022)
A paleta de cores escolhida para seu site ou aplicativo não apenas torna a 
interface visualmente agradável, mas também transmite toda a identidade da 
sua marca. Com tantas opções em jogo, criar a combinação de cores perfeita 
muitas vezes pode levar a grandes desafios. Para aliviar a responsabilidade, 
muitos designers recorrem a um gerador de paleta de cores online para ajudá-
los a determinar quais cores se alinham com sua marca e visão. Confira, a seguir, 
alguns geradores de paleta de cores online que todo designer de interface do 
usuário deve ter por perto.
 › Coolors – O Coolors ganhou popularidade graças à sua simplicidade 
e crescente biblioteca de paletas de cores para iOS e Android. Com uma 
interface intuitiva de arrastar e soltar, o Coolors é um recurso útil para 
iniciantes. Você pode editar suas cores, alterar sua ordem e expandi-las para 
exibir uma seleção de alternativas. Com um toque na barra de espaço, o 
gerador irá formar automaticamente opções para outras cores. Depois de 
criar uma paleta com a qual você está satisfeito, é possível copiar os códigos 
hexadecimais das cores ou exportar a paleta (COOLORS, 2022).
 › Adobe Color – Preparado como o recurso de cores para todos os criativos 
digitais, o Adobe Color tem tudo o que você precisa para gerar uma paleta ou 
cores harmoniosas a partir de qualquer cor base. Se você tiver uma conta na 
Adobe, tudo o que você precisa é fazer login e salvar as paletas geradas para 
uso posterior ou compartilhá-las com outros usuários (ADOBE, 2022).
 Tipografia
A tipografia é muito mais do que escolher uma boa fonte para seu site ou 
aplicativo. É a arte de usar tipos de letra para dar vida à sua interface. Com tanto 
a considerar ao trabalhar com tipografia, incluindo legibilidade, acessibilidade e 
hierarquia, seu uso de tipografia pode marcar a diferença entre uma boa ou uma 
ótima interface (AELASCHOOL, 2021; YATES, 2022).
11
A tipografia envolve estilo, aparência e estrutura da fonte, com o objetivo 
de provocar certas emoções e transmitir mensagens específicas ao usuário 
final. Além de garantir que o tipo de letra se presta ao equilíbrio visual do 
site ou aplicativo, é trabalho do designer de interface do usuário otimizar a 
acessibilidade do site e manter a tipografia altamente legível.
Quando os usuários chegam pela primeira vez a uma página da web ou de um 
aplicativo, eles verificam a página em vez de lê-la. Ter uma hierarquia clara e 
tipos de letra limpos são essenciais para criar uma excelente impressão com o 
usuário e, finalmente, mantê-los na página.
Depois de chamar a atenção de seus usuários, o próximo desafio é transmitir 
informações. Como as pessoas estão acostumadas a receber informações 
em forma de texto, é responsabilidade dos designers de interface do usuário 
garantir que o tipo de letra ajude a transmitir a mensagem em vez de distraí-la.
Finalmente, a tipografia deve misturar-se perfeitamente com os outros 
elementos da interface e atuar como o item que mantém tudo junto. Ela deve 
definir o tom geral do produto, trabalhando em harmonia com o restante dos 
gráficos para criar um equilíbrio visual geral esteticamente agradável. Confira, 
a seguir, alguns itens a serem analisados em uma fonte (AELASCHOOL, 2021; 
YATES, 2022).
 › Fontes referem-se aos pesos, larguras e estilos que constituem um tipo de 
letra. E, um tipo de letra é uma família de fontes relacionadas.Os três tipos 
básicos de fonte são serifa, sans-serif e decorativa.
 › Manter seus tipos de letra consistentes é a chave para evitar confusão. 
Manter o mesmo estilo de fonte ajudará seus leitores a entender 
instantaneamente o que estão lendo e começar a notar um padrão.
 › Também conhecido como espaço negativo, o espaço em branco é a área 
em torno de textos ou gráficos. Tende a passar despercebido pelo usuário, 
mas o uso adequado do espaço em branco garante que a interface seja 
organizada.
 › O alinhamento é o processo de unificação e composição de texto, gráficos 
e imagens para garantir que haja espaço, tamanho e distâncias iguais entre 
cada elemento.
 › Um dos elementos mais interessantes da tipografia é a cor, que tem três 
componentes principais: valor, matiz e saturação. Um bom designer saberá 
equilibrar esses três componentes para tornar o texto atraente e legível, 
mesmo para pessoas com deficiência visual.
 › Estabelecer hierarquia é um dos princípios mais vitais da tipografia. A 
hierarquia tipográfica propõe a criação de uma distinção clara entre as partes 
proeminentes, que devem ser notadas e lidas primeiro.
12
 › Assim como a hierarquia, o contraste ajuda a transmitir quais ideias ou 
mensagens você deseja enfatizar para seus leitores.
Embora seja tentador usar vários tipos de letra em um único design, pode 
ser negativo para o usuário. Se você não conhece a combinação de fontes e a 
tipografia, comece usando fontes da mesma família ou, em outras palavras, um 
único tipo de letra. Como as fontes do mesmo tipo de letra foram criadas para 
trabalhar harmoniosamente juntas, aderir a um tipo de letra automaticamente 
dará à sua interface uma aparência mais coesa (AELASCHOOL, 2021; YATES, 
2022).
Muitos tipos de letra ainda vêm com alcance suficiente para garantir que 
você tenha amplas variações de fonte para diferentes propósitos. Por exemplo, 
alguns tipos de letra incluem recursos como itálico, opções estendidas, negrito 
e condensadas. Embora isso permita arranjos mais criativos, combinar demais 
estes estilos de fonte não é recomendado.
Nem todas as fontes são criadas da mesma forma (legíveis) e, quando se trata 
de legibilidade, é sempre melhor jogar pelo seguro. Enquanto as fontes com 
serifa, a escolha principal para impressão, são tradicionalmente aclamadas como 
mais legíveis, as fontes sem serifa se prestam melhor para interfaces digitais.
Por fim, ao escolher um tipo de letra, é crucial garantir que suas fontes sejam 
compatíveis com o navegador da web. Bibliotecas de fontes comumente usadas, 
como a plataforma Google Fontes (https://fonts.google.com), oferecem arquivos 
de fontes baseados na web que podem ser renderizados em um navegador com 
o mínimo de problemas. Dica profissional: ao baixar fontes da web, nunca baixe 
mais conjuntos de caracteres do que o necessário.
Confira algumas combinações de fontes sugeridas pelo site Leadpages 
(LEADPAGES, 2021) a partir da plataforma Google Fontes.
13
14
Ícones
Os ícones podem adicionar muita personalidade até mesmo aos designs mais 
minimalistas. Dominar o uso de ícones permite que você os use para aprimorar 
a experiência do usuário e realmente tornar seus produtos mais úteis.
Compreender os tipos de ícones, como eles são melhor usados e o que faz um 
ícone ser “bom” ajudará você a implementá-los efetivamente em seus designs de 
UX. Existem muitos tipos diferentes de ícones disponíveis, e entender o que cada 
tipo representa e para que eles são adequados é o primeiro passo para usá-los 
em seus designs. Confira um exemplo na figura, a seguir.
Figura 5 - Exemplos de ícones da plataforma Material Design
Fonte: Design Material (2022)
Figura 4 - Exemplos de combinações de fontes
Fonte: Leadpages (2021)
15
Entenda, a seguir, alguns tipos existentes de ícones (BATISTA, 2022).
 › Ícones de glifo: são símbolos gráficos e geralmente são sólidos. Eles 
podem ser dimensionados para qualquer tamanho que você precisar. Podem 
também ser personalizados com diferentes cores e efeitos de sombra. Como 
geralmente são de cor sólida, os ícones de glifo podem funcionar muito 
bem em tamanhos pequenos, mas podem não ter muito interesse visual em 
tamanhos maiores.
 › Ícones coloridos: podem ter uma cor sólida ou um esquema de cores 
gradiente e podem fazer com que os ícones pareçam menos formais e mais 
divertidos. A desvantagem dos ícones coloridos é que eles podem ser mais 
desafiadores para integrar a estética de um produto e podem até distrair 
os usuários de conteúdo significativo. Por causa disso, o uso excessivo 
geralmente é prejudicial ao UX.
 › Ícones contornados: são criados por traços vetoriais e estão vazios por 
dentro. Eles têm prós e contras. Como ponto positivo, eles são limpos, 
minimalistas e podem parecer muito polidos. Como destaque negativo, eles 
podem levar mais tempo para que sejam processados e reconhecidos pelos 
usuários.
 › Ícones universais: são imediatamente reconhecíveis e geralmente 
representam ações repetitivas, como “home – início”, “print – imprimir” 
ou “Search – pesquisar”. As ações universais em seu produto devem ser 
representadas com ícones universais, para evitar confusão.
Os ícones podem melhorar a usabilidade de sua interface, fornecendo aos 
usuários dicas visuais imediatas, ao mesmo tempo em que aprimoram o apelo 
estético do seu design. Naturalmente, eles são vitais para criar designs fáceis de 
usar.
Dica
Quando se trata de design moderno de interface do usuário e web 
design, um conjunto de ícones de boa qualidade é inestimável e pode 
trazer um excelente design. 
16
Design system ou sistema de design
Um sistema de design está relacionado a um conjunto de componentes 
reutilizáveis e que oferece diretrizes que ajudam as equipes a se unirem em 
torno de uma linguagem comum durante a criação e o ciclo de vida de um 
produto.
Na maioria dos casos, os sistemas de design são compostos de um guia de 
estilo e uma biblioteca de componentes. Eles também podem incluir elementos 
como voz e tom, bem como valores da marca. O objetivo de ter um sistema de 
design é criar um conjunto de padrões que atuem como uma única fonte de 
padronização de elementos para construção de um produto ou marca.
O Material Design do Google é um exemplo de sistema de design de IU 
estruturado. O Material Design foi introduzido em 2014 como uma forma de 
projetar e desenvolver aplicativos Android coesos. Confira, na figura, a seguir, 
um exemplo dos principais componentes oferecidos pelo Material Design para 
construção de interfaces.
Figura 6 - Principais componentes do Material Design
Fonte: Dreamonkey (2022)
17
Embora existam métodos diferentes que podem ser usados para criar um 
sistema de design, é uma boa ideia escolher uma estrutura que permita que 
a equipe se unifique em torno de uma linguagem comum e um conjunto de 
padrões.
Ferramentas de prototipação 
de interfaces
Existem muitas ferramentas de wireframing disponíveis no mercado no 
momento para atender às demandas de prototipação de interfaces para 
projetos pessoais, empresariais ou industriais, desde ferramentas baseadas 
na web, como Balsamiq e Marvel, a softwares desktop, como Axure (Mac e 
Windows).
Com a abundância de ferramentas disponíveis para usuários de experiência 
do usuário atualmente, selecionar a ferramenta de wireframe correta para 
um projeto não é tão fácil quanto antes. Perceba, na sequência, a relação das 
principais ferramentas.
 › Figma: O Figma é uma ferramenta completa que facilita a colaboração e 
a acessibilidade para designers de UX, desenvolvedores e qualquer outra 
pessoa em uma equipe com uma plataforma hospedada na nuvem baseada 
em navegador (FIGMA, 2022).
 › InVision: Lançado em 2011, o InVision tem uma reputação bem 
estabelecida, e sua dedicação em lançar novas funcionalidades e adicioná-
las à sua plataforma de design os torna os favoritos entre muitos designers. 
O InVision oferece aos designers o poder de montar protótipos funcionais 
rapidamente e compartilhá-los comoutras pessoas. Ele oferece muitos 
recursos interessantes, incluindo uma ferramenta de desenho vetorial 
útil, componentes repetíveis que podem ser alterados em todo o site 
e ferramentas para criar animações e outros efeitos visuais dinâmicos 
(INVISIONAPP, 2022).
 › Adobe XD: O Adobe XD oferece um sistema baseado em vetor para montar 
protótipos, incluindo ferramentas para criar interações, transições e outros 
tipos de funcionalidade dinâmica. Por ser baseado em vetores, dimensionar e 
redimensionar elementos não é problema. O Adobe XD funciona bem ao lado 
de outros aplicativos da família Adobe, como Illustrator e Photoshop (ADOBE, 
2022).
18
 › Axure RP: Axure RP coloca o poder de wireframing e prototipagem 
em um único pacote, ajudando as empresas a melhorar seu processo de 
design de produtos digitais. Ele permite que os designers criem protótipos 
interativos de baixa a alta resolução de sites e aplicativos, tudo sem precisar 
codificá-los. O Axure RP também facilita uma melhor transferência para 
os desenvolvedores, permitindo que um protótipo seja publicado em sua 
nuvem, com todo o código, especificações e outros ativos necessários para 
construí-lo (AXURE, 2022).
 › Marvel: Marvel é uma ferramenta gratuita de prototipagem rápida 
que permite criar aplicativos, sites e produtos digitais rapidamente. Esta 
ferramenta oferece um conjunto completo de ferramentas de prototipagem 
que permitem gerar instantaneamente especificações de design e se conectar 
a outras ferramentas por meio de integrações (MARVELAPP, 2022).
 › Balsamiq: Balsamiq é uma ferramenta de wireframing de baixa fidelidade. 
Embora não seja necessariamente projetado especificamente para protótipos 
prontos, como algumas das ferramentas mencionadas anteriormente, é um 
ótimo lugar para criar maquetes de wireframes de sites. Balsamiq pode ser 
usado para mais do que apenas sites. Esta é uma ótima opção para esboçar 
o design do produto, aplicativos da web, software de desktop, aplicativos 
móveis e wireframes da interface do usuário (BALSAMIQ, 2022).
 › Sketch: A uniformidade e a consistência conduzem grande parte da 
funcionalidade do Sketch. Elementos reutilizáveis podem ser usados em 
todo o site com um recurso de leiaute inteligente que altera suas dimensões 
dependendo do conteúdo que está dentro deles. Depois, há a facilidade de 
uso. Junto com uma interface de usuário bem projetada, o Sketch oferece 
uma série de atalhos ao seu alcance para acelerar o processo de design e 
simplificar a transferência do desenvolvedor (SKETCH, 2022).
Técnicas de desenvolvimento de 
protótipos
Um dos objetivos mais importantes a se ter em mente em qualquer interface 
é a clareza. Um design de interface eficaz é aquele em que o usuário entende 
e reconhece todos os elementos que o compõem de forma natural e intuitiva. 
Um usuário médio se sente confortável quando pode prever o que acontecerá 
ao interagir com sucesso com o que é exibido na interface. Portanto, é possível 
indicar que uma interface clara inspira confiança e leva ao uso posterior. Para 
maior clareza e eficiência, é preciso se concentrar em sete conceitos básicos 
durante a construção de um projeto de interface. Acompanhe cada um deles na 
sequência.
19
Espaço em branco
Todo bom design deve ter um equilíbrio visual, e um dos elementos mais 
importantes para que isso aconteça são os espaços em branco, também 
chamados de espaços vazios, que podem estar em qualquer composição. 
Usando três propriedades, como preenchimento, margem e altura da linha, você 
pode melhorar significativamente a aparência de um texto. Confira um exemplo 
de um texto sem e com espaçamento em branco adequado na figura, a seguir.
Lorem ipsum
Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit, sed diam 
nonummy nibh euismod tincidunt ut 
laoreet dolore magna aliquam erat 
volutpat. Ut wisi enim ad minim 
veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nisl ut 
aliquip ex ea commodo consequat. 
Lorem ipsum
Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit, sed diam 
nonummy nibh euismod tincidunt ut 
laoreet dolore magna aliquam erat 
volutpat. Ut wisi enim ad minim 
veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nisl ut 
aliquip ex ea commodo consequat. 
Figura 7 - Exemplo de espaçamento em branco
Fonte: do Autor (2022)
Cor
Escolher as cores certas pode exigir muito esforço. O que você realmente 
precisa é seguir uma abordagem sistemática para definir um conjunto de cores 
que atenda às necessidades do projeto de design de interface. Você pode criar 
uma boa paleta de cores dividindo-a em três categorias: neutros (geralmente 
cinza), cores primárias e cores de destaque. Confira um exemplo na figura, a 
seguir.
Figura 8 - Exemplo de cor
Fonte: do Autor (2022)
20
Quase tudo em uma interface é geralmente cinza (ou uma cor neutra), e você 
pode se surpreender ao saber que precisa de mais cinzas do que pensa. Ter uma 
variedade entre 8 e 10 tons com um aumento constante do mais escuro para o 
mais claro é o mais aconselhável. As cores primárias determinarão a aparência 
geral de um site. Elas são usadas para ações principais, enfatizando elementos 
de navegação etc. Neste caso, você precisará de 5 a 10 tons.
As cores de destaque são usadas para chamar a atenção do usuário. Por 
exemplo, são usadas para destacar um novo recurso, enfatizar diferentes 
estados semânticos (vermelho, amarelo, verde), destacar uma mensagem de 
aviso etc. Aqui também você precisará configurar sua paleta de cores com vários 
tons de cada cor, embora estes devam ser usados com bastante moderação.
 Contraste
O contraste envolve uma comparação entre diferentes elementos, com a 
particularidade de que a diferença deve ser grande. A principal função do 
contraste é distinguir o principal do secundário, para que não concorram 
e, portanto, guiem o olhar do usuário. Ao contrastar, não apenas se traz 
clareza à mensagem visual, mas também esta se torna mais atraente. Existem 
várias maneiras de aplicar contraste, que podem ser usados em conjunto ou 
separadamente. Por exemplo, há contraste entre tamanhos, escalas, cores, tons 
claros e escuros, saturação, texturas, fontes etc. Confira, na figura, a seguir, um 
exemplo de contraste de tons claro e escuro.
Figura 9 - Exemplo de contraste
Fonte: do Autor (2022)
Escala
Entende-se por escala a relação de proporção que existe entre as dimensões 
reais e as do desenho, que representa a realidade ou a relação direta entre dois 
elementos de um desenho. O uso correto da escala tem um bom impacto na 
forma como o usuário vê e dá sentido a uma composição. A escala, às vezes, 
é usada para criar uma hierarquia visual. Confira, na imagem, a seguir, um 
exemplo de escala.
21
Figura 10 - Exemplo de escala
Fonte: DAS (2021)
 Alinhamento
Alinhamento é o processo de garantir que cada elemento esteja posicionado 
corretamente em relação aos outros elementos. É possível imaginar um eixo 
invisível que percorre os elementos e os conecta visualmente, seja por suas 
bordas ou por seus centros. Não é essencial que toda a composição siga o 
mesmo padrão de alinhamento, mas é importante considerar o alinhamento 
de todos os elementos para criar uma composição equilibrada e ordenada, 
principalmente para proporcionar clareza visual. Confira, na imagem, a seguir, 
um exemplo de alinhamento entre objetos de uma interface.
Figura 11 - Exemplo de alinhamento
Fonte: do Autor (2022)
22
 Tipografia
A tipografia desempenha um papel muito importante no design, uma vez que 
o próprio tipo de letra pode comunicar ideias diferentes, bem como transmitir 
uma marca de identidade. Ao trabalhar com tipografia, considerações diferentes 
devem ser levadas em conta, pois é preciso decidir de forma coerente os 
tamanhos das fontes que serão usadas em cada seção, o espaço entre as letras, 
o espaçamento entre linhas, além de escolher a fonte principal adequada. 
Certifique-se de que a legibilidade é boa, clara e limpa. É conveniente teruma família de fontes completa para utilizar seus estilos e assim estabelecer 
uma hierarquia visual. Não abuse das letras maiúsculas e certifique-se de 
criar contrastes. Confira, a seguir, um exemplo de combinação de fontes em 
diferentes níveis de prioridades.
Título 1
Fonte Effra Bold - 48pt 
Fonte Myriad Pro Light - 18pt 
Título 3
Parágrafo de introdução
Fonte Myriad Pro Regular - 16pt 
Parágrafo de introduçãoFonte Effra Regular - 24pt 
Título 2
Fonte Effra Medium - 36pt 
Figura 12 - Exemplo de tipografia
Fonte: DXT Digital (2022)
Hierarquia visual
Em uma interface de usuário, é preciso definir a importância dos elementos em 
uma ordem de exibição clara, pois alguns elementos são mais importantes que 
outros. Você alcançará uma forte hierarquia visual quando diferentes usuários 
visualizarem os mesmos itens na mesma ordem todas as vezes, mesmo que 
eles próprios não estejam cientes disso. Você deve evitar que o usuário perceba 
desordem e confusão. Em uma interface bem construída, o usuário deve 
encontrar espaços para descansar seu olhar e espaços para focar sua atenção 
para interagir. Entenda, na sequência, um exemplo de hierarquia visual dos 
elementos em uma interface.
23
Tipografia
Usando hierarquia
visual
PROPORÇÃO
Este é um parágrafo de introdução. Lorem ipsum dolor sit 
amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam 
erat volutpat.
Corpo de texto. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna 
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci 
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
consequat.
Figura 13 - Exemplo de hierarquia visual
Fonte: DXT Digital (2022)
Lembre-se de que menos é mais. Esta frase pode definir as tendências de 
design dos anos recentes e dos próximos. Um bom design de UI deve ser 
invisível. Como regra geral, deve passar despercebido pelo usuário. Quanto mais 
claro, simples e consistente ele for, melhor será a experiência do usuário. Se o 
design estiver correto, o usuário poderá focar em seus próprios objetivos e não 
na interface. Dessa forma, o usuário estará satisfeito.
Durante os seus estudos, você viu que um guia de estilo trata de definir um 
padrão de design para os elementos e interações da interface do usuário para 
garantir a consistência da marca em diferentes dispositivos. Além disso, foi 
apresentado que, ao criar um guia de estilo, é importante determinar quais 
elementos você gostaria de incluir. Cada seção é organizada por elemento, como 
tipografia, hierarquia textual, paleta de cores, botões, ícones, entre outros. Você 
deve ter percebido que ter um guia de estilo aumenta a produtividade, pois 
economiza tempo e auxilia nas decisões de projeto.
Na sequência, foram listadas algumas ferramentas utilizadas no processo de 
criação de protótipos. Com inúmeras ferramentas de prototipagem disponíveis 
hoje, é importante garantir que as ferramentas escolhidas façam o que você 
precisa. Por isso, é importante saber suas principais características.
Por fim, você percebeu que o motivo de criar um protótipo é ver se o fluxo 
do produto é adequado para as necessidades do usuário. Desse modo, foram 
apresentadas algumas boas práticas para construção de protótipos. Como 
designer, primeiro você precisa esboçar e desenvolver um protótipo do seu 
produto com uma ferramenta de prototipagem. Por isso, dominar algumas 
técnicas são necessárias para deixar seu produto cada vez mais adequado às 
necessidades do cliente. Este conteúdo se encerra por aqui. Avance para os 
demais recursos e expanda os seus conhecimentos! 
Bons estudos!
24
REFERÊNCIAS
ADOBE. Adobe Color. Disponível em: https://color.adobe.com/pt/create/color-
wheel. Acesso em: 20 set. 2022.
ADOBE. Design inacreditável. Disponível em: https://www.adobe.com/br/products/
xd.html. Acesso em: Acesso em: 20 set. 2022.
AELASCHOOL. Style guide: como desenvolver o guia de estilo da sua interface? 
Publicado em: 06 dez. 2021. Disponível em: https://aelaschool.com/designvisual/
style-guide-como-desenvolver-o-guia-de-estilo-da-sua-interface/#pll_switcher. 
Acesso em: 20 set. 2022.
AXURE. Getting started with Axure RP. Disponível em: https://docs.axure.com/
axure-rp/reference/getting-started-video/. Acesso em: Acesso em: 20 set. 2022.
BALSAMIQ. Balsamiq for desktop documentation. Disponível em: https://balsamiq.
com/wireframes/desktop/docs/. Acesso em: Acesso em: 20 set. 2022.
BATISTA, Éricles. Um guia simplificado sobre design de ícones. Disponível em: 
https://www.designerd.com.br/guia-simplificado-design-de-icones. Acesso em: 20 
set. 2022.
COOLORS. Coolors. Disponível em: https://coolors.co/. Acesso em: 20 set. 2022.
DESIGN MATERIAL. Ícones do sistema. 2022. Disponível em: https://draftss.com/
graphic-design-and-human-computer-interaction/. Acesso em: 20 set. 2022.
DAS, S. Design Gráfico e Interação Humano-Computador. 2021. Disponível em: 
https://www.df.gov.br/?s=Guia+de+estilo. Acesso em: Acesso em: 10 set. 2022.
DREAMONKEY. Baseline components. 2022. Disponível em: https://dreamonkey.
com/blog/articles/cos-e-material-design-di-google/material_components.jpg. Acesso 
em: Acesso em: 20 set. 2022.
DXT DIGITAL. Tipografia. 2022. Disponível em: http://dxtdigital.com.br/det/img/
tipo/proporcao.png. Acesso em: Acesso em: 20 set. 2022.
FIGMA. Learn and level up. Disponível em: https://help.figma.com/hc/en-us. Acesso 
em: Acesso em: 20 set. 2022.
GOVERNO DO DISTRITO FEDERAL. Guia de estilo do Governo de Brasília. 2022. 
Disponível em: https://www.df.gov.br/?s=Guia+de+estilo. Acesso em: Acesso em: 
10 set. 2022.
INVISIONAPP. Online whiteboard meets productivity platform. Disponível em: 
https://www.invisionapp.com/. Acesso em: Acesso em: 20 set. 2022.
LEADPAGES. Top Google Font Pairings for 2021. Publicado em: 19 maio 2021. 
Disponível em: https://www.leadpages.com/blog/best-google-fonts. Acesso em: 
20 set. 2022.
25
MARVELAPP. Resources hub. Disponível em: https://marvelapp.com/resources/. 
Acesso em: Acesso em: 20 set. 2022.
MELLO, C. CNA plataforma guia: Guia de Estilo. 2022. Disponível em: 
https://dribbble.com/shots/15302511-CNA-plataforma-guia-Guia-de-Estilo/
attachments/7058027?mode=media. Acesso em: Acesso em: 20 set. 2022.
PAIVA, M. O que é paleta de cores e como criar a da sua marca? Disponível em: 
https://www.nuvemshop.com.br/blog/paleta-de-cores. Acesso em: 20 set. 2022.
SKETCH. Hello. How can we help you? Disponível em: https://help.sketch.com/. 
Acesso em: Acesso em: 20 set. 2022.
YATES, I. Um guia para iniciantes sobre como combinar fontes. 2012. Disponível 
em: https://webdesign.tutsplus.com/pt/articles/a-beginners-guide-to-pairing-fonts-
-webdesign-5706. Acesso em: 20 set. 2022.
	Guia de estilo: paleta de cores, 
tipografia e ícones
	Paleta de cores
	 Tipografia
	Ícones
	Design system ou sistema de design
	Ferramentas de prototipação 
de interfaces
	Técnicas de desenvolvimento de protótipos
	Espaço em branco
	Cor
	 Contraste
	Escala
	 Alinhamento
	 Tipografia
	Hierarquia visual
	Referências