Design web aplicado à marca

Por que o site é o ponto de contato mais crítico da marca

Mais que qualquer peça gráfica, embalagem, evento ou anúncio, é no site que o público volta para confirmar quem é a marca. É lá que avalia produtos, compara opções, lê detalhes, busca formas de contato, decide se confia. O site funciona como sala de visita, vitrine, central de atendimento e relatório anual simultaneamente — e qualquer dissonância entre o que a marca diz nas outras peças e o que entrega no site corrói credibilidade rapidamente.

Apesar disso, é o ponto onde a identidade visual mais sofre tradução. Um manual de marca foi pensado para impressos ou redes sociais; sua aplicação na web obriga a tomar decisões que o manual não cobre — comportamento da tipografia em tela pequena, hierarquia de cor em modo escuro, animações de transição, padrões de formulário, estados de erro, tela de carregamento. Quando essas decisões são feitas sem critério, o site vira uma versão diluída ou desfigurada da marca.

Tradução de identidade visual para web

Cinco frentes traduzem a identidade visual para o ambiente web sem perder coerência.

Tipografia responsiva. Em peça impressa, a tipografia tem tamanho fixo. Em tela, varia entre celular pequeno (320px) e monitor amplo (1920px ou mais). A solução moderna é tipografia fluida: usar a função CSS clamp() para definir tamanho mínimo, ideal e máximo, fazendo o texto crescer suavemente com a largura da tela. Decisões obrigatórias: par tipográfico (display + corpo de texto), pesos disponíveis, altura de linha por contexto, espaçamento entre letras em títulos.

Grid responsivo. O grid é a estrutura invisível que dá ritmo ao layout. Em web, deve adaptar-se: 4 colunas no celular, 8 no tablet, 12 no desktop. Definir espaçamentos como tokens (espaçamento-pequeno, médio, grande) facilita consistência entre páginas. Container queries — funcionalidade mais recente do CSS — permitem que um componente reaja ao tamanho do contêiner em que está, não apenas da tela inteira.

Paleta com tokens semânticos. Em vez de usar nomes de cor literais no código (azul-marinho, cinza-claro), defina tokens semânticos: cor-fundo, cor-texto-principal, cor-acento, cor-erro. Isso torna o tema editável — alternar para modo escuro vira mudança de tokens, não reescrita do site. E garante que o sistema de design possa evoluir sem quebrar o site.

Movimento intencional. Animações e transições têm papel na marca: rigidez ou fluidez, calma ou energia. Definir um conjunto de durações (rápido 150ms, médio 250ms, lento 400ms) e curvas de aceleração padrão evita que cada componente improvise. Respeitar a preferência do usuário (prefers-reduced-motion) é exigência de acessibilidade.

Iconografia e ilustração. Estilo de ícones (traço fino, preenchido, com canto arredondado) e ilustração precisa ser definido como parte do sistema. Inconsistência aqui é a denúncia mais comum de site mal cuidado — três estilos diferentes coexistindo na mesma página.

Arquitetura de informação: a hierarquia antes da estética

Antes de pensar em design, é preciso resolver arquitetura de informação: o que está em que página, como o usuário navega, o que aparece primeiro. Site bonito com arquitetura ruim é frustrante; site simples com arquitetura clara funciona.

Decisões centrais: estrutura de navegação principal (quantos itens no menu, em que ordem), taxonomia (como agrupar conteúdo — por tipo, por público, por tema), busca interna (necessária quando há mais de 50 páginas de conteúdo), padrão de migalha de pão (breadcrumb), padrão de página de erro 404. Essas decisões devem ser testadas com usuários reais antes de virarem código — um teste de árvore (tree test) com 20 pessoas detecta os 70% dos problemas mais óbvios em uma manhã.

Sistema de design aplicado

Sistema de design é a biblioteca de componentes, padrões e regras que garante coerência entre páginas e velocidade de evolução. Não é o mesmo que manual de marca: é a tradução do manual para componentes vivos, codificados, reutilizáveis.

