Um visitante decide em poucos segundos se o teu site parece sério, e raramente é por causa de uma coisa grande. Quase sempre são pequenos erros de design que se acumulam e passam uma imagem descuidada, mesmo quando o serviço por trás é ótimo. A boa notícia é que a maioria corrige-se sem refazer o site de raiz. Estes são os cinco que vejo com mais frequência, e o que faço para os resolver.
1. Sem hierarquia visual: tudo grita ao mesmo tempo
Quando tudo tem o mesmo tamanho, a mesma cor e o mesmo peso, o olho não sabe por onde começar e o visitante sai. Um bom design diz, sem palavras, o que é mais importante, o que é secundário e o que é apenas apoio.
Como corrigir: escolhe uma única coisa principal por secção (normalmente o título e o botão de ação) e deixa o resto recuar. Joga com três ferramentas: tamanho, peso e espaço em volta. Um truque que uso muito é semicerrar os olhos a olhar para a página: o que ainda se destaca é o que o design está realmente a priorizar. Se for o logo ou um elemento decorativo e não o teu botão principal, há trabalho a fazer.
E cuidado com os botões: se tens três botões com o mesmo destaque lado a lado, nenhum ganha. Define um primário (preenchido) e deixa os outros como secundários (só contorno ou texto).
2. Fontes a mais (ou mal combinadas)
Três, quatro ou cinco tipos de letra diferentes é uma das marcas mais claras de um site feito sem critério. Cada fonte extra rouba coerência, e também velocidade, porque cada ficheiro de fonte é mais um pedido a carregar.
Como corrigir: usa no máximo duas famílias. Uma para títulos e outra para texto corrido, ou até uma só, com variações de peso. Quando combinas duas, procura contraste claro entre elas (por exemplo, uma serifada nos títulos e uma sem serifa no texto) em vez de duas fontes quase iguais, que parecem uma escolha por engano.
Depois, define uma escala tipográfica e não fujas dela: por exemplo, 16 px ou mais para o texto, e tamanhos de título que sobem em proporção fixa. Num tema de blocos do WordPress ou no Figma, isto fica registado uma vez (no theme.json ou nos estilos de texto) e deixas de decidir tamanhos à mão em cada página. Uma dica final: mantém linhas de texto entre 50 e 75 caracteres. Linhas demasiado longas cansam a leitura.
3. Contraste fraco: texto cinzento-claro em fundo branco
É elegante no ecrã do designer e ilegível num tele2. Fontes a mais (ou mal combinadas)móvel ao sol. O contraste fraco não é só uma questão de estética: afasta quem vê pior, quem está cansado e quem lê no exterior, ou seja, muita gente.
Como corrigir: segue o nível AA das diretrizes WCAG, que pedem um rácio de pelo menos 4,5:1 para texto normal e 3:1 para texto grande (18 pt ou mais, ou 14 pt a negrito, o que corresponde a cerca de 24 px e 18,5 px). Não precisas de calcular à mão: ferramentas como o verificador de contraste do WebAIM ou o plugin Stark no Figma dão-te o rácio em segundos.
Três armadilhas frequentes: texto sobre imagens sem uma camada de escurecimento, botões com texto branco sobre cores claras e cinzentos “subtis” em legendas e placeholders. Se tens de escolher entre o bonito e o legível, escolhe o legível, e depois torna-o bonito.
4. Espaçamento apertado ou inconsistente
Quem tem medo do espaço em branco enche a página até não caber mais nada, e o resultado cansa. O espaço em branco não é desperdício: é ele que agrupa o que está relacionado e separa o que não está. O segundo problema é a inconsistência: 23 px aqui, 31 px ali, 17 px acolá, sem lógica nenhuma.
Como corrigir: define uma escala de espaçamento com poucos valores e usa-a sempre. Um sistema baseado em múltiplos de 8 px (8, 16, 24, 32, 48, 64…) é o mais comum e funciona bem. Segue a regra de proximidade: o espaço dentro de um grupo deve ser sempre menor do que o espaço entre grupos, caso contrário o título parece pertencer ao parágrafo errado.
No Figma, o auto layout com valores fixos faz isto por ti. No WordPress, os presets de espaçamento do tema evitam que cada bloco tenha uma medida diferente. E não te esqueças do telemóvel: margens laterais de pelo menos 16 px e botões com área de toque confortável.
5. Imagens de má qualidade (ou pesadas demais)
Há três variantes deste erro: imagens pixelizadas ou esticadas, fotografias de banco de imagens genéricas que toda a gente já viu, e ficheiros enormes que deixam o site lento. As duas primeiras fazem o site parecer descuidado; a terceira afasta visitantes antes de carregar.
Como corrigir: usa fotografias próprias sempre que possível, mesmo simples, desde que bem iluminadas. Se tiveres de recorrer a imagens de banco, escolhe um estilo coerente e evita as poses artificiais. Mantém o mesmo tratamento (cor, enquadramento, proporção) em todo o site, e não esticues imagens: recorta-as.
Na parte técnica, redimensiona antes de carregar (uma imagem de 4000 px de largura num espaço de 800 px é peso morto), comprime e usa formatos modernos como WebP ou AVIF. Escreve ainda o texto alternativo (alt) de cada imagem: ajuda a acessibilidade e o SEO. E uma imagem com texto lá dentro (um banner em que o título é parte da imagem) não é lida por leitores de ecrã nem se adapta ao telemóvel, por isso prefere texto real sobre a imagem.
Testa o teu site em dez minutos
Abre o teu site, num computador e no telemóvel, e responde:
- Consigo dizer, em dois segundos, qual é a ação principal de cada página?
- Uso no máximo duas famílias de letra e uma escala de tamanhos coerente?
- O texto passa nos rácios de contraste (4,5:1 para texto normal)?
- Os espaçamentos seguem uma escala e os grupos estão bem separados?
- As imagens são nítidas, coerentes entre si e otimizadas para a web?
Se falhaste em dois ou mais pontos, não precisas de um site novo: precisas de uma ronda de afinações. E normalmente é aí que começa a diferença entre um site que parece feito à pressa e um que transmite confiança.