Quais princípios de espaço em branco foram usados ​​neste email?

7

Recebi este lindo e-mail da Skillshare e pensei que seu espaço em branco foi bem feito. Abaixo está a parte inferior desse email que possui a cópia. A parte superior tem uma imagem, parte da qual está envolto nessa caixa cinza, na qual a captura de tela mostra.

e-mail skillshare procurando professores



Como isso pode ser calculado matematicamente ou apenas tentativa e erro?

white-space JGallardo
fonte
3
@Dominic Eu não estou familiarizado com cânones de web design, mas cânones de construção de páginas são todos sobre conjuntos de princípios concorrentes para espaços em branco. Não tenho dúvidas de que existem cânones concorrentes similares para email, páginas da Web etc.
BESW

Respostas:

2

A matemática parece clara para mim.

50 px entre seções, 25 px entre parágrafos.

Em seguida, 75 px acima do aviso de cancelamento de inscrição. Embora isso pareça um pouco menos que 75px. Mas definitivamente mais do que 50px. Eu definiria em 50px se fosse eu, apenas para permanecer consistente.

Então, para uma fórmula, acho que seria:
section margin bottom = 2x paragraph margin bottom
Esta é realmente uma boa fórmula para uma grande quantidade de web design. Ele cria separação visual suficiente entre as seções e suporta um bom "ritmo" durante a leitura.

Os cânones de design de página, como BESW aponta, traduzem um pouco para a web. Um bom design geralmente é um bom design, independentemente do meio.

Scott
fonte
Embora eu possa entender a matemática real neste caso. Gostaria de saber como as proporções foram calculadas e o raciocínio por trás delas, para que esses princípios possam ser aplicados a outros projetos. Por exemplo, estou trabalhando em um cabeçalho e usei a Média de Ouro. Mas, para o espaço em branco, estou pensando em algumas das melhores práticas.
JGallardo
11
Normalmente, uso múltiplos de um único valor. Por exemplo: Suponha que o tamanho do tipo seja 16px, altura da linha 20px. Margem abaixo do parágrafo 20px (uma linha), margem abaixo da seção 40px (duas linhas). Tudo é baseado na altura da linha, para que as margens verticais também sejam um múltiplo da altura da linha. Basicamente ... é uma grade como os materiais impressos. O texto começa o fator mais importante, a grade é baseada no texto.
Scott