Die Übersetzung eines printorientierten Corporate Designs in ein digitales Design System

Vom analogen Corporate Design zum digitalen Design System
‍

Im Sommer 2019 bekamen wir den Auftrag von der Südtiroler Transportstrukturen AG (STA), ein Portal und eine App für südtirolmobil zu konzipieren, zu designen und zu entwickeln. Beim Start des Projekts fiel auf, dass das bestehende Corporate Design in der digitalen Anwendung an verschiedene Grenzen stößt, da es ursprünglich für die analoge Anwendung entwickelt und optimiert wurden. Aufgrund des straffen Zeitplans bis zum Veröffentlichungstermin einigten wir uns darauf, zunächst mit den vorhandenen Designvorgaben zu starten. Nachgelagert sollte dann gemeinsam mit der STA ein digital optimiertes Design System als Update für App und Portal entwickelt werden – welches nun erfolgreich eingeführt wurde.

Warum ist es sinnvoll, ein Design digital anzupassen?
‍

Printorientierte Design Manuals können oftmals nicht eins zu eins in ein digitales Designsystem übertragen werden. Nutzende interagieren mit einer App oder einer Webseite, um ihr Anliegen zu erfüllen. Deshalb muss die visuelle Gewichtung der Inhalte andere Anforderungen erfüllen als z. B. bei einem Flyer, der linear wie ein Buch gelesen wird. Digitale Designsysteme müssen demnach so gestaltet werden, dass Nutzenden sowohl auf dem Smartphone als auch im Web eine ideale User Experience erleben.  Das bedeutet aber nicht, dass ein digitales Designsystem vollkommen anders aussieht als die bestehende Gestaltung des Printbereichs. Das Ziel bleibt die konsistente Erscheinung des Unternehmens, angepasst an die jeweiligen Anforderungen der unterschiedlichen Medien.

Diese Vorteile bietet ein digitales Designsystem
‍

1. Flexibilität

Einführung eines responsiven Grids
Eine responsive Anpassung an unterschiedliche Auflösungen war im printorientierten Styleguide nur bedingt vorgesehen – unterschiedliche Screengrößen wurden lediglich durch die Vergrößerung oder Verkleinerung des Weißraums erreicht. Diese Einschränkung ergab ein relativ starres Layout, in welchem alle Informationen ausschließlich mittig platziert werden konnten.

Mit dem digitalen Designsystem wurde nun ein responsives Grid mit mehreren Zwischenstufen eingeführt. Das Layout kann jetzt viel flexibler genutzt werden und passt sich gleichzeitig optimal an unterschiedliche Auflösungen sowohl auf dem Smartphone als auch am Desktop an.

‍

2. Lesbarkeit und Wahrnehmung

Digital optimierte Typografie
Mit der Überarbeitung der Typografie vergrößerte sich die Fließtextschrift, um die Lesbarkeit auf digitalen Endgeräten zu verbessern. Zudem wurden das Größenverhältnis von Überschrift zu Fließtext überarbeitetet, um eine schnellere Texterfassung und Orientierung zu ermöglichen. Entstanden ist eine ausgeglichene Schrifthierarchie passend zum neuen Raster, welches den Nutzenden ein barrierearmes Leseerlebnis bietet.

Anpassung der Farbskala an Bildschirme
Im Gegensatz zur additiven Farbmischung im Print werden Farben auf Bildschirmen subtraktiv dargestellt. Derselbe Farbwert, der im Druck ein ausgeglichenes Ergebnis erzielt, kann durch die digitale Farbdarstellung plötzlich trist und abgeschwächt wirken. Aus diesem Grund ist es sinnvoll, Referenzfarbwerte zu bestimmen, welche die definierten Corporate Design Farben in der digitalen Erscheinungswelt korrekt wiedergeben.

3. Usability

Farbe als Funktion: Unterscheidung von Primär- und Sekundärfarbe
Auf einem Screen befinden sich meist mehrere Interaktionselemente. Eine Unterscheidung von Primär- und Sekundärfarbe hilft Nutzenden unterbewusst dabei, wichtige Interaktionen und Informationen von weniger relevanten zu unterscheiden. Durch einen sinnvollen Einsatz der beiden Farben kann zwischen den einzelnen Interaktionselementen eine notwendige Hierarchie geschaffen werden. Die Nutzenden können so gezielt durch die Screens navigiert werden, was die User Experience deutlich verbessert.

Das Ergebnis: ein nutzungsorientierter Baukasten, der wachsen darf

Das neue Designsystem sorgt für maximale Konsistenz innerhalb der digitalen Welt von südtirolmobil und gliedert sich darüberhinaus nahtlos in die bestehende Kommunikation ein. Die Bedürfnisse der Nutzenden stehen an oberster Stelle, ihnen wird durch den gezielten Einsatz der Designelemente ein intuitives und problemloses Nutzungserlebnis geboten. Das System ist dabei flexibel und skalierbar – aus den digital optimierten Grundelementen können in Zukunft nach dem Baukastenprinzip Elemente zusammengesteckt werden, die sich an neue Anforderungen und Anwendungen anpassen.