Componentes mínimos a documentar: cabeçalho, rodapé, hero (bloco principal de topo de página), cartão (de produto, de artigo, de pessoa), formulário (com estados de erro, sucesso, carregamento), modal, alerta, navegação móvel. Padrões mais complexos: chamada para ação, depoimento, FAQ expansível, tabela de preços, tabela comparativa.

Ferramentas comuns: Figma para o desenho, Storybook para a biblioteca codificada, plataformas como Zeroheight ou Specify para documentação compartilhada entre desenho e código. A regra prática é começar pequeno (10-15 componentes) e crescer conforme demanda real, não tentar mapear tudo de uma vez.

Responsividade: mobile-first como ponto de partida

Mais de 60% do tráfego web brasileiro vem de celular, e em muitos setores (varejo, conteúdo, serviços) o número passa de 80%. Projetar primeiro para celular e expandir para telas maiores (mobile-first) deixou de ser opção — é o padrão de qualquer projeto sério.

Pontos críticos: alvo de toque (botões com área mínima de 44x44px), distância entre elementos clicáveis, comportamento de menu (gaveta lateral, menu inferior fixo), formulários com teclado adequado (email, telefone, número), imagens com tamanho proporcional, vídeos com versão leve. Testar em dispositivo real, não apenas em emulador do navegador — sensação de toque, latência, comportamento de teclado e variação de luz são diferentes.

Acessibilidade: WCAG 2.2 como base

Acessibilidade web tem duas dimensões: legal (Lei Brasileira de Inclusão obriga acessibilidade em sites de empresas e órgãos públicos) e prática (15-20% da população tem alguma deficiência permanente ou temporária que afeta uso de site). Ignorar acessibilidade é excluir clientes potenciais e expor a empresa a risco jurídico.

Base mínima a cumprir (WCAG 2.2 nível AA):

Contraste de cor. Texto sobre fundo precisa de contraste mínimo de 4,5:1 para texto normal e 3:1 para texto grande. Ferramentas como WebAIM Contrast Checker validam pares de cor antes de virarem código.

Navegação por teclado. Todo elemento interativo (link, botão, campo de formulário) precisa ser acessível por tecla Tab, com estado de foco visível. Testar navegação inteira do site usando apenas teclado é o teste mais barato e mais eficaz.

Leitor de tela. Estrutura semântica (header, nav, main, section, article, footer corretos) e atributos ARIA quando o componente não tem equivalente nativo. Textos alternativos descritivos em todas as imagens com conteúdo.

Texto alternativo em imagens. Imagens decorativas usam alt vazio (alt=""); imagens com conteúdo precisam de descrição funcional, não estética.

Formulários acessíveis. Cada campo precisa de rótulo associado (label for), mensagens de erro claras, estado de erro indicado por cor e ícone (não só cor), instruções antes do campo, não depois.

Movimento controlável. Animações automáticas precisam ter opção de pausar. Respeitar prefers-reduced-motion para usuários que desabilitam animação no sistema.

Desempenho: Core Web Vitals como métrica de cliente

Desempenho deixou de ser preocupação técnica para virar fator de SEO e de experiência. O Google usa três métricas principais — Core Web Vitals — para avaliar páginas:

LCP (Largest Contentful Paint). Tempo até o maior elemento visível da página carregar. Meta: menos de 2,5 segundos. O que afeta: peso da imagem principal, fontes externas, scripts bloqueantes.

INP (Interaction to Next Paint). Tempo entre o clique do usuário e a resposta visual do navegador. Meta: menos de 200ms. O que afeta: JavaScript pesado, processamento síncrono no momento da interação. Substituiu o FID (First Input Delay) como métrica oficial.

CLS (Cumulative Layout Shift). Quanto o layout se desloca durante o carregamento. Meta: menos de 0,1. O que afeta: imagens sem dimensão declarada, anúncios injetados depois do carregamento, fontes que carregam tarde e empurram o texto.

Otimizações práticas: formato moderno de imagem (WebP, AVIF), dimensões declaradas explicitamente, fontes hospedadas localmente com font-display: swap, carregamento tardio (lazy loading) em imagens abaixo da dobra, minificação de CSS e JS, divisão de código por rota, cache agressivo em CDN. Ferramentas para medir: PageSpeed Insights, web.dev/measure, WebPageTest.

