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.
![UFR-vorlage-designsystem-layoutsystem-V1.23 Aufteilungen der Layoutflächen durch Quadrant Grid](https://cd.uni-freiburg.de/wp-content/uploads/2022/09/UFR-vorlage-designsystem-layoutsystem-V1.23.png)
So schafft es Orientierung für die horizontale wie vertikale Ausrichtung von Grafik- und Typoelementen.
![UFR-vorlage-designsystem-layoutsystem-V1.22 Verschiedene Unterteilungen im Quadrant Grid](https://cd.uni-freiburg.de/wp-content/uploads/2022/09/UFR-vorlage-designsystem-layoutsystem-V1.22-1.png)
![UFR-vorlage-designsystem-layoutsystem-V1.2 Flächenraster, Bildraster und Spaltenraster im Quadrant Grid](https://cd.uni-freiburg.de/wp-content/uploads/2022/09/UFR-vorlage-designsystem-layoutsystem-V1.2-1.png)
![UFR-layoutsystem-V1.22 Quadrant Grid in verschiedenen Hochformaten](https://cd.uni-freiburg.de/wp-content/uploads/2023/02/UFR-layoutsystem-V1.22.png)
![UFR-layoutsystem-V1.23 Quadrant Grid in verschiedenen Querformaten](https://cd.uni-freiburg.de/wp-content/uploads/2023/02/UFR-layoutsystem-V1.23.png)
![UFR-layoutsystem-V1.210 Verschiedene Platzierungsmöglichkeiten im Quadrant Grid](https://cd.uni-freiburg.de/wp-content/uploads/2023/02/UFR-layoutsystem-V1.210.png)
Beispielhafte Anwendungen des ‚Quadrant Grid‘
![UFR-vorlage-designsystem-V1.6-anwendungen9 Beispielhafte Publikationsgestaltungen von Flyer und Leporello mit dem 'Quadrant Grid'](https://cd.uni-freiburg.de/wp-content/uploads/2022/09/UFR-vorlage-designsystem-V1.6-anwendungen9.png)
Ob Covergestaltungen oder Layouts mit hoher Informationsdichte, die Layouts werden klar strukturiert, nehmen sich Raum und weisen eine eindeutige visuelle Hierarchie auf.
![UFR-vorlage-designsystem-V1.6-anwendungen14 Beispielhafte Publikationsgestaltungen mit dem 'Quadrant Grid'](https://cd.uni-freiburg.de/wp-content/uploads/2022/09/UFR-vorlage-designsystem-V1.6-anwendungen14.png)
![UFR-vorlage-designsystem-V1.6-anwendungen15 Beispielhafte Publikationsgestaltungen mit dem 'Quadrant Grid'](https://cd.uni-freiburg.de/wp-content/uploads/2022/09/UFR-vorlage-designsystem-V1.6-anwendungen15.png)
![UFR-vorlage-designsystem-V1.6-anwendungen-publikationen Beispielhafte Publikationsgestaltungen (Magazine und Berichte) mit dem 'Quadrant Grid'](https://cd.uni-freiburg.de/wp-content/uploads/2022/09/UFR-vorlage-designsystem-V1.6-anwendungen-publikationen-1.png)
![UFR-vorlage-designsystem-V1.6-anwendungen16 Layoutraster mit Ausrückungen, Brüchen und Kontrasten (Beispiel)](https://cd.uni-freiburg.de/wp-content/uploads/2022/09/UFR-vorlage-designsystem-V1.6-anwendungen16.png)
Die Gestaltungselemente werden im Raster „aktiviert“ und „rhythmisieren“ damit das Layout. Auch der Text wird so angenehm lesbar.
![UFR-vorlage-designsystem-V1.6-anwendungen3 Beispielhafte Poster- und Flyergestaltungen mit dem 'Quadrant Grid'](https://cd.uni-freiburg.de/wp-content/uploads/2022/09/UFR-vorlage-designsystem-V1.6-anwendungen3.png)
![UFR-vorlage-designsystem-V1.6-anwendungen13 Beispielhafte Postergestaltungen mit dem 'Quadrant Grid'](https://cd.uni-freiburg.de/wp-content/uploads/2022/09/UFR-vorlage-designsystem-V1.6-anwendungen13.png)
![UFR-vorlage-designsystem-V1.6-anwendungen11 Beispielhafte Postergestaltungen mit dem 'Quadrant Grid' für individuell erstellte Plakate](https://cd.uni-freiburg.de/wp-content/uploads/2022/09/UFR-vorlage-designsystem-V1.6-anwendungen11.png)
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.
![UFR-layoutsystem-V1.210 Schematische Darstellung für die Anordnung von Elementen](https://cd.uni-freiburg.de/wp-content/uploads/2023/02/UFR-layoutsystem-V1.210.png)
Spaltenraster: Platzierung von Logo und Siegel
![UFR-layoutsystem-V1.27 Beispiele für die Positionierung von Logo und Siegel (Outline) im Layoutraster](https://cd.uni-freiburg.de/wp-content/uploads/2023/02/UFR-layoutsystem-V1.27.png)
Das Siegel darf angeschnitten platziert werden.
![UFR-layoutsystem-V1.213 Beispiele für die Positionierung von Logo und Siegel (Outline) im Layoutraster (Siegel darf angeschnitten platziert werden)](https://cd.uni-freiburg.de/wp-content/uploads/2023/02/UFR-layoutsystem-V1.213.png)
Das Siegel darf angeschnitten platziert werden.
![UFR-layoutsystem-V1.28 Gängige Beispiele für die Positionierung von Logo und Siegel (Flat) im Layoutraster](https://cd.uni-freiburg.de/wp-content/uploads/2023/02/UFR-layoutsystem-V1.28.png)
Das Siegel muss vollflächig platziert werden.
![UFR-layoutsystem-V1.214 Gängige Beispiele für die Positionierung von Logo und Siegel (Flat) im Layoutraster. Siegel nur vollflächig platzieren.](https://cd.uni-freiburg.de/wp-content/uploads/2023/02/UFR-layoutsystem-V1.214.png)
Das Siegel muss vollflächig platziert werden.
Mehr dazu in
Spaltenraster: Platzierung von Text
![UFR-layoutsystem-V1.24 Spaltenraster für Poster, Plakate, Flyer, Broschüren und Leporellos](https://cd.uni-freiburg.de/wp-content/uploads/2023/02/UFR-layoutsystem-V1.24.png)
![UFR-layoutsystem-V1.25 Spaltenraster mit Möglichkeiten für verschiedenspaltigen Textsatz und Platzierung von Elementen](https://cd.uni-freiburg.de/wp-content/uploads/2023/02/UFR-layoutsystem-V1.25.png)
![UFR-layoutsystem-V1.29 Gängige Beispiele für die Positionierung von Typoelementen und Textblöcken im Layoutraster](https://cd.uni-freiburg.de/wp-content/uploads/2023/02/UFR-layoutsystem-V1.29.png)
![UFR-layoutsystem-V1.215 Gängige Beispiele für die Positionierung von Typoelementen und Textblöcken im Spaltenraster](https://cd.uni-freiburg.de/wp-content/uploads/2023/02/UFR-layoutsystem-V1.215.png)
Mehr zur Schrift: Grundlagen, Anwendungsregeln und Beispiele
Flächenraster: Platzierung von Gestaltungselementen
![UFR-layoutsystem-V1.26 Positionierung von Hintergründen, Fotos und Formelementen im Layoutraster](https://cd.uni-freiburg.de/wp-content/uploads/2023/02/UFR-layoutsystem-V1.26.png)
Hintergründe werden immer randabfallend platziert, Fotos und Formelemente hingegen können flexibler eingesetzt werden.
![UFR-layoutsystem-V1.218 Beispiele für die Positionierung von Formelementen im Layoutraster](https://cd.uni-freiburg.de/wp-content/uploads/2023/02/UFR-layoutsystem-V1.218.png)
Farben für Formelemente
![UFR-vorlage-designsystem-typo-farben-V1.9 Hauptfarben der Universität](https://cd.uni-freiburg.de/wp-content/uploads/2023/02/UFR-vorlage-designsystem-typo-farben-V1.9-1.png)
![UFR-vorlage-designsystem-typo-farben-V1.92 Hintergrundfarben der Universität](https://cd.uni-freiburg.de/wp-content/uploads/2023/02/UFR-vorlage-designsystem-typo-farben-V1.92-1.png)
![UFR-vorlage-designsystem-typo-farben-V1.93 Zusatzfarben der Universität](https://cd.uni-freiburg.de/wp-content/uploads/2023/02/UFR-vorlage-designsystem-typo-farben-V1.93-1.png)
Mehr zur Farbverwendung: Grundlagen, Anwendungsregeln und Beispiele
Flächenraster: Platzierung von Hintergründen
![UFR-layoutsystem-V1.26 Positionierung von Hintergründen, Fotos und Formelementen im Layoutraster](https://cd.uni-freiburg.de/wp-content/uploads/2023/02/UFR-layoutsystem-V1.26.png)
Hintergründe werden immer randabfallend platziert, Fotos und Formelemente hingegen können flexibler eingesetzt werden.
![UFR-layoutsystem-V1.211 Beispiele für die Positionierung von Hintergründen im Layoutraster](https://cd.uni-freiburg.de/wp-content/uploads/2023/02/UFR-layoutsystem-V1.211.png)
Hintergründe werden immer randabfallend platziert.
Als Hintergrundfarben können alle Farbtöne des Farbkanons genutzt werden.
Farben für Hintergründe
![UFR-vorlage-designsystem-typo-farben-V1.9 Hauptfarben der Universität](https://cd.uni-freiburg.de/wp-content/uploads/2023/02/UFR-vorlage-designsystem-typo-farben-V1.9-1.png)
![UFR-vorlage-designsystem-typo-farben-V1.92 Hintergrundfarben der Universität](https://cd.uni-freiburg.de/wp-content/uploads/2023/02/UFR-vorlage-designsystem-typo-farben-V1.92-1.png)
![UFR-vorlage-designsystem-typo-farben-V1.93 Zusatzfarben der Universität](https://cd.uni-freiburg.de/wp-content/uploads/2023/02/UFR-vorlage-designsystem-typo-farben-V1.93-1.png)
Mehr zur Farbverwendung: Grundlagen, Anwendungsregeln und Beispiele
Bildraster: Platzierung von Fotos
![UFR-layoutsystem-V1.216 Beispiele für die randabfallende Positionierung von Fotos im Bildraster](https://cd.uni-freiburg.de/wp-content/uploads/2023/02/UFR-layoutsystem-V1.216.png)
![UFR-layoutsystem-V1.217 Beispiele für die Positionierung von Fotos im Satztraster](https://cd.uni-freiburg.de/wp-content/uploads/2023/02/UFR-layoutsystem-V1.217.png)
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
![Teaserbild Gestaltungselemente und Siegel](https://cd.uni-freiburg.de/wp-content/uploads/2022/08/UFR-vorlage-designsystem-typo-farben-V1.96.png)