Identidade visual antes do site: por que a ordem importa

O resumo direto

Identidade visual é o conjunto de decisões que faz uma marca ser reconhecida: logo, cores, fontes, e as regras de como usar cada um. Ela deve vir antes do site porque o site aplica essas decisões em quase todas as telas, e cada decisão adiada vira retrabalho no tema, nas fotos, nos banners e nos e-mails. Não precisa ser um manual enorme: para começar um site ou uma loja, basta um núcleo pequeno, testado na tela. Como designer, o retrabalho que eu mais vejo em loja virtual nasce aí: logo trocado depois do tema pronto, cor que não passa em contraste, fonte escolhida no impresso que pesa no celular. Abaixo, o que é esse núcleo mínimo, como testar cada peça para a tela e como passar tudo para o tema sem refazer.

1. O que é identidade visual, e o que ela não é

Identidade visual não é só o logo. O logo é uma peça; a identidade é o sistema que diz como o logo, as cores, as fontes, as fotos e os ícones convivem. É ela que faz o cliente reconhecer a marca no Instagram, na embalagem, no e-mail de confirmação e na página de produto, sem ler o nome.

Também não é a mesma coisa que marca registrada. Para o INPI, marca é "um nome e/ou imagem que identifica um produto ou serviço". O registro protege esse nome ou essa imagem. A identidade visual é a forma de aplicar tudo isso no dia a dia. As duas conversam, e é por isso que a pesquisa de marca entra antes do design (ver seção 6).

Na prática, quando alguém pede "um site" sem identidade definida, o projeto tem dois trabalhos escondidos dentro de um: decidir a marca e construir o site. Se os dois andam juntos sem ordem, quem decide a marca é o tema escolhido, e não a empresa.

Se você está planejando uma loja virtual do zero, a página de criação de lojas e projetos de e-commerce mostra onde a identidade entra no projeto, junto com plataforma, catálogo e integrações.

2. O que dá errado quando o site vem primeiro

O site parece a peça principal, então muita gente começa por ele. O problema é que o site é a peça que mais depende das outras. Estes são os retrabalhos mais comuns quando a identidade chega depois:

• Cor trocada no meio do projeto. O tema foi configurado com uma cor provisória. Quando a cor real chega, botão, link, selo de promoção, banner e ícone precisam ser revistos, e alguns já foram exportados como imagem.
• Logo que não cabe no cabeçalho. Logo horizontal comprido, pensado para fachada ou cartão, que no celular fica minúsculo. Ou logo com detalhe fino que some no tamanho do favicon.
• Fotos sem direção. Sem regra de fundo, luz e enquadramento, cada lote de fotos sai de um jeito, e a vitrine parece montada por várias lojas diferentes.
• Fonte trocada depois. Fonte nova muda a largura do texto: título que cabia em uma linha passa a quebrar, botão fica apertado, menu estoura no celular.
• Banners refeitos. Toda arte feita com a identidade provisória precisa ser refeita.

Nenhum desses problemas é grave sozinho. Somados, eles consomem tempo do projeto em coisa que não melhora a loja, só desfaz uma decisão anterior.

Consistência é o que o cliente percebe

A Nielsen Norman Group descreve consistência como uma das dez heurísticas de usabilidade: o usuário não deveria precisar se perguntar se palavras, situações ou ações diferentes significam a mesma coisa. Ela separa consistência interna (dentro do próprio produto) e externa (com as convenções do mercado). Identidade visual definida antes é o que permite consistência interna: o mesmo verde sempre quer dizer "comprar", o mesmo estilo de ícone aparece em todo lugar, e o cliente aprende a loja uma vez só.

3. O mínimo de identidade que o site precisa

Para começar um site ou uma loja, a identidade não precisa estar completa. Ela precisa ter um núcleo que responde as perguntas que o tema vai fazer. A tabela abaixo é o que eu peço antes de abrir o editor de tema.

O favicon é um bom exemplo de por que essa lista vem antes. O Google pede um favicon quadrado e diz que ele deve representar visualmente a marca do site. A Shopify recomenda 32 x 32 px e reduz imagens maiores para esse tamanho. Um logo horizontal com o nome inteiro não funciona num quadrado desse tamanho. Se ninguém desenhou um símbolo, o favicon vira um improviso: a primeira letra do nome numa fonte qualquer.

O que pode ficar para depois

Papelaria, sinalização, uniforme, manual completo de aplicação, versão animada do logo. Tudo isso é útil, mas não trava o site. O que trava o site é o núcleo da tabela.

