Segunda-feira, dez da manhã. A campanha de Dia dos Pais precisa entrar no ar na quinta. O marketing tem o texto e as fotos, mas a página depende de um desenvolvedor que está terminando outra demanda. O banner chega com um botão diferente do usado na última campanha, a vitrine quebra no celular e, na quarta à noite, alguém ainda está ajustando espaçamento. A campanha sai, mas sai cansada. E daqui a três semanas tudo se repete.
Um design system para e‑commerce existe para acabar com esse ciclo. Ele é o conjunto de fundamentos visuais, componentes prontos e regras de uso que permite montar páginas da loja sem começar do zero a cada campanha. Quando é bem feito, o time de marketing publica vitrines, banners e páginas promocionais sozinho, a marca fica consistente em todas as telas e o desenvolvimento deixa de ser gargalo do calendário comercial. Neste guia explicamos o que um design system precisa ter para funcionar numa loja, como implantar em etapas, os erros mais comuns e como saber se ele está dando resultado.
Por que lojas precisam de um design system
O ritmo de uma loja online é diferente do de um site institucional. Um calendário comercial típico no Brasil tem Carnaval, Dia do Consumidor, Páscoa, Dia das Mães, Dia dos Namorados, Dia dos Pais, Dia das Crianças, Black Friday e Natal, sem contar coleções, lançamentos, frete grátis de fim de semana, parcerias com influenciadores e liquidações de estoque. Cada uma dessas datas pede páginas, banners, vitrines e comunicações no site, quase sempre com prazo curto.
Sem um sistema, cada pedido vira um pequeno projeto: alguém desenha, alguém desenvolve, alguém revisa, e no meio do caminho surgem versões diferentes do mesmo botão. O resultado aparece em quatro lugares:
- Retrabalho: o time refaz, a cada campanha, o que já existia na anterior.
- Inconsistência: cada página parece de uma marca diferente, e o cliente percebe, mesmo sem saber explicar.
- Lentidão: a campanha espera na fila de desenvolvimento e entra no ar depois da hora certa.
- Dívida técnica: cada página feita às pressas carrega código próprio, que pesa no carregamento e complica a manutenção.
Um design system ataca os quatro problemas ao mesmo tempo, porque transforma decisões repetidas em peças prontas. Em vez de decidir de novo a cor do botão, o tamanho do título e o espaçamento da vitrine, o time escolhe o bloco certo e foca no que realmente muda: a mensagem, a oferta e a imagem.
O que um design system para e‑commerce precisa ter
Não é só uma biblioteca de arquivos no Figma. Para funcionar numa loja, o sistema precisa existir em camadas que conversam entre si, e precisa estar disponível onde o trabalho acontece: na plataforma da loja.
Fundamentos da marca
Cores, tipografia, espaçamentos, raios de borda, ícones, estilo de imagem e tom de voz, definidos como regras e, sempre que possível, como tokens: valores com nome que o design e o código usam da mesma forma. Quando a cor principal muda, ela muda em todo lugar. Quando a marca decide que o preço promocional sempre aparece em determinado estilo, isso vale para a home, a categoria, a página de produto e o carrinho.
Componentes da loja
São as peças que aparecem em quase toda página. Uma lista mínima costuma incluir:
- cabeçalho, menu e busca;
- card de produto, com preço, preço promocional, parcelamento, selos e avaliação;
- vitrine e carrossel de produtos;
- banner principal e banners secundários;
- régua de benefícios (frete, troca, parcelamento, Pix);
- selos de desconto, lançamento e esgotado;
- grade de categorias;
- bloco de conteúdo editorial e de depoimentos;
- formulário de newsletter e de cadastro;
- barra de aviso promocional;
- rodapé.
Cada componente precisa ter variações previstas, como tamanhos, estados (padrão, ao passar o mouse, desativado, carregando) e versões para celular, além de regras claras do que pode e do que não pode mudar.
Documentação
Um guia simples de quando usar cada componente, com exemplos certos e errados, limites de texto e orientações de imagem. Não precisa ser um manual de cem páginas. Precisa ser fácil de consultar no meio de uma campanha.
Governança
Um responsável por aprovar novidades, um processo leve para pedir componentes novos e uma revisão periódica do que está em uso. Sem isso, o sistema começa a ganhar exceções e, em poucos meses, volta a ser um conjunto de peças soltas.
Componentes que o marketing consegue usar sem abrir chamado
O teste de um bom design system é simples: alguém do marketing consegue montar uma página de campanha completa na plataforma, sem pedir ajuda ao desenvolvimento? Para isso, os componentes precisam ser pensados para quem vai usá-los, e não só para quem os desenhou.
- Campos editáveis e limitados: título, texto, imagem, link e cor de fundo dentro de uma paleta aprovada. Liberdade demais gera páginas quebradas; liberdade de menos gera chamados.
- Limites de texto visíveis: o componente mostra quantos caracteres cabem antes de quebrar o layout no celular.
- Imagens com proporções definidas: o sistema indica tamanho e recorte para cada formato e, de preferência, gera as versões responsivas automaticamente.
- Blocos combináveis: uma página de campanha é montada empilhando blocos prontos, na ordem que a campanha pedir.
- Vitrines por regra: em vez de escolher produto por produto, o time define a regra (coleção, categoria, tag de campanha) e a vitrine se atualiza sozinha quando o estoque muda.
- Agendamento: a página e os banners entram e saem do ar no horário certo, sem alguém acordado à meia-noite.
- Pré-visualização fiel: o que o time vê antes de publicar é o que o cliente vai ver, inclusive no celular.
Um exemplo de página montada em blocos
Imagine a página de uma campanha de Dia das Mães. Ela pode ser montada assim: barra de aviso com o prazo de entrega para a data; banner principal com a mensagem da campanha; régua de benefícios com frete e troca; grade de categorias ("para a mãe que cozinha", "para a mãe que viaja"); vitrine por regra, puxando os produtos marcados com a tag da campanha; bloco editorial com sugestões; e newsletter no fim. Nenhum desses blocos foi criado para essa campanha. Todos já existiam. O trabalho do time foi escolher, ordenar e preencher.
Cada plataforma de e‑commerce oferece um caminho diferente para chegar a isso, seja por editor visual, por componentes do tema ou por um CMS conectado à loja. Vale entender o que a sua plataforma permite antes de desenhar os componentes, para não criar algo que o time não vai conseguir editar. Se você ainda está escolhendo, essa é uma das perguntas do nosso guia sobre Tray, VTEX ou Wake.
Como implantar um design system em etapas
Não é preciso parar a loja para construir o sistema perfeito. O caminho que costuma funcionar melhor é incremental, com ganhos visíveis desde as primeiras semanas.
- Faça um inventário. Tire prints de todas as páginas e campanhas dos últimos meses e agrupe os elementos parecidos. Você vai encontrar, por exemplo, vários tipos de botão, de card de produto e de banner que deveriam ser um só. Esse painel, colado numa parede ou num quadro digital, costuma convencer qualquer diretoria.
- Defina os fundamentos. Cores, tipografia e espaçamentos viram tokens. Essa etapa resolve boa parte das inconsistências sem tocar em nenhum componente.
- Comece pelos componentes mais usados. Card de produto, banner e vitrine aparecem em quase toda campanha e trazem retorno rápido.
- Construa no design e no código ao mesmo tempo. Um componente que só existe no Figma não reduz retrabalho. Ele precisa estar disponível na plataforma, pronto para uso.
- Teste com o time que vai usar. Peça para alguém do marketing montar uma página real e observe, sem ajudar, onde a pessoa trava.
- Migre as páginas aos poucos. Comece pelas novas campanhas e substitua as páginas antigas conforme elas forem revisadas.
- Documente e evolua. Cada pedido novo é uma chance de decidir se ele vira variação de um componente existente ou um componente novo.
Quem precisa estar envolvido
Design, desenvolvimento e marketing, desde o começo. O atendimento e o time de produto também têm muito a dizer: são eles que sabem quais informações o cliente procura e não encontra. Um design system desenhado só pelo design tende a ser bonito e pouco usado; um desenhado só pelo desenvolvimento tende a ser técnico e pouco flexível.
Erros comuns ao criar um design system para a loja
- Começar pelo sistema completo. Passar meses desenhando todos os componentes possíveis antes de colocar o primeiro no ar. O time perde a paciência e volta ao jeito antigo.
- Ficar só no Figma. Se o componente não existe na plataforma, o marketing continua dependendo do desenvolvimento.
- Liberdade sem limite. Permitir qualquer cor, qualquer fonte e qualquer tamanho, e descobrir que a loja ficou inconsistente de novo.
- Rigidez sem saída. O oposto: travar tanto os componentes que toda campanha diferente exige um chamado.
- Esquecer o celular. Aprovar componentes no computador e descobrir que o texto do banner ficou ilegível na tela pequena.
- Não ter dono. Sem um responsável, ninguém decide sobre exceções, e as exceções viram regra.
- Tratar como projeto, e não como produto. Um design system precisa de manutenção contínua, como qualquer parte da loja.
Performance, SEO e como medir se o design system funciona
Um benefício pouco lembrado é técnico. Componentes padronizados carregam o mesmo código em toda a loja, o que facilita controlar o peso das páginas, reservar espaço para imagens e evitar que o layout pule durante o carregamento. Isso ajuda diretamente nos Core Web Vitals, e o nosso checklist de 15 minutos mostra como medir esse efeito. O mesmo vale para SEO e acessibilidade: quando o componente já nasce com a hierarquia certa de títulos, texto alternativo obrigatório nas imagens, contraste adequado e marcação correta, cada nova página herda essas boas práticas sem depender da memória de quem publicou.
Indicadores para acompanhar
Sem números inventados: o melhor indicador é o seu próprio histórico. Antes de começar, registre alguns pontos de referência e acompanhe a evolução depois que os componentes estiverem no ar.
- Tempo entre o pedido de uma campanha e a página publicada.
- Quantidade de chamados de design e desenvolvimento abertos pelo marketing por mês.
- Número de campanhas e páginas publicadas por mês.
- Quantidade de páginas com elementos fora do padrão encontradas em revisões periódicas.
- Indicadores de velocidade das páginas de campanha, medidos com as ferramentas públicas do Google.
- Percepção do time: uma pergunta simples a cada trimestre sobre a facilidade de publicar.
Se o tempo de publicação cai, os chamados diminuem e a quantidade de campanhas aumenta sem perder consistência, o sistema está cumprindo o papel dele.
Próximo passo: comece pelo inventário
Separe uma tarde, junte as páginas das últimas campanhas e conte quantas versões do mesmo botão, do mesmo card e do mesmo banner existem na sua loja. Esse exercício costuma mostrar, de forma muito concreta, onde está o retrabalho e por onde começar. É o primeiro passo para que a próxima campanha seja montada em horas, e não em dias.
No For:Commerce, desenhamos e implementamos design systems pensados para a rotina do time de marketing, dentro da plataforma que a loja já usa. E, quando a marca pede algo além do componente padrão, como uma experiência interativa de lançamento, a Programação Criativa entra para criar o que nenhum template oferece. Para conversar sobre a sua loja, escreva para contato@forhuman.com.br.