Von der Fläche
zum Layout

Grafik 1

Von Elvira Stein / @elvirastein

Fläche und Elemente

Am Beginn steht die leere Fläche.
Sie ist die Grundlage der Gestaltung.

Layout ist die visuelle Organisation
von Elementen auf dieser Fläche.

Gestaltungselemente

Bilder
Texte
Grafische Elemente
Weißraum

Wie ordnen wir unsere Elemente an?

Welche Begriffe begegnen uns dabei?

Seitenränder

Seitenränder sind der Weißraum rund um den Inhaltsbereich.

Sie begrenzen den aktiven Bereich der Seite.

Spalten

Sie dienen als Layouthilfe zum Anordnen von Bild- und Textinhalten.

Je mehr Spalten, desto vielfältiger die Gestaltungsoptionen.

einspaltiger Text

einspaltiger Text mit Marginalspalte

zweispaltiger Text

Text

Vermittelt Information und hat eine
starke gestalterische Funktion

Textelemente einer Seite

Umbrüche richtig setzen

harter Umbruch: Return erzeugt neuen Absatz

+

weicher Umbruch: Shift + Return bricht Textzeilen um,
ohne neuen Absatz zu erzeugen

Textabsätze können unterschiedlich formatiert werden.

Flattersatz

Auf abwechselnde Zeilenlängen und Konturenbildung achten!

wirkt lebendiger

Bei schmalen Spalten eignet sich der linksbündige Flattersatz besser als Blocksatz.

Blocksatz

wirkt geschlossener

Standard ist linksbündiger Satz.

Rechtsbündig für kurze Texte und Marginalien
schwer lesbar, manchmal passend

Zentriert für Überschriften und Gedichte
wirkt klassisch

Bildanordnung

Passepartout

Abfallende Platzierung

Überfüller

Wenn später gedruckt werden soll, erhalten abfallende Elemente auf einer Seite einen Überfüller.

Text umfließt Bild

Text mit Bild als Einklinker

Grafische Elemente

Punkt, Linie, Fläche sind die Grundformen.

Aber auch Symbole oder kleine Illustrationen können als Elemente eingesetzt werden.

Erinnerung: Alle Elemente erzählen eine gemeinsame Geschichte.

Mit der Platzierung der Bilder beeinflussen wir die Wirkung eines Layouts und können starke Kontraste erzeugen.

Ausschnitt verändern

Unser Gehirn vervollständigt
und füllt Lücken.

Nähe und Entfernung

Inhaltliche Nähe sichtbar machen

Die Entfernung zwischen Objekten entscheidet, ob sie als zusammengehörig wahrgenommen werden.

  • Struktur und Hierarchie sichtbar machen
  • Lesbarkeit erhöhen
  • Zusammenhänge zeigen

Visuelle Achsen finden & verstärken

Objekte nach Regeln oder
einer Struktur anordnen schafft Ordnung im Layout.

Eine starke Achse ist die Mittelachse. Zentrierte Layouts wirken jedoch statisch und schnell langweilig.

Schräge Achsen wirken dynamischer. Aufsteigende Schrägen werden positiver wahrgenommen als absteigende.

Aufteilung und Proportion

Mathematische Konzepte werden oft in die Gestaltung übertragen: Goldener Schnitt (Verhältnis 8:13), Zahlenreihen, Raster, …

Formate: Mit welchen Flächen arbeiten wir?

Für verschiedenen Anwendungen haben sich
Standardmaße etabliert.

Papiergrößen:

  • DIN A: beschnittene Endformate
  • DIN B: unbeschnittene Formate
  • DIN C: Umschläge und Verpackungen

1:1,41 — das Seitenverhältnis der DIN A-Formate

Halbiert man ein DIN A-Blatt, haben beide Hälften wieder exakt diese Proportion.

Das sind die wichtigsten europäischen Standardformate.

In den USA ist das üblichste Papierformat Letter – es wird wie bei uns A4 eingesetzt.

Weitere Standardformate:

  • Visitenkarte/Scheckkarte: 85 × 55 mm
  • CD Booklet: 120 × 120 mm
  • DIN lang/Grusskarte: 210 × 99 mm

Standardformate

Corporate Design für das Hotel Daniel, von Moodley Brand Identity

5 Schritte:
Der Ablauf beim Gestalten

1. Mit dem Hauptaugenmerk beginnen

  • was soll der Leser zuerst sehen?
  • für den Blickpunkt starke Kontraste verwenden

2. Informationen in logische Gruppen zusammenfassen

  • wie hängen die inhaltlichen Gruppen zusammen?
  • Zusammenhänge durch Nähe und Abstand darstellen

3. Bei der Anordnung auf starke Ausrichtungen achten

Starke Kante von einem Foto oder Text durch weitere Objekte verstärken

4. Wiederholungen erzeugen

  • eine Formatierung, eine Linie, eine Platzierung …
  • was wiederholt sich bereits, was kann verstärkt werden?

5. Starke Kontraste einsetzen

  • wecken Aufmerksamkeit
  • machen das Layout abwechslungsreich und spannend
  • wichtig: der Unterschied! Wenn alles stark ist, entsteht kein Kontrast

Aufgabe:
Promo-Postkarte

  • Überlegt ein (foto-)grafisches oder illustriertes Sujet für die Vorderseite
  • Auf der Rückseite Textsatz der (relevanten) Kontaktdaten
  • Format: A6
  • Bitte beim nächsten Mal ausgedruckt mitbringen!

Danke! 💕