Espaço em branco no site: o que é e como usar a seu favor

A dona de uma loja de roupas no centro de Guarapari olhou a nova página inicial do site e fez um pedido: "Sobrou um espaço vazio do lado do botão. Dá para colocar mais uma promoção ali?". O pedido é comum, e a resposta costuma ser não. Aquele vazio é o espaço em branco no site, e é ele que faz o cliente enxergar o botão de comprar no meio de tanta informação.

Neste post você vai entender o que é o espaço em branco, por que ele ajuda a vender e onde usá-lo no seu site, inclusive no celular. No fim, há um teste rápido para fazer na sua própria página.

O que é espaço em branco no site

Espaço em branco é toda área da página sem texto, foto, ícone ou botão. É a distância entre um parágrafo e outro, a margem nas laterais, o vão entre uma seção e a seguinte. Designers também chamam de espaço negativo.

Apesar do nome, ele não precisa ser branco. Num site de fundo escuro, o espaço em branco é escuro. Num site com fundo bege, é bege. O que define o espaço em branco é a ausência de elementos.

Pense numa vitrine. Uma loja que pendura cinquenta peças no vidro passa a ideia de liquidação e bagunça. Uma vitrine com três peças bem iluminadas faz você parar e olhar cada uma. O site funciona do mesmo jeito.

Por que o espaço em branco ajuda o cliente

O texto fica mais fácil de ler

Linhas grudadas cansam a vista. Quando há um pouco de distância entre as linhas e entre os parágrafos, o olho encontra o começo da próxima frase sem esforço e a pessoa lê até o fim. Isso pesa ainda mais no celular, onde a tela é pequena e a leitura acontece no ônibus, na fila ou com o sol batendo na tela. O post sobre tipografia e fontes para o site mostra como o tamanho da letra entra nessa conta.

O que importa ganha destaque

Um botão de "Pedir orçamento" cercado de banners, selos e fotos disputa atenção com tudo isso. O mesmo botão com área livre ao redor aparece primeiro. O espaço em branco funciona como uma moldura e mostra ao visitante para onde olhar. É uma das ferramentas da hierarquia visual, que organiza a página por ordem de importância.

A marca parece mais cuidadosa

Páginas com respiro passam a sensação de calma e organização. O cliente associa essa sensação à empresa: se o site é bem cuidado, o atendimento provavelmente também é. Lojas de marcas caras usam muito espaço vazio por esse motivo. Você não precisa ser uma marca de luxo para aproveitar o efeito. Uma clínica, um escritório de contabilidade ou uma pousada ganham com a mesma clareza.

Os dois tamanhos de espaço em branco

Quem trabalha com design costuma separar o espaço em branco em dois grupos. Saber a diferença ajuda na conversa com quem faz o seu site.

• Espaço pequeno (microespaço): a distância entre as letras, entre as linhas de um parágrafo, entre um ícone e o texto ao lado dele. É o que deixa a leitura confortável.
• Espaço grande (macroespaço): as margens da página, o vão entre uma seção e outra, a área livre em volta do título principal. É o que separa os assuntos e dá ritmo à página.

Os dois trabalham juntos. Uma página com boas margens e linhas grudadas continua difícil de ler. Uma página com texto confortável, mas sem separação entre as seções, vira um bloco único em que o visitante não sabe onde termina um assunto e começa outro.

Onde usar espaço em branco no seu site

Você não precisa redesenhar o site inteiro para ver diferença. Estes são os pontos que mais pesam:

