Lektion 6

Layout und Komposition

Komponiere Social- oder Poster-Layouts so, dass der Blick von Hook zu Beleg zu Aktion geführt wird.

22 Min. Brand/SocialVisuelle Entscheidungen

Lektionsschritte

IdeeBeispielFehlerQuizÜbung

Kernidee

Komposition wählt die Struktur der Aufmerksamkeit. Bestimme Raster, gemeinsame Kanten, Balance und Asymmetrie passend zum Kampagneninhalt, statt alles in die Mitte zu zwingen.

  • Wähle das Raster aus dem Inhaltsrhythmus: ein starker Hook, eine Beleggruppe, ein Medienbereich oder viele Details brauchen unterschiedliche Strukturen.
  • Verankere verwandte Elemente an gemeinsamen Kanten, damit einzelne Teile als gestalteter Pfad lesen.
  • Balanciere visuelles Gewicht mit Raum und bewusster Asymmetrie, nicht mit automatischer Zentrierung.
  • Behandle Drittelregel, goldenen Schnitt und 12-Spalten-Raster als Startvermutungen, nicht als Gesetze.

Visuelles Beispiel

Ein Kampagnenlayout braucht einen bewussten Blickverlauf.

Vorher und nachher

Führe den Blick durch das Angebot.

Vorher: verstreute Kampagnenteile

Hook, Bild, Beleg, Logo und CTA schweben ohne gemeinsame Struktur.

Nachher: strukturierter Kampagnenpfad

Der Hook führt, Unterstützung richtet sich darunter aus, Leerraum schafft Pause und die Aktion sitzt am Ende des Blickverlaufs.

Beispiel erklärt

Warum die verbesserte Version funktioniert

Das verbesserte Layout nutzt eine einfache Struktur, die zum Inhalt passt: ein großer Hook, eine Beleggruppe und eine Aktion. Gemeinsame linke Kanten verbinden Beleg und CTA, sodass die Teile zusammengehören statt zu streuen.

Die Asymmetrie ist beabsichtigt. Der schwere Hook wird durch offenen Raum und eine ruhigere Support-Spalte ausgeglichen, sodass Bewegung entsteht, ohne alles zu zentrieren.

Häufige Fehler

Worauf du achten solltest

Alles ist zentriert, sodass Hook, Beleg und CTA höflich stapeln, aber keinen nützlichen Pfad bilden.
Elemente schweben ohne gemeinsame Kante, dadurch wirkt das Layout zusammengesetzt statt komponiert.
Eine Drittel- oder Goldener-Schnitt-Markierung wird befolgt, obwohl der Inhalt einen anderen Anker braucht.
Ecken werden gefüllt, weil sie leer sind, nicht weil sie Balance oder Bewegung stützen.

Visueller Vergleich

Welches Layout erzeugt einen klareren Blickpfad?

Ein Layout streut Teile ohne gemeinsame Struktur. Das andere nutzt ein inhaltlich passendes Raster, gemeinsame Kanten und einen klaren Endpunkt.

Wähle eine Option, um die Design-Logik zu sehen.

Kleine Übung

Den Blickpfad diagnostizieren

Wähle das Layout mit dem klareren Blickpfad und finde dann den Bereich, in dem ein Layout am stärksten kippt.

Kurze Übung starten Zur nächsten Lektion springen