A importância do espaço em branco no design

Compartilhe:
Publicidade

Assim como as notas, as pausas são essenciais em uma música.

Aposto que imaginou uma melodia nesse momento, e obviamente ela possui pausas que acrescentam a harmonia que com certeza te encanta.

Não diferente disso, o Design visual também possui pausas: o espaço em branco.

Também conhecido como white space ou negative space, os espaços em branco são recursos visuais que nos ajudam a tornar um layout mais agradável.

A performance de um projeto de Design está totalmente conectado ao bom uso de espaços que não possuem informação. Doido, não?

Os espaços em branco também falam, e é sobre eles que vamos falar neste artigo.

Por que utilizar espaço em branco?

Antes de entender sobre como utilizar um recurso deste nível, precisamos primeiramente entender o porquê de utilizá-lo.

Eu considero 4 principais motivos para você dar uma atenção especial aos espaços em branco a partir de hoje, são eles:

  • Hierarquia
  • Semelhança e proximidade
  • Respiro
  • Leiturabilidade

Fiz o resumo em uma das minhas publicações lá no Instagram, salva lá para poder consultar e leia este artigo para saber detalhes.

Um dos princípios mais importantes e que precisam ser dominados por qualquer designer é a hierarquia. E considero isso porque compreender hierarquia vai além do nível visual, mas no nível informacional.

Hierarquizar um produto de Design tem a ver com entender a dinâmica do conteúdo e a subordinação ou dominância de um “bloco” em relação ao outro.

Complicado? Em outras palavras, quero dizer que o espaço em branco ajuda a hierarquizar as informações criando distância entre elementos não semelhantes e proximidade de elementos semelhantes.

Isso te lembra alguma coisa? São duas leis da Gestalt, aliás, duas leis mega essenciais.

Além de trabalhar com hierarquia, semelhança e proximidade, saber utilizar os espaços em branco te ajuda a criar área de respiro no layout, isto é, espaços onde o olhar do seu leitor podem descansar.

E por fim, a leiturabilidade.

O motivo que, na minha opinião, prevalece em relação ao uso dos espaços em branco como prática recorrente no Design, é estar focado na melhor absorção do conteúdo.

Leiturabilidade diz respeito à capacidade de mergulhar em um conteúdo mantendo o fluxo de leitura.

Entendemos por muitas vezes a leitura como algo textual, mas também pode ser imagético, ok? E levando em consideração a criação de um layout, seja ele impresso ou digital, o uso de imagens, ícones e afins, auxiliam muito nos aspectos de leitura.

Tipos de espaçamento

Agora vou falar sobre os tipos de espaçamento possível em um layout.

E para entender como trabalhar bem os espaçamentos, precisamos compreender sua atuação, e os dois tipos de espaçamento que irei falar, de forma geral, vão te ajudar muito nisso.

 

1- Micro espaçamento

Entende-se por micro espaçamento tudo aquilo que está entre linhas, parágrafos e internos à blocos de informação, isto é, dentro de um componente.

Se você ainda não está familiarizado com esta ideia de componentização, fica tranquilo, continua sendo simples entender sobre os micro espaçamentos.

Com espaços nas linhas e parágrafos, estou me referindo aos espaços textuais: tracking e leading. Já falei sobre isso em outro artigo, e com certeza ficará mais claro para você quando lê-lo em seguida.

Mas em resumo, tracking e leading são os espaçamento horizontais e verticais, respectivamente.

Tracking é o espaçamento entreletras, enquanto leading é o espaçamento entrelinhas.

Além desses dois, os micro espaçamentos também abordam a distância entre títulos e parágrafos, parágrafos e listas, listas e botões e por aí vai.

Entendendo o grupo de informações que falei anteriormente, fica fácil de absorver essa ideia.

 

2- Macro espaçamento

Já o macro espaçamento trabalha com blocos de informações externos aos componentes.

Em outras palavras, a distância entre blocos de informações.

Se eu tenho um componente formado por título, parágrafo e imagem e uma réplica dele no componente em seguida, o macro espaçamento é justamente o espaço que conecta essas duas informações.

Os espaçamentos precisam ser muito bem dosados, isto é, não podem ser usados em excesso nem carência.

Como acertar no espaçamento

O grande segredo para acertar no espaçamento é entender a dinâmica do layout, e com isso, propor ou identificar padrões.

É, designer, você vai ter que entender um pouco de matemática.

Se você ler minha descrição no final do artigo, saberá que sou apaixonado por matemática, e talvez esse meu argumento seja apenas uma forma de te evangelizar à prática.

Mas falando sério, a melhor forma de acertar no espaçamento é propondo um padrão.

O mais famoso é 8pt, isto é, você vai utilizar múltiplos de 8 para configurar uma distância entre os elementos de um layout.

Este é o padrão que mais utilizo em meus projetos, com a observação no macro espaçamento, onde uso múltiplos de 10.

A tabuada do 8 é simples e bem eficaz quando se trata de micro espaçamento, pois, na minha opinião, expressa um contraste interessante entre os espaços e caracteriza bem os blocos de conteúdo.

Conclusão

Espaçamento é uma prática que você pode utilizar a partir de agora com as dicas que falei acima, isso somará infinitamente ao seu trabalho.

Se você curtiu este conteúdo, não esqueça de deixar seu comentário abaixo e compartilhar este artigo com 2 amigos que precisam saber deste assunto.

Publicidade
Este artigo foi escrito por:
Picture of Éricles Batista
Éricles Batista

Veja também

Melhores Bancos de Imagens Gratuitos para 2024

Nós selecionamos diversas opções de bancos de imagens gratuitos para você encontrar as melhores imagens livres de direitos autorais. Confira!

10 Tendências de Design Gráfico para 2024

Quais as tendências de design gráfico para 2024? Neste artigo identificamos 10 tendências para você começar a explorar desde já!

Modelos de Slides Criativos Prontos para Editar: 100 Temas PowerPoint Gratuitos e Premium

Descubra nossa coleção diversificada de slides criativos para PowerPoint. Encontre modelos de slides prontos para editar e temas PowerPoint!