Layoutprinzipien

Das Layoutraster der Universität Freiburg dient als Basis für den Aufbau sämtlicher Medien – von Print bis digital, von funktional bis rhythmisch. Die Layouts sind klar strukturiert, nehmen sich Raum und weisen eine eindeutige visuelle Hierarchie auf. Im Zentrum stehen stets die wichtigsten Informationen oder Funktionen.

In diesem Leitfaden erfahren Sie, wie einfach es ist, Ihre Layoutfläche zu strukturieren, um alle Arten von Grafikelementen zu platzieren. Einfache Anwendungsregeln und Tipps sollen helfen, ein ästhetisches sowie wiedererkennbares Layout mit Rhythmus, Balance und ausgewogener Proportion zu erstellen.

Grundlagen: ‚Quadrant Grid‘

Das von der Universität Freiburg genutzte Layoutraster nennt sich ‚Quadrant Grid‘. Dieses Ordnungssystem vereint verschiedene Eigenschaften, um alle Kommunikationsmittel, online wie offline, einem Prinzip folgend zu gestalten. Es ermöglicht eine einfache Orientierung bei der Organisation und Platzierung von Gestaltungselementen.

Das Layoutraster vereint Bild-, Flächen- und Spaltenraster und bietet damit eine möglichst einfache systematische Methode, um Übersichtlichkeit mit visueller Hierarchie zu verbinden. Im Prinzip ist es ein horizontales und vertikales Koordinatensystem, um Drucksachen oder digitale Benutzeroberflächen einheitlich und übersichtlich zu strukturieren. Unser Gestaltungsraster verstehen wir sowohl als fixierendes als auch ästhetisches Ordnungssystem in der gestalterischen Arbeit.

Das ‚Quadrant Grid‘ teilt eine Layoutfläche in vier gleich große Quadranten, die wiederum unterteilt werden können:
So schafft es Orientierung für die horizontale wie vertikale Ausrichtung von Grafik- und Typoelementen.
Je größer das Format der Anwendung, desto mehr Unterteilungen können angelegt und angewendet werden.
Das ‚Quadrant Grid‘ vereint Bild-, Flächen- und Spaltenraster und bietet damit eine einfache systematische Methode, um Übersichtlichkeit mit visueller Hierarchie zu verbinden.
Das ‚Quadrant Grid‘ ist ein sogenanntes adaptives Raster: Es passt sich flexibel samt aller seiner Rasterzellen auf jedes mögliche Hoch- oder Querformat an, ohne die Anzahl seiner Rasterzellen zu verändern.
Das ‚Quadrant Grid‘ ist eine kreative Spielwiese mit System: Es ist Schema für ein durchgängiges Layout von Schrift, Bild, Farbe und Fläche. Damit vereint es Bild-, Flächen- und Spaltenraster für Textsatz, die Platzierung von Hintergründen, Fotos, Logo, Siegel und Gestaltungselementen.

Beispielhafte Anwendungen des ‚Quadrant Grid‘

Beispielhafte Publikationsgestaltungen von Flyer und Leporello mit dem ‚Quadrant Grid‚:
Ob Covergestaltungen oder Layouts mit hoher Informationsdichte, die Layouts werden klar strukturiert, nehmen sich Raum und weisen eine eindeutige visuelle Hierarchie auf. 
Beispielhafte Publikationsgestaltungen mit dem ‚Quadrant Grid‚: Ziel ist es, ein funktionales, ästhetisches sowie wiedererkennbares Layout mit Balance und Rhythmus mit ausgewogenen Proportionen zu erstellen.
Weitere beispielhafte Publikationsgestaltungen mit dem ‚Quadrant Grid‚: Alle Inhaltsformate von Publikationen – ob Beitrag, Impressum, Steckbrief oder Bericht – folgen den Einteilungsprinzipien des Rasters. Es bietet Möglichkeiten für ein- bis vierspaltigen Textsatz.
Beispielhafte Publikationsgestaltungen mit dem ‚Quadrant Grid‚: Publikationsgestaltungen wie Magazine und Berichte „aktivieren“ und „rhythmisieren“ die Gestaltungselemente im Raster, um visuelle Abwechslung zu schaffen und Interesse zu wecken.
Mit Ausrückungen, Brüchen und Kontrasten gestalten:
Die Gestaltungselemente werden im Raster „aktiviert“ und „rhythmisieren“ damit das Layout. Auch der Text wird so angenehm lesbar.
Beispielhafte Poster- und Flyergestaltungen mit dem ‚Quadrant Grid
Beispielhafte Postergestaltungen mit dem ‚Quadrant Grid

Platzierung von Elementen im ‚Quadrant Grid‘

Für ein klares Erscheinungsbild empfehlen wir ein einfaches Layout im Vollformat oder eine in vier Sektionen unterteilte Layoutfläche. Die Unterteilung wird horizontal oder vertikal vorgenommen, alle Sektionen müssen geradlinig und rechteckig sein.

