Design
e
Projetos de Interface
Maria Laura Chaves Fernandes
PILARES DO
DESIGN
O design visual em interfaces digitais se apoia em alguns pilares
fundamentais. Entre eles, cor, tipografia e layout são considerados os
três mais estratégicos, pois trabalham em conjunto para organizar
informação, transmitir identidade e gerar experiência ao usuário.
COR
Função comunicativa
A cor é uma linguagem universal, capaz de transmitir mensagens imediatas mesmo
sem palavras. Ela gera emoções, estabelece associações simbólicas e pode guiar a
atenção do usuário dentro da interface.
Função funcional
Além do aspecto estético, cores ajudam a organizar a informação: destacar botões,
indicar status (verde = sucesso, vermelho = erro) e diferenciar seções de conteúdo.
Função estética
Define a “personalidade” visual de um projeto, tornando-o memorável.
TIPOGRAFIA
Função comunicativa
A escolha de fontes transmite tom e voz da marca (formal, criativa, tecnológica,
infantil).
Função funcional
A tipografia organiza hierarquia de informações: títulos, subtítulos, corpo do
texto. Ajuda na legibilidade e leitura rápida em telas.
Função estética
Combina com a identidade visual: fontes minimalistas reforçam simplicidade;
fontes serifadas remetem à tradição; fontes sem serifa dão modernidade.
LAYOUT
Função comunicativa
O layout define como o conteúdo se apresenta e como o usuário interpreta a
informação. Ele organiza o espaço e cria padrões de leitura (F-pattern, Z-
pattern).
Função funcional
Um bom layout garante que a navegação seja intuitiva. Espaçamento,
alinhamento e proximidade (princípios de design) ajudam o usuário a encontrar
o que precisa sem esforço.
Função estética
Define a clareza e a sensação de ordem, transmitindo confiança e
profissionalismo.
Cor + Tipografia + Layout não funcionam
isoladamente
A cor realça a hierarquia tipográfica.
A tipografia ganha força dentro de um layout bem estruturado.
O layout dá contexto para o uso da cor e da tipografia.
PSICOLOGI
A DAS
CORES
A COR E A LINGUAGEM NÃO VERBAL
Assim como gestos e expressões faciais comunicam sem palavras, a cor é uma
forma de linguagem não verbal: ela transmite mensagens, desperta emoções e
cria associações imediatas no usuário, antes mesmo que ele leia um texto ou
clique em algo.
A COR E A LINGUAGEM NÃO VERBAL
Evocações Emocionais
• O ser humano reage de forma instintiva e fisiológica às cores.
• O cérebro processa a cor em milissegundos e gera sensações
automáticas, ligadas tanto à biologia quanto à experiência cultural.
Associações Culturais
• As cores também têm significados socialmente construídos e variáveis
de cultura para cultura.
• O que em uma região simboliza algo positivo, em outra pode ter conotação
negativa.
A COR E A LINGUAGEM NÃO VERBAL
Evocações Emocionais
• O ser humano reage de forma instintiva e fisiológica às cores.
• O cérebro processa a cor em milissegundos e gera sensações automáticas,
ligadas tanto à biologia quanto à experiência cultural.
Associações Culturais
• As cores também têm significados socialmente construídos e variáveis de
cultura para cultura.
• O que em uma região simboliza algo positivo, em outra pode ter conotação
negativa.
A Cor como Mensagem Implícita
A COR NA EXPERIÊNCIA DO
USUÁRIO
Cor como ferramenta Diferenciação de
para guiar navegação elementos funcionais
CTA – Call to Action Contraste e
acessibilidade
A COR NA CONSTRUÇÃO DA IDENTIDADE
VISUAL
Paleta da marca
Padronização
Reconhecimento
A COR NA CONSTRUÇÃO DA IDENTIDADE
VISUAL
Paleta da marca
Padronização
Reconhecimento
HARMONIZAÇÃO DE CORES
RODA DE COR E HARMONIA
CROMÁTICA
Ferramenta visual que organiza
cores primárias, secundárias e
terciárias em círculo, facilitando a
criação de combinações harmônicas
RODA DE COR E HARMONIA
CROMÁTICA
RODA DE COR E HARMONIA
CROMÁTICA
FERRAMENTAS DIGITAIS
Adobe Color: [Link]
Coolors: [Link]
Material Design Palette (Google):
[Link]
PUBLICO ALVO E PALETAS
EMOCIONAIS
Idade do público Paleta energizante
Setor ou objetivo Paleta calmante
Cultura Paleta sofisticada
Paleta juvenil
TIPOGRAFIA
TIPOGRAFIA DIGITAL
A tipografia digital é o uso de
fontes projetadas
especificamente para leitura em
ambientes digitais (telas de
computador, smartphones,
tablets, TV).
Diferente do impresso, o digital
exige atenção especial a fatores
como legibilidade, contraste,
tamanho adaptável e
responsividade.
TIPOGRAFIA DIGITAL
Fontes serifadas (serif)
• Possuem pequenos traços nas extremidades das letras (ex: Times New
Roman, Georgia).
• No impresso, facilitam o acompanhamento da leitura, pois as serifas guiam
o olho ao longo da linha.
• No digital, por muito tempo foram evitadas por ficarem borradas em telas
de baixa resolução. Hoje, com telas de alta definição, já podem ser usadas
com mais tranquilidade.
• Uso recomendado: textos longos em telas de alta qualidade (ex.: artigos,
blogs, e-books).
TIPOGRAFIA DIGITAL
Fontes sem serifa (sans serif)
• Não possuem os traços adicionais (ex: Arial, Helvetica, Roboto, Open Sans).
• Em telas, oferecem limpeza e clareza, principalmente em resoluções
menores.
• São as preferidas em interfaces digitais, botões e sistemas operacionais.
• Uso recomendado: títulos, interfaces, textos de fácil escaneabilidade.
FONTE E PESO TIPOGRÁFICO
Para leitura em tela deve ser priorizado a legibilidade. Uso
de letras simples , espaçamento adequado, tamanhos
entre 16px e 18px para web.
Títulos podem ser mais expressivos e decorativos e
podem carregar personalidade da marca/projeto.
FONTE E PESO TIPOGRÁFICO
Light / Thin
Letras mais finas, transmitem sofisticação e leveza.
Devem ser usadas com cautela em telas pequenas, pois podem
perder legibilidade.
Bom para legendas, textos secundários, interfaces clean.
Regular / Normal
Padrão para leitura.
Equilibra legibilidade e conforto visual.
Usado em parágrafos, corpo de texto.
Bold / Semibold / Extra Bold
Criam hierarquia e contraste, chamando atenção para
palavras ou títulos importantes.
Usados em títulos, botões de ação, chamadas de atenção.
Mas: excesso de bold reduz impacto → se tudo é destacado, nada
se destaca.
HIERARQUIA VISUAL
A hierarquia visual é o conjunto de escolhas (tipografia,
cor, peso, espaçamento, contraste) que organizam as
informações para guiar o olhar do usuário.
Ela responde a duas perguntas principais:
O que é mais importante?
Em que ordem o conteúdo deve ser lido?
BOAS PRÁTICAS
• Limitar o número de fontes (máx. 2–3 famílias).
• Garantir contraste adequado entre texto e fundo.
• Legibilidade em diferentes tamanhos de tela (responsividade).
• Usar hierarquia visual clara (tamanho, peso, cor, espaçamento).
• Evitar textos muito longos sem quebras (parágrafos curtos).
• Limitar o uso de maiúsculas, pois reduzem velocidade de leitura.
• Garantir consistência tipográfica em toda a interface.
• Testar sempre em múltiplos dispositivos e navegadores.
• Usar fontes otimizadas para web (web fonts leves e rápidas).
DICA DE LEITURA: [Link]
tipografia-guia
GRIDS,
ESPAÇAMEN
TO E LAYOUT
GRIDS
GRID
COLUNAS
Divisões verticais do layout, que definem onde os elementos podem ser
posicionados.
Vantagem: organiza o conteúdo em blocos previsíveis, facilita alinhamento e
proporcionalidade.
GRID
GUTTERS
Espaços entre as colunas.
Função:
• Evitar que o conteúdo fique colado, dando respiro visual.
• Mantém consistência na separação de elementos.
GRID
MARGENS E ALINHAMENTOS
Margens externas: espaço entre o conteúdo e a borda da tela ou container.
Alinhamentos internos: definir se o conteúdo está à esquerda,
centralizado ou à direita dentro da coluna ou container.
WHITE SPACE E PROXIMIDADE
LAYOUT RESPONSIVO
Um layout responsivo é aquele que se adapta automaticamente ao
tamanho da tela, garantindo boa experiência de leitura e navegação em
desktop, tablet e celular.
TIPO DE
CARACTERÍSTICA QUANDO USAR
LAYOUT
Largura definida em pixels; não Sites antigos ou conteúdos que
FIXO
muda com o tamanho da tela. precisam de medida exata.
FLUIDO Largura definida em porcentagem; se Mais flexível que o fixo; funciona
(LIQUIDO) ajusta proporcionalmente à tela. melhor em diferentes resoluções.
Combina fluidos + breakpoints; o Padrão moderno para web e apps;
RESPONSIVO layout muda de forma estratégica garante boa experiência em todos
dependendo do dispositivo. os dispositivos.
BREAKPOINTS
Breakpoints são larguras de tela em que o layout muda para se adaptar
melhor ao dispositivo.
TÉCNICAS DE ADAPTAÇÃO
• Grids flexíveis – colunas que crescem ou encolhem proporcionalmente.
• Media queries – aplicar estilos diferentes dependendo do tamanho da tela.
• Tipografia fluida – fontes que mudam de tamanho conforme a tela.
• Imagens e vídeos responsivos – se ajustam ao container sem distorcer.
• Elementos show/hide – esconder ou mostrar elementos conforme a tela.
• Flexbox e CSS Grid – reorganizam layouts automaticamente.
• Menu responsivo / hambúrguer – menus adaptam-se a telas pequenas.
• Botões e touch targets adaptáveis – aumentar área clicável em mobile.
• Margens e paddings relativos – ajustam espaços sem quebrar o layout.
• Conteúdo condicional – simplificar ou reorganizar conteúdo em telas menores.