Layoutprinzip

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.

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

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.

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.

Unser postgelbes Verlaufsmodul kann auf zwei verschiedene Weisen verwendet werden:

1. Mit Highlight-Verlauf
2. 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

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

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

Erstellen Sie einen typischen Textblock

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).

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.

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.

Layout mit Highlight-Verlauf

Layout mit Vollformat-Verlauf