4. Cor: uma paleta que funciona na tela

Cor escolhida para impresso nem sempre funciona na tela, e cor bonita no logo nem sempre funciona num botão. O teste que importa para o site é o contraste.

O critério 1.4.3 da WCAG, a referência de acessibilidade do W3C, pede contraste de pelo menos 4.5:1 para texto normal e 3:1 para texto grande (a partir de 18 pontos, ou 14 pontos em negrito). O critério 1.4.11 pede 3:1 para componentes de interface, como borda de campo, ícone e estado de botão.

Duas consequências práticas:

• A cor da marca pode não servir como fundo de botão com texto branco. Cores claras, como amarelo e verde-claro, tendem a falhar com texto branco; o teste de contraste confirma caso a caso. A solução não é trocar a marca: é definir uma variação mais escura para uso em interface, ou usar texto escuro sobre a cor.
• O logo é isento, o botão não. O W3C deixa claro que logos estão isentos dos requisitos de contraste, porque seguem a identidade da marca. Mas quando o logo é clicável, o próprio W3C sugere usar uma variante com contraste suficiente. Por isso a identidade precisa prever versões do logo para fundo claro e escuro.

Como montar a paleta para o site

1. Cor principal, com uma versão "interface" que passe em contraste com texto branco ou preto.
2. Neutros: um quase preto para texto, dois ou três cinzas para bordas e fundos, branco ou quase branco para o fundo geral.
3. Cores de aviso: sucesso, erro e alerta, que não briguem com a cor principal. Se a marca é vermelha, o vermelho de erro precisa ser diferente o bastante para não confundir.
4. Teste cada par (texto sobre fundo) numa ferramenta de contraste antes de levar para o tema.

5. Tipografia: poucas famílias, poucos pesos

Fonte é identidade e é desempenho ao mesmo tempo. Cada família e cada peso é um arquivo que o navegador precisa baixar antes de mostrar o texto do jeito certo.

O web.dev, do Google, resume a regra assim: a fonte mais rápida de entregar é a que o site nem chega a pedir. O mesmo guia explica que atrasar o texto pode atrasar o carregamento da página, e que a troca entre a fonte provisória e a fonte final pode empurrar o layout quando as duas ocupam espaços diferentes. Também lembra que o formato WOFF2 comprime 30% melhor que o WOFF.

Para a identidade, isso vira três decisões:

• Uma ou duas famílias, não quatro. Uma para título e outra para texto, ou uma só com pesos diferentes.
• Poucos pesos. Regular, negrito e talvez um intermediário. Cada itálico e cada peso a mais é mais um arquivo.
• Fonte de texto pensada para tela pequena. Fonte de título muito condensada ou decorativa pode ficar ótima no banner e ilegível no preço parcelado em letra pequena.

Escolha também uma fonte que você tenha licença para usar na web. Fonte comprada para impresso nem sempre inclui uso em site; vale conferir os termos antes de fechar a identidade.

6. Pesquise a marca antes de desenhar e de publicar

Antes de investir em logo, domínio, embalagem e site, vale saber se o nome pode ser usado. O guia básico do INPI coloca como primeiro passo do registro a pesquisa de marcas já existentes. O registro dá ao titular o direito de uso exclusivo em todo o território nacional e vale por dez anos, com prorrogação por períodos iguais.

Para o design, a ordem importa por um motivo simples: se o nome tiver conflito com uma marca já registrada no mesmo ramo, tudo o que foi desenhado em cima dele pode precisar mudar. Logo, domínio, perfil de rede social, fachada e o site inteiro. Fazer a pesquisa antes custa pouco tempo e evita refazer a identidade com a loja já no ar.

Registro de marca é assunto jurídico. O papel do designer aqui é só lembrar que essa etapa existe e que ela vem antes do trabalho visual pesado, não depois.

7. Do manual para o tema: decisões que viram configuração

Identidade definida é metade do caminho. A outra metade é levar as decisões para o site de um jeito que elas sejam aplicadas sempre iguais, e não copiadas à mão em cada página.

Configurações globais do tema

Na Shopify, as configurações do tema reúnem cores (em paletas ou esquemas de cor, dependendo do tema), tipografia, logo, favicon e redes sociais, e as mudanças valem para a loja inteira. É exatamente o núcleo da tabela da seção 3. Se a identidade chega pronta, essa configuração é feita uma vez, no começo, e todas as seções do tema herdam as mesmas cores e fontes. Se chega depois, alguém precisa caçar cor e fonte ajustadas à mão em seções soltas.

