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

Mit dem Update von südtirolmobil wurde ein neues, digital optimiertes Design System eingeführt. Weshalb es sich immer lohnt, ein printorientiertes Corporate Design für die digitale Anwendung anzupassen, erklären wir in dieser Story.

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.

Die Farben wurden für die digitale Ausprägung leicht angepasst.
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.

Eine zweite Interaktionsfarbe schafft die notwendige Hierarchie, um Nutzende intuitiv durch viele Informationen zu leiten.
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.

Entdecken
Zurück zur Stories-Übersicht
Interessiert?
Wir freuen uns auf Sie!
Bild vom Geschäftsführenden Gesellschafter Henrik Johannsen
Ihre Ansprechperson
Henrik Johannsen
Kontakt
Teaser Bild der Story oder des Projektes
Teaser Bild der Story oder des Projektes
Teaser Bild der Story oder des Projektes
Teaser Bild der Story oder des Projektes
Die WebApp für die Dresdner Verkehrsbetriebe und den Verkehrsverbund Oberelbe
Die WebApp für die Dresdner Verkehrsbetriebe und den Verkehrsverbund Oberelbe
Die WebApp für die Dresdner Verkehrsbetriebe und den Verkehrsverbund Oberelbe
Die WebApp für die Dresdner Verkehrsbetriebe und den Verkehrsverbund Oberelbe
Projekt-Referenzen

Die Entstehung einer neuen, gemeinsamen ÖPNV- Fahrplanauskunft für die Dresdner Verkehrsbetriebe AG (DVB) und den Verkehrsverbund Oberelbe (VVO). Die ganze Projekt-Story auf 1klang.mobi:

Entdecken
Entdecken
Teaser Bild der Story oder des Projektes
Teaser Bild der Story oder des Projektes
Teaser Bild der Story oder des Projektes
Teaser Bild der Story oder des Projektes
Das macht unseren Design-Prozess erfolgreich
Das macht unseren Design-Prozess erfolgreich
Das macht unseren Design-Prozess erfolgreich
Das macht unseren Design-Prozess erfolgreich
UX-/UI-Design

Auf diese Aspekte sind wir in unserem Design-Workflow bei den PROJEKTIONISTEN® besonders stolz:

Entdecken
Entdecken

Kontakt

Wir freuen uns auf Sie!

Bild vom Geschäftsführenden Gesellschafter Henrik Johannsen
Ihre Ansprechperson
Henrik Johannsen
PROJEKTIONISTEN® GmbH
Schaufelder Straße 11
30167 Hannover
Vielen Dank für Ihre Nachricht! Wir werden uns so schnell wie möglich bei Ihnen melden.
Ihre Nachricht konnte nicht gesendet werden. Schreiben Sie uns bitte per Mail (info@projektionisten.de).