Stilistische Besonderheiten
Die visuellen, schriftlichen und verhaltensbezogenen Attribute wie Logos, Farbpalette, Ikonographie, Typographie, Stimme oder Tonfall fallen unter das Dach stilistischer Besonderheiten.
Moderne Designsysteme verwenden Design-Token, um die Verwaltung von Farben, Textstilen, Symbolen und mehr zu zentralisieren. Design-Token sind plattformneutrale Einheiten, die Design-Variablen speichern und anstelle von fest kodierten Werten wie Pixel- oder Hex-Werten verwendet werden, um die Konsistenz von UI und UX bei der Skalierung von Designsystemen zu gewährleisten.
Strukturelle Besonderheiten
Strukturelle Besonderheiten sind eine Zusammenstellung von UX-Design-Elementen (bestimmte Schaltflächen, Seitenvorlagen usw.) zur Erstellung benutzerfreundlicher Bildschirmdesigns mit kürzerer Durchlaufzeit.
Der atomare Designansatz ist eine der beliebtesten Methoden zur Beschreibung der Hierarchie von strukturellen Besonderheiten. Hier eine allgemeine Übersicht:
- Atome: Ein Atom ist die Grundeinheit einer Benutzeroberfläche. Ein einzelnes Formularfeld, ein Drop-down-Menü, eine Schaltfläche oder ein Symbol sind alles Atome.
- Moleküle: Ein Molekül ist eine kleine Gruppe von UI-Elementen, die zusammen als eine Einheit funktionieren – ein Cluster aus mehreren Atomen. Eine Sammlung von Formularfeldern oder eine zugehörige Schaltfläche zum Absenden kann ein hervorragendes Beispiel für ein Molekül sein.
- Organismen: Ein Organismus ist eine komplexere Einheit in der UX-Design-Hierarchie – ein Aggregat von Molekülen und Atomen. Beispiele für Organismen sind die Hilfsnavigation, die globale Navigation, der Hero Space und die Fußzeile.
- Vorlagen: Eine Vorlage ist ein wiederverwendbares Framework oder Design-Layout, das durch das Ansammeln von Atomen, Molekülen und Organismen entsteht. Zu den Standardvorlagen gehören die Startseite, die Produktlistenseite, die Produktdetailseite und der Warenkorb.
- Websites: Eine Website ist eine vollständig entwickelte und optimierte Version einer Vorlage. Wenn eine Vorlage mit Platzhaltern oder echten Inhalten wie Text, Bildern oder Werbeeinheiten angereichert wird, wird sie zu einer Website.
Code-Komponenten
Code-Komponenten sind ein Inventar produktionsfähiger Codes in dem ausgewählten Framework. Sie sind nach der Hierarchie des atomaren Designansatzes organisiert. Jedem Design-Atom, -Molekül, -Organismus und -Vorlage ist eine entsprechende Code-Komponente zugeordnet. Ausgefeilte Designsysteme tokenisieren Code-Komponenten, um Farben, Typografie, Abstände usw. zentral zu aktualisieren.
Standards
Um effiziente Designsysteme zu schaffen, sollten durchsetzbare Leitprinzipien, Nutzungsrichtlinien und Governance-Politiken vorhanden sein.
Die Leitprinzipien stellen sicher, dass Designobjekte und Code-Komponenten modular, zusammensetzbar, generisch, flexibel und zugänglich sind. Zu den Nutzungsrichtlinien gehören Regeln in Bezug auf Typografie, Farbpalette, Abmessungen und Abstände, Grammatik, Seitenverhältnisse, Schreibstil usw.
Governance-Politiken sind notwendig, um die gegebenen Standards auf Dauer aufrechtzuerhalten. Anstatt das herkömmliche IT-Governance-Modell zu implementieren, können Softwareentwickler einen wiki-ähnlichen Ansatz verwenden. Dies kann den Mitwirkenden die Freiheit geben, stilistische Besonderheiten, strukturelle Besonderheiten und Code-Komponenten auf einer Ad-hoc-Basis zu erstellen, zu aktualisieren und zu löschen, so dass die Produktteams das Design-System spontan verbessern können.
Um die Glaubwürdigkeit des Designsystems aufrechtzuerhalten, kann das Führungsteam neben den vierteljährlichen Überprüfungen auch Ergänzungen, Änderungen und Löschungen während einer wichtigen Veröffentlichung überprüfen.
Nutzen Sie bestehende UX-Designsysteme
Im Laufe der Jahre wurden verschiedene plattformbasierte und Open-Source-Designsysteme eingeführt, um ein leistungsstarkes UX zu gewährleisten. Für die Entwicklung von Apps auf einer großen Plattform ist es sehr empfehlenswert, diese bestehenden Designsysteme so weit wie möglich wiederzuverwenden. Die Designobjekte und Code-Komponenten dieser Systeme stützen sich auf umfangreiche Untersuchungen zum UX in Produktkategorien wie Kundenbeziehungsmanagement (CRM, Customer Relationship Management) und Warenwirtschaft (ERP, Enterprise Resource Planning).
Weisen Sie ein Team für Designsysteme zu
Behandeln Sie Ihr Designsystem wie ein digitales Produkt, indem Sie eine Produktführung einrichten, die aus einem Produktbesitzer, einem UX-Leiter und einem Entwicklungsleiter besteht.
Die drei Leiter können das Designsystem durch operative, gestalterische und technische Beratung verbessern. Das Team kann auch Mitwirkende wie UX-Designer, Content-Strategen, Front-End-Entwickler und Spezialisten für Barrierefreiheit haben, die jede Version des Designsystems bearbeiten.