PAGE online

Brandportale: Das müssen Tools für Designsysteme können!

Brandportale sind der Dreh- und Angelpunkt eines Designsystems. Wir beleuchten, was sie leisten müssen und welche Faktoren bei ihrer Auswahl eine Rolle spielen.

Designsystem-Analyse: Nach UX-Designerin Alla Kholmatova kann man ein System anhand dieser Parameter beschreiben: streng oder locker (bezogen auf die Verbindlichkeit der Regeln), modular oder integriert (bezogen auf den Aufbau des Systems), zentralisiert oder verteilt (bezogen auf das Management des Designsystems). Hat man sein Designsystem anhand dieser Parameter analysiert, lässt sich besser entscheiden, welches Brand-Management-System das passendste ist. Quelle:  https://designsystemsbook.com

Ein zeitgemäßes Brandportal stellt sämtliche Ge­staltungskomponenten und Designinformationen in einem Designsystem zur Verfügung, damit Teams in Unternehmen und Agenturen sowie bei externen Dienst­leis­tern abteilungsübergreifend und mög­lichst reibungslos konsistente, brand­konforme Produk­te und Services ge­­stalten und umsetzen können.

Der Beitrag erschien erstmals in PAGE 4.2020.

Um Widersprüche im Design zu vermeiden, gilt es als einzig verbindliche Quelle der Wahrheit – entsprechend ist die Rede von der »Single Source of Truth«. Sie ist unter einer bestimmten URL erreichbar, auf die alle Mitarbeiter jederzeit Zugriff haben.

Hinter dieser URL kann sich – je nach Unternehmensgröße oder der Anzahl der Pro­dukte und Nutzer – vom einfachen Wiki bis zum komplexen Markenportal mit umfangreicher Pattern Library alles verbergen. Entscheidend ist, dass der Brand Hub alle Markenelemente zentral vorhält und allen Beteilig­ten einen schnellen Zugriff auf diese ermöglicht.

Inhaltsverzeichnis

Um zu ermitteln, welche Design-Management-Plattform für das jeweilige Projekt die richtige ist, genügt es nicht, allein Preise und Features zu verglei­chen. Eine Vielzahl von Kriterien spielen zusam­men, etwa die Schnittstellen zu Bild- oder Content-Daten­banken, aber auch Art und Umfang der Versionskontrolle oder die Publishing- und Distributionsmöglichkeiten.

Zwar bleibt das grundlegende Feature ei­nes Brandportals das Digital Asset Management, kurz DAM: eine zentrale digitale Bibliothek, auf die Mitarbeiter oder externe Dienstleister kontrollier­ten Zugriff haben. Doch lagen hier bis vor Kurzem noch in ers­ter Linie Bilder, Videos, Audiodateien, Prä­sen­tatio­nen und PDF-Dateien, so gehören heute Kom­po­nenten-Libraries mit Living Styleguide, wiederverwendbaren Code-Snippets und UI Patterns sowie Guidelines zu ihrer Verwendung inklusive Do­kumen­tation genauso dazu wie Kollaborations­werk­zeuge für die teamübergreifende Zusammenarbeit sowie Analysetools, mit denen sich die Leistungs­fähigkeit der Marke messen lässt.

Zielgruppenanalyse: Elisa Pyrhönen, Lead Service Designer bei Idean in Helsinki, unterscheidet bei den Anwendergruppen eines Designsystems folgende Anforderungs­profile beziehungsweise Rollen

Eines der wichtigsten, praktischsten und zugleich kompliziertesten Features ist die Syn­chronisation von Design und Code im Brandportal. »Mit In­Vi­sion, dem Plug-in Craft und Sketch gelingt dies schon nahezu automatisch, wenn auch code­sei­tig noch nicht perfekt«, so Louis Henrich, Head of UX bei der Digitalagentur Cocomore in Frankfurt am Main.

Er schätzt auch die Vorteile von Design-Tokens-Bibliotheken. Denn diese erlauben die plattformunabhängige Pflege von CSS, was die Wartung des Designsystems vereinfacht. Dieser Meinung sind auch die 1800 Designsys­tem-Experten, die Googles Designteam gemeinsam mit dem Veranstalter der Designsystemkonferenz Clarity zum aktuellen Stand im Bereich Designsys­te­me befragt hat.

