Layoutprinzip
Unser Layoutprinzip dient als Basis für den Aufbau sämtlicher DPDHL Group Medien – von Print bis digital, von emotional bis funktional. In diesem Guide erfahren Sie, wie einfach es ist, Ihre Layoutfläche zu strukturieren, unseren charakteristischen postgelben Verlauf anzuwenden, Text zu platzieren u. v. m.
-
Grundlagen
-
Beispiele
-
Strukturierung der Fläche
-
Ränder
-
Das Verlaufsmodul
-
Textplatzierung
-
Linien und Abstände
-
Schritt-für-Schritt Beispiele
Grundlagen
Das „Verlaufsmodul“ ist ein besonders charakteristisches Element unseres Erscheinungsbildes. Es wird in allen DPDHL Group Layouts verwendet, um unser Logo hervorzuheben und kann eingesetzt werden, um visuelle Aufmerksamkeit auf wichtige Botschaften und Funktionen zu lenken. Es besteht aus einem postgelben Hintergrund, der über einen festgelegten Farbverlauf allmählich verblasst. Das Modul kann auf vielerlei Weise auf der Layoutfläche platziert werden.
DPDHL Group Layouts sind klar strukturiert, niemals überfüllt und weisen eine klare visuelle Hierarchie auf. Im Zentrum stehen stets die wichtigsten Informationen oder Funktionen.
Eine einfache Formel: Die beiden Grundelemente eines DPDHL Group Layouts sind die Layoutfläche (mit oder ohne Bild) und das Verlaufsmodul.
Beispiele
Strukturierung der Fläche
Layout erstellen: im Vollformat oder in Sektionen unterteilt
Für ein klares Erscheinungsbild empfehlen wir ein einfaches Layout im Vollformat oder eine in zwei Sektionen unterteilte Layoutfläche. Egal ob die Unterteilung horizontal oder vertikal vorgenommen wird: Alle Sektionen müssen geradlinig und rechteckig sein und sind bis zum Rand befüllt. Jede Sektion sollte eine Funktion haben. Vermeiden Sie deswegen leere Sektionen.
Wir empfehlen einfache Teilungsverhältnisse, die ein asymmetrisches Gesamtbild erzeugen, z. B. 1:2, 2:3, 2:5 oder den „goldenen Schnitt“ (1: ≈1.618). Als Hintergrund Ihrer Sektion stehen das Verlaufsmodul oder ein Bild zur Auswahl, wobei niemals zwei Bilder oder zwei Verlaufsmodule kombiniert werden.
Wenn sie viel Text und viele Informationen unterbringen möchten, können sie die Layoutfläche, bzw. den Viewport (den Teil eines Mediums, der auf einem Bildschirm sichtbar ist) in weitere Sektionen unterteilen. Das ist hilfreich, wenn Sie digitale Medien wie Webseiten oder Printmedien wie Datenblätter und Innenseiten von Broschüren gestalten. Sie können hier Weiß, helle Grautöne und unseren postgelben Vollformat-Verlauf als Hintergrund für Sektionen einsetzen.
Dos and Don’ts
Streben Sie ein klares und einfaches Erscheinungsbild an.
Erstellen Sie keine visuell komplexen Layouts. Vermeiden Sie Überschneidungen, zu viele Sektionen, den Einsatz von mehr als einem Bild sowie Sektionen ohne Funktion.
Ränder
Beachten Sie Text- und Brandingzone
Halten Sie bei der Platzierung von Elementen in Layouts bzw. einer Sektion definierte Randabstände ein. Diese sind wie folgt definiert:
Innerhalb der Brandingzone werden das freischwebende Verlaufsmodul, Infoboxen, Kacheln, kleinere Bildern, usw. platziert (siehe rot umrandeter Bereich unten). Der Abstand dieses Bereiches vom Rand des Gesamtlayouts bzw. der Sektion beträgt mindestens eine Base Unit.
Innerhalb der Textzone werden sämtliche Logo- und Textelemente platziert (dazu Icons, digitale Elemente, zusätzliche Logos usw.). Der Abstand dieses Bereiches vom Rand des Gesamtlayouts bzw. der Layoutsektion beträgt mindestens zwei Base Units.
Gewusst wo: Platzieren Sie das freischwebende Verlaufsmodul innerhalb der Brandingzone (rot) und platzieren Sie das Logo sowie den Text innerhalb der Textzone (blau).
Reduzieren Sie den Randabstand in kleinen Medien auf eine Base Unit
In kleineren Medien ist es möglich, das DPDHL Group Logo und weitere Designelemente mit dem Mindestabstand von einer Base Unit vom Rand der Layoutfläche oder -sektion zu platzieren. Nutzen Sie diese Option für Mobilanwendungen, Smartwatch-Displays, kleine Banneranzeigen sowie Printmedien im Format A7 oder kleiner. In diesem Fall verschmelzen die Text- und die Brandingzone.
Das Verlaufsmodul
Unser postgelbes Verlaufsmodul kann auf zwei verschiedene Weisen verwendet werden:
- Mit Highlight-Verlauf
- Mit Vollformat-Verlauf
Highlight-Verlauf
Das Modul mit Highlight-Verlauf darf überall auf der Grundfläche platziert werden, kann aber nicht mehrere Sektionen überlagern. Der Abstand zwischen dem Verlaufsmodul und dem Rand Ihres Layouts bzw. einer Sektion muss mindestens eine Base Unit betragen. Hierbei handelt es sich um die „Brandingzone“ (siehe vorherigen Abschnitt zum Thema Ränder).
Aufbau
Das Highlight-Verlaufsmodul besteht aus drei Elementen: dem DPDHL Group Logo, einer postgelben Box (auf dem das Logo platziert wird) und dem Highlight-Verlauf.
Platzierung des DPDHL Group Logos
Platzieren Sie das DPDHL Group Logo in einer beliebigen Ecke der postgelben Box. Der Mindestabstand zum Rand des Verlaufsmoduls beträgt eine Base Unit.
Vollformat-Verlauf
Das Vollformat-Verlaufsmodul füllt entweder die Gesamtfläche des Layouts oder eine Sektion. Sämtliche Logo- und Textelemente müssen in der Textzone platziert werden, wobei ein Rand von mindestens zwei Base Units an allen vier Seiten eingehalten werden muss.
Aufbau
Das Vollformat-Verlaufsmodul besteht aus zwei Elementen: dem DPDHL Group Logo und dem Vollformat-Verlauf, auf dem dieses platziert wird.
Platzierung des DPDHL Group Logos
Platzieren Sie das Logo innerhalb der „Textzone“ in einer der vier Ecken der Layoutfläche oder Sektion. Halten Sie dabei einen Abstand von mindestens zwei Base Units vom Rand des Layouts ein. Achten Sie darauf, dass das Logo auf einem 100 % postgelben Bereich des Verlaufsmoduls platziert wird.
Innenseiten, Rückseiten, Unterseiten
Das Layoutprinzip ist sehr anpassungsfähig. Daher ist es auch für Innenseiten, Rückseiten, Unterseiten und andere Bereiche geeignet, wo das DPDHL Group Logo nicht gezeigt werden muss. Verwenden Sie hier lediglich das Verlaufsmodul ohne Logo wie unten gezeigt.
Dos and Don’ts
Verwenden Sie das Highlight-Verlaufsmodul als freischwebendes Element. Der Mindestabstand vom Rand der Layoutfläche ist eine Base Unit.
Verwenden Sie den Vollformat-Verlauf nicht als freischwebendes Element.
Das Highlight-Verlaufsmodul hält einen Mindestabstand von einer Base Unit vom Rand der Grundfläche ein.
Platzieren Sie das Highlight-Verlaufsmodul nicht mit einem Abstand von weniger als einer Base Unit zum Rand des Layouts.
Verwenden Sie das Highlight-Verlaufsmodul nicht, um den Hintergrund einer Sektion zu füllen.
Reduzieren Sie den Highlight-Verlauf nicht so stark, dass der Verlauf nicht mehr erkennbar ist. Halten Sie eine Mindestlänge von acht Base Units bzw. eine Mindesthöhe von vier Base Units ein.
Vermeiden Sie die Platzierung des Vollformat-Verlaufs neben einer grauen Sektion.
Füllen Sie den Hintergrund einer Sektion nicht mit Grautönen bei gleichzeitiger Verwendung des Highlight-Verlaufs.
Verwenden Sie schmale, horizontale Sektionen mit Vollformat-Verlauf als Header in digitalen Medien.
Vermeiden Sie schmale, horizontale Sektionen mit Vollformat-Verlauf in Printmedien.
Textplatzierung
Erstellen Sie einen typischen Textblock
Ein Standard-Textblock besteht aus folgenden Elementen:
Hauptüberschrift
Topline (wahlweise)
Subline (wahlweise)
Fließtext
Webadresse (wahlweise)
Richten Sie den Text am Rand des Verlaufsmoduls aus
Die Platzierung von Überschriften und Fließtext orientiert sich an den Innenrändern des Verlaufsmoduls. Überschriften und Text werden linksbündig ausgerichtet.
Mindestens eine Zeile der Hauptüberschrift muss sich über die gesamte Breite des Highlight-Verlaufs erstrecken (a). Eine Ausnahme ist möglich, wenn sich der Highlight-Verlauf über die gesamte Breite des Layouts erstreckt. In diesem Fall darf die Überschrift insgesamt weniger Platz einnehmen (b).
a) Mindestens eine Zeile der Hauptüberschrift erstreckt sich über die gesamte Breite des Highlight-Verlaufs.
b) Ausnahme: Der Highlight-Verlauf erstreckt sich über die gesamte Breite des Layouts.
Halten Sie mindestens einen Abstand von zwei Base Units zum Logo ein
Der Abstand zwischen dem DPDHL Group Logo und anderen Elementen (wie z. B. der Hauptüberschrift und dem Produktlogo) beträgt mindestens zwei Base Units. So bleibt das DPDHL Group Logo der zentrale Blickfang. Bei Bedarf kann dieser Abstand in kleinen Medien auf eine Base Unit reduziert werden, z. B. für Banneranzeigen, Smartwatch-Displays und kleinere Printmedien (A7 oder kleiner). In diesen Fällen dürfen Elemente auch links oder rechts vom DPDHL Group Logo platziert werden.
Linien und Abstände
Verwenden Sie klare Abstände oder dünne Linien, um Elemente voneinander zu trennen und Inhalte zu arrangieren. Verwenden Sie dicke Linien, um Elemente mit vielen Inhalten voneinander zu trennen und fügen Sie Linien hinzu, um ähnliche Inhalte abzuteilen. Bei vielen Inhalten und mehreren Spalten beziehen Sie sich auf den Leitfaden zu Tabellen und Diagrammen.