O espaço em branco é uma ferramenta poderosa que pode levar seus projetos para o próximo nível. Quando usado estrategicamente, isso é.
Desmascarando o mito: espaço em branco é espaço desperdiçado
Em 1930, o inovador designer e tipógrafo suíço Jan Tschichold escreveu que o espaço em branco “deve ser considerado um elemento ativo, não um fundo passivo”. Há muito tempo, Tschichold podia ver que o espaço em branco não era simplesmente espaço morto ou espaço desperdiçado, mas sim um elemento de design em si.
Vamos falar sobre algumas coisas que podem ser melhoradas usando o espaço em branco.
Legibilidade
Os usuários da Internet não lêem, eles escaneiam . Isso significa apenas que há muito mais varredura acontecendo do que lendo palavra por palavra.
Como é da natureza das pessoas verificar o conteúdo, queremos garantir que isso seja o mais fácil possível para elas. O bom uso do espaço em branco ajuda os leitores a digitalizar páginas e informações para captar os pontos-chave mais importantes. Um estudo realizado pela Wichita State University mostrou que, com entrelinhas e margens ideais, espaço em branco entre e ao redor do texto, a compreensão melhorou. O estudo demonstra fundamentalmente que o espaço em branco afeta a experiência de leitura.
Muitos designs podem ser melhorados simplesmente aumentando a entrelinha do texto. O análogo da liderança em web design é a line-heightpropriedade CSS. Para web designs, uma proporção popular entre altura da linha e tamanho da fonte é de 150%. Por exemplo, se font-sizefor 20px, então line-heightserá 30px.
A proporção de 150% varia de acordo com a fonte que você está usando, mas é um bom ponto de partida. Compare os dois parágrafos abaixo. O conteúdo do texto e font-sizeé o mesmo, mas as propriedades line-heighte paddingsão diferentes.
Qual versão é mais fácil e agradável de ler?
Propriedades CSS da Versão 1:
font-size: 16px line-height: 16px padding-left: 3px padding-right: 3px
Propriedade CSS da Versão 2:
font-size: 16px line-height: 24px padding-left: 15px padding-right: 15px
Ao ter espaço em branco suficiente na forma de line-heighte padding, podemos melhorar drasticamente a legibilidade.
Conforto
O espaço em branco pode tornar os designs mais agradáveis de se ver.
Confira o exemplo a seguir de um artigo sobre espaço em branco em A List Apart. alistapart.com Ambas as versões têm o mesmo conteúdo de texto. No entanto, o da direita tem significativamente mais espaço em branco e, portanto, é mais confortável de ler. Em contraste, a versão à esquerda é visualmente chocante e mais movimentada.
Fluxo ocular
O espaço em branco é uma ótima ferramenta para guiar os usuários aos principais pontos focais em um design. Veja como o espaço em branco é efetivamente usado na página da Web do Apple iMac.
Mesmo com uma grande e colorida imagem concorrente do iMac à direita, seus olhos ainda se concentrarão no nome do produto e no slogan devido ao uso estratégico do espaço em branco ao redor isto.
Ênfase
Em cada projeto, sempre haverá elementos que são mais importantes que outros.
Usar o espaço em branco é uma das maneiras mais fáceis de fazer com que seus elementos principais chamem mais atenção. Isso se deve essencialmente ao fato de ter menos recursos visuais concorrentes próximos a eles. Por exemplo, seus apelos à ação são importantes.
Para destacá-los mesmo quando há muitas outras informações na página, você pode cercá-los com espaço em branco. Veja, por exemplo, o botão de chamada para ação na captura de tela do site Marketcircle abaixo.
Por causa do peso visual do botão e do espaço em branco ao seu redor, é difícil perder o botão, mesmo que a página tenha muitos outros elementos.
Agrupamento
Vamos dar uma olhada no exemplo a seguir. Simplesmente adicionando um espaço em branco entre os itens da lista, criamos instantaneamente agrupamentos lógicos dentro de nossa lista sem sobrecarregar nosso cérebro.
Tudo o que fizemos com a lista foi adicionar um pouco de espaço em branco; não alteramos cores, tamanhos de fonte, adicionamos efeitos de texto ou nada complicado.
Resumo
Como vimos nos exemplos, o espaço em branco pode ser uma ferramenta muito potente em nossos projetos.
Legibilidade, conforto, fluxo visual, ênfase e agrupamento são apenas algumas das coisas que podem ser aprimoradas se usarmos o espaço em branco como um elemento ativo.