Adobe Spectrum – streng, modular, verteilt: Das recht neue, sehr modulare Designsystem Spectrum von Adobe bietet über den zentralen Hub Komponentenbibliotheken und UI-Design-Kits für Adobe XD mit integrierten Design Tokens. Das CSS-Repository liegt auf GitHub. https://spectrum.adobe.com

Welche Design-Manage­ment-Lösung? Kenne deine Teams

Ob für eine Website, für eine Mobile App, für Social-Media-Assets oder für gedrucktes Marketing­mate­rial:

»Der Vorteil von Design-Management-Systemen besteht darin, dass Designänderungen automatisch und konsistent in allen Kanälen schnell verfügbar sind«

sagt Oliver Bohl, Practice Leader der Reply Digital Experience und geschäftsführender Partner bei Triplesense Reply. Die Frankfurter Digitalagentur geht mit einem stark UX-zentrierten Ansatz an das Thema heran und berät Kunden wie BMW, Vorwerk oder Xella dabei auch technologisch.

Die Wahl der richtigen Design-Management-Lösung und der vorgelagerten Toolchain (siehe PAGE 04.2020, Seite 36 f.) ist auch eine Frage der Teamgröße und der Tätigkeitsprofile. »Ziel ist, dass die Projektleiter, Product Owner, das Marketing und die operativen Teams im Unternehmen oder bei Dienstleistern genauso wie die Designexperten mit dem System arbeiten können«, erklärt Oliver Bohl.

Im ersten Schritt werden die Designprozesse und Zielgruppenbedürfnisse analysiert und die verschiedenen Kanäle und Systeme, die der Kunde nutzt, sowie die Form der Zusammenarbeit intern und mit externen Dienstleistern ermittelt. Dann folgt die Entscheidung für die Toolchain und das Brandportal.

 

 

VW GroupUI – eher streng, modular, relativ zentralisiert: Der Automobilhersteller hostet sein modular aufgesetztes UI-Designsystem auf Frontify. Änderungen erfolgen in einem agil geregelten Prozess, für Wartung und Pflege ist ein eigenes Team zuständig (mehr dazu in PAGE 01.20). https://brandportal.man/d/e1wxOsAphP6K

Auf dieser Grundlage lassen sich An­wender­grup­pen definieren, denen man dann bestimmte Rollen zuweist. So differenziert Elisa Pyrhönen, Lead Service Designer bei der finnischen Agentur Idean, zwi­schen den Mitarbeitern, die für die Orchestrierung des Designsystems zuständig sind und entscheiden, was in das System hineindarf beziehungsweise was entfernt werden muss (»Kuratoren«), sowie den Nut­zern, die damit Produkte und Dienstleistungen gestalten (»Makers«).

Daneben gibt es diejenigen, die für den Support und die Erfolgsmessung zuständig sind (»Stakeholders«), sowie die Endkunden, die mit der Marke durch Produkt- und Serviceerfahrungen interagieren (»Customers«, siehe Grafik oben).

Anhand dieser Einteilung lassen sich mit der geeigneten Brand-Management-Lösung speziell an­ge­passte Interfaces und Inhalte an verschiedene Nut­zer­grup­pen ausliefern:

»Werksmitarbeiter in einem Industrieunternehmen benötigen beispielsweise einfache Module mit größeren Interaktionsflächen. Vertriebsmitarbeiter bevorzugen komplexere Module mit größerem Funktionsumfang«

kommentiert Oliver Bohl. Auch das Marketing profitiert: Aufmerksamkeit, Leads und Umsatz lassen sich mit der datengetriebenen Auslieferung von personalisierten Benutzeroberflächen durch ein Designsystem sowie mithilfe von Brand-Experience-Portalen wie Adobe Experience Cloud oder Brandbase erzielen.

