Design com fundo branco: quando o espaço vazio é a melhor escolha

O design com fundo branco é a melhor escolha quando o que está por cima merece toda a atenção: um produto, uma fotografia, um parágrafo longo, uma frase única que precisa pousar. Ele falha quando o branco é escolhido por padrão, porque aí parece uma página que ninguém terminou. A diferença se resume a três decisões: qual branco, quanto espaço e um pequeno detalhe que avisa ao espectador que o vazio foi de propósito.

Quando um fundo branco é a escolha certa

O branco não tem clima próprio, e essa é a sua força. Ele sai do caminho. Isso o torna o fundo natural para tudo o que tem cor ou textura próprias e o pior fundo para o que precisa de atmosfera para se sustentar.

Se o seu design está do lado direito dessa tabela, um fundo colorido suave ou um gradiente delicado costuma servir melhor. Fundos minimalistas trata de opções discretas além do branco, e design de modo escuro trata da ponta oposta.

Escolha um off-white, não o branco puro

O #ffffff puro é a coisa mais brilhante que uma tela pode mostrar. Para um fundo de foto, tudo bem; para uma página que alguém lê por dois minutos, ofusca. Um off-white diminui um pouco o brilho e dá à página uma temperatura. Brancos quentes parecem impressos, calmos e humanos. Brancos frios parecem clínicos, técnicos e precisos. Escolha o que combina com o que você vende.

Dê espaço às palavras

O espaço em branco não é o que sobra. É uma decisão de layout, e só parece intencional quando é generoso. Uma regra prática: margens de pelo menos 8 por cento do lado menor, ou seja, 86 px em um post de 1080×1350, e mais espaço entre os grupos do que dentro deles. Um título, uma linha curta embaixo e um pequeno detalhe na base já bastam para um post.

A hierarquia importa mais no branco do que em qualquer outro lugar, porque não há cor para guiar o olhar. Use tamanho e peso para ordenar as palavras, como descrito em hierarquia visual, e fique em uma só família tipográfica, se puder.

Cor do texto sobre um fundo branco

Preto puro sobre branco puro tem o maior contraste que uma tela pode mostrar, mais do que a leitura precisa, e pode parecer áspero. Um quase-preto com um toque da temperatura do fundo, como #1c1917 sobre um branco quente ou #0f172a sobre um frio, ainda passa em todos os limites de acessibilidade com folga. Para o texto do corpo, mantenha uma razão de contraste de pelo menos 4,5:1; contraste de cores e acessibilidade explica como conferir.

Como impedir que um fundo branco pareça inacabado

O risco do branco é parecer uma tela vazia em vez de uma escolhida. Um único detalhe discreto basta para corrigir isso. Escolha um, não todos.

• Um granulado leve em intensidade bem baixa, para o branco ser lido como uma superfície. Veja textura granulada.
• Uma luz suave no canto, um branco quente que se esvai em um creme um pouco mais profundo em um canto.
• Um filete fino ou borda delicada na cor da sua tinta, de poucos pixels de largura.
• Uma cor de destaque usada uma vez, em um preço, uma data ou um botão.
• Um ar de papel para marcas impressas ou artesanais; textura de papel mostra como.

Um fundo branco em CSS

Na web, defina o off-white uma vez como variável para que todas as seções o compartilhem e dê às imagens um fundo equivalente, para que fotos de produto em branco puro não apareçam como caixas contra a cor do seu papel.

:root {
  --paper: #faf7f2;
  --ink: #1c1917;
  --rule: #e7e1d8;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
}

/* Product photos shot on pure white: blend them into the paper */
.product img {
  mix-blend-mode: multiply;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
}

Se você quer um visual branco com um pouco mais de personalidade, os Marks claros do Gradiently são um bom ponto de partida: fundos suaves e pálidos com material e luz de verdade, em que a área mais calma vai para trás das suas palavras e a tinta automática mantém cada linha escura o bastante para ser lida. Criar com qualquer Mark não reservado é grátis; reserve o que você gostar quando estiver pronto para exportar.