Espaço em Branco: Por que sua página inicial converteria melhor com menos coisas nela

Você coloca a página no ar. Herói, sub-herói, três destaques de recurso, um screenshot, dois CTAs, prova social, e um banner , tudo acima da dobra. Você passou semanas nisso. Visitantes chegam, congelam, e saem.

O instinto quando ninguém está convertendo é adicionar mais. Mais copy. Mais recursos. Mais badges. Quase sempre piora as coisas. Páginas bagunçadas sobrecarregam visitantes e escondem a ação que você quer que façam.

A correção é o oposto: remova coisas. Ou , mesmo efeito, enquadramento diferente , dê às coisas que mantém mais espaço para respirar. Esse é espaço em branco, e é a atualização premium mais barata que sua página pode obter.

O que espaço em branco realmente é

Espaço em branco é o espaço entre coisas. Não precisa ser branco , pode ser qualquer cor, imagem, ou textura. O trabalho é agir como um buffer entre elementos, não ser uma cor específica.

Dois tipos que vale a pena conhecer:

1. Espaço em branco macro , os gaps grandes entre seções principais, ao redor do herói, ao redor de todo bloco de conteúdo.
2. Espaço em branco micro , os gaps pequenos entre letras, linhas de texto, itens em um menu.

"Design é tanto sobre o espaço em branco quanto sobre o que você coloca nele." , Paul Rand

Espaço em branco não é vazio. Está trabalhando. Está dizendo ao olho onde uma ideia termina e outra começa.

Por que isto importa em uma página inicial

Menos sobrecarga

Visitantes têm atenção limitada. Um herói bagunçado os força a processar demais de uma vez. Eles skim, perdem a proposta de valor, e saem.

Ênfase de CTA

Circunde seu "Comece teste gratuito" com espaço vazio e se torna o ponto focal. Crame entre dois gráficos e desaparece.

Conforto enquanto lê

Espaçamento de linha apertado transforma parágrafos em muros. Espaçamento de linha generoso os faz parecer legíveis em três segundos.

Sensação premium

Apple, Linear, Stripe , cada página que "parece cara" usa muito espaço vazio. Páginas desconto e spam apertam cada pixel. Visitantes associam espaço com qualidade sem pensar nisso.

Como usar espaço em branco estrategicamente

1. Audite a bagunça

Abra sua página ao vivo em móvel. Onde parece apertado? Links de navegação tocando um ao outro? Rodapé que é um muro de texto? Herói com cinco mensagens competindo?

Marque cada lugar que parece apertado. Aqueles são seus reparos.

2. Decida o que cada espaço é para

Não adicione gaps apenas porque. Cada espaço deveria fazer um de três trabalhos:

• Destacar algo , adicione espaço em branco macro ao redor de seu CTA ou manchete.
• Melhorar legibilidade , adicione espaço em branco micro dentro de blocos de texto.
• Separar tópicos , use espaço em vez de divisores e bordas duras.

3. Afine sua tipografia

Espaço em branco e tipografia estão ligados. Aumente altura de linha (1.5x para corpo). Aumente espaçamento de parágrafo. De repente as mesmas palavras parecem digeríveis.

Para valores específicos, veja Regras de Legibilidade.

4. Use margens e padding generosos

Margens ao redor de containers, padding dentro deles. Ambos criam o espaço que seus elementos precisam para parecerem coisas reais, tappáveis, legíveis.

Veja Margens e Espaçamento para um mergulho mais profundo.

5. Atenha-se a um sistema de espaçamento

O sistema de 8 pontos (8, 16, 24, 32, 48, 64, 96, 128) mantém tudo consistente. Valores aleatórios criam aquela sensação de "tremor," mesmo que cada gap esteja tecnicamente bem por si.

6. Aperte os olhos na página

Recue. Aperte os olhos até detalhes desfocarem. Um lado parece mais pesado que o outro? Seu olho flui naturalmente de manchete para imagem para CTA? Se algo parece preso, dê a ele mais espaço.

Formas comuns que construtores quebram isto

Gaps inconsistentes

• O erro: 20px entre alguns elementos, 35px entre outros, sem razão real.
• A correção: Escolha uma escala (4, 8, 16, 32, 64) e aplique em todos os lugares.

Espaço vazio sem agrupamento

• O erro: Adicionar gaps entre tudo até a página ler como quebrada ou inacabada , sem grupos claros, apenas fragmentos flutuando.
• A correção: Coisas que pertencem juntas devem ficar perto. Coisas que não devem estar mais afastadas. Espaço comunica relacionamentos, não apenas "mais é melhor."

Espaçamento de desktop em móvel

• O erro: Gaps de seção de 200px que produzem rolagem infinita em um telefone.
• A correção: Use espaçamento responsivo. Reduza gaps macro em móvel. Mantenha espaçamento micro apertado o suficiente para manter botões tappáveis.

Como produtos reais fazem isto

Google

A homepage Google é um logo e uma barra de busca. O espaço em branco força você a fazer exatamente uma coisa. Sem bagunça de nav, sem cards de notícias, sem "você também pode querer ver." É o exemplo mais extremo de "menos coisas igual mais ação."

Apple

As páginas de produto da Apple colocam um produto em uma tela massiva de espaço vazio. O espaço diz "isto é importante" antes de você ler uma palavra. Specs e detalhes apenas aparecem quando você rola para eles. Visitantes leem como luxo , sem ninguém chamando de luxo.

Princípios relacionados

Espaço em branco é uma peça do layout. Estes se combinam com ele:

Regras de Legibilidade

Configure a altura de linha e tamanho de fonte que tornam sua copy confortável de ler.

Recursos e leitura adicional

Typescale

Configure um ritmo visual para texto e espaçamento usando proporções matemáticas.

Princípios de Gestalt

Como o olho percebe grupos, gaps e espaço vazio.

Perguntas frequentes