Layoutprinzipien für Social-Media-Grafiken
Wie Sie einen Social-Beitrag so aufbauen, dass zuerst das Richtige gelesen wird: Hierarchie, Raster, Weißraum und Betonung, gezeigt an vier echten Vorlagen in Originalgröße.
Unsere Empfehlung: Damit Ihr Publikum zuerst das Richtige liest, geben Sie einem Element deutlich mehr Gewicht als allem anderen und richten Sie den Rest so aus und setzen ihn so in Abstand, dass er es unterstützt. Das läuft auf vier Prinzipien hinaus: Hierarchie, Raster, Weißraum und Betonung.
Die folgenden Prinzipien sind unsere Empfehlung für Social-Media-Grafiken, aufgebaut auf Forschung zu Benutzeroberflächen. Wo eine Zahl oder Definition aus einer Quelle stammt, ist sie verlinkt. Jedes Prinzip veranschaulichen wir mit einer Vorlage, die die Chikaboom-Engine aus unserer Demo-Marke AURORA in Originalgröße gerendert hat.
Was bedeutet „zuerst das Richtige lesen“ eigentlich?
Nielsen Norman Group definiert visuelle Hierarchie als die Anordnung von Elementen, sodass das Auge sie in der Reihenfolge der beabsichtigten Wichtigkeit aufnimmt. Bei einem Social-Beitrag legen Sie diese Reihenfolge fest, bevor es die Betrachter tun. Die Leute begegnen Ihrem Bild mitten im Scrollen, daher entscheidet das erste Element, auf dem ihr Blick landet, ob sie anhalten.
Die Forschung zum F-förmigen Lesemuster von NN/g ergab, dass Leser von Webseiten eine obere Zeile, eine kürzere zweite Zeile und dann den linken Rand hinab überfliegen und selten Wort für Wort lesen. Diese Studie betrifft textlastige Webseiten, nicht Feed-Bilder. Unsere Annahme, die diese Studie nicht an Bildern geprüft hat, ist, dass sich dieselbe Gewohnheit auf Feed-Grafiken überträgt: Setzen Sie die Kernaussage oben links in den Textblock und stellen Sie die wichtigen Wörter an den Anfang.
Nutzen Sie den Blinzeltest aus demselben NN/g-Artikel: Machen Sie Ihr Design unscharf oder treten Sie vom Bildschirm zurück und sehen Sie, was noch hervorsticht. Ist es nicht das, was Sie meinten, ändern Sie das Layout, nicht den Text.
Prinzip 1: Wie funktioniert Hierarchie in einem einzelnen Beitrag?
In unserer Zusammenfassung des NN/g-Artikels entsteht Hierarchie durch Größe, Kontrast und Gruppierung. NN/g rät, höchstens drei Größenvarianten und höchstens zwei übergroße Elemente zu verwenden. Unsere Empfehlung für einen 1080-px-Beitrag sind drei Ebenen: eine Überschrift, eine unterstützende Zeile und ein kleines Label.
In diesem Layout im Schweizer Stil ist die Überschrift das einzige große Element. Label und Metadaten liegen in der Größe weit darunter, daher liefert der Blinzeltest einen einzigen Fleck: die Überschrift. Die kleinen Elemente sind nicht da, um zu konkurrieren. Sie beantworten „Was ist das?“ und „Wie lange dauert es?“.
Prinzip 2: Warum ein Raster für ein einzelnes Bild?
Ein Raster ist eine wiederholte Einheit, die bestimmt, wo Dinge sitzen dürfen. Material Design 3 baut seine Abstände auf einer 8-dp-Skala auf und unterscheidet Padding (innerhalb eines Elements), Gaps (zwischen Elementen) und Margins (außerhalb). Diese Idee auf einen Social-Beitrag zu übertragen ist unsere Empfehlung, keine Plattformregel: Wählen Sie eine Einheit, etwa 24 oder 40 px bei 1080, und verwenden Sie nur Vielfache davon.
Das redaktionelle Layout zeigt den Nutzen. Kategorie-Label, Überschrift und Autorenzeile teilen sich eine linke Kante, und die Abstände dazwischen wiederholen sich. Nichts wirkt nach Gefühl platziert, daher wandert das Auge den Stapel hinab, ohne zu suchen. Dieselbe linke Kante passt auch zur oben beschriebenen Lesegewohnheit von links oben.
Prinzip 3: Wie viel Weißraum ist genug?
NN/g beschreibt Weißraum als Mittel, ein Design auszubalancieren und leichter überflieg- und lesbar zu machen, und empfiehlt ein konsistentes Abstandssystem zusammen mit dem Prinzip der Nähe. Der Artikel zur Nähe ergänzt, dass nah beieinanderliegende Elemente als Gruppe wahrgenommen werden und dass dies die Ähnlichkeit von Farbe oder Form überlagern kann.
Für einen Beitrag ergibt das eine einfache Regel von uns: Der Abstand innerhalb einer Gruppe sollte deutlich kleiner sein als der Abstand zwischen Gruppen. Eine Kennzahl und ihr Label gehören zusammen, also halten Sie sie nah beieinander. Trennen Sie sie von der Fußnote.
Die Datenkarte stellt die Zahl und ihr Label in eine Gruppe, mit viel Raum ringsum. Die Fußnote ist klein und abgesetzt. Die Zahl auf dieser Karte ist eine Layout-Illustration, kein gemessenes Ergebnis.
Prinzip 4: Wie betonen Sie eine Sache, ohne zu schreien?
In unserer Darstellung ist Betonung die auf die Spitze getriebene Hierarchie: ein Element, eine Behandlung. NN/g rät zudem, die Palette auf wenige Farben zu beschränken und sich nicht allein auf Farbe zu verlassen, was für die Barrierefreiheit wichtig ist. Die Verhältniswerte finden Sie in Farbkontrast für Social Media und WCAG.
Das Testimonial ist absichtlich laut, hat aber trotzdem nur eine laute Sache. Stil ist eine Entscheidung über Gewicht und Kanten, und die Hierarchie darunter ist dieselbe wie im ruhigen Schweizer Layout: ein Fokuselement und eine kleine unterstützende Zeile. Zur Schriftwahl, die Betonung trägt, siehe Typografie für Social-Media-Beiträge.
Wie sieht eine schnelle Layout-Checkliste aus?
| Prüfung | Unsere Faustregel | Prinzip |
|---|---|---|
| Blinzeltest | Ein Element übersteht die Unschärfe | Hierarchie |
| Schriftgrößen | Zwei oder drei, nicht mehr | Hierarchie |
| Linke Kante | Label, Überschrift und Autorenzeile teilen sie | Raster |
| Abstandseinheit | Eine Basiseinheit, nur Vielfache davon | Raster |
| Gruppenabstände | Innerhalb einer Gruppe kleiner als zwischen Gruppen | Weißraum |
| Ränder | Rand auf allen vier Seiten freigehalten | Weißraum |
| Betonung | Eine Behandlung, einmal eingesetzt | Betonung |
| Kontrast | Erfüllt WCAG, nicht nur über Farbe | Betonung |
Prüfen Sie vor dem Abschluss Ihre Canvas-Größe und die Sicherheitszonen im Leitfaden zu Bildgrößen für Social Media. Nach unserer Erfahrung blenden Plattformen ihre eigene Oberfläche über Beiträge ein, sodass ein Layout, das bei 1080 x 1080 funktioniert, am Rand trotzdem sein Label verlieren kann. Für Stories und Reels siehe Sicherheitszonen erklärt, das die Werbe-Sicherheitszonen von Meta zitiert.
Wie halten Sie ein Layout im ganzen Team einheitlich?
Layoutentscheidungen lassen sich am leichtesten halten, wenn sie in einer Vorlage gesperrt sind, statt im Kopf behalten zu werden. In Chikaboom baut ein Designer das Layout einmal, und das Team füllt nur den Text ein. Größen, Abstände und Schriften bleiben fest, und der Text schrumpft in seinem Feld, statt überzulaufen, sodass die Hierarchie auch eine längere Überschrift übersteht. Sie können das in der Live-Demo ausprobieren.
Wo geht es in diesem Themenbereich weiter?
Diese Seite ist der Hub für Layout. Die Schwesterleitfäden behandeln Typografie, Farbe und Kontrast und Bildgrößen, die zusammen mit dem Layout das visuelle System eines Beitrags bilden. Um diese Entscheidungen für ein ganzes Team festzuschreiben, lesen Sie Markenrichtlinien für kleine Teams, und für eine plattformspezifische Anwendung siehe Beitragsdesign für LinkedIn.
FAQ
Wie entscheide ich, was auf einer Social-Media-Grafik zuerst gelesen wird?
Wählen Sie eine einzige Sache und machen Sie sie zum größten und kontrastreichsten Element. NN/g definiert visuelle Hierarchie als Lenken des Blicks in der Reihenfolge der beabsichtigten Wichtigkeit, und wir empfehlen, vor dem Veröffentlichen einen Blinzeltest zu machen.
Wie viele Schriftgrößen sollte ein Beitrag verwenden?
NN/g empfiehlt höchstens drei Größenvarianten und höchstens zwei übergroße Elemente. Unsere Empfehlung für einen Social-Beitrag sind zwei oder drei: eine Überschrift, eine unterstützende Zeile und ein kleines Label.
Ist Weißraum in einem Social-Beitrag verschwendeter Platz?
Nein. NN/g beschreibt Weißraum als Mittel, das Inhalte leichter überfliegbar und lesbar macht. Nach unserer Erfahrung liest sich ein Beitrag mit leerem Rand schneller als einer, der bis an den Rand gefüllt ist, weil das Auge einen Ruhepunkt hat.
Brauche ich ein Raster für ein einzelnes Bild?
Unsere Empfehlung lautet ja, ein einfaches. Material Design baut seine Abstände auf einer 8-dp-Skala auf; eine wiederholte Einheit wie diese hält Ränder und Zwischenräume im gesamten Feed einheitlich.