Mundo Tech

USER EXPERIENCE
GUIAS DE ESTILO
 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
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.

3
4
5
6
7
Figura 1 - Guia de estilo do governo do Distrito Federal

Fonte: Governo do Distrito Federal (2022)

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

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

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

11
 ›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.

12
13
 Figura 4 - Exemplos de combinações de fontes

Fonte: Leadpages (2021)

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

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

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

16
 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 com outras 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).

17
 › 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.

18
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

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

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

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

21
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 ter
uma 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 Parágrafo de introdução
Fonte Myriad Pro Light - 18pt

Título 3
Fonte Effra Regular - 24pt Parágrafo de introdução
Fonte Myriad Pro Regular - 16pt

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.

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

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

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

25