このメールで使用されている空白の原則は何ですか?


7

Skillshareからこの美しいメールを受け取り、ホワイトスペースはうまく機能していると思いました。以下は、コピーのあるメールの下部です。上部には画像があり、その一部はスクリーンショットが示すこの灰色のボックスに収められています。

教師を探すスキルシェアメール



これはどのように数学的に計算できますか、それとも単なる試行錯誤でしたか?


3
@Dominic私は、Webデザインの規範に精通していないんだけど、ページの構築の規範がすべてですについての空白のための原則のセットを競合します。電子メールやWebページなどについて、同様の競合する規範があることは間違いありません。
BESW 2013年

回答:


2

数学は私には明らかなようです。

セクション間は50ピクセル、段落間は25ピクセル。

次に、登録解除の通知の上に75px。これは75pxより少し小さく見えますが。しかし、間違いなく50px以上です。一貫性を保つために、私は50pxに設定しました。

したがって、式については、次のようになると思います。
section margin bottom = 2x paragraph margin bottom
これは、実際には、多くのWebデザインに適した式です。セクション間の十分な視覚的分離を作成し、読書時の良い「リズム」をサポートします。

BESWが指摘するように、ページデザインの規範は、いくぶんWebに変換されます。良いデザインは、メディアに関係なく、一般的に良いデザインです。


この場合、実際の数学は理解できますが。これらの原則を他のプロジェクトに適用できるように、比率がどのように計算され、その背後にある理由が疑問です。たとえば、ヘッダーに取り組んでいて、Golden Meanを使用しています。しかし、空白については、いくつかのベストプラクティスについて疑問に思っています。
JGallardo 2013年

1
慣習的に私は単一の値の倍数を使用します。例:タイプサイズが16px、行の高さが20pxであるとします。段落の下のマージン20px(1行)、セクション40pxの下のマージン(2行)。すべてが行の高さに基づいているため、垂直マージンも行の高さの倍数になります。基本的に...印刷物と同じようにグリッドです。テキストは最も重要な要素から始まり、グリッドはテキストに基づいています。
スコット
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.