Ein Layout ist die Anordnung von Text, Bildern und Flächen auf einer Seite oder einem Bildschirm. Der Duden beschreibt es als Text- und Bildgestaltung einer Seite, eines Werbemittels oder einer Publikation; das englische layout heißt Ausbreiten oder Grundriss.
- Layout
Die Anordnung von Text, Bildern und Flächen auf einer Seite oder einem Bildschirm.
Beispiel: „Das Layout der Leistungsseite stellt links den Text, rechts das Bild, darunter drei Kacheln.“Auch: Seitenaufbau, Seitengestaltung.
Abgrenzung zum Gestaltungsraster: Es ist das Gerüst, das Layout die Anordnung darin.
Grob-, Zwischen- und Feinlayout
Das Typolexikon unterscheidet drei Stufen: das Grob- oder Rohlayout, eine erste Skizze, das Zwischenlayout, das die Makrotypografie festlegt, und das Feinlayout bis in die Mikrotypografie. In deutschen Werbeagenturen ist der Begriff seit den 1950er Jahren üblich und löste das ältere Aufriss ab. Im Webdesign entsprechen den Stufen grob Wireframe, Mockup und das fertig gestaltete Design.
Layout zwischen Satzspiegel und Raster
Im Druck legt der Satzspiegel fest, welche Fläche einer Seite Text und Abbildungen einnehmen. Das Typolexikon ordnet ihn der Buchtypografie zu; bei Zeitungen und Websites spricht man eher vom Gestaltungsraster. Ein Weblayout hat dabei keine feste Seitenhöhe: Es wächst mit dem Inhalt nach unten und passt sich der Breite des Bildschirms an.
Layout im Web
Im Web entsteht ein Layout mit CSS. CSS Grid ordnet Inhalte zweidimensional in Zeilen und Spalten, Flexbox eindimensional in einer Reihe. Weil Bildschirme verschieden breit sind, muss ein Weblayout sich anpassen; Ethan Marcotte beschrieb dieses Responsive Design 2010 mit flexiblen Rastern, flexiblen Bildern und Media Queries.
.layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
}
@media (max-width: 48rem) {
.layout { grid-template-columns: 1fr; }
}