Web design não é decoração
Web design é o trabalho de decidir como um site se apresenta e se comporta, para que o visitante entenda o que está vendo e consiga fazer o que veio fazer. A versão antiga deste post definia como "uma extensão da prática de design, com a ajuda de ferramentas de edições" — o que não diz nada, e trata a disciplina como escolha de aparência. O resultado do web design é visual; a matéria-prima é decisão. E são seis decisões que respondem por quase todo o resultado.
As 6 decisões, lado a lado
| Decisão | A pergunta que ela responde | Erro comum |
|---|---|---|
| 1. Hierarquia visual | O que a pessoa vê primeiro, segundo e terceiro? | Destacar tudo — e nada se destacar |
| 2. Agrupamento | O que pertence junto e o que é separado? | O mesmo espaçamento entre todas as coisas |
| 3. Tipografia | Dá para ler sem esforço? | Fonte pequena, linha longa, contraste fraco |
| 4. Cor com função | O que esta cor está comunicando? | Escolher por gosto, sem regra de uso |
| 5. Padrões conhecidos | Onde a pessoa espera encontrar cada coisa? | Reinventar menu, busca e carrinho |
| 6. Os estados | Como fica a tela quando dá erro ou está vazia? | Desenhar apenas a tela cheia e perfeita |
1. Hierarquia visual
É a decisão sobre o que a pessoa vê primeiro — feita com tamanho, peso, cor, espaço e posição. Toda página já tem uma hierarquia; a única questão é se ela foi decidida ou se aconteceu por acaso. Um teste rápido e implacável: aperte os olhos até a tela ficar borrada e veja o que ainda salta. Deveria ser, nesta ordem, o que a empresa faz, o benefício principal e a ação. Se o que salta é o logo gigante ou uma foto genérica, a hierarquia está trabalhando contra o objetivo. O erro clássico é destacar tudo: quando tudo grita, nada é ouvido.
2. Agrupamento e espaçamento
As pessoas leem blocos, não elementos soltos — e o que define um bloco é a proximidade. Itens próximos são entendidos como relacionados; itens distantes, como separados. Por isso o espaço em branco não é desperdício, é informação: é ele que diz onde uma ideia termina e outra começa. O erro mais comum em sites de empresa é usar espaçamento igual entre tudo, o que transforma a página em uma lista indiferenciada e obriga o visitante a fazer o trabalho de separar. Um detalhe que resolve metade dos casos: o rótulo deve ficar mais perto do campo a que se refere do que do campo anterior.
3. Tipografia e legibilidade
A maior parte de um site é texto, e a maior parte dos problemas de leitura tem três causas simples: corpo pequeno demais (no celular, texto principal abaixo de 16 pixels cansa), linha longa demais (acima de 75 caracteres o olho se perde ao voltar) e entrelinha apertada. Some-se a escolha de fontes: duas famílias bastam para quase todo projeto, e a decoração deve ficar longe do texto corrido. E há um limite que não é estético e sim legal — o contraste mínimo entre texto e fundo, tratado em acessibilidade de sites.
4. Cor com função
Cor em web design não é paleta bonita: é sistema de significado. Uma cor de ação (o botão principal, usada com parcimônia para não perder força), uma neutra para textos e fundos, e cores de estado para sucesso, alerta e erro. A regra que organiza tudo: se a mesma cor faz duas coisas diferentes, ela deixou de comunicar — botão verde de comprar e caixa verde de aviso na mesma tela confundem. E uma restrição prática que vem da acessibilidade: cor nunca pode ser o único portador da informação, porque parte dos visitantes não a distingue.
5. Padrões que o usuário já conhece
O visitante chega ao seu site depois de usar dezenas de outros, e traz expectativas: logo no topo à esquerda levando à home, menu no topo, carrinho no canto superior direito, formulário de contato no fim, botão que parece botão. Atender a essas expectativas não é falta de criatividade — é economizar o esforço do visitante para o que importa, que é entender a sua oferta. Reinventar a navegação cria um custo de aprendizado que ninguém pediu para pagar. A criatividade rende muito mais no conteúdo, nas imagens e na forma de explicar do que na localização do menu. Onde cada coisa fica na estrutura é assunto de arquitetura de informação.
6. Os estados que ninguém desenha
A decisão mais esquecida, e a que mais gera abandono. A maioria dos layouts desenha apenas a tela cheia e perfeita — com todos os campos preenchidos, a lista com resultados e nada dando errado. Mas o visitante encontra também: o botão quando o mouse passa por cima; o foco quando ele navega por teclado; o campo com erro (e a mensagem precisa dizer o que corrigir, não "erro no formulário"); o carregando, que evita clicar duas vezes; a lista vazia, que deveria sugerir o próximo passo em vez de mostrar um espaço branco; e a confirmação de sucesso, sem a qual a pessoa não sabe se o envio funcionou. É justamente nesses momentos que algo deu errado — e é neles que o desenho costuma abandonar o visitante.
"O visitante não repara no bom design. Ele repara quando não encontra o que procurava — e nunca chama isso de problema de layout."
Bonito × que converte: onde se encontram
A oposição entre "design bonito" e "design que converte" é mais falsa do que parece. Bonito trata da impressão — e impressão importa: a aparência é um dos primeiros sinais de credibilidade que um visitante usa para decidir se confia. Que converte trata de a pessoa conseguir agir. Os dois se encontram na clareza: um layout claro, arejado e coerente costuma ser percebido como bonito e funciona. O conflito real só aparece em pontos específicos — texto de baixo contraste porque "fica elegante", animação que atrasa o carregamento, botão estilizado que não parece clicável. Nesses casos, a decisão certa é sempre a que preserva a compreensão.
Por que começar pelo celular
Não é moda: é consequência das duas primeiras decisões. A maior parte das visitas chega por celular, e a tela pequena obriga a priorizar — não cabe tudo, então é preciso decidir o que vem primeiro. Desenhar primeiro para o desktop e depois "espremer" costuma produzir uma versão mobile empilhada, com elementos na ordem errada e uma hierarquia que se perdeu no caminho. Desenhar primeiro para o celular força as escolhas difíceis logo no início; o desktop se resolve depois, com o espaço extra a favor. É também o que o Google avalia primeiro, como consta em o que é mobile friendly.
As 5 perguntas para avaliar um layout
Quando o layout chega para aprovação, "gostei" e "não gostei" são as piores respostas possíveis — transformam uma decisão de negócio em preferência pessoal. Cinco perguntas melhores:
- Em três segundos, dá para saber o que a empresa faz? Mostre a tela a alguém de fora e cronometre;
- Qual é a ação principal, e ela é a coisa mais evidente da tela? Se houver três ações concorrendo, não há ação principal;
- Dá para ler o texto corrido com conforto? Leia um parágrafo inteiro no celular, não no monitor grande;
- Como fica no celular? Peça a tela mobile junto, não depois;
- Como ficam os estados? Peça para ver o formulário com erro, a lista vazia e a confirmação de envio. É a pergunta que ninguém faz — e a que mais melhora a entrega.
5 erros de web design
- Carrossel gigante na abertura — o visitante raramente espera o segundo slide, e a mensagem principal fica escondida no que ele não vê;
- Texto sobre foto sem contraste garantido — some no celular, ao sol;
- Botão que não parece botão — o estilo sutil demais custa cliques;
- Aprovar só o desktop — e receber a surpresa do mobile depois de pronto;
- Decidir por gosto do sócio — o site é para o cliente, e a única opinião que conta chega em forma de contato ou de abandono.
Perguntas frequentes
O que é web design?
É o trabalho de decidir como um site se apresenta e se comporta para que o visitante entenda o que está vendo e consiga fazer o que veio fazer. Não é decoração: é uma sequência de decisões sobre hierarquia visual, agrupamento, tipografia, cor, padrões de interface e estados da tela. O resultado é visual, mas a matéria-prima é decisão.
Para que serve o web design?
Para reduzir o esforço de quem visita: encontrar a informação, entender a oferta e chegar à ação sem pensar no caminho. Um bom web design responde, em segundos e sem texto explicativo, onde a pessoa está, o que aquela página oferece e qual é o próximo passo. Quando isso falha, o visitante sai — e nenhum investimento em tráfego compensa.
Qual a diferença entre web design e desenvolvimento?
O web design decide como o site será e entrega as telas; o desenvolvimento transforma essas telas em um site que funciona no navegador. São competências diferentes e etapas seguidas — algumas pessoas dominam as duas, mas contratar uma esperando a outra é a origem de muitos projetos travados.
Design bonito é a mesma coisa que design que converte?
Não, mas também não são opostos. Bonito trata da impressão; que converte trata de a pessoa conseguir agir. Os dois se encontram na clareza: um layout claro costuma ser percebido como bonito e agradável. O conflito só aparece quando a estética atrapalha a leitura — texto de baixo contraste, animação que atrasa, botão que não parece botão.
O que é hierarquia visual?
É a decisão sobre o que a pessoa vê primeiro, segundo e terceiro em cada tela, usando tamanho, peso, cor, espaço e posição. Toda página tem uma hierarquia — a diferença é se ela foi decidida ou aconteceu por acaso. O erro mais comum é destacar tudo: quando tudo grita, nada é ouvido.
Por que o web design precisa começar pelo celular?
Porque a maior parte das visitas chega por celular e porque a tela pequena obriga a priorizar. Desenhar primeiro para o desktop e depois espremer costuma gerar uma versão mobile empilhada e confusa; desenhar primeiro para o celular força as decisões difíceis de hierarquia logo no começo, e o desktop se resolve com o espaço extra.
O que devo avaliar quando recebo um layout?
Cinco perguntas melhores que gostei: em três segundos, dá para saber o que a empresa faz? Qual é a ação principal e ela é a coisa mais evidente da tela? Dá para ler o texto corrido com conforto? Como fica no celular? E como ficam os estados de erro, carregando e lista vazia? Se essas cinco estiverem boas, o resto é ajuste.
O que são os estados de uma interface?
São as variações de tela além da situação ideal: passar o mouse, foco pelo teclado, campo com erro, conteúdo carregando, lista vazia e confirmação de sucesso. A maioria dos layouts desenha apenas a tela cheia e perfeita — e é justamente nos outros estados que o visitante se perde, porque é ali que algo deu errado.