Layoutprinzipien

by UFR 23. September 2022

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
• Beispiele
• Prinzip
• Logo & Siegel
• Text
• Gestaltungselemente
• Hintergründe
• Fotos
• Hilfe & Kontakt

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.

Aufteilungen der Layoutflächen durch Quadrant Grid

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.

Verschiedene Unterteilungen im Quadrant Grid

Je größer das Format der Anwendung, desto mehr Unterteilungen können angelegt und angewendet werden.

Flächenraster, Bildraster und Spaltenraster im Quadrant Grid

Das ‚Quadrant Grid‘ vereint Bild-, Flächen- und Spaltenraster und bietet damit eine einfache systematische Methode, um Übersichtlichkeit mit visueller Hierarchie zu verbinden.

Quadrant Grid in verschiedenen Hochformaten

Quadrant Grid in verschiedenen Querformaten

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.

Verschiedene Platzierungsmöglichkeiten im Quadrant Grid

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 (Magazine und Berichte) mit dem 'Quadrant Grid'

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.

Layoutraster mit Ausrückungen, Brüchen und Kontrasten (Beispiel)

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.

Mehr dazu in

LOGO

GESTALTUNGSELEMENTE

Spaltenraster: Platzierung von Text

Spaltenraster für Poster, Plakate, Flyer, Broschüren und Leporellos

Das Spaltenraster bietet Möglichkeiten für ein- bis vierspaltigen Textsatz und die Platzierung von Elementen.

Spaltenraster mit Möglichkeiten für verschiedenspaltigen Textsatz und 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

SCHRIFTSYSTEM

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 der Universität — **Hauptfarben** für den primären Einsatz von Logo und Schrift

Hintergrundfarben der Universität — **Hintergrundfarben** für den primären Einsatz auf Flächen

Zusatzfarben der Universität — **Zusatzfarben** für den primären Einsatz in der externen Kommunikation

Mehr zur Farbverwendung: Grundlagen, Anwendungsregeln und Beispiele

FARBSYSTEM

Flächenraster: Platzierung von Hintergründen

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

Mehr zur Farbverwendung: Grundlagen, Anwendungsregeln und Beispiele

FARBSYSTEM

Bildraster: Platzierung von Fotos

Beispiele für die randabfallende Positionierung von Fotos im Bildraster

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