Ein Layout ist die Anordnung von Text, Bildern und Freiraum auf einer Fläche, ob Buchseite oder Bildschirm. Es legt fest, was wo steht und was man zuerst wahrnimmt. Der Duden nennt es knapp die „Text- und Bildgestaltung einer Seite, eines Werbemittels bzw. einer Publikation“.
Diese Definition stimmt, verschweigt aber das Wichtigste. Ein Layout ist keine Dekoration, sondern eine Rangfolge. Wer ein Layout baut, entscheidet, was zuerst gesehen wird und was warten darf. Alles Weitere in diesem Beitrag folgt aus diesem Satz.
Woher das Wort kommt
„Layout“ ist aus dem Englischen übernommen. Laut Duden bedeutet das englische Wort eigentlich „das Ausbreiten, der Grundriss“, das Verb „to lay out“ heißt so viel wie aufreißen, also einen Plan zeichnen. Im Deutschen sagt man das Layout, eingebürgert hat es sich im Druckwesen. Dort war ein Layout lange ein greifbarer Entwurf auf Papier, skizziert oder geklebt, bevor die Seite in den Satz ging.
Inzwischen ist das Wort weit gewandert. In der Elektronik heißt der Plan, nach dem die Bauteile einer Schaltung angeordnet werden, Layout. Beim Tastaturlayout geht es um die Belegung der Tasten, QWERTZ statt QWERTY. Gemeint ist jedes Mal dasselbe: Elemente bekommen nach einem Plan einen festen Platz.
Layout, Design, Raster, Satzspiegel: was ist was?
Die Begriffe werden ständig durcheinandergeworfen. Eine brauchbare Trennung:
Design
ist der Oberbegriff: Schrift, Farbe, Bildsprache, Formen und eben auch das Layout. Eine Seite kann ein schönes Farbkonzept haben und trotzdem ein schlechtes Layout.
Layout
ist die konkrete Anordnung auf einer bestimmten Seite oder einem bestimmten Bildschirm.
Raster
, genauer Gestaltungsraster, ist das unsichtbare Gerüst darunter: Spalten und feste Abstände. Es sorgt dafür, dass zwanzig Seiten zusammengehören, obwohl jede anders aussieht. Das Standardwerk dazu ist Josef Müller-Brockmanns „Rastersysteme für die visuelle Gestaltung“ von 1981.
Satzspiegel
ist die Fläche einer Druckseite, die Text und Bilder einnehmen. Ränder und Seitenzahl liegen meist außerhalb. Im Web übernimmt das der Inhaltsbereich mit seiner maximalen Breite.
Vorlage
oder Template ist ein fertiges Layout, das man mit eigenen Inhalten füllt.
Ein Raster garantiert noch kein gutes Layout, man kann darin genauso schwache Seiten bauen. Umgekehrt bleibt ein starkes Layout ohne Raster meist ein Einzelstück. Am deutlichsten sieht man das bei der Gestaltung eines Magazins: Dasselbe Raster muss dort über Dutzende Seiten tragen. Was innerhalb der Spalten passiert, etwa Zeilenlänge und Zeilenabstand, gehört zur Typografie.
Was ein Layout entscheidet
Jedes Layout entscheidet drei Dinge, bewusst oder nicht.
Rangfolge
Größe und Kontrast legen fest, wo der Blick anfängt. Er springt meist zuerst auf das Größte und Kontrastreichste, ganz gleich, was der Absender für wichtig hält. Ist auf einer Startseite das Logo größer als das Angebot, hat das Layout entschieden, dass das Logo die Nachricht ist.
Zusammengehörigkeit
Was nah beieinandersteht, gehört zusammen. Was Abstand hat, ist getrennt. Das ist das Gesetz der Nähe, eines der Gestaltungsgesetze. Steht ein Preis näher am Nachbarprodukt, ordnet ihn der Leser dem falschen zu, auch wenn das niemand so wollte.
Lesefluss
Bei gleichmäßig gefüllten Textseiten wandert der Blick nach einem gängigen Modell, dem Gutenberg-Diagramm, von oben links nach unten rechts. Starke Bilder oder große Titel brechen dieses Muster sofort. Am Bildschirm wird eher gescannt als gelesen, der Blick hängt an Überschriften und Zeilenanfängen (mehr zum Leseverhalten im Web). Ein Layout, das gegen diese Gewohnheiten arbeitet, macht es Lesern unnötig schwer, beim Inhalt anzukommen.
Weißraum gehört zu jeder dieser Entscheidungen. Leerer Platz ist das Werkzeug, mit dem man gruppiert und trennt. Die meisten schwachen Layouts, die ich sehe, scheitern nicht an zu wenig Inhalt, sondern an zu wenig Luft.
Im Web ist ein Layout ein Regelwerk
Im Print hat ein Layout ein festes Format, A4 bleibt A4. Eine Website erscheint dagegen auf einem schmalen Handy genauso wie auf einem 27-Zoll-Monitor. Ein Weblayout besteht deshalb aus Regeln: drei Spalten nebeneinander, solange Platz ist, darunter untereinander. Das Bild rückt unter die Überschrift, das Menü klappt zusammen. Die Stellen, an denen das Layout umspringt, heißen Breakpoints, das ganze Prinzip responsives Layout.
Technisch ist das kein Kunststück mehr. Mit CSS Grid, das alle großen Browser seit 2017 beherrschen, lässt sich ein Raster direkt im Code anlegen. Die eigentliche Arbeit ist redaktionell. Auf dem Handy steht alles in einer Spalte, also muss jemand festlegen, was zuerst kommt. Wer am Desktop drei gleichwertige Kästen nebeneinanderstellt, schiebt diese Entscheidung nur auf. Auf dem schmalen Bildschirm fällt sie trotzdem, dann eben zufällig. Deshalb plane ich Layouts von der schmalen Fassung aus. Warum, steht im Beitrag zu Mobile First.
Vorlage oder eigenes Layout?
Für eine kleine Seite mit wenigen Abschnitten reicht eine gute Vorlage aus einem Website-Baukasten wirklich. Ihr Layout ist erprobt, und bei so wenig Inhalt ist die Rangfolge schnell klar.
Schwierig wird es, wenn der Inhalt nicht zur Vorlage passt. Die Vorlage erwartet ein großes Bild, und du hast keins. Sie sieht drei Leistungen vor, und du bietest sieben an. Dann füllt man Lücken, statt Inhalte zu ordnen, und die Seite sieht aus wie die Vorlage, nicht wie dein Betrieb. An diesem Punkt lohnt ein Layout, das vom eigenen Inhalt ausgeht. So baue ich Websites: erst Inhalt und Reihenfolge, dann die Optik.
Woran du ein gutes Layout erkennst
Drei Prüfungen, die ohne Fachwissen funktionieren:
- Blinzeltest. Kneif die Augen zusammen, bis du nur noch Flächen siehst. Erkennst du noch, was das Wichtigste ist? Verschwimmt alles zu gleichem Grau, fehlt die Rangfolge.
- Fünf-Sekunden-Frage. Zeig die Seite jemandem fünf Sekunden lang und frag, worum es geht. Die Antwort verrät, was das Layout tatsächlich nach vorne stellt.
- Handy-Probe. Scroll die Seite am Telefon durch. Steht das Wichtige vor dem Unwichtigen? Oder kommt nach dem großen Bild erst einmal ein Absatz über die Firmengeschichte?
Fällt eine Seite durch, hilft selten eine neue Farbe. Fast immer stimmt dann die Reihenfolge nicht.
Häufige Fragen
Was ist der Unterschied zwischen Layout und Design?
Design ist der Oberbegriff für das ganze Erscheinungsbild: Schrift, Farbe, Bildsprache und Anordnung. Das Layout ist davon nur die Anordnung. Faustregel: Wer etwas verschiebt, ändert das Layout. Wer es nur umfärbt, lässt das Layout in Ruhe.
Heißt es der, die oder das Layout?
Das Layout. Laut Duden ist das Wort ein Neutrum, der Plural lautet die Layouts. Es kommt aus dem Englischen und hat sich im Druckwesen eingebürgert.
Was ist ein responsives Layout?
Ein Layout mit Regeln dafür, wie es auf Handy, Tablet und Monitor umbricht. Entscheidend ist dabei die Reihenfolge in der schmalen Fassung, nicht die Technik.
Was bedeutet Layout in Word oder PowerPoint?
In PowerPoint heißen die vorgegebenen Folienaufteilungen Layouts, etwa „Titel und Inhalt“. In Word stehen unter „Layout“ Seitenränder, Ausrichtung und Spalten. Das Prinzip ist dasselbe im Kleinen: Plätze für Inhalte, festgelegt, bevor der Inhalt kommt.
Pappelbaum Design
Design direkt vom Designer.
Web, Print oder Marke: ein Ansprechpartner, der alles selbst macht. Eine halbe Stunde reicht, um zu klären, was dein Projekt braucht. Das Gespräch kostet nichts.