Meu site é bonito, mas não vende: quando o design trabalha contra

Existem decisões visuais que deixam a página elegante e reduzem a venda. Elas não são erro de execução — são escolhas que otimizam para admiração em vez de ação.

Revisar meu site
1
elemento deve dominar
7
padrões que atrapalham
0
clientes opinaram no projeto
5s
para entender a oferta

A raiz do problema: beleza e conversão otimizam para coisas opostas. Um layout é considerado bonito quando está equilibrado — pesos distribuídos, respiro uniforme, harmonia. Uma página vende quando está desequilibrada: um elemento domina, os outros se submetem, e o olho não tem escolha sobre onde ir. Equilíbrio é o oposto de direção.

Para quem o site foi feito

Antes dos padrões específicos, vale a pergunta que explica a maioria dos casos: quem aprovou esse site?

Normalmente três pessoas gostaram dele — o designer, que buscava um trabalho para o portfólio; o dono, que queria orgulho ao mostrar; e alguém da equipe, que comparou com concorrentes e achou mais moderno. Nenhuma das três é cliente.

O cliente entra com um problema, pouco tempo e nenhuma vontade de apreciar. Ele quer saber, em segundos, se você resolve o que ele tem. Um site otimizado para impressionar quem entende de site atende exatamente ao público errado.

O teste que resolve a discussão: mostre a primeira tela para cinco pessoas que não são do seu setor, por cinco segundos, e pergunte o que a empresa vende e para quem. Se três ou mais errarem, o problema não é opinião de gosto — é informação que não chegou. Esse teste custa nada e encerra debates que durariam meses.

Os sete padrões que ficam bonitos e vendem menos

01
A imagem gigante sem mensagem
A primeira tela ocupada por foto e uma frase abstrata
O mais comum

Foto de escritório, equipe ou paisagem cobrindo a tela inteira, com uma frase do tipo "transformando negócios" ou "sua jornada começa aqui". É a decisão visual mais premiada e a que mais custa contato.

O visitante rola, não encontra o que procura, e sai antes de chegar à parte onde você explicava o serviço. A área mais valiosa da página foi gasta com decoração.

O que funciona no lugar: a frase que diz o que você faz, para quem, e onde. A imagem pode ficar — mas ela é fundo, não conteúdo.

02
O carrossel na abertura
Três ou quatro mensagens girando automaticamente
Dilui tudo

Resolve uma discussão interna — cada área queria sua mensagem em destaque — e não resolve nada para o visitante. Ele lê metade da primeira, o slide troca, e ele perde o fio. Na prática, a maioria das pessoas só vê o primeiro, e mesmo esse é lido pela metade.

Escolher uma única mensagem é decisão difícil internamente e é exatamente por isso que o carrossel existe. Ele é uma forma de não decidir.

03
A animação que atrasa a leitura
Textos que aparecem conforme a rolagem
Custa segundos

Elemento que surge com transição suave fica elegante numa apresentação e irrita em uso real. O visitante rola rápido, procurando; o conteúdo aparece devagar, atrasando. Em conexão lenta, parte dele pode nem aparecer.

Animação sutil e rápida não atrapalha. O problema é a que exige espera para revelar informação que a pessoa está procurando.

04
O contraste baixo em nome da elegância
Cinza claro sobre branco, tipografia fina
Exclui parte do público

Texto cinza-claro em fonte fina é uma escolha estética legítima e uma barreira real. No celular, sob luz do sol, ou para quem tem mais de quarenta anos, ele simplesmente não se lê.

Se o seu cliente típico tem cinquenta anos, essa decisão elimina uma parte do público antes de qualquer argumento. E o dono, que aprovou o site no monitor grande do escritório, nunca percebe.

05
O botão que não parece botão
Contorno fino, cor discreta, sem destaque
Reduz cliques

A tendência de botões minimalistas — só contorno, cor neutra, integrados ao fundo — deixa a página harmoniosa e o caminho invisível. O visitante não registra que ali existe uma ação disponível.

Botão de ação precisa destoar. Se ele combina perfeitamente com o resto da página, ele está escondido dentro dela.

06
O menu escondido no computador
Três risquinhos em telas grandes
Esconde navegação

No celular, faz sentido — não há espaço. No computador, esconder o menu atrás de um ícone é escolha estética que troca clareza por limpeza. Cada clique a mais para descobrir o que existe no site derruba parte de quem estava explorando.

07
O espaço em branco que vira rolagem infinita
Respiro generoso demais
Afasta a informação

Espaçamento amplo melhora leitura e, em excesso, transforma três parágrafos em quatro telas de rolagem. Informação que caberia junta fica espalhada, e o visitante desiste antes de juntar as peças.

No celular o efeito multiplica: o que era elegante no monitor vira uma sequência interminável de blocos com uma frase cada.

A ordem de leitura que o visitante segue

Design organiza a página no espaço. O visitante não lê no espaço — ele lê numa sequência. Quando as duas coisas não coincidem, a página fica bonita e confusa ao mesmo tempo.

O que o olho faz de verdade

