User Interface

Introduction

Our user interface design guides and resources empower you to create on-brand digital products for DPDHL Group. While they provide a system of principles, fundamentals, components and patterns, they are also very versatile due to the wide range of digital products. This guide provides an introduction to designing user interfaces with quick links to related guides on the more specific aspects of user interface design.

Introduction
  • Essentials
  • Examples
  • Fundamentals
  • Start designing
  • Download

Essentials

Our updated DPDHL Group design style covers all brand touchpoints. All layouts use our universal measurement system, which is based on a brick system. This guarantees a consistent, unique and excellent user experience. Since every digital product has specific needs and goals, we don’t offer generic templates. Instead, we’ve developed a modular construction kit with ready-to-use components to help you create dynamic yet consistent digital DPDHL Group products.  

Examples

Fundamentals

Know your audience

Ensure that your designs are optimized to work in real conditions, and are adaptable to all the devices your users use. Put yourself in the users shoes and in the least ideal surroundings, such as browsing a website on the small viewport of a mobile phone while in a hurry and in distracting surroundings. Would they be able to easily use your application in those conditions? 

Different cultures find different things appealing. Approaching your work with this in mind will help you connect with local customers more effectively. Feel free to work out your specific look within the guidelines.

Structure your content

The DPDHL Group user interface design is clearly structured and never overloaded. Focus on the core interactions. DHL Red is our energetic call-to-action color. It is wisely used to set the focus on important interactions. However, avoid overusing red components and accents, (e.g. several red call-to-action buttons should not compete with each other in one viewport).

Postyellow or light grey backgrounds can highlight components or page sections and guide users towards important content. However, it only can highlight content when the surroundings are not distracting.

Using a page grid and consistent spacing is helpful on complex pages because it structures the content and adds a systematic behaviour for responsive layouts. Larger space helps to distinguish objects, smaller space groups them together. 

Moving forward

Motion makes the user interface more personal and human. It indicates a response, helps navigate, highlights next steps, and adds a unique user experience to the digital product. Based on our motion principles, animations should be simple, fast and meaningful. 

Start designing

Now that you’ve got the foundation, let’s get started. The digital design system is available as a Sketch Library. The library helps you to easily add and adjust components to your design. It is a living document that gets updated frequently. By using it, your design work stays up to date, too. Using the “Library Update Available” feature, Sketch shows you all the changes that have been made to the library. The Sketch Icon Library offers a wide range of approved DPDHL Group icons.

Download

Sketch UI Library