User Interface

Einführung

Unsere Designrichtlinien und Materialien für das User Interface ermöglichen es Ihnen, markenkonforme digitale Produkte für DPDHL Group zu entwickeln. Mit ihren Prinzipien, Grundlagen, Komponenten und Beispielen sind sie aufgrund der breiten Palette an digitalen Produkten sehr vielseitig. In diesem Guide finden Sie eine Einführung in die Gestaltung von User Interfaces mit Links zu weiterführenden Guides über die spezifischeren Aspekte des Designs von Benutzeroberflächen.

Einführung
  • Wesentliches
  • Beispiele
  • Grundlagen
  • Mit dem Design beginnen
  • Download

Wesentliches

Mit unserem neuen DPDHL Group Designstil werden alle Touchpoints der Marke abgedeckt. Alle Layouts verwenden unser universelles Maßsystem, das auf einem Baukasten-Prinzip basiert. Dies garantiert eine konsistente, einzigartige und exzellente Benutzerfreundlichkeit. Da jedes digitale Produkt spezifische Anforderungen und Zwecke hat, bieten wir keine allgemeinen Templates an. Stattdessen haben wir einen modularen Baukasten mit einsatzbereiten Komponenten entwickelt, der Ihnen hilft, dynamische und dennoch konsistente digitale DPDHL Group Produkte zu entwickeln.  

Beispiele

Grundlagen

Kennen Sie Ihre Zielgruppe

Achten Sie darauf, dass Ihre Entwürfe für den Einsatz unter realen Bedingungen optimiert sind und an alle üblichen Endgeräte angepasst werden können. Versetzen Sie sich in die Lage des Nutzers und in die am wenigsten ideale Umgebung, wie z.B. das Durchsuchen einer Webseite auf dem kleinen Bildschirm eines Mobiltelefons, während Sie in Eile und in einer unruhigen Umgebung sind. Wären sie in der Lage, Ihre Anwendung unter diesen Bedingungen ohne weiteres zu nutzen?

Unterschiedliche Kulturen finden verschiedene Dinge ansprechend. Wenn Sie das berücksichtigen, können Sie eine bessere Verbindung zu Ihren Kunden vor Ort herstellen. Es steht Ihnen frei, Ihren spezifischen Look im Rahmen der Guides auszuarbeiten.

Strukturieren Sie Ihre Inhalte

Das Design des DPDHL Group User Interfaces ist klar strukturiert und nie überladen. Konzentrieren Sie sich auf die wichtigsten Interaktionen. DHL Rot ist unsere dynamische Call-to-Action-Farbe. Es wird gezielt eingesetzt, um den Fokus auf wesentliche Interaktionen zu lenken. Übermäßige Verwendung roter Komponenten und Akzente sollten jedoch vermieden werden (z.B. sollten mehrere rote Call-to-Action-Buttons in einem Viewport nicht miteinander konkurrieren).

Postgelbe oder hellgraue Hintergründe können Komponenten oder Seitenabschnitte hervorheben und den Nutzer zu wichtigen Inhalten lenken. Sie können jedoch Inhalte nur dann hervorheben, wenn die benachbarten Elemente entsprechend ruhig gestaltet sind.

Die Verwendung eines Grids und einheitlicher Abstände ist bei komplexen Seiten sinnvoll, da sie den Inhalt strukturieren und ein systematisches Verhalten für responsive Layouts ermöglichen. Ein größerer Abstand hilft, Objekte zu unterteilen. Ein kleinerer Abstand gruppiert sie zusammen.

Nutzen Sie Bewegung

Bewegung macht das User Interface persönlicher und interaktiver. Sie visualisiert Reaktionen auf Nutzereingaben, hilft bei der Navigation, hebt die nächsten Schritte hervor und macht das digitale Produkt und die Nutzererfahrung einzigartig. Basierend auf unseren Animationsprinzipien sollten Animationen einfach, schnell und sinnvoll sein.

Mit dem Design beginnen

Da Sie nun die Grundlagen kennen, können Sie mit der Gestaltung beginnen. Das digitale Designsystem ist als Sketch Library erhältlich. Die Sketch Library hilft Ihnen, Komponenten einfach hinzuzufügen und an Ihr Design anzupassen. Dieses Dokument wird regelmäßig aktualisiert. Wenn Sie es nutzen, bleibt auch Ihre Gestaltung auf dem neuesten Stand. Mit der Funktion „Library Update Available“ zeigt Ihnen Sketch alle Änderungen, die an der Bibliothek vorgenommen wurden. Die Sketch Icon Library bietet eine große Auswahl an freigegebenen DPDHL Group Icons.

Download

Wenn Sie ein Dokument herunterladen, akzeptieren Sie unsere Nutzungsbedingungen.

Sketch UI Library