Viele Unternehmen verwalten ihre User Experience und Brand Assets immer noch ohne Design-System. Dies führt häufig zu einem inkonsistenten Erscheinungsbild und Redundanzen in der Vorgehensweise.
Dabei wäre die State-of-the-Art-Methode weder teuer noch kompliziert. Im Gegenteil: Ein modulares, baustein-basiertes Vorgehen, bei dem zunächst einzelne Bausteine und Module über eine Designsystematik erstellt werden und dann erst die Anwendung, bietet viele Vorteile und spart Aufwand und Kosten.
Der Einsatz eines Design-Systems führt zu:
- einem einheitlichen und einprägsamen Markenerlebnis
- einer Verbesserung der Design-Qualität
- einer Reduzierung des Aufwands innerhalb des Qualitätssicherung und Pflege
Insbesondere mit einem «digitalen», d.h. web-basierten Design-System lassen sich alle visuellen Assets eines Unternehmens übersichtlich verwalten und digitale Produkte wesentlich einfacher entwickeln. Ein einmal erstelltes Design kann auf diese Weise systematisch weiterentwickelt werden. Kurskorrekturen und teure Relaunches werden weitgehend vermieden.
Ein Design-System schafft ein teamübergreifendes Verständnis für den Marken- und Designauftritt und hilft dem gesamten Unternehmen, ein einheitliches Erscheinungsbild bereitzustellen.
Ein paar Keyfacts für alle, die sich noch nicht so gut mit dem Thema auskennen:
- Ein Design-System deckt von der Farbpalette über Schriften bis hin zu ganzen Seitenvorlagen alle visuellen Aspekte einer Anwendung oder Marke ab.
- Bei einer mit dem Design-System verknüpften Pattern Library handelt es sich um eine Sammlung von Komponenten, die sofort einsatzbereit sind und in die Anwendungen und an den Touchpoints der Unternehmenskommunikation integriert werden können. Auf diese Weise wird die Implementierung digitaler Lösungen beschleunigt und eine konsistente User Experience über alle Touchpoints hinweg sichergestellt.
- Atomic Design ist eine Design-Methodik, die davon ausgeht, dass funktionierendes, also gutes Design modular aus Bausteinen aufgebaut sein muss. Weitere Informationen finden Sie hier: Atomic Design
Ein code-basiertes Designsystem schliesst die Lücke zwischen Design und Entwicklung
Ein code-basiertes Design-System ist ein mächtiger Werkzeugkasten, mit dem Designer und Entwickler gleichermassen Produkte in hoher Qualität und mit geringem Aufwand realisieren können. Das «Material Design» von Google ist eines der bekanntesten Beispiele für ein code-basiertes Design-System.
Bei einem code-basierten Design-System liegen alle Bausteine und Komponenten bereits in HTML, CSS und JS vor. Das heisst für die technische Umsetzung von Designkomponenten muss der Code nicht übersetzt werden. Das spart Zeit und Kosten und hilft Fehl-Interpreationen zu vermeiden, da ein solches System auf nativer Weise zeigt, wie sich Elemente verhalten, wenn sich die Grösse des Browserfensters ändert, wenn man mit der Maus darüberfährt oder klickt. Es gibt auf klare und selbsterklärende Weise das tatsächliche Look & Feel einer oder mehrerer Anwendungen wieder. Dadurch werden Korrekturschleifen und der Kommunikationsaufwand deutlich reduziert. Alle Designelemente können bereits vor ihrer eigentlichen Implementierung vollständig evaluiert oder von echten Benutzern getestet werden. Ein aufwändiges Prototyping des Frontends entfällt in der Regel somit auch.
Alle genannten Faktoren reduzieren die Kosten für die Entwicklung und Pflege einer digitalen Anwendung. Ich empfehle daher grundsätzlich, das visuelle Design einer Applikation oder Website mit einem modularen und code-basierten Design-System zu entwickeln, da sich diese Vorgehensweise sowohl ökonomisch als auch qualitativ sehr schnell amortisiert.
Die Vorteile auf einem Blick:
Konsistenz durch wiederverwendbare Module
Durch ein code-basiertes Design-System gibt es nicht nur feste Vorgaben für das Designteam und andere Partneragenturen, sondern auch verbindliche, bereits getesteten Code-Bausteine. Dadurch werden Widersprüche und Missverständnisse vermieden. Es stellt die einzige Quelle («Single Point of Truth») für gültige Regeln dar. Die Entwicklung von digitalen Produkten wie Apps, Software und Websites wird dadurch deutlich schneller, effizienter und kostengünstiger.
Einfache Verfügbarkeit, volle Kontrolle
Ein web-basiertes Design-System steht teamübergreifend rund um die Uhr zur Verfügung. So kann der iterative Projekt-Fortschritt vom Kunden mitverfolgt werden und alle Beteiligten haben zu jeder Zeit einen vollständigen Überblick über das Design, inklusive responsivem Verhalten, Interaktionsstatus und Mikroanimationen. Dadurch entfallen aufwändige Präsentationen weitgehend. Assets und Pattern können über eine AutoSuggest-Suche einfach gefunden und als Code oder Bilddatei heruntergeladen werden.
AtomicKitchen
Für die Erstellung code-basierter Design-Systeme verwende ich das von mir entwickelte Tool «Atomic Kitchen», mit dem sich modulare Designsysteme komfortabel erstellen und verwalten lassen. Dieses auf Wunsch passwortgeschützte System kann sowohl online als auch offline betrieben werden und stellt ein pixelgenaues und 100% responsives Design dar. Daraus können einzelne «Code Pattern» für die technische Umsetzung per Copy & Paste entnommen und zu fertigen Lösungen zusammengesetzt werden. Für den produktiven Dialog steht zudem eine Kommentar-/Dialogfunktion zur Verfügung, mit der alle beteiligten Stakeholder Feedback zu einzelnen Komponenten geben können.
Individuelle Entwicklung von Design-Systemen
Als erfahrener Partner im Aufbau von Design-Systemen kann ich auch für Ihr Unternehmen ein individuelles Design-System entwickeln, das genau Ihren Anforderungen entspricht. Sprechen Sie mich an. Gerne zeige ich Ihnen, wie Sie ein Design-System gewinnbringend in Ihren Workflow integrieren können, sei es für einen geplanten Website-Relaunch oder zur Verwaltung Ihrer UX- und Brand-Assets.