Ninguém lê uma página da esquerda para a direita, de cima a baixo, como um livro. O olho salta: vai ao maior elemento, depois ao que tem mais contraste, depois procura texto curto que pareça resumir. Só depois, se ainda houver interesse, ele começa a ler frases inteiras.

Isso significa que a sequência real de leitura é definida por peso visual, não por posição. Um texto pequeno colocado no topo perde para uma imagem grande colocada abaixo dele — mesmo estando antes.

O primeiro salto precisa cair na mensagem que diz o que você faz. Se ele cai numa foto decorativa, você gastou o momento de maior atenção com algo que não informa.
O segundo salto deveria encontrar a ação — o botão, o telefone, o que fazer em seguida. Se ele encontra o menu ou um bloco de texto denso, a pessoa perde o caminho.
O terceiro é onde entra a prova: número, caso, depoimento. É o que sustenta o que foi prometido nos dois anteriores.

Layouts em colunas iguais, muito usados por serem organizados, quebram essa sequência: três blocos com o mesmo peso não dizem ao olho por onde começar. Ele escolhe qualquer um, ou nenhum.

O que o celular faz com o design bonito

Este é o ponto cego mais previsível, porque a maior parte do tráfego vem de celular e a maior parte das aprovações acontece no computador.

A composição some

Layout pensado em colunas vira uma pilha vertical. A relação entre os elementos — o que estava ao lado do quê — desaparece, e a lógica visual do projeto se perde.

A imagem de topo ocupa tudo

O que era um banner elegante vira uma tela inteira de foto. A mensagem, que ficava sobre ela, é empurrada para baixo da dobra e pode nem aparecer sem rolagem.

O texto encolhe ou estica

Fonte fina que era refinada no monitor fica ilegível na tela pequena. E linhas pensadas para largura ampla viram sequências de duas ou três palavras.

O botão sai da tela

Ação que estava visível no computador vai parar depois de várias rolagens. Quem não rolou até lá não soube que existia.

A correção não é técnica, é de processo: aprovar o site pelo celular primeiro, e só depois olhar no computador. Invertendo a ordem de aprovação, boa parte desses problemas nem chega a existir.

Um teste de dois minutos: abra sua página inicial no celular e, sem rolar nada, responda: dá para saber o que a empresa faz? Existe uma ação visível? Se as duas respostas não forem sim, a primeira tela — que é o que a maioria vê — não está trabalhando.

A hierarquia: o conceito que resolve quase tudo

Se houvesse um único ajuste a fazer, seria este.

Em qualquer tela do seu site, um elemento precisa ser claramente mais importante que todos os outros. Não dois, não três — um. Ele deve ser maior, mais contrastante ou mais isolado, de forma que o olho vá até ele sem esforço.

Quando tudo tem peso parecido, o visitante precisa decidir para onde olhar, e decidir cansa. Diante de uma página onde tudo é igualmente relevante, a saída mais fácil é sair.

Como testar a hierarquia

Aperte os olhos até a tela ficar borrada. O que ainda se destaca é o que domina de fato. Se nada se destaca, não há hierarquia.
Converta a tela para preto e branco. Se o botão de ação some quando a cor sai, ele depende só de cor — e uma parte das pessoas não distingue essa diferença.
Olhe por três segundos e feche. Anote o que você lembra. Deveria ser a mensagem principal e a ação. Se você lembra da imagem de fundo, ela venceu a disputa.

Quando o problema é o texto, não o layout

Vale separar, porque com frequência o design leva a culpa de um problema de escrita.

Um site pode ter hierarquia perfeita e não vender porque a frase em destaque não diz nada. "Soluções sob medida para o seu negócio" ocupa o lugar mais nobre da página e não informa nem o setor em que você atua.

O sinal de que o problema é textual: quando você mostra a primeira tela e a pessoa entende que existe uma frase importante ali, mas não consegue dizer o que a empresa faz. A hierarquia funcionou; o conteúdo dela é que estava vazio.

Reformular não é redesenhar

A conclusão mais comum diante desse diagnóstico é a mais cara: refazer o site. Na maior parte dos casos, não é necessário.

O que resolve rápido

Trocar a frase da primeira tela. Aumentar contraste de texto. Dar destaque ao botão principal. Reduzir espaçamento excessivo. Remover carrossel. São ajustes de horas, não de meses.

O que exige mais trabalho

Reorganizar a ordem das seções, criar páginas por serviço, reescrever o conteúdo com foco no problema do cliente. Semanas, não meses.

O que justifica refazer

Site que não funciona no celular, plataforma que impede alterações, estrutura que não permite criar páginas novas. Aí a limitação é técnica e não adianta remendar.

O que nunca resolve sozinho

Trocar de visual mantendo os mesmos textos e a mesma estrutura. É o projeto mais vendido e o que menos muda resultado.

Como saber se o ajuste funcionou

Mudança visual costuma ser avaliada por opinião — "ficou melhor?" —, e opinião não decide. Dois números decidem, e você já tem os dois.

O primeiro é quantas pessoas rolam além da primeira tela. Se a mensagem nova está funcionando, mais gente continua. O segundo é quantas chegam à página de contato. Se a hierarquia está direcionando, esse número sobe mesmo com o mesmo tráfego.

