Digital
Product
Design.

Icon Digital Product Design white Designsensor AG

Design Guidelines

Sinnvolles Regelwerk und Bindeglied von Design und Entwicklung

Design Guidelines beschreiben mit Beispielen und Hilfsmitteln ein gemeinsames Verständnis und ein sinnvolles Anwenden von Regeln. Gute Guidelines unterstützen die effiziente Überleitung vom Design zur Entwicklung und tragen somit dazu bei, dass digitale Produkte schneller und einfacher erstellt werden können. Um einen reibungslosen Workflow zu erhalten, sind Guidelines ein wichtiges Kommunikationsmittel im Prozess. Sie haben ausserdem organisatorischen Nutzen und unterstützen den nutzerorientierten Prozess in einem Unternehmen, indem Naming und Verhalten von UI-Elemente klar definiert sind.

Teilen macht Freude

Projektabhängige Design Guidelines

Inhalt, Detaillierungsgrad und Bereitstellung von Guidelines sind immer Projektabhängig.

Folgende Fragen sollen zu Beginn gestellt werden und helfen bei der Erstellung:

  • Werden die Guidelines von mehreren Parteien gebraucht (z.B. Unternehmens-Styleguides), oder gibt es eine einmalige Umsetzung (z.B. Produkt-Styleguides)?
  • Liegt der Schwerpunkt bei der Beschreibung der Firmenphilosophie und von allgemeinen Usability-Prinzipien, oder beinhaltet das Regelwerk sämtliche Komponenten und Pattern für eine massstabgetreue Schritt-für-Schritt Umsetzung?
  • Findet während der Umsetzung ein regelmässiger Austausch zwischen Entwickler und Designer statt?
  • In welcher Form sollen die Guidelines zur Verfügung gestellt werden?
  • Werden diese regelmässig aktualisiert oder einmalig herausgegeben?

Der Guideline-Baukasten

Im den folgenden Abschnitten werden mögliche Guideline-Elemente näher beschrieben.

Firmenphilosophie / Usability-Prinzipien

Idee und angestrebte Anmutung eines Produktes, sowie die wichtigsten Usability-Prinzipien werden hier beschrieben.
Design Guidelines Design Principles

Aufbau und Anzeigegeräte

Definiert den Aufbau und das Verhalten auf allen Ausgabegeräten.
Design Guidelines Responsive Design

Navigation

Die Navigation ist ein wichtiger Bestandteil der Benutzerführung.
Design Guidelines Naviagtion Design Screen Layout
Design Guidelines Naviagtion Design Screen Layout

Basis Design-Elemente

Beschreibung von: Raster, Proportionen, Farben, Typografie, Icons, Bildwelten
Design Guidelines Design System

Komponenten und deren Verhalten

Darstellung einzelner Komponenten als Referenzbeispiele mit Beschreibung von Aussehen und Verhalten.
Design Guidelines Design Komponenten

Pattern Beispiele und deren Verhalten

Darstellung einzelner Pattern als Referenzbeispiele mit Beschreibung von Aussehen und Verhalten.
Design Guidelines Design Pattern

Front-End Guidelines

Ein Vorteil von Front-End Guidelines ist die Verknüpfung von Design und Entwicklung. Verhalten und UI Animationen von Komponenten und Pattern können 1:1 abgebildet, Code-Schnippsel und Downloads zur Verfügung gestellt werden. Ausserdem können die Richtlinien laufend ergänzt und aktualisiert werden ohne dass ein Versionenmix in Umlauf kommt.

Schnelle Vermassung

Anstelle Vermassungen, Farb- und Typografieangaben aufwändig per Hand zu erstellen, können wir heute Layouts direkt aus Sketch in Programme wie InVision, Zeplin oder Zeroheight transferieren und dort alle benötigten Angaben herauslesen.
Design Guidelines Frontend

Design und Entwicklung

Digitale Produkte werden in enger Zusammenarbeit zwischen Designern und Entwickler konzipiert, gestaltet und realisiert. Dazu braucht es ein gemeinsames Verständnis zwischen diesen zwei unterschiedlichen Disziplinen (Personen).

Folgende Prinzipien und Regeln haben sich in der Realität bewährt:

  • Akzeptiere, dass Entwickler / Designer ein wenig anders ticken als Du selbst.
  • Nur in enger Zusammenarbeit zwischen Designer und Entwickler entsteht ein wirklich gutes Produkt.
  • Dazu braucht es eine gute Kommunikation, die auf klaren Argumenten, harten Diskussionen und guten Kompromissen basiert.
  • Zusammenarbeit funktioniert dann am besten, wenn Team-Mitglieder aus allen Disziplinen nahe beieinander sind und sich regelmässig austauschen.
  • Von anderen Team-Mitglieder zu lernen ist essenziell und spannend.
  • Frühzeitiges Festlegen des Workflows und der Lieferobjekte vermeidet in jedem Fall Stress.
Design System 1
Nächster Beitrag