5 wichtige Schritte zum Aufbau des perfekten Designsystems
Wesentliche Schritte zum Aufbau eines Designsystems
Designsysteme sind eine Sammlung wiederverwendbarer Elemente, Elemente und Regeln, die als Richtlinie für das gesamte Team des Projektdesigns dienen. Es wird heute weithin als ein entscheidender Teil des UX-Designprozesses angesehen, der Gewicht hat, um den Benutzern ein erfolgreiches Erlebnis zu bieten.
In den letzten Jahren hat dieses System in vielen Ländern frischen Wind in die Produktdesignstrategien gebracht und ist weit mehr als die typischen UI-Leitfäden.
Wir hören viel über die Notwendigkeit, dieses System zu schaffen, wenn man die Konsistenz und andere Vorteile bedenkt, die es uns bietet.
Berühmte Unternehmen wie IBM und Airbnb haben ebenfalls eigene Designsysteme integriert, um die Kreation in ihren Teams zu beschleunigen und zu erleichtern.
Lassen Sie uns mit dieser kurzen Einführung zu einer detaillierteren Beschreibung von Designsystemen übergehen und herausfinden, wie es uns helfen kann.
Was genau ist ein Designsystem?
Ein Designsystem ist die umfassende Informationsquelle, die aus verschiedenen Elementen besteht, um Teammitglieder bei Produktdesign und -entwicklung zu unterstützen.
Damit können Sie alles, was mit dem Produktdesign zusammenhängt, in größerem Maßstab für mehrere Anwendungen erledigen. Das Gesamtergebnis dieser Richtlinien ist eine kohärente Ordnung in Systemen, die jeden einzelnen Schritt abdecken, von Aktionsschaltflächen bis hin zu einer Landingpage.
Was ist der Unterschied zwischen Designsystemen und Styleguides?
Typischerweise besteht ein Designsystem aus verschiedenen Elementen, die es zu einer zuverlässigen Quelle für verschiedene Anwendungen machen.
Was Sie in einem Styleguide finden, ist eine breite Palette von Farben, Logos, Schriftarten und anderen notwendigen Attributen für eine Marke. Design- und Marketingteams verwenden meist die Styleguides, aber ein Designsystem steht über den visuellen und Präsentationsaspekten.
Es ist eine Kombination aus Stil, Stimme und Komponenten, die entscheidend für die Verkörperung eines Systems sind.
Betrachten Sie die Leitfäden, die sich hauptsächlich darauf konzentrieren, wie Unternehmen mit ihrem Publikum sprechen sollten.
Dies unterscheidet sich von den regulären Styleguides, da sie Ihnen sagen, was zu tun ist und was zu vermeiden ist, um einem Menschen ein besseres Gefühl zu vermitteln und somit eine wertvollere Erfahrung zu hinterlassen.
In einfachen Worten, Sie können die Prinzipien, Anleitungen, Muster, Komponenten und Protokolle an einem Ort finden, der als Designsystem bezeichnet wird.
Warum sollte ein Unternehmen ein Designsystem haben?
Ein Designsystem ist eine dynamische Sammlung von Informationen, die sich mit den Produkten weiterentwickelt, wenn das Unternehmen expandiert oder sich die Kundenbedürfnisse ändern.
Erhöhte Produktivität und einfacher Zusammenarbeit sind zwei untrennbare Ergebnisse von Designsystemen in Teamarbeit. Sie können Unternehmen in vielerlei Hinsicht bei ihrem Wachstum helfen, und hier sind einige der wichtigsten:
Konsistenz
Unternehmen müssen oft für mehrere Plattformen entwerfen, während sie die Konsistenz der Interaktion und des Verhaltens zwischen ihnen beibehalten.
Je konsistenter Ihre Quellen sind, desto einfacher wäre es für Designer und Entwickler, eine qualitativ hochwertige Benutzeroberfläche zu implementieren.
Auf diese Weise können sie ein bestimmtes Produkt oder eine bestimmte Seite als Kombination bekannter Elemente betrachten. Bedenken Sie, dass Sie auf einer Landingpage eine CTA-Schaltfläche benötigen.
Anstatt die genauen Details zu Schriftart, Auffüllung, Farbe und Hintergrund zu beschreiben, bitten Sie sie einfach, Ihnen einen „primären CTA“ zu geben.
Dadurch wird verhindert, dass ein Produkt mit mehr als zehn verschiedenen Arten von Schaltflächenstilen, mehreren Designlayouts und unterschiedlichen Gefühlen und Looks angezeigt wird.
Aus einer anderen Sicht ergibt sich ein komponentenbasiertes und modulare Denkweise an Ihre Designer. Es ermöglicht ihnen, viel handlichere Elemente zu definieren und die erforderlichen Änderungen gemäß den Designanforderungen vorzunehmen.
Diese Konsistenz hinterlässt kein Endergebnis, sondern ein Produkt mit höherer Qualität, das auch die Überwachung des QS-Teams erleichtert.
Teamarbeit
Gehören Sie zu den Unternehmen, in denen mehrere Teams gleichzeitig an den Projekten arbeiten? Wenn dies bei Ihnen der Fall ist, kann die Einrichtung eines Konstruktionssystems die Zusammenarbeit zwischen den Teammitgliedern erheblich beschleunigen.
Diese Informationsquelle ermöglicht es Ihnen, viel Zeit bei der Erstellung neuer Projekte oder der Aktualisierung bestehender Projekte zu sparen, da die Benutzer einen besseren Zugang zu verschiedenen Ressourcen haben.
Außerdem wird die Kommunikation zwischen Designern und Entwicklern effizienter. Deshalb betrachten viele Designsysteme als Brücke zwischen diesen Disziplinen.
Ein Konstruktionssystem erhöht nicht nur die Produktivität der aktuellen Teammitglieder, sondern beschleunigt auch die Onboarding-Stufen von Neuankömmlingen.
Neue Designer oder Entwickler in Ihrem Team können sich viel schneller mit Ihren Werten vertraut machen und finden mühelos, was sie brauchen.
Welche Art von Designsystem brauchen wir?
Das zu befolgende Designsystem hängt stark von Ihrem Team und dem Produkt ab, das Sie produzieren möchten. Wir können es herausfinden, indem wir mit einigen einfachen Fragen beginnen.
- Wird das System von einem kleinen oder einem großen Team verwendet? Verstehen sie das Thema vollständig?
- Wie viele Produkte werden insgesamt ausgerichtet? Welche Plattformen und Technologien nutzen wir?
- Ist uns die Konsistenz aller Produkte wichtig oder nicht?
Die folgenden Grundsätze können uns diesbezüglich ein besseres Verständnis vermitteln.
Flexibel oder starr?
Zuallererst müssen Sie eine klare Vorstellung davon haben, ob Sie Raum für weitere Experimente lassen möchten oder nicht.
Ein flexibler Plan gibt allen Teammitgliedern eine allgemeine Richtlinie, die sie verwenden können, während er ihnen ein gewisses Maß an Freiheit bietet. Das bedeutet, dass Ihre Teammitglieder sowohl in der Design- als auch in der Entwicklungsabteilung es basierend auf ihren Anforderungen verwenden können.
Auf der anderen Seite umfasst ein starrer Plan eine detaillierte Dokumentation, die sowohl Designern als auch Entwicklern einen synchronisierten Plan bietet, dem sie folgen können.
Das Einbringen neuer Ideen oder Elemente in den Plan ist in strengen Systemen nicht einfach und sollte daher in erster Linie mit allen Überlegungen vorbereitet werden.
Der beste Ansatz besteht darin, eine Kombination aus Flexibilität und Starrheit zu verwenden. Manchmal sind Ihre Designer und Entwickler möglicherweise nicht so sehr daran interessiert, Ihr Designsystem zu verwenden, und wenn Sie sie dazu verpflichten, bleibt nichts anderes übrig, als sie zurückzudrängen.
Ein sehr lockeres System, das alles optional lässt, kann jedoch überhaupt nicht als Designsystem angesehen werden! Denken Sie also daran, das Beste aus beiden Welten herauszuholen, indem Sie Ihr Designsystem mit strengen und lockeren Systemplänen zusammen vorbereiten.
Modular vs. integriert
Modulare Systemdesigns werden heute in verschiedenen Branchen weit verbreitet verwendet. Es wird am besten empfohlen, in Projekten verwendet zu werden, die die Anforderungen mehrerer Benutzer erfordern und in kurzer Zeit skaliert werden sollten.
Die Implementierung solcher Systeme erfordert jedoch oft höhere Budgets, da die Herstellung unabhängiger Teile, die effizient zusammenarbeiten können, eine anspruchsvolle Aufgabe ist.
Es wird oft in weitreichenden Projekten wie großen Online-Shops oder staatlichen Websites verwendet.
Ein integriertes System hingegen konzentriert sich hauptsächlich auf einen einzigen Kontext. Obwohl es aus einigen Teilen besteht, können diese ersetzt oder austauschbar verwendet werden.
Es ist für Systeme geeignet, die nicht so viele sich wiederholende Elemente enthalten.
Wie baut man ein Designsystem?
Der Start eines Designsystems für Ihr Unternehmen kann sich am Anfang äußerst entmutigend anfühlen. Es gibt eine Vielzahl von Punkten, die zu berücksichtigen sind, und ein Designsystem kann nicht über Nacht erstellt und in die Tat umgesetzt werden.
Im Allgemeinen liegen zwei Fälle vor uns, ein ganz neues Projekt zu starten oder mit den Produkten zu arbeiten, die wir derzeit haben. Der Gesamtansatz ist fast der gleiche, aber letzterer umfasst mehr Schritte.
Bei einem neuen Projekt sollten Sie zunächst verschiedene Beispiele überprüfen, die Elemente und Konzepte enthalten. Suchen Sie nach den Designs, die Sie zufrieden stellen können, und verwenden Sie dann bestehende beliebte Prinzipien, um Farben und Formen für verschiedene Teile zu entwickeln.
Falls Sie bereits mit einem Projekt arbeiten, ist der erste Schritt die Erstellung einer Bestandsaufnahme von Elemente der Benutzeroberfläche.
Auf diese Weise können Sie die Unterschiede und Ähnlichkeiten zwischen ihnen analysieren und somit zusätzliche Optionen reduzieren.
Jetzt können Sie sie basierend auf ihrer Anwendung effizient gruppieren und die verfügbaren Tools verwenden, um den Prozess zu beschleunigen.
Als allgemeines Verfahren sind die wichtigsten Schritte zum Erstellen eines solchen Systems wie folgt.
Analysieren Sie, was Sie haben
Der beste Weg, um zu entscheiden, welches Designsystem implementiert werden soll, besteht darin, den bestehenden Ansatz zu überprüfen, den Sie für Ihre Designs angewendet haben. Beginnen Sie damit, die Prozesse herauszufinden, denen Sie folgen, und die Tools, die Sie zu diesem Zweck verwenden.
Bewerten Sie auch, wie leicht Ihre Produktteams Designaspekte verstehen können, um die erforderliche Zeit für die Einführung des Designsystems abzuschätzen.
Als nächstes identifizieren Sie das Alphabet, das Sie für Ihre Marke verwenden.
Dieser allgemeine Begriff umfasst die Produktwerte sowie die von Ihnen verwendeten Farben, Stimmen und Schriftarten. Sie können auch die Richtlinien Ihrer Marke überprüfen und sich bei der Arbeit an Designprinzipien auf diese Datenerhebung beziehen.
Visuelle Aspekte untersuchen
Das Letzte, dem Sie jemals begegnen möchten, ist die Duplizierung von Designs. Dies führt zu Inkonsistenz, was zu einer geringeren Qualität der Projektergebnisse führt.
Führen Sie eine visuelle Prüfung durch, um die Duplikate zu identifizieren und alle zugehörigen Komponenten im Produkt zu klassifizieren. Dieses Audit hilft Ihnen nicht nur, die Inkonsistenzen innerhalb des Produkts zu finden, sondern auch die wichtigsten und verwendeten Elemente darin.
Sie können diesen mehrstufigen Prozess beginnen, indem Sie mithilfe des CSS-Stats-Tools die Anzahl der eindeutigen Farben und Schriftarten in Ihrem CSS ermitteln.
Da Sie nun eine bessere Vorstellung von Ihrem Styling haben, können Sie nach den Komponenten suchen.
Hier können Sie die Atomic Design-Website verwenden, auf der Sie, wie der Name schon sagt, eine Aufschlüsselung der kleinsten Elemente finden, die auf einer Webseite vorhanden sind.
Designsprache und Muster erstellen
Ihre Designsprache ist das Herzstück des Designsystems, das Sie verwenden möchten. Eine großartige Benutzererfahrung kann erreicht werden, indem man klar versteht, warum Designentscheidungen getroffen werden.
Ihre Designprinzipien sollten eine verständliche Antwort auf Fragen dazu geben, was Sie bauen, den Grund dafür und die Methodik, die Sie dafür verwendet haben. Eine Designsprache sollte aus vier Hauptteilen bestehen.
Farbe
Üblicherweise werden zwei oder drei Hauptfarben verwendet, um die Identität einer Marke darzustellen. Wenn Sie Ihren Designern mehr Möglichkeiten bieten möchten, fügen Sie Farbmischungen, Schattierungen und Tönungen hinzu.
Schriftarten
Ein richtiges Designsystem besteht oft aus zwei Schriftarten; eine für Überschriften und Hauptteil und eine andere für Codes. Vermeiden Sie mehrere Schriftarten, da dies Ihre Benutzer nur ohne positive Ergebnisse verwirrt. Ebenfalls, Auswahl der richtigen Schriftart für die Website kann schwierig sein, also achten Sie darauf.
Abstand und Dimensionierung
Die Abstände und Ränder, die Sie auf Ihren Seiten verwenden, erscheinen am günstigsten, wenn sie ausgeglichen sind. Die Entscheidung für Systeme, die voll kompatibel mit Smartphones sind, wird in dieser Hinsicht mittlerweile ein Muss.
Metaphorik
Ihre Bilder sollten ebenfalls nach Richtlinien erstellt werden. Legen Sie einige Regeln und Pläne für Ihre Marke fest und halten Sie sich um jeden Preis daran.
Jetzt ist es an der Zeit, in die tatsächlichen Komponenten einzutauchen, die in Ihrer Benutzeroberfläche verwendet werden. Erstellen Sie eine Bibliothek aus den Teilen und Teilen, die Sie haben, die jede einzelne Schaltfläche, jedes Bild und sogar Ihre Formulare enthält.
Bewerten Sie sie basierend auf Ihren genauen Anforderungen, führen Sie die ähnlichen zusammen und entfernen Sie die zusätzlichen Elemente, um den Entscheidungsprozess zu vereinfachen.
Regeln und Strategien festlegen
Wie bereits erwähnt, besteht das ultimative Ziel eines Designsystems darin, die Kreativität auf ein höheres Niveau zu heben.
Wir haben in den vorherigen Abschnitten erwähnt, dass Ihre Regeln eine Kombination aus strengen und lockeren Regeln sein sollten, damit die Kreativität der Teammitglieder nie auf eine einzige Richtung beschränkt ist.
Unter Berücksichtigung der Dynamik eines Konstruktionssystems sollten Sie festlegen, wie Sie langfristig mit Veränderungen umgehen.
Eines der populären Modelle beschreibt drei Ansätze für eine Governance-Strategie – einzeln, zentral und föderiert.
Beim Solitärmodell trifft eine verantwortliche Einzelperson oder eine Gruppe alle Entscheidungen bezüglich des Entwurfssystems.
Das zentralisierte Modell bezieht sich auf Bedingungen, unter denen ein Team für das Geschehen im System verantwortlich ist. Und das föderierte Modell bedeutet, dass mehrere Personen aus verschiedenen Teams für das System verantwortlich sind.
Viele halten das Solitärmodell für die riskanteste Wahl, da eine Person für alles entscheidet, was in vielen Fällen die Erledigung von Aufgaben verhindern kann.
Organisationen, die über ein Team verfügen, das für die Aktualisierung und Änderung des Systems verantwortlich ist, sollten eng mit anderen in Kontakt bleiben, um das System vielseitiger zu machen.
In Anbetracht der Beteiligung mehrerer Teams am Verbundmodell können sich die Mitarbeiter viel schneller an Veränderungen anpassen. Dennoch ist ein Teamleiter erforderlich, um den Gesamtfortschritt zu kontrollieren.
Jede dieser Optionen hat Vor- und Nachteile, und die Wahl des Modells liegt ganz bei Ihnen.
Sie können eine Kombination aller Ansätze in Ihrem Team implementieren, aber egal was Sie tun, behalten Sie immer die Beteiligung der Teammitglieder an Ihrem System im Fokus und ermutigen Sie sie, ihre Ideen zu diskutieren.
Fazit
Designsysteme sind keine Zukunftsvisionen mehr. Ein Designsystem ist ein Gesamtpaket an Gestaltungsnotwendigkeiten, das immer mehr zur Grundlage von Produktstrategien in Unternehmen wird.
Je besser die Integration mit Designern und Entwicklern möglich ist, desto bessere Ergebnisse werden erzielt. Dieses System stärkt designorientierte Aktivitäten und entwickelt sich im Laufe der Zeit weiter.
Daher sollten wir sie parallel zu Produktänderungen und -entwicklungen kontinuierlich aktualisieren.
