Portuguese (Português) translation by Erick Patrick (you can also view the original English article)
No artigo anterior, aprendemos como dimensionamento pode ser usado para tornar nossos projetos harmoniosos e limpos. Neste artigo final sobre forças invisíveis no design, aprenderemos que o uso sutil de espaçamento–"espaço em branco" ou "espaço negativo"–pode ser usado para fazer os projetos comunicarem efetivamente.
Sua Razão "Dados/Tinta"
Quão mais atentamente usar seu espaço em branco, maior será a "razão dados/tinta". Esse é um conceito apresentado pelo guru do design da informação, Edward Tufte. É uma função do tanto de informação transferida para cada gota de tinta–ou, nesse caso, projeto mobile ou web–para cada pixel.
O gráfico à esquerda tem uma taxa dados/tinta muito maior que o da direita. O gráfico precisa, mesmo, ser preenchido com "tinta"? Não, ele passa direito a informação apenas com linhas e pontos.
E se fôssemos além e removêssemos as linhas, deixando apenas os pontos?
Agora, a comunicação é falha. Sim, pode-se ver todos os pontos dos dados, mas perde-se a "história" sobre a mudança dos dados com o tempo. Além disso, ficou difícil distinguir um gráfico de dispersão de um de pontos, onde "tempo" não é uma das variáveis e os dados não avançam de forma linear.
Items Próximos São Percebidos Como Relacionados
No primeiro artigo da série, aprendemos como o alinhamento de elementos implica no relacionamento entre eles. A próximidade entre os elementos também é importante.
Isso é um simples gride de quadrados, como azulejos no chão.
Mas se criarmos espaçamento horizontal maior entre as linhas verticais, teremos uma série de colunas.
Assim, quando há mudanças drásticas no gráfico, a mente tenta juntar os pontos na sequência errada, simplesmente porque um ponto está próximo de outro.
Usando Espaço em Branco para Layouts Claros
Esses princípios estendem-se além das linhas dos gráficos. Eles estão presentes em tudo que você projeta. Especialmente quando você projeta para telas pequenas, não quererá gastar pixels–quererá projetar com uma alta taxa dados/tinta.
Projetistas usam grides para organizar informações em um layout. Grides ajudam a alinhar elementos–como linhas de texto–que, por sua vez, criam regiões de informação interrelacionadas.
Eis um layout básico, projetado em um gride. O lado esquerdo é a navegação e a outra parte leva o conteúdo principal.
Esse layout é bacana, mas perceba que o espaço em branco entre a navegação e o espaço em branco das colunas de texto da área principal são do mesmo tamanho.
Faria sentido aumentar um pouco o espaçamento entre a navegação e a área principal.
Agora, há uma delimitação maior entre a navegação e o conteúdo principal, e tudo que fizemos foi dar um pouco mais de espaço em branco.
Usando Espaço em Branco para Tipografia Clara
No artigo anterior, aprendemos como dimensionar um ou mais elementos pode ser usado para criar hierarquia tipográfica. Espaço em branco também ajuda a organizar sua tipografia.
Por exemplo, veja esse cabeçalho, metadados e texto.
Eles possuem uma relação de tamanho harmoniosa entre si, graças ao uso de uma escala variada, contudo, eles parecem bem desleixados!
O problema é que o espaço negativo entre os elementos não foi considerado.
A linha dos metadados já está bem diferente do cabeçalho: possui uma tamanho menor, caixa baixa e ainda é levemente espaçada.
Seria uma boa usar a altura da linha dos metadados para determinar o tanto de espaço entre ele e o cabeçalho. Dessa forma:
Geralmente, você definirá esse espaçamento no olhômetro. Não há fórmula que dirá exatamente o quanto de espaçamento deve ser usado. É uma composição da altura da linha, da quantidade de margem externo e/ou interna usada, e da fonte em si.
Agora, E o Texto?
Faz sentido o metadado estar perto do cabeçalho, mas o cabeçalho não precisa estar tão perto do texto. Na verdade, o cabeçalho e metadado podem ser sua própria unidade.
Podemos usar a distância do topo do cabeçalho até o fim do metadado como guia e usar metade dessa distância entre os metadados e o texto.
Conclusão
Ao pensar como modelar seu layout e comunicar usando espaço em branco, seus projetos parecerão mais claros e diretos, e, ao mesmo tempo, mais usáveis e converterão mais.
Isso finaliza, por hora–se não tiver lido ainda, leia os primeiro e segundo artigos da série!
