4 coisas que todo designer deve saber sobre o espaço em branco
Espaço em branco (ou "espaço negativo") é um espaço vazio entre e ao redor de objetos de uma página. Elementos do espaço em branco nas interfaces gráficas do usuário são:
- Margens, enchimentos e calhas
- Espaço ao redor de imagens e objetos gráficos
- Espaçamento de linhas e espaçamento entre letras no conteúdo de texto
Embora algumas pessoas possam considerar o espaço em branco um desperdício de propriedade de tela valiosa, é um elemento essencial em um design. Na verdade, o espaço em branco é tão importante quanto o conteúdo. Como Jan Tschichold disse:
O espaço em branco deve ser considerado como um elemento ativo, não um fundo passivo
Todas as boas interfaces de usuário incorporam valores adequados de espaços em branco em todos os elementos da página, de cima para baixo. O espaço em branco em uma página pode ser tão importante quanto o espaço ocupado pelos elementos da interface do usuário porque texto, botões, logotipos e outros objetos precisam de espaço para respirar.
Neste artigo, você descobrirá como usar espaços em branco em seus designs para dar uma aparência limpa e organizada:
1. Melhore a legibilidade do texto
O espaço em branco é capaz de tornar a leitura muito mais fácil, reduzindo a quantidade de texto que os visitantes veem de uma só vez. A falta de espaço em branco (página desordenada) não faz com que os usuários queiram ler o conteúdo. Por outro lado, foi comprovado que o espaço em branco corretamente utilizado aumenta a compreensão do texto em até 20%, conforme Dmitry Fadeyev .
Duas coisas importantes para manter em mente ao otimizar seu conteúdo de texto são margens de parágrafo e espaçamento de linha (o espaço entre cada linha em seu texto). Este último pode melhorar drasticamente a legibilidade de um corpo de texto. Geralmente, quanto maior o espaçamento, melhor a experiência que o usuário terá durante a leitura (embora o excesso de espaçamento entre linhas possa fazer com que as linhas sejam desconectadas).
2. Esclarecendo Relacionamentos
Todo o layout surge da soma de suas partes e as relações de conteúdo são definidas pelo espaço em branco circundante. A Lei da Proximidade afirma que objetos próximos uns dos outros parecem semelhantes. O espaço em branco funciona como uma sugestão visual neste caso. Dê uma olhada na imagem abaixo:
As leis da Gestalt ditam que os objetos próximos aparecerão como uma “unidade”; o espaço em branco funciona como uma sugestão visual.
Quase todo mundo que vê essa imagem percebe dois grupos de círculos, em vez de apenas 12 círculos. Os círculos são todos idênticos e a única diferença entre eles é a quantidade de espaço em branco que os separa.
É possível agrupar itens diminuindo o espaço entre eles e aumentando o espaço entre eles e outros elementos na página.
Para interfaces de usuário, isso significa que objetos próximos aparecerão como uma “unidade”. Por exemplo, no contexto de formulários da web, é uma boa ideia colocar rótulos próximos aos campos relevantes para criar um objeto. Quando os rótulos são colocados mais perto dos campos, isso torna a relação entre eles muito clara para os usuários.
As informações são comunicadas muito mais claramente quando os rótulos são colocados mais perto dos campos aos quais se relacionam.
3. Atraindo Atenção
Designers podem usar espaços em branco para comunicar o que é mais importante num piscar de olhos. Existe uma relação entre distância e atenção; maior distância força a atenção. A falta de outros elementos só fará com que os elementos existentes se destaquem mais. É possível usar um espaço em branco para sua vantagem - para atrair os olhos errantes para certos elementos da página. O preenchimento extra em torno de um segmento específico de conteúdo força a atenção dos usuários para essa área, simplesmente porque não há mais nada na tela para chamar a atenção. Assim, quanto mais espaços em torno de um objeto, mais o olho é atraído para ele.
4. Criar hierarquia visual
Quando o espaço em branco é usado adequadamente, ele permite que uma página crie um fluxo e um equilíbrio gerais, o que, por sua vez, ajuda a comunicar a intenção do design. Espaços em branco podem suportar a hierarquia geral. Produz simetria ou assimetria.
Simetria cria memória e harmonia:
Mailchimp, como você pode ver, é um grande defensor do espaço em branco em seus projetos. Quando os visitantes examinam a página inicial, o botão "Inscreva-se gratuitamente" chama a atenção deles quase que imediatamente. Usando a simetria, é possível criar um layout balanceado com partes direita e esquerda igualmente importantes.
Enquanto a assimetria chama a atenção:
A assimetria é ótima para chamar a atenção para uma área específica da página.
Quando um elemento usa um espaço assimétrico, ele se destaca contra outros elementos circundantes.
Conclusão
O espaço em branco não é um espaço desperdiçado, é uma ferramenta de design poderosa. Pode ser tão importante quanto o espaço ocupado por imagens, textos ou outras interfaces de usuário, porque mesmo o espaço vazio serve a um propósito e suporta a integridade visual de um layout.
Embora pareça um tópico simples, o espaço em branco pode ser difícil de dominar porque a aplicação do espaço em branco é arte e ciência. Entender realmente quanto espaço em branco deve ser usado para criar um bom layout requer prática.