{"id":1085,"date":"2023-11-11T12:32:06","date_gmt":"2023-11-11T11:32:06","guid":{"rendered":"https:\/\/thomas-sokolowski.de\/?p=1085"},"modified":"2023-11-15T09:23:19","modified_gmt":"2023-11-15T08:23:19","slug":"von-einem-code-basierten-designsystem-profitieren","status":"publish","type":"post","link":"https:\/\/thomas-sokolowski.com\/de\/von-einem-code-basierten-designsystem-profitieren\/","title":{"rendered":"Von einem code-basierten Designsystem profitieren"},"content":{"rendered":"\r\n

Ob <\/strong>Corporate<\/strong>-Website, Online<\/strong>-Shop<\/strong> oder <\/strong>Social Network<\/strong>, eine Marke <\/strong>muss sich auf vielf\u00e4ltigen<\/strong> Kan\u00e4len behaupten und \u00fcberall einen guten Eindruck hinterlassen<\/strong>. <\/strong>Dabei sollen <\/strong>Corporate-Design-Manuals und Styleguides helfen. Und immer mehr<\/strong> Unternehmen setzen auf Designsysteme. <\/strong>Was<\/strong> n\u00fctzen und wie funktionieren diese?<\/strong><\/p>\r\n

Unsere modernen Technologien f\u00fchrten zu einem Paradigmenwechsel in unserer Art zu kommunizieren. Die lange Zeit allgemeing\u00fcltige Informationseinheit \u00abSeite\u00bb l\u00f6st sich zusehends auf. An ihrer Stelle treten multimediale Benutzeroberfl\u00e4chen, in welchen wir mittels vielseitiger Interaktionsprozesse navigieren. Damit \u00e4ndern sich auch die Anforderungen an die Inhaltsdarstellung. Neben Lesbarkeit und \u00c4sthetik spielen vor allem Benutzerfreundlichkeit und Responsivit\u00e4t \u2013 das ist die Anpassungsf\u00e4higkeit der Inhalte in Bezug auf ihr darstellendes Medium \u2013 eine entscheidende Rolle. Aus Leser, Besucher oder Kunden werden \u00abBenutzer\u00bb.<\/p>\r\n

Dieser turbulente Wandel zwingt derzeit Kommunikationsdesigner dazu, ihre tradierten Entwurfs- und Entwicklungsmethoden neu zu bewerten und zu \u00fcberdenken, wie sie mit ihren Auftraggebern kommunizieren m\u00f6chten und was letztendlich die Ergebnisse ihrer Arbeit sein sollten.<\/p>\r\n

Als Konsequenz werden neben den bereits etablierten Content-Management-Systemen nun auch verst\u00e4rkt Design-Management-Systeme \u2013 oder kurz \u00abDesignsysteme\u00bb eingesetzt, die Inhaltsanbietern helfen sollen, den wachsenden kommunikativen Anforderungen, die Benutzer an digitale Services oder Produkte stellen, gerecht zu werden.<\/p>\r\n\r\n\r\n\r\n

 <\/p>\r\n\r\n\r\n\r\n

Worin liegt ihr Vorteil?<\/h2>\r\n

Ich denke, dass ich nicht viel Worte \u00fcber den positiven Einfluss, welches ein einheitliches sowie positiv empfundenes Markenerlebnis auf die Business Value eines Unternehmens aus\u00fcbt, verlieren muss.<\/p>\r\n

Jedem Marketingteam, jedem UX Professional ist es bewusst, dass ein stimmiges wie konsistentes Corporate Design einen enorm positiven Einfluss auf die Customer Journey hat. Neben der Produkt- und Servicequalit\u00e4t stellt es eines der vertrauenbildensten Faktoren in Bezug auf das Marken- bzw. das Nutzenversprechen dar. Es\u00a0 bestimmt nachhaltig die Reputation eines Unternehmens.<\/p>\r\n

Umso mehr \u00fcberrascht es mich, dass viele Unternehmen sehr wenig f\u00fcr die Qualit\u00e4tssicherung ihrer Design-Elemente und -Standards tun. Viele Methoden und Tools diesbez\u00fcglich sind h\u00e4ufig immer noch analog, bedienen sich digitale Br\u00fcckentechnologien (wie beispielsweise PDFs) oder sind durch signifikante Medienbr\u00fcche gekennzeichnet.<\/p>\r\n

H\u00e4ufig sind die Unternehmen an diesem Umstand nicht immer selbst schuld. Denn wenn man sich die Entwicklungs-Workflows vieler Digitalagenturen betrachtet, offenbart sich hier eine sehr tradierte und nicht mehr zeitgem\u00e4sse Vorgehensweise.<\/span><\/p>\r\n\r\n\r\n\r\n\r\n\r\n

\"Workflow<\/figure>\r\n\r\n\r\n\r\n

Die meisten Frontends grosser Websites werden immer noch \u00abSeitenvorlagen-basiert\u00bb erstellt. Dazu werden in der Regel Key-Templates, wie die Startseite, \u00dcbersichts- und Detailseiten bzw. andere notwendige Seiten und Content-Elemente designt \u2013 zun\u00e4chst \u00fcber Wireframes und letztendlich \u00fcber Mockups. Sofern das Budget es zul\u00e4sst wird zur Qualit\u00e4tssicherung neben einem Developer-Handoff gegebenenfalls auch ein Styleguide oder eine UI-Dokumentation erstellt, welche aber in den aller meisten F\u00e4lle nur bis zum n\u00e4chsten Relaunch der Website g\u00fcltig sind.<\/p>\r\n

Diese Vorgehensweise ist weder effizient noch nachhaltig. Viel besser w\u00e4re es, zun\u00e4chst ein modulares Designsystem zu entwickeln, welches Designer und Entwickler gleichermassen mit modularen Komponenten versorgt, mit denen sie dann \u2013 quasi via \u00abDrag & Drop\u00bb eine unbegrenzte Anzahl von Seitenvorlagen erstellen k\u00f6nnen. Erst danach erstellen die UI Designer mit diesen Komponenten die f\u00fcr die User Journeys notwendigen Seiten-Templates.<\/p>\r\n

Das reduziert nicht nur den Aufwand im Seitenerstellungsprozess und somit die Kosten der technischen Umsetzung, sondern f\u00fchrt auch zu einer integralen Harmonie und Konsistenz der dabei entstehenden Seiten.<\/p>\r\n\r\n\r\n\r\n

\"Workflow<\/figure>\r\n\r\n\r\n\r\n

Ein Designsystem unterscheidet sich von einem Styleguide dadurch, dass es ein Design schematisiert und schabloniert und damit eine systematische und modulare Vorgehensweise in der gestalterischen Konzeption von Artefakten erm\u00f6glicht. Deswegen sollte die Entwicklung eines Designsystems logischerweise eher am Anfang und nicht am Ende des konzeptionellen Prozesses stehen.<\/p>\r\n

Ein Designsystem hilft Kontinuit\u00e4t in den Gestaltungsprozess zu bringen \u2013 auch langfristig. Nichts alles muss bei jedem Relaunch \u00fcber Bord geworfen werden. Eine Evolution des Designs an den sich ver\u00e4ndernden Rahmenbedingungen ist sinnvoll. Komplette Br\u00fcche verunsichern Anwender und Verbraucher oftmals mehr, als sie n\u00fctzen.<\/p>\r\n

So ist ein Designsystem das ideale Werkzeug, wenn Designer, Entwickler und Stakeholder miteinander kommunizieren oder wenn verschiedene Teams oder Agenturen \u00fcber einen l\u00e4ngeren Zeitraum an einem komplexen Projekt zusammenarbeiten.<\/p>\r\n

\r\n

Ein Designsystem sollte f\u00fcr eine nachhaltige Nutzung angelegt und deswegen skalierbar sein. Es sollte mit den sich \u00e4ndernden Anforderungen wachsen und nicht mit dem n\u00e4chsten Relaunch seine G\u00fcltigkeit verlieren. <\/em><\/p>\r\n<\/blockquote>\r\n\r\n\r\n\r\n

H\u00e4ufig kennen unsere Auftraggeber weder die richtige Vorgehensweise noch ihre Vorteile. Hier stehen eigentlich die Agenturen in der Pflicht, ihre Auftraggeber auf die verschiedenen M\u00f6glichkeiten in der Konzeption komplexer digitaler L\u00f6sungen und deren Auswirkungen auf die technische Umsetzung und die Qualit\u00e4tssicherung ihres Coporate Designs hinzuweisen.<\/p>\r\n

So war es auch im Falle einer meiner Beauftragungen. Ich nahm 2019 an einem Pitch f\u00fcr den Entwurf eines Basis-Layouts f\u00fcr den Relaunch von etwa 50 Websites teil. Meine Agentur gewann den Pitch. Aber nicht indem wir unserem Kunden die Konzeption des gew\u00fcnschtem Basis-Layouts offerierten, sondern vielmehr indem wir die Entwicklung eines \u00abatomaren Designsystems\u00bb vorschlugen, aus welchem dann die 50 einzelnen Websites generieren werden konnten. Unserem Auftraggeber war schnell klar, welche Mehrwerte diese Vorgehensweise ihm generieren w\u00fcrde, n\u00e4mlich:<\/p>\r\n\r\n\r\n\r\n

    \r\n
  1. Die Entwicklung eines ganzheitlichen Designsystems garantiert ein einheitliches Markenerlebnis \u00fcber alle Touchpoints hinweg.<\/li>\r\n
  2. Damit lassen sich zuk\u00fcnftig digitale Produkte nicht nur schneller, sondern auch kosteng\u00fcnstiger entwickeln.<\/li>\r\n
  3. Designsysteme eliminieren Fehlerquellen und Redundanzen. Damit steigern diese nicht nur die Qualit\u00e4t der Touchpoints, sondern senken Sie den Qualit\u00e4tssicherungs-Aufwand und machen Ressourcen frei f\u00fcr die Verbesserung der Produkte.<\/li>\r\n<\/ol>\r\n\r\n\r\n\r\n

    Dennoch standen wir weiteren Herausforderungen gegen\u00fcber:<\/h4>\r\n\r\n\r\n\r\n