SEO técnico — não conteúdo

SEO técnico é o conjunto de práticas que tornam o site rastreável e indexável por motores de busca. Não substitui SEO de conteúdo, mas é pré-requisito: sem fundação técnica, o melhor conteúdo não chega ao público.

Lista mínima: HTML semântico (uso correto de h1-h6, listas, tabelas), title e meta description únicos por página, sitemap XML atualizado, robots.txt configurado, URLs limpas e estáveis (sem parâmetros desnecessários), canonical apontando para versão preferencial quando há duplicidade, schema.org marcando entidades (organização, produto, artigo, FAQ), Open Graph para compartilhamento social, hreflang quando há versões em idiomas diferentes, redirecionamentos 301 quando URLs mudam, HTTPS em toda a navegação.

Plataforma e escolha técnica

Quatro caminhos comuns, por ordem de complexidade:

WordPress com tema personalizado. Padrão de mercado para sites institucionais e blogs. Acessível, com ecossistema enorme de plugins, manutenção barata. Risco: tema mal escolhido ou excesso de plugins gera site lento e inseguro.

Webflow ou Framer. Plataformas visuais que combinam construtor sem código com flexibilidade de design. Bom para institucional sofisticado em time pequeno. Limite: customização técnica avançada exige pular para plataforma própria.

Estrutura desacoplada (headless). CMS dedicado (Sanity, Contentful, Strapi, Storyblok) conectado a frontend próprio (Next.js, Astro, Nuxt). Permite desempenho de ponta, controle total de design e integração com qualquer sistema. Exige time de desenvolvimento. Padrão para empresas com produto digital ou ecossistema de sites.

Plataforma própria. Apenas quando há requisitos específicos (integração profunda com produto, escala extrema, governança de segurança). Custo de desenvolvimento e manutenção alto.

LGPD: cookies, consentimento e política de privacidade

Qualquer site que coleta dados de visitante (formulário, análise de tráfego, anúncios, cookies de marketing) precisa cumprir a Lei Geral de Proteção de Dados (Lei 13.709/18). Itens mínimos no site:

Banner de consentimento de cookies com escolha granular (essenciais, análise, marketing) e opção de recusar. Página de política de privacidade descrevendo dados coletados, base legal, finalidade, prazo de armazenamento, direitos do titular. Página de política de cookies detalhando cada cookie usado. Canal claro para exercer direitos (acesso, correção, exclusão). Indicação de encarregado de dados quando aplicável.

Ferramentas comuns para gerenciar cookies: OneTrust, Cookiebot, Iubenda, Termly. Implementação técnica precisa carregar scripts de marketing apenas após consentimento explícito.

Erros comuns que minam o site da marca

Priorizar visual sobre desempenho. Site lindo no Awwwards mas com LCP de 6 segundos. Usuário não espera — abandona antes de ver. Desempenho não é trade-off opcional; é fundação.

Ignorar acessibilidade. Adiar acessibilidade como "fase 2" significa que nunca acontece. Cada componente novo é uma dívida acumulada. Acessibilidade desenhada desde o início custa fração do retrofit.

Site lindo no desktop, quebrado no celular. Sintoma clássico: designer trabalha em monitor 27" e nunca abre o site no próprio celular. Testar em dispositivo real, regularmente.

Falta de governança de conteúdo. Lançamento perfeito, três anos depois página de equipe tem pessoas que saíram, blog tem último post de 18 meses atrás, página de produto descreve linha descontinuada. Site exige plano editorial contínuo, não apenas projeto inicial.

Identidade visual diluída. Site usa cor primária diferente do manual, tipografia substituída por similar gratuita, ícones de biblioteca aleatória. Cada decisão tomada por pressa corrói a marca.

Sem manutenção técnica. Plugins desatualizados, certificado SSL prestes a expirar, backup que nunca foi testado. Manutenção é trabalho contínuo, não eventual.