Sua proporção “dados/tinta”
Quanto mais cuidadosamente você usar o espaço em branco, maior será a “proporção dados/tinta”. Este é um conceito introduzido pelo guru do design de informação Edward Tufte. É uma função de quanta informação está sendo transmitida por cada gota de tinta – ou, no caso de mobile e web design – por cada pixel.
O gráfico à esquerda tem uma proporção de dados/tinta muito maior do que o gráfico à direita. O gráfico realmente precisa ser preenchido com “tinta”? Não, ele se comunica perfeitamente com pontos e linhas.
E se você desse um passo adiante e removesse as linhas, deixando apenas os pontos?
Agora, a comunicação desmoronou. Sim, você pode ver todos os pontos de dados, mas agora perdeu a “história” sobre como os dados mudaram ao longo do tempo. Além disso, tornou-se difícil distinguir de um simples gráfico de dispersão, em que “tempo” não é uma das variáveis e os dados não são lineares.
No primeiro artigo desta série, aprendemos como o alinhamento dos elementos implica relações entre esses elementos. O que também é importante é o quão próximos esses elementos estão uns dos outros.
Esta é apenas uma grade simples de quadrados, como ladrilhos no chão.
Mas se você criar um espaçamento horizontal mais amplo entre linhas verticais de quadrados, agora terá uma série de colunas.
Portanto, quando há mudanças drásticas nos dados do gráfico acima, a mente pode querer conectar os pontos na sequência errada, só porque um ponto está mais próximo do outro.
Usando espaço em branco para layouts limpos
Esses princípios vão muito além dos gráficos de linha. Eles estão presentes em tudo que você projeta. Especialmente quando você está projetando para telas pequenas, você não quer que os pixels sejam desperdiçados – você quer projetar com uma alta proporção de dados/tinta.
Os designers tendem a usar grades para ajudar a organizar as informações em um layout. As grades ajudam a alinhar elementos – como linhas de texto – o que cria regiões de informações relacionadas entre si.
Aqui está um layout básico, projetado em uma grade. O lado esquerdo é a sua navegação e a área maior contém o conteúdo principal.
Esse layout é bom, mas observe que o espaço em branco entre a navegação e o espaço em branco entre as colunas de texto na área de conteúdo principal são iguais.
Faria sentido alargar ligeiramente a divisão entre a navegação e a área de conteúdo principal.
Agora há uma delimitação mais nítida entre a navegação e o conteúdo principal, e tudo o que tivemos que fazer foi adicionar um pequeno espaço em branco.
Usando espaço em branco para tipografia limpa
No artigo anterior, aprendemos como o dimensionamento é um dos muitos fatores que podem ser usados para criar hierarquia tipográfica. O espaço em branco também pode ajudar a organizar sua tipografia.
Por exemplo, observe este cabeçalho, metadados e cópia do corpo.
Eles têm relações de tamanho harmoniosas entre si, graças ao fato de seus tamanhos serem escolhidos em uma escala variada, mas parecem bem desleixados!
O problema é que os espaços negativos entre estes elementos não foram considerados.
A linha de metadados já está bem diferenciada do cabeçalho: tem um tamanho diferente, está em letras maiúsculas e até um pouco bem espaçada.
Um ótimo truque é usar a altura do tipo de metadados para determinar quanto espaço deve haver entre ele e o cabeçalho. Assim:
Geralmente, você usará seus olhos para descobrir esse espaçamento. Não há nenhuma maneira matemática de dizer exatamente quanto espaçamento haveria. É uma função da altura da linha, da quantidade de margem ou preenchimento que você está usando e das características da fonte específica.
Agora, e a cópia do corpo?
Faz sentido que os metadados estejam bem próximos do cabeçalho, mas o cabeçalho não precisa estar tão próximo do corpo da cópia. Na verdade, o cabeçalho e os metadados podem ser uma unidade própria.
Você pode usar a distância do topo do cabeçalho até a parte inferior dos metadados como guia e colocar metade dessa distância entre os metadados e a cópia do corpo.
Conclusão
Ao pensar em como você molda seu layout e se comunica com os espaços em branco, seus designs parecerão mais limpos e claros, além de serem mais utilizáveis e com melhor conversão.
Isso encerra tudo por enquanto – se ainda não o fez, não deixe de conferir o primeiro e o segundo artigos da série!
