Designsysteme: gestalterisch wertvoll und ökonomisch sinnvoll – Teil 1

17. November 2020 von Thomas Sokolowski Veröffentlicht unter Digitale Transformation, Know-how/Tipps&Tricks, UX/UI Design Verschlagwortet mit , , ,

Eine Marke, viele Touchpoints, unendliche viele User-Interfaces. Ob Corporate-Website, Online-Shop oder Social Network – Marken müssen auf vielen Kanälen mehr als nur präsent sein. Sie müssen digital überzeugen. Ein wichtiger Faktor ist dabei ein stimmiges, prägnantes und vor allem einheitliches Erscheinungsbild. Dabei sollen Corporate Design Manuals und Styleguides helfen. Und immer mehr Unternehmen gehen einen Schritt weiter und setzen auf Designsysteme.

 

Kommunikation im Wandel der Zeit und die Auswirkungen auf den Design Workflow

Jedem Marketingteam, jeder Geschäftsführung und jeder Design Abteilung ist unterdessen bewusst, dass ein stimmiges wie konsistentes Corporate Design einen positiven Einfluss auf die Customer Journey hat und Marken unterscheidbar macht. Dennoch investieren viele Unternehmen noch nicht in die Qualitätssicherung ihrer Design Elemente und Standards. Viele Methoden und Tools sind nach wie vor analog, bedienen sich digitaler Brückentechnologien (z.B. PDFs) oder sind durch signifikante Medienbrüche gekennzeichnet.

Hinzukommt, dass moderne Technologien zu einem Paradigmenwechsel in der Kommunikation geführt haben: Aus der, lange Zeit allgemein gültigen Informationseinheit «Seite» werden multimediale Benutzeroberflächen. Eine Entwicklung, die neben vielen Möglichkeiten auch Herausforderungen mit sich bringt. Neben Lesbarkeit und Ästhetik spielen vor allem die Benutzerfreundlichkeit und Responsivität – die Anpassungsfähigkeit der Inhalte in Bezug auf ihr darstellendes Medium – eine entscheidende Rolle. Als Konsequenz werden deshalb verstärkt Design-Management-Systeme – oder kurz «Designsysteme» eingesetzt, die helfen sollen, diesen Anforderungen gerecht zu werden.

 

Auf einen Blick: Designsysteme und welchen Vorteil sie bieten

Die meisten Frontends grosser Websites werden «Seitenvorlagen-basiert» erstellt. Dazu werden in der Regel Key-Templates, wie die Startseite, Übersichts- und Detailseiten und weitere Content-Elemente designt – zunächst über Wireframes und letztendlich über Mockups. Sofern das Budget es zulässt wird zur Qualitätssicherung neben einem Developer-Handout auch ein Styleguide oder eine UI-Dokumentation erstellt. In den meisten Fällen sind diese allerdings nur bis zum nächsten Relaunch gültig und beschränken sich häufig auf den Touchpoint Website. Diese bestimmt nicht nur das Denken im Design- und Entwicklungsprozess, sondern stellt viel mehr die Grundlage dafür dar («Website first»).

 

Klassischer Workflow «Website First»

Klassischer Workflow «Website First»

 

Diese Vorgehensweise ist weder effizient noch nachhaltig und hier kommen Designsysteme ins Spiel. Der modulare Aufbau versorgt Designer und Entwickler gleichermassen mit modularen Komponenten auf deren Basis, quasi via «Drag & Drop», eine unbegrenzte Anzahl von Seitenvorlagen erstellt werden können. Einfach, effizient und für jeden Touchpoint. Ausgehend vom Design gestaltet sich der weitere Aufbau und die Arbeit mit einem Designsystem im Prinzip wie mit einem Baukasten («Design First»)

 

Snowflake_Designsystem-first

Workflow «Design System First»

 

Neue Templates entstehen so im Handumdrehen und garantieren ein einheitliches Markenerlebnis über alle Touchpoints hinweg. Damit lassen sich zukünftig digitale Produkte nicht nur schneller, sondern auch kostengünstiger entwickeln.

Ein Designsystem hilft Kontinuität in den Gestaltungsprozess zu bringen. Das Design wird an sich verändernde Rahmenbedingungen und neue Touchpoints angepasst und ist damit langfristig einsetzbar und über alle Kanäle hinweg konsistent.

Damit ist ein Designsystem das ideale Werkzeug, wenn Designer, Entwickler und Stakeholder miteinander kommunizieren und wenn verschiedene Teams oder Agenturen über einen längeren Zeitraum an komplexen Projekten zusammenarbeiten.

 

Ein Designsystem sollte für eine nachhaltige Nutzung angelegt und deswegen skalierbar sein. Es sollte mit den sich ändernden Anforderungen wachsen und nicht mit dem nächsten Relaunch seine Gültigkeit verlieren.

Thomas Sokolowski, Senior Interaction Designer

 

Designsysteme in der Anwendung: Atomic Design

Wenn Designsysteme die einheitliche Visualität eines Unternehmens oder Institution auf sämtlichen Kanälen beschreiben, gilt es den Gestaltungsansatz auf einzelne Touchpoints zu übertragen. Ein Ansatz das zu tun stammt von Brad Frost und nennt sich Atomic Design. Atomic Design bezieht sich, wie der Name schon sagt, auf eine Analogie aus der Chemie. Zur Gestaltung eines digitalen Produkts werden die kleinsten Bestanteilen (Atome), wie Schriften, Buttons oder Farben miteinander kombiniert (Moleküle). Erst durch die Kombination dieser entstehen Komponenten, die ebenfalls miteinander kombiniert wiederum eine Seite ergeben. Gearbeitet wird also vom Allgemeinen zum Speziellen und kleine Bausteine werden zu grösseren werden zu Komponenten, die am Ende wiederum ein fertiges Template ergeben.

 

Snowflake_Atomic Design

Atomic Design – vom Allgemeinen zum Speziellen

Alle Stakeholder, von Projektleiter bis Entwickler, sprechen so dieselbe Sprache, die auch vom Kunden verstanden wird. Anstelle der bisherigen Diskussion über einzelne Seiten treten Gespräche über wichtige Details, die allgemein gültig sind und in vielen verschiedenen Bereichen angewendet werden können.

 

Designsystem: der Gestaltungsansatz der Zukunft?

Auch wenn die Vorteile für sich sprechen, ist die Erstellung eines Designsystem nicht trivial. Damit die modular aufgebauten Designelemente effizient eingesetzt werden können, müssen spätere Anwendungsfälle berücksichtigt werden. Die Voraussetzung dafür ist eine intensive Auseinandersetzung des Designers mit den Use Cases und den User Journeys der Anwendungen. Sind diese erfüllt, bilden Designsysteme die Basis für eine optimale User Experience und garantieren ein zufriedenstellendes Markerlebnis – über alle Touchpoints. Die konsistente Anwendung und permanente Weiterentwicklung des Corporate Design stärkt zudem die Markenphilosophie und erhöhte die emotionale Identifizierung mit ihrem Produkt und Unternehmen.

Wie man ein codebasiertes Designsystem erstellt und wofür Atomic Kitchen steht? Mehr dazu in Teil 2.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.