Layout System

Layout Principle

Our layout principle provides the foundation on which to build any DPDHL Group medium – whether print or digital, emotional or functional. Review this guide to learn how easy it is to structure your canvas, apply our distinctive Postyellow gradient, place text and more.

Essentials
  • Essentials
  • Examples
  • Structuring your canvas
  • Margins
  • The Gradient Module
  • Placing Text
  • Lines and spacing
  • Step-by-step examples

Essentials

The “Gradient Module” is our distinctive design element. It is used in all DPDHL Group layouts to highlight our logo. It can also be used to set the visual focus on key messages and functions. Made up of a Postyellow background that slowly fades to transparent based on a set gradient, there are a variety of options for placing the module on the layout canvas.

DPDHL Group layouts are clearly structured, never overloaded and have a clear visual hierarchy. The focus is on the most important information or function.

A simple formula: The two fundamental elements of a DPDHL Group layout are the canvas (with or without image) plus Gradient Module.

Examples

Structuring your canvas

Create a full-format layout or subdivide

In order to achieve a clear overall picture, we recommend a simple full-format layout. However, the canvas may also be subdivided into two sections. Whether horizontal or vertical, the sections in a subdivided canvas are always straight and rectangular and given a bleed. Each section should have a purpose. Avoid empty sections.

We recommend using simple division ratios that generate an asymmetrical appearance, such as 1:2, 2:3, 2:5 or the golden ratio (1: ≈1.618). Use the Gradient Module or an image to fill a section background, but do not use two images or two Gradient Modules in combination.

If you have lots of text and information to place, consider dividing the viewport (the visible part of a layout on a screen) or canvas into a few more sections. This will be helpful for digital media like websites or print media like factsheets and the inside pages of brochures. You can use white, light gray tones, and our Postyellow full-format gradient as an additional section background.

Dos and Don’ts

Margins

Respect type and branding areas

The margin in your layout and layout section must be at least one base unit from the branding area and two base units from the type area. The branding and type areas are defined as follows:

  • The branding area includes the free-floating Gradient Module, infoboxes, tiles, smaller images, etc. (see area outlined in magenta below). The margin around this area must be at least one base unit from the edge of your layout.
  • The type area includes all logo and text elements (icons, digital components, additional logos, etc.). The margins around this area must be at least two base units from the edge of your layout.

Know your area: Place free-floating Gradient Module within the branding area (magenta), and place the logo and text within the text area (blue).

Adjust margins to one base unit in small media

In small media, you have the option of placing the DPDHL Group logo and other design elements at the minimum distance of one base unit from the canvas margins. Use this option for mobile apps, smartwatch displays, small web banners, and print media A7 or smaller. In this case, the type and branding areas merge into one.

The Gradient Module

Our Postyellow Gradient Module can be applied in two ways: 

  1. With a highlight gradient
  2. With a full-format gradient

Highlight gradient

The highlight Gradient Module may be placed anywhere on the canvas, but it may not overlay two or more sections. The distance between the Gradient Module and the edge of your layout (canvas margin) is at least one base unit. This is the “branding area” (see also chapter on Margins).

Construction

The highlight Gradient Module is composed of three elements: the DPDHL Group logo, the Postyellow box (on which the logo is placed), and the highlight gradient. 

Placing the DPDHL Group logo

Place the DPDHL Group logo in any corner of the Postyellow box. Minimum distance to the Gradient Module margins is one base unit.

Full-format gradient

The full-format Gradient Module fills the whole background of the entire layout or a section. All logo and text elements must be placed in the type area, which has a margin of at least two base units on all four sides.

Construction

The full-format Gradient Module is composed of two elements: the DPDHL Group logo and the full-format gradient on which it is placed.

Placing the DPDHL Group logo

Place the logo within the type area in one of the four corners of the section – at least two base units from the edge of the layout. Ensure that it is positioned on the side of the gradient that is 100% Postyellow.

Inside spreads, back covers, subpages

The layout principle is adaptable for inside spreads, back covers, subpages and other places where the DPDHL Group logo is not needed. Simply apply the Gradient Module without our logo as shown below.

Dos and Don’ts

Placing Text

Create a typical text block

A standard text block includes the following components:

  • Main headline
  • Topline (optional)
  • Subline (optional)
  • Copy text (optional)
  • Web address (optional)

Align text to Gradient Module margins

The placement of headlines and text is oriented on the inner margins of the Gradient Module. Align headlines and text flush-left.

At least one line of the main headline must extend across the entire width of the highlight gradient (a). An exception can be made when the highlight gradient itself fills the whole width of a canvas. In this case the width of the headline can be smaller (b).

a) At least one line of a main headline extends across the entire width of the gradient.

b) Exception: Highlight gradient fills the whole width of a canvas.

Maintain a distance of two base units to the logo

The space between the DPDHL Group logo and other elements (such as main headline) is two base units. This keeps the primary focus on the DPDHL Group logo. If necessary, the distance can be reduced to one base unit for small media, such as web banners, smartwatches, and small print applications (A7 or smaller). In these cases, elements can also be placed to the left or right of the DPDHL Group logo. 

Lines and spacing

Use clear spacing or fine lines to separate elements and organize content. Use solid lines to separate elements of dense content and insert lines to separate related content. If you have a lot of content and multiple columns, read the Design Guide Tables and Charts.

Step-by-step examples

Designing a layout with a highlight gradient

Designing a layout with a full-format gradient