Outras plataformas e sites feitos sob medida têm o mesmo conceito com outros nomes. O artigo sobre Tray e Shopify: limites de HTML, tema e integração mostra como o quanto você pode mexer no tema muda de uma plataforma para outra.

Design tokens: a identidade em formato que o código entende

Design token é o nome que se dá a uma decisão de design guardada como dado: "cor-principal = este verde", "fonte-titulo = esta família", "raio-de-borda = este valor". Em vez de o desenvolvedor copiar o código da cor do PDF do manual, ele usa o nome do token, e trocar a cor depois vira trocar um valor só.

O Design Tokens Community Group, do W3C, publicou em outubro de 2025 a primeira versão estável de um formato comum de tokens em JSON, pensado para levar decisões de design entre ferramentas e produtos. Para uma loja pequena isso pode soar distante, mas a ideia vale em qualquer tamanho: a identidade deveria sair do design com nomes claros para cada cor e cada fonte, e não como uma imagem bonita de paleta.

O que entregar ao desenvolvedor

• Logo em vetor (SVG), versão horizontal e símbolo, para fundo claro e escuro.
• Lista de cores com nome e código, incluindo a versão de interface da cor principal.
• Nome das fontes, pesos usados e onde baixar com licença para web.
• Duas ou três fotos de referência mostrando a direção de foto.
• Exemplo de botão, campo e card aplicados, para ninguém precisar adivinhar.

8. Quando dá para fazer os dois juntos

Nem todo projeto tem tempo de fazer a identidade inteira antes. Às vezes a loja precisa abrir numa data, ou o dono quer validar o produto antes de investir em marca. Dá para fazer junto, com duas condições:

1. O núcleo da seção 3 vem primeiro, mesmo que simples. Logo provisório, mas com versão horizontal e símbolo; uma cor principal testada em contraste; uma família de fonte. O resto pode evoluir.
2. Tudo entra pelas configurações globais e por tokens. Se a identidade mudar depois, a mudança acontece em um lugar, não página por página.

O que não funciona é desenhar o site com "qualquer cor por enquanto" espalhada à mão e esperar que a troca depois seja rápida. Ela não é. Velocidade também conta: se o seu caso é um site institucional pesado, o artigo sobre WordPress headless e velocidade de site institucional mostra onde a escolha de tema e de fontes pesa no carregamento.

Perguntas frequentes

Posso criar o site e fazer a identidade visual depois?

Pode, mas vai pagar com retrabalho. Cores, fontes, logo e fotos aparecem em quase todas as telas do site, e trocar depois significa revisar tudo. Se o prazo aperta, defina pelo menos o núcleo mínimo (logo horizontal, símbolo, cor principal testada e fonte) antes de configurar o tema.

Quantas cores uma identidade visual precisa ter para o site?

Não existe número fixo. Para o site funcionar, você precisa de uma cor principal com versão de interface que passe em contraste, alguns neutros para texto, fundo e borda, e cores de aviso para sucesso, erro e alerta.

O logo precisa passar no teste de contraste?

O W3C deixa os logos isentos dos requisitos de contraste da WCAG. Mas quando o logo é um link, ele recomenda usar uma variante com contraste suficiente. Por isso vale ter versão do logo para fundo claro e para fundo escuro.

Qual o tamanho do favicon?

O Google pede um favicon quadrado e recomenda que ele seja maior que 48 x 48 px. A Shopify recomenda 32 x 32 px e reduz imagens maiores. Na prática, desenhe um símbolo simples que continue legível bem pequeno.

Preciso registrar a marca antes de fazer o site?

O registro não é obrigatório para ter um site, mas a pesquisa de marca no INPI deveria vir antes de investir em identidade e site. Se o nome tiver conflito, tudo o que foi desenhado em cima dele pode precisar mudar. Para o registro em si, procure orientação jurídica.

Conclusão

Identidade visual vem antes do site porque o site é onde ela mais se repete: em cada botão, cada preço, cada banner e cada e-mail. Um núcleo pequeno e testado para a tela (logo em duas versões, símbolo, cor principal com contraste, poucas fontes e direção de foto) já evita a maior parte do retrabalho. Se você vai abrir uma loja virtual e ainda está decidindo marca e plataforma, veja como funciona a criação de lojas e projetos de e-commerce e manda em oailton.dev/contato o que você vende, o que já tem de marca e o prazo que precisa. Se ainda não criou a loja Shopify, fala comigo antes de criar: a loja nasce como loja de desenvolvimento, é montada pronta e transferida para o seu nome.