Wir raten zu einfachen Teilungsverhältnissen, die ein symmetrisches aber rhythmisches Gesamtbild erzeugen. Innerhalb des Layoutrasters ‚Quadrant Grid‘ stehen zur Platzierung Hintergründe, Formelemente oder Fotos zur Auswahl. Mit Hilfe dieses Gestaltungsrasters wird eine einfache Orientierung bei der passenden Platzierung und Größenauswahl aller visuellen Elemente ermöglicht.

Schematische Darstellung für die Anordnung von Elementen

Spaltenraster: Platzierung von Logo und Siegel

Gängige Beispiele für die Positionierung von Logo und Siegel (Outline) im Layoutraster:
Das Siegel darf angeschnitten platziert werden.
Weitere gängige Beispiele für die Positionierung von Logo und Siegel (Outline) im Layoutraster:
Das Siegel darf angeschnitten platziert werden.
Gängige Beispiele für die Positionierung von Logo und Siegel (Flat) im Layoutraster:
Das Siegel muss vollflächig platziert werden.
Gängige Beispiele für die Positionierung von Logo und Siegel (Flat) im Layoutraster:
Das Siegel muss vollflächig platziert werden.

Mehr dazu in

Spaltenraster: Platzierung von Text

Das Spaltenraster bietet Möglichkeiten für ein- bis vierspaltigen Textsatz und die Platzierung von Elementen.
Das Spaltenraster bietet Möglichkeiten für ein- bis vierspaltigen Textsatz und die Platzierung von Elementen.
Gängige Beispiele für die Positionierung von Typoelementen und Textblöcken im Layoutraster.
Gängige Beispiele für die Positionierung von Typoelementen und Textblöcken im Spaltenraster.

Mehr zur Schrift: Grundlagen, Anwendungsregeln und Beispiele

Flächenraster: Platzierung von Gestaltungselementen

Positionierung von Hintergründen, Fotos und Formelementen im Layoutraster:
Hintergründe werden immer randabfallend platziert, Fotos und Formelemente hingegen können flexibler eingesetzt werden.
Gängige Beispiele für die Positionierung von Formelementen im Layoutraster:
Formelemente können randabfallend, angeschnitten oder flexibel im Satzraster platziert werden. Als Farben können alle Farbtöne des Farbkanons genutzt werden.

Farben für Formelemente

Hauptfarben für den primären Einsatz von Logo und Schrift
Hintergrundfarben für den primären Einsatz auf Flächen
Zusatzfarben für den primären Einsatz in der externen Kommunikation

Mehr zur Farbverwendung: Grundlagen, Anwendungsregeln und Beispiele

Flächenraster: Platzierung von Hintergründen

Positionierung von Hintergründen, Fotos und Formelementen im Layoutraster:
Hintergründe werden immer randabfallend platziert, Fotos und Formelemente hingegen können flexibler eingesetzt werden.
Gängige Beispiele für die Positionierung von Hintergründen im Layoutraster:
Hintergründe werden immer randabfallend platziert.
Als Hintergrundfarben können alle Farbtöne des Farbkanons genutzt werden.

Farben für Hintergründe

Hauptfarben für den primären Einsatz von Logo und Schrift
Hintergrundfarben für den primären Einsatz auf Flächen
Zusatzfarben für den primären Einsatz in der externen Kommunikation

Mehr zur Farbverwendung: Grundlagen, Anwendungsregeln und Beispiele

Bildraster: Platzierung von Fotos

Gängige Beispiele für die randabfallende Positionierung von Fotos. Abweichende Formate sind möglich.
Gängige Beispiele für die Positionierung von Fotos im Satztraster. Abweichende Varianten sind möglich.

Hilfe, Anregungen und Kontakt

Wünsche und Anregungen zum Corporate-Design können Sie uns gerne an folgende E-Mail-Adresse senden: cd@zv.uni-freiburg.de. Nutzen Sie diese E-Mail Adresse auch bei Fragen, zum Beispiel zu folgenden Themen:

  • Services im Bereich Gestaltung
  • Fragen zum Corporate-Design: Anwendung und Umsetzung
  • Fragen zur Logo-Verwendung
  • Feedback zu Vorlagen und Angeboten
  • Allgemeine Fragen rund um das Corporate Design

Dazu passt

Universitätslogo

Das Universitätslogo

Informationen und Anwendungsregeln zur Verwendung des Logos

Das Schriftsystem

Alle Infos zur Hausschrift der Universität Freiburg
Teaserbild mit den Farben der Uni

Das Farbsystem

Unsere Farbgestaltung ist ein Schlüsselfaktor unseres Auftritts.
Teaserbild Gestaltungselemente und Siegel

Gestaltungselemente und Siegel

Das Siegel der Albert-Ludwigs-Universität Freiburg spielt weiterhin eine zentrale Rolle.