1. No topo da página inicial. Uma frase que diga o que você faz, uma linha de apoio e um botão. Tudo o que entrar além disso compete com a mensagem principal. Se o topo hoje tem um carrossel com cinco banners, vale repensar.
2. Entre as linhas e os parágrafos. Uma altura de linha entre 1,5 e 1,7 vez o tamanho da letra costuma funcionar bem. Parágrafos curtos, de duas a quatro linhas, também abrem espaço naturalmente.
3. Em volta dos botões. Deixe uma área livre ao redor do botão de chamada para ação. Ele não deve ficar espremido entre uma foto e um bloco de texto.
4. Entre as seções. Use sempre a mesma distância entre um bloco e outro. Essa regularidade ajuda o visitante a perceber que mudou de assunto.
5. Nas fotos de produtos. Produto com fundo limpo e margem em volta chama mais atenção do que produto recortado no meio de um cenário cheio.

Espaço em branco no celular

A tela do celular é pequena, e por isso o espaço em branco faz ainda mais falta nela. O dedo é bem menos preciso do que o mouse, e um texto apertado fica difícil de ler numa tela de seis polegadas.

Três cuidados resolvem a maior parte dos problemas:

• Margem lateral: o texto não pode encostar na borda da tela. Uma margem de 16 a 24 pixels de cada lado já resolve.
• Distância entre botões e links: quando dois links ficam colados, a pessoa toca no errado e desiste. Áreas de toque de cerca de 48 pixels, com folga entre elas, evitam isso.
• Uma coisa por vez: no computador cabem três colunas lado a lado. No celular, elas viram uma coluna só, e cada bloco precisa de espaço para respirar.

Um site responsivo bem feito ajusta esses espaços para cada tamanho de tela.

Página apertada x página com respiro

Veja, lado a lado, o que muda para o visitante:

Erros comuns com espaço em branco

Tratar o vazio como desperdício

É o erro do pedido da loja de roupas. A cada espaço livre, alguém sugere mais um selo, mais uma foto ou mais um aviso. O resultado é uma página em que tudo disputa atenção ao mesmo tempo. Antes de acrescentar algo, pergunte: isso ajuda o cliente a decidir, ou só ocupa lugar?

Afastar o que deveria ficar junto

Espaço demais também atrapalha quando separa coisas que andam juntas. A foto de um produto longe do preço, ou o título de um serviço distante da descrição, deixa o visitante sem saber o que pertence a quê. Elementos relacionados ficam próximos. Assuntos diferentes ficam afastados.

Usar espaços diferentes em cada parte

Quando cada seção tem um vão de tamanho diferente, a página parece montada às pressas. Defina dois ou três tamanhos de espaçamento e repita os mesmos em todo o site.

Querer que tudo caiba na primeira tela

Espremer tudo no topo para o cliente "ver sem rolar" é um costume antigo. Hoje as pessoas rolam a página o tempo todo, principalmente no celular. Vale mais um topo claro, que convida a descer, do que um topo lotado que ninguém entende.

Como testar o espaço em branco do seu site

Faça estes três testes rápidos na sua página inicial:

1. Teste dos olhos semicerrados: abra a página, afaste-se um pouco da tela e aperte os olhos. O que aparece primeiro deve ser o título e o botão principal. Se você só enxerga uma mancha uniforme, falta espaço.
2. Teste dos cinco segundos: mostre a página a alguém por cinco segundos e feche. Pergunte o que a empresa faz e o que dava para fazer ali. Se a pessoa não souber responder, o topo está carregado demais.
3. Teste do polegar: abra o site no celular e navegue usando só uma mão. Se precisar dar zoom para ler ou errar algum toque, os espaços precisam de ajuste.

Por onde começar

Comece pelo topo da página inicial e pelo botão principal, que são os pontos que o cliente vê primeiro. Tire o que não ajuda na decisão, aumente a distância entre os blocos e confira o resultado no celular. Muitas vezes, só isso já deixa o site mais claro do que uma reforma completa. Se quiser ir além, o post sobre UX e UI mostra outros cuidados com a experiência do visitante.

Se preferir que alguém cuide disso para você, a TH Designer cria e ajusta sites com espaçamento pensado para o computador e para o celular, sem deixar a página vazia nem apertada. Conheça nossos serviços e chame a gente no WhatsApp para uma conversa.

Perguntas frequentes