Compare quatro semanas antes com quatro semanas depois, e mude uma coisa por vez. Sem essa disciplina, você vai atribuir o resultado ao ajuste mais visível, que raramente é o que funcionou.

A conversa difícil com quem fez o site

Vale antecipar, porque ela costuma travar a correção.

Apontar que o site bonito não vende soa como crítica ao trabalho de quem o fez — e frequentemente o trabalho foi bem executado dentro do que foi pedido. Se o pedido era um site moderno e elegante, ele entregou exatamente isso.

A conversa produtiva não é sobre gosto, é sobre objetivo. Em vez de "não gostei", vale "o objetivo é gerar contato, e estamos com poucos; quero testar mudanças nesses pontos". Discussão sobre gosto não tem critério de decisão. Discussão sobre número tem.

E vale mudar uma coisa por vez, com pelo menos algumas semanas entre elas. Alterar cinco elementos juntos e ver o contato subir não ensina qual deles funcionou — e no próximo site você vai repetir os cinco, inclusive os inúteis.

Testar a conversão com quem entende

Trocar a frase da primeira tela, aumentar contraste e destacar o botão são ajustes que quem cuida do site resolve. Concentram boa parte do ganho e não exigem projeto.

Vale trazer ajuda quando os ajustes foram feitos e o contato não mudou — porque aí a causa provavelmente está antes do site, em quem chega até ele, ou depois, no que acontece com quem entra em contato. A análise de consultoria separa essas hipóteses com dados. Se a suspeita for de que o público que chega não é o que compra, o caminho começa em quais buscas trazem essas pessoas. Se o problema estiver na confiança que a página transmite, o roteiro está em quando o site não transmite confiança. E se as visitas existem sem virar contato, o diagnóstico está em tenho visitas e não tenho leads. E se parte do público não consegue usar o site, o roteiro está em parte do público não usa meu site.

Como diagnosticar um site bonito que não converte

  1. Fazer o teste dos cinco segundos com cinco pessoas de fora Perguntar o que a empresa vende e para quem.
  2. Abrir a página no celular sem rolar nada Verificar se dá para saber o que a empresa faz e se há ação visível.
  3. Apertar os olhos até a tela borrar O que ainda se destaca é o que domina de fato.
  4. Converter a tela para preto e branco Se o botão some sem a cor, ele depende só dela.
  5. Trocar a frase da primeira tela Dizer o que você faz, para quem e onde.
  6. Aumentar o contraste do texto Testar no celular, sob luz do sol.
  7. Dar destaque ao botão principal Ele precisa destoar da página, não combinar com ela.
  8. Medir rolagem além da primeira tela e chegadas ao contato Quatro semanas antes contra quatro depois.
  9. Mudar uma coisa por vez, com semanas entre elas Alterar tudo junto impede saber o que funcionou.
Cleber Barbosa, consultor de marketing digital em Ribeirão Preto
Autor
Cleber Barbosa
Consultor de Marketing Digital, SEO e Tráfego Pago — Ribeirão Preto, SP

Vinte anos de marketing digital e 43 cases documentados. Trabalho com SEO técnico, tráfego pago, growth hacking e IA aplicada a negócios. Quando ouço que o site é bonito e não vende, o primeiro teste é o dos cinco segundos com cinco pessoas de fora do setor — ele encerra em minutos uma discussão de gosto que duraria meses.

Sobre o autor
Perguntas frequentes

Dúvidas sobre design e conversão

Site feio vende mais que site bonito?

Não. Beleza não atrapalha; o que atrapalha é otimizar para admiração em vez de ação. Um site bonito com hierarquia clara e mensagem direta vende mais que um feio. O problema é quando a estética elimina a direção.

Preciso refazer meu site?

Na maioria dos casos, não. Ajustar a frase principal, o contraste e o destaque do botão concentra boa parte do ganho. Refazer só se justifica quando a plataforma impede alterações ou o site não funciona no celular.

Quantos botões de ação devo ter por página?

Uma ação principal, repetida ao longo da página. Ações diferentes competindo entre si dividem a decisão do visitante, e decisão dividida costuma virar nenhuma decisão.

Vídeo na primeira tela ajuda?

Raramente. Ele pesa, atrasa o carregamento e a maioria não assiste. Se o vídeo é bom, coloque depois da mensagem principal, onde quem já se interessou vai encontrá-lo.

Como convenço o designer a mudar?

Levando objetivo em vez de gosto. "Precisamos gerar contato e estamos com poucos, quero testar mudanças nesses pontos" é uma conversa com critério. "Não gostei" não tem como ser resolvida.

Devo mudar tudo de uma vez?

Não. Uma coisa por vez, com algumas semanas entre elas. Alterar cinco elementos juntos e ver o resultado subir não ensina qual deles funcionou, e você vai repetir os inúteis no próximo projeto.

Fez os ajustes e o contato não mudou?

Se o site não é a causa, ela está antes — em quem chega — ou depois, no que acontece com quem entra em contato.

Falar no WhatsApp