Audi-Brandportal – eher streng, integriert, zentralisiert: Das von Strichpunkt entwickelte Designsystem ist sehr modular aufgebaut und bietet viele kombinierbare UI-Komponenten. Den Brand Hub hostet die Agentur in einem Open-Source-CMS auf ihrem Server, das Asset Management erfolgt über Adobes Experience Manager. www.audi.com/ci/en/intro/basics/rings.html

nach oben

Kenne dein Designsystem

Um die richtige Brand-Management-Lösung zu finden, kann es zudem helfen, das Designsystem selbst zu analysieren. So unterscheidet die UX-Designerin und Autorin Alla Kholmatova zwischen zentralisier­tem oder verteiltem Management, einem eher mo­du­laren oder stärker integrierten Aufbau sowie der Verbindlichkeit des Systems, also ob es eher strenge Regeln vorgibt oder sich locker handhaben lässt (sie­he Grafik ganz oben).

Während in einem zentralisierten Modell nur eine Person oder ein Team für das System verantwortlich ist und dieses weiterentwickelt, übernehmen in einem verteilten Modell mehrere Personen aus verschiedenen Teams diese Aufgabe. So ist zum Beispiel Googles Material-Design-System konzipiert.

Doch was dort offenbar gut funktioniert, kann bei weniger code- und webdesignaffinen Unternehmen schnell zu Unübersichtlichkeit, Wildwuchs und Fehlerla­wi­nen führen, wie sie Louis Henrich beim japani­schen E-Commerce-Giganten Rakuten erlebt hat: »Wenn sich bei 40 000 Modulen ein Fehler einschleicht, ist es fast unmöglich, die Ursache zu finden und zu kor­rigieren. Es muss jemanden geben, der bereit ist, die Verantwortung zu übernehmen. In einem dezen­tra­l organisierten Team findet man den nicht.«

Auch zu locker aufgesetzte Systeme wachsen ger­ne in unerwünschte Richtungen und riskieren inkonsistente Designs. Sehr strenge Vorgaben bei der Einhaltung von Richtlinien wiederum verlangen eine detaillierte Dokumentation und volle Synchroni­sa­tion zwischen Design und Code – eine sichere Variante, die Nutzer aber abschrecken kann, das System überhaupt zu nutzen oder weiter voranzutreiben.

Un­terscheiden muss man auch zwischen modula­ren Systemen, die gut skalierbar sind und sich recht schnell und flexibel an die Bedürfnisse verschiede­ner Benutzer anpassen lassen, und technisch stärker integrierten Systemen, die sich sehr auf den spe­ziel­len Nutzungskontext der Marke konzentrieren und stark mit Prozessen und vorhandenen Anwen­dun­gen verknüpft sind.

 

KWS BrandNet – eher streng, stark integriert, zentralisiert: Mit ihrer inhouse entwickelten Brand-Management-Lösung wirHub realisierte wirDesign das BrandNet für den Saatguthersteller KWS. Das Portal bietet unter anderem einen Logo- und Webbanner-Generator und richtet sich besonders an Nutzer aus Marketing und Design. www.wirdesign.de/DE/Arbeiten/KWS_BrandNet.php

nach oben

Maßgeschneiderte Lösungen für Brandportale

Je stärker das Designsystem mit den Workflows der Designer und Entwickler korrespondiert, desto ef­fek­tiver ist es, und obwohl sie in der Umsetzung wohl am anspruchsvollsten sind, gewinnen gerade eigens für den Kunden entwickelte Design­sys­teme und Brandportale an Bedeutung.

Diese Lö­sun­gen bieten den Vorteil, dass sich State-of-the-Art-Funk­tio­nalitäten wie Design-Token-Bibliothe­ken oder interaktive Prototypingtools sowie indivi­duelle Fea­tures in die Brandplattform integrieren lassen, wie etwa ein KI-basierter Brand Creator, der Design-Know-how in maschinenlesbare Algorithmen über­setzt und daraus Corporate-Design-gemäße Me­dien generiert (mehr darüber in PAGE 09.19).

Solche maßgeschneiderten Lösungen sind die Spe­zialität von Nico Wüst, Head of Design Systems bei der Agentur Strichpunkt in Stuttgart. Bei der Kon­zeption legt er besonders Wert auf Benutzerfreundlichkeit und einen didaktischen Ansatz:

»Statt sich erst mühsam durch ein dröges Regelwerk zu arbeiten, sollen die Nutzer schnell ins Machen kommen und dabei die Regeln verinnerlichen.«

Ein weiteres Argument: »Eine individuelle Plattform lässt sich an die bestehende IT-Systemlandschaft des Kunden anpassen und nahtlos integrieren.« So läuft etwa der Brand Hub von DHL über Adobes Experience Manager, weil das Unternehmen bereits damit arbeitete.

Für andere Kunden setzt die Agentur auf einfa­che­re Lösungen auf Open-Source-Basis. »Diese können wir problemlos für den Kunden auf unseren Ser­vern hosten, damit er nicht so abhängig von seiner bestehenden IT ist«, erklärt Nico Wüst. Einzelne Re­leases könne man von dort aus automatisiert auf dem Server des Kunden bereitstellen.

Lukas Cottrell, Managing Partner bei der Peter Schmidt Group, setzt bei der Frage nach Design-Ma­nagement-Tools auf den Best-of-Breed-Ansatz, bei dem man diverse Enterprise-Softwares zu einer um­fassenden Lösung vereint. Diese lassen sich ebenfalls nahtlos in bestehende Systemlandschaften integrieren, sind beliebig skalierbar, aber nicht so leicht austauschbar. Cottrell ist überzeugt:

»Ein Brandportal ist in ers­ter Linie ein Arbeitswerkzeug, das es Mitarbei­tern erlaubt, schnell verlässliche Arbeitsergebnisse zu erzielen. Niemand will sich hier erst durch Regelwer­ke durcharbeiten müssen. Aber: Online-Trai­nings, die Spaß machen, können eine sinnvolle Ergänzung sein«

Auch die Agentur wirDesign bietet ihren Kunden mit dem wirHub eine eigene Design-Management-Lösung an. Mit dem individualisierbaren Content-Management-System können Kunden nicht nur ihre weltweiten Markenaktivitäten von einem zentralen Punkt aus steuern, sondern dank eines integrierten Kollaborationstools auch länderübergreifend Trends und neue Ideen austauschen.

»Beim wirHub lassen sich Navigation, Features und User Interface auf die jeweilige Zielgruppe und ihre unterschiedlichen Bedürfnisse ausrichten, vom internen Anwender über die Druckerei bis zur Kommunikationsagentur«, so Johann Skierka, Senior Designer bei wirDesign. Zusätzliche Features und Funktionen kann die Agentur je nach Bedarf entwickeln und ergänzen – das geht oft schneller, als wenn man auf die Umsetzung bei einem großen Anbieter wartet.

So individuell wie ein Designsystem, so vielfältig sind die Brand-Management-Lösungen – doch einen wichtigen Faktor sollte man darüber nie vergessen: Technologien ändern sich rasant, insbesondere die Schnittstellen und Programmiersprachen.

Im Interesse der Langlebigkeit des Produkts sollte man al­le Komponenten möglichst allgemein halten, damit sie im Zusammenspiel mit vielen un­terschied­lichen An­wendungen funktionieren. ITler sprechen in diesem Zusammenhang von Agnostik: Wir können nicht wissen, welche Technik die anderen überlebt … Aber schauen Sie sich doch unsere Auswahl von Brand-Management-Lösungen an:

nach oben

6 Brandportal-Anbieter mit Web-to-Print-Schnittstellen

Für dezentral und eher modular aufgesetzte Design­systeme eignen sich externe Brand-Management-Systeme, die als Cloudservices verfügbar sind. Hier eine Auswahl mit Web-to-Print-Schnittstellen.

Brand Base
Als Software-as-a-Service(SaaS)-Lizenzmodell bietet Brand Base Module für Web-to-Print
und fürs Media Asset Management sowie einen Online-Marketing-Hub, mit dem sich alle Medienkanäle weltweit lokal indivi­dualisiert bespielen lassen. Es gibt ihn in einer Stand-alone-Variante im Pay-per-Use-Modell. Geeignet für Unternehmen ab 30 Standorten. Preise auf Anfrage.
www.brandad-systems.de

 

Brandbox
Die SaaS-Lösung, auf die auch Kunden wie Papyrus und La Biosthétique setzen, bietet umfassen­de Web-to-Print-Funktionalitäten für die personalisierte Zielgruppenansprache. Dank integrierter RESTful-Schnittstellen lassen sich Adressdaten aus CRM-Systemen direkt verarbeiten. Der Preis für bis zu 500 Nutzer inklusive Wartung, Pflege und Support: circa 1600 Euro im Monat.
www.brandbox.de

 

brandQ Web to Publish
Unter dem Label brandQ bietet CloudLab eine Web-to-Publish-Lösung im SaaS-Modell an, die dank modularer Architektur gut skalierbar und geeignet für große und größte Unternehmen ist. Im Abonnement kostet sie pro Nutzer 15 Euro monatlich. Bisherige Kunden sind unter anderem Canon, CEWE und Flyeralarm.
www.cloudlab.ag/de

 

censhare
Das Unternehmen mit Haupsitz in München bietet seine Content- und Brand-Management-Software als klassische Lizenz und cloudbasiert an. Sie eignet sich ab einer Belegschaft von 50 Mitarbeitern. Ab 1000 Euro monatlich gibt es zehn Lizenzen. Zu den Kunden gehören Vitra, Serviceplan oder REWE.
www.censhare.com

 

Frontify
Die Brand-Management-Lösung bietet neben Styleguides, Media Libraries, einem »Workspace« mit Funktionen für die Zusammenarbeit im Team und Pattern Libraries auch ein Publisher Tool, das neuerdings über eine Print-on-Demand-Integration verfügt. Basisfunktionen bis zu drei Nutzern und 1 Gigabyte Speicher sind kostenlos. Ab 30 Usern und einem erweiterten Funktionsumfang inklusive Publisher werden individuelle Enterprise-Lösungen angeboten. Der Preis hierfür variiert abhängig von Funktionsumfang, Nutzerzahl und Speicherkapazität. Der Startpunkt für eine individuelle Enterprise-Lösung liegt bei 1000 Dollar im Monat.
www.frontify.com/de

 

Wedia
Die auf der Amazon-Cloud gehostete Software bietet verschiedenste Module vom Digital Asset Manage­ment bis zum Distributed- und Content Scoring Management. Sie richtet sich hauptsächlich an große Unternehmen ab 1000 Mitarbeitern. Je nach Anzahl der Module und Anwender kostet die Nutzung rund 1000 Euro aufwärts im Monat.
www.wedia-group.com

nach oben

Designsystem-Toolchain zum Download

Ein Überblick über aktuelle Prototyping- und Kollaborationstools

Zur Entwicklung eines Design­systems braucht man neben den Designprogrammen vor allem auch solche Tools, die Designer und Entwickler näher zusammenbringen. Bislang gibt es keine Lösung, die die Lücke komplett schließt, sodass man eine Reihe von Werkzeugen zu einer Toolchain kombinieren muss.

Dr. Andrea Nutsi, Business Consultant mit Schwerpunkt auf UX Design beim Technologieberatungsunternehmen msg systems, hat für PAGE diverse Prototypingtools analysiert, die vom Anfang des Gestaltungsprozesses bis zum Austausch mit dem Development reichen und sich je nach Funktionsumfang und Größe des Projekts für verschiedene Designsysteme eignen.

Für jedes Designsystem die richtige Toolchain – hier geht’s zum Download

nach oben

PDF-Download: PAGE 4.2020

Designsysteme entwickeln & lebendig halten ++ Freelancing: Honorare, Akquise, Trends ++ CD/CI: Branding mit Schrift ++ Trauer & Tod in digitalen Zeiten ++ Making-of WebXR: Interaktives VR-Musikvideo ++ Kreativszene Vancouver ++ Extra-Booklet: Aus- und Weiterbildung

8,80 €
AGB

Schreiben Sie einen Kommentar

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

Das könnte Sie auch interessieren