User Interface

Apps

Mobile apps are one of the most efficient and convenient ways of providing service to customers around the world. Before you commit to building one for a smartphone, tablet or both, carefully analyze the scope and user base to make sure it is the right solution for your needs. Ask yourself: Is an app really necessary?

Apps
  • Examples
  • Native, Hybrid or Web Apps
  • Structure and look
  • App Icon and Naming
  • App Store
  • Dos and Don’ts
  • Downloads

Examples

Native, Hybrid or Web Apps

Users install apps to take advantage of their superior performance and offline capabilities compared to websites. A native app makes the best use of the hardware and therefore offers the best performance. However, it can be complex in terms of design and development. 

An alternative is a hybrid app, which wraps the core of a website in a native app shell. Hybrid apps are easier to build and maintain, but cannot match the performance and stability of native apps.

Sometimes, the best option is a web app. It requires no app store reviews and no installation by the user. Using modern technology brings some native functionality to web apps. 

Structure and look

Apps are tools, so they should be easy and fast to use. They are not meant for discovery but for solving specific problems. Decide on the core functionality of your app and keep the range of features focused on important services to make that happen.
 Using the typical navigation patterns and components of the operating system makes it easy to use and familiar for the user. 

You can achieve the DHL look by adding brand colors and typography to the design. The Delivery font family was created with digital products like apps in mind and offers great readability on small screens. 

Further information 
Make yourself familiar with the following operating systems when designing and developing for one of these platforms to achieve the best results:

App Icon and Naming

App icons are simple graphics that clearly reflect the apps intended use.

Naming

In general, app names should be short and sharp. We established the following naming convention: DHL + Topic or Service the app provides (e.g. DHL Parcel, DHL Freight, DHL Tracking). If the DHL logo is used to illustrate the app icon, “DHL” is not part of the app name.

App Icon Design

App icons should be simple graphics that reflect the CD of the DHL brand. The appearance should also match the aesthetics of relevant app stores and mobile devices, and clearly reflect the app’s intended use. There are four different options to use:

DHL Logo

This variation is the simplest and works in most cases. Fill the background with the full-format gradient and make sure that the light area of the gradient is at the top. The distance from the DHL logo to the left and right margin corresponds to 1/14 of the format width. Vertically bring the logo slightly out of center. The top line of the three logo strokes is placed on the centerline of the format. 

Optically centered
The top of three strokes in the DHL logo is placed on the centerline of the format. So the logo appears optically centered on the format.

Icon

If your app will offer a strong benefit and will be used frequently, a dedicated icon is the sensible choice. Icons should appear in DHL Red on the full-format gradient (light area of the gradient at the top, 100% Postyellow area of the gradient at the bottom of the format). Place the icon on the middle of the gradient. The size of the icon depends on its proportions and should be defined individually. A minimum distance to all four margins which corresponds to 1/14 of the format width is respected.

All icons respect the minimum distance to the margins and are placed in a visual relation. They all appear about the same size.

Product or solution logo

If your app will represent an offer which has its own product or solution logotype, you can use the logotype instead of an icon or the DHL logo to illustrate the app. Place the logotype in the center of the format on the full-format gradient (light area of the gradient at the top, 100% Postyellow area of the gradient at the bottom of the format). In the masterfile you will find three versions regarding the length of the product or solution logo name. Choose the one that fits to your needs. Do not change the position or type size in the masterfile.

Minimum distance 
The minimum distance between the logo and all four margins is 1/14 of the format width. In the vertical place the logo optically centered on the full-format gradient.

Single-, double or triple-lined version
if the product or solution name is short enough to fit on one line, place it in the middle of the format. If the product or solution logo runs over two or three lines, set it left-aligned in the horizontal respecting the minimum distance to the left margin. 

Typography (exception)

If it is impossible to create a simple icon for your app and it is too specific to use the DHL logo, you can place the app name written in Delivery Black Condensed in DHL Red on the full-format gradient. Make sure that the light area of the gradient is at the top. This option is the least preferred option and should only be used as an exception. Download the app icon template to create the icon you need but do not change the font, font sizes, font color or any other design element.

The minimum distance of the product name to the left and right margin is 1/14 (X) of the format width. In the masterfile you will find three versions regarding the length of the typography. Choose the one that fits to your needs. Do not change the position or type size in the masterfile.

Dos and Don’ts

App Store

Publishing

The success of an app is largely based on whether the intended audience can find it, and whether it offers a clear benefit once installed. The app store description plays a huge part in this. Make sure it promotes the unique selling points of the service and includes attractive screenshots showing the most useful features. Using known corporate entities such as “DHL Paket GmbH” or “DHL International GmbH” as publishers strengthens the authenticity of the app. 

Linked website

Every app store description should include a link to a website that contains more information. This link should always lead to a dedicated landing page, not just a general DHL home page. The landing page should clearly explain the app’s purpose and benefits to increase the likelihood of installation.

Hygiene

Like every website or offline campaign, an app eventually becomes outdated. It is important to update the app regularly to keep users engaged. Alternatively, you can remove the app from relevant app stores. Users will still be able to use the app if they have installed it.

Dos and Don’ts

Downloads

If you download any document, you accept our Terms and Conditions.

Sketch UI Library
ZIP
85.98 MB
App Icon Template
ZIP
7.04 MB