Design de E-commerce

Como Desenhar um Cartão de Produto que Vende

Os detalhes que importam: espaçamento, tipografia, posição dos botões e como destacar o essencial sem sobrecarregar.

7 min de leitura Iniciante Março 2026

Diferentes exemplos de cartões de produto em layouts variados, mostrando fotos, preços e botões de compra

O cartão de produto é o seu vendedor silencioso

Quando alguém entra na sua loja online, passa cerca de 3 segundos decidindo se clica ou sai. Nesse tempo, o cartão do produto precisa comunicar tudo: o que é, quanto custa, se vale a pena. Sem essas informações bem organizadas, a pessoa segue em frente.

A boa notícia? Não é preciso ser um designer experiente para acertar. Existem princípios claros que funcionam — e vamos explorar cada um deles aqui. Desde o tamanho da imagem até onde colocar o botão de compra, cada detalhe afeta a conversão.

Cartão de produto em destaque com elementos bem organizados: imagem grande, título claro, preço em destaque e botão de ação

Diagrama mostrando as 5 zonas principais de um cartão de produto com proporções e espaçamento recomendado

Estrutura: Os 5 elementos que não podem faltar

Todo cartão eficaz segue uma hierarquia. Não é aleatório. A imagem ocupa entre 50-70% do espaço — é ela que chama atenção. Abaixo, vêm o título (curto, direto), depois a descrição rápida se existir, o preço em destaque e finalmente o botão.

A distância entre elementos importa. Se tudo estiver muito junto, fica apertado. Se estiver muito afastado, parece desconectado. A regra prática? Use espaçamento consistente — 12px entre linhas de texto, 16px entre seções.

Imagem do produto

50-70% do cartão. Fundo limpo, produto centrado.

Título/Nome

Uma ou duas linhas máximo. Legível mesmo pequeno.

Descrição breve

Opcional. Se usar, máximo 30 caracteres.

Preço

Fonte grande, cor que contraste. Sem ambiguidade.

Botão de ação

Grande, visível, texto claro. “Adicionar” funciona.

Tipografia que funciona — escolhas que vendem

Não é sobre ser bonito. É sobre ser legível. Quando alguém está procurando um produto, quer ler rápido — título, preço, ir. Fontes muito finas ou muito decoradas atrapalham. Você quer sans-serif limpa: Poppins, Inter, Roboto, Open Sans.

Os tamanhos também contam. Um título precisa ser notavelmente maior que a descrição — pelo menos 1.3x maior. Se o título tem 14px, a descrição tem 11px. O preço? Isso merece ser ainda maior, entre 16-18px dependendo do espaço.

Peso da fonte: títulos ganham com 600 (semibold) ou 700 (bold). Texto normal fica em 400. Isso cria contraste visual sem poluição. E evite misturar mais de 2 pesos no mesmo cartão — fica confuso.

Exemplos de tipografia em cartões de produto: comparação entre fontes legíveis e difíceis de ler, com tamanhos corretos

Visualização de cartões com diferentes níveis de espaçamento: apertado, equilibrado e espaçoso

Espaçamento: o detalhe que a maioria ignora

Espaçamento não é “ar vazio”. É respiração. Quando você olha um cartão bem espaçado, consegue processar a informação naturalmente. Quando tudo está junto, parece caótico — mesmo que os elementos individuais sejam bonitos.

Aqui está o padrão que funciona: entre a imagem e o título, use 16px. Entre o título e a descrição (se existir), 12px. Entre descrição e preço, 12px. E do preço ao botão, 16px novamente. Isso cria um ritmo visual.

“Espaçamento generoso faz produtos caros parecerem ainda mais caros — no bom sentido.”
— Princípio de design de luxo

O botão: onde as pessoas realmente clicam

O botão é a porta de entrada para o carrinho. Não pode ser tímido. Precisa ser grande o suficiente para tocar com um dedo (pelo menos 44px de altura em mobile), com contraste forte contra o fundo e com texto claro. “Adicionar ao carrinho” é longo? Use só “Adicionar”. Três palavras no máximo.

A cor importa — escolha uma que contraste com o resto do cartão. Se seu cartão é branco, um botão azul funciona. Se o cartão tem tons quentes, azul ou cinza escuro funciona bem. Evite usar a mesma cor do texto para o botão, caso contrário ninguém vê onde clicar.

Não faça

Botão cinzento, pequeno, texto fraco

Faça assim

Botão colorido, grande, contraste claro

Comparação de botões de compra: versões ineficazes versus versões que funcionam bem em cartões de produto

Cores: mantendo equilíbrio visual

A maioria das lojas usa cartões brancos com texto cinzento. Funciona. Mas você também pode ser mais criativo. Se usar cor de fundo (bege suave, azul muito claro), o texto precisa contrastar ainda mais. Aqui está a regra: texto escuro em fundo claro, ou texto claro em fundo escuro.

O preço merece destaque de cor. Se a sua marca é azul, faça o preço em azul mais saturado. Isso treina o olho do cliente: “azul = importante”. E quando ele vê azul em outro cartão, já sabe que é o preço.

Branco puro

Padrão, confiável, limpo

Branco suave

Menos estéril, mantém contraste

Bege claro

Aconchego, premium, menos frio

Azul muito claro

Moderno, confiança, tech

Resumindo: o cartão perfeito

Um bom cartão de produto não é complicado. Precisa de imagem grande e clara, título legível, preço visível e botão óbvio. Espaçamento generoso deixa tudo respirar. Tipografia consistente guia o olho naturalmente. Cores bem escolhidas reforçam a marca.

Se você aplicar esses princípios, o seu cartão vai funcionar melhor. Não precisa ser perfeito — precisa ser claro. E quando o cliente entende rapidamente o que está vendo, ele tem mais confiança para clicar.

Checklist para testar seu cartão:

Imagem é clara e ocupa pelo menos 50% do cartão?
Título cabe em uma linha (ou duas máximo)?
Preço é visível mesmo ao passar o olho rapidamente?
Botão é grande e a cor contrasta com o fundo?
Espaçamento entre elementos é consistente?
O cartão parece profissional quando reduzido a 150px de largura?

Nota importante

Os princípios apresentados aqui são baseados em boas práticas de design de e-commerce testadas em diversas lojas. Resultados podem variar dependendo do seu público, tipo de produto e plataforma. Recomendamos sempre testar diferentes layouts e recolher feedback real dos clientes antes de fazer mudanças permanentes. Design é iterativo — o que funciona hoje pode ser melhorado amanhã.