Welche Whitespace-Prinzipien wurden in dieser E-Mail verwendet?

7

Ich erhielt diese schöne E-Mail von Skillshare und dachte, dass ihr weißer Raum gut gemacht wurde. Unten finden Sie den unteren Rand der E-Mail mit der Kopie. Oben befindet sich ein Bild, von dem ein Teil in diesem grauen Feld eingeschlossen ist, von dem der Screenshot zeigt.

Skillshare-E-Mail auf der Suche nach Lehrern



Wie kann dies mathematisch berechnet werden, oder könnte es nur Versuch und Irrtum sein?

white-space JGallardo
quelle
3
@Dominic Ich bin nicht vertraut mit Kanonen von Web - Design, aber Kanon des Seitenaufbaus ist alle über Sätze von Prinzipien für Leerzeichen konkurrieren. Ich habe keinen Zweifel, dass es ähnliche konkurrierende Kanons für E-Mails, Webseiten usw. gibt.
BESW

Antworten:

2

Die Mathematik scheint mir klar zu sein.

50px zwischen Abschnitten, 25px zwischen Absätzen.

Dann 75px über dem Abmeldehinweis. Obwohl dies etwas weniger als 75px aussieht. Aber definitiv mehr als 50px. Ich würde es auf 50px einstellen, wenn ich es wäre, nur um konsequent zu bleiben.

Für eine Formel wäre es also wohl:
section margin bottom = 2x paragraph margin bottom
Dies ist eigentlich eine gute Formel für viel Webdesign. Es schafft eine ausreichende visuelle Trennung zwischen den Abschnitten und unterstützt einen guten "Rhythmus" beim Lesen.

Kanonen für das Seitendesign lassen sich, wie BESW betont, etwas auf das Web übertragen. Gutes Design ist im Allgemeinen gutes Design, unabhängig vom Medium.

Scott
quelle
Obwohl ich in diesem Fall die eigentliche Mathematik verstehen kann. Ich frage mich, wie die Anteile berechnet wurden und welche Gründe dahinter stehen, damit diese Grundsätze auf andere Projekte angewendet werden können. Zum Beispiel arbeite ich an einem Header und habe den Goldenen Mittelwert verwendet. Aber für Leerzeichen wundere ich mich über einige der besten Praktiken.
JGallardo
1
Normalerweise verwende ich Vielfache eines einzelnen Wertes. Beispiel: Angenommen, die Typgröße beträgt 16 Pixel, die Zeilenhöhe 20 Pixel. Rand unter Absatz 20px (eine Zeile), Rand unter Abschnitt 40px (zwei Zeilen). Alles basiert auf der Linienhöhe, sodass vertikale Ränder auch ein Vielfaches der Linienhöhe sind. Grundsätzlich ... ist es ein Raster wie bei Druckmaterialien. Text beginnt der wichtigste Faktor, das Raster basiert auf dem Text.
Scott