Designsystem – Teil 1

Was ist ein Designsystem?

Ein Designsystem ist eine Sammlung von Richtlinien, Standards und Regeln in Bezug auf Design. Ein Designsystem stellt sicher, dass das gesamte Produkt einheitlich ist.

Durch ein zentralisiertes Designsystem können Unternehmen sicherstellen, dass alle ihre Produkte und Plattformen ein einheitliches Erscheinungsbild haben, was dazu beiträgt, die Markenbekanntheit und das Vertrauen der Benutzer zu stärken. Darüber hinaus kann ein Designsystem dazu beitragen, die Design- und Entwicklungszeit zu verkürzen, die Kosten zu senken und die Skalierbarkeit von Produkten im Laufe der Zeit zu verbessern.

Das Designsystem umfasst die folgenden Elemente

Beschreibung des visuellen Elements: Farben, Typografie, Formen, Schatten, Tabellen, Modalitäten usw.

Richtlinie: Rand und Abstand (ideal, wenn Sie ein Rastersystem definieren).

Komponenten: Sammlung wiederverwendbarer Assets wie Schaltflächen, Links, Tags, Registerkarten, Eingabefelder, Suche, Dropdowns, Datumsauswahl, Tooltips.

Bedeutung des Designsystems

Eine einzige Quelle: Einer der wichtigsten Aspekte in einem Designsystem ist die Dokumentation. Es bietet Designern, Entwicklern und anderen Interessengruppen detailliertes Designwissen.

Geschwindigkeit und Qualität: Designsysteme unterstützen Teams dabei, schneller zu arbeiten, Konsistenz zu wahren und die Produktqualität im Laufe der Zeit zu verbessern. Für Designer ist es nicht notwendig, etwas von Grund auf neu zu erstellen. Außerdem wird sichergestellt, dass das gesamte Produkt einheitlich ist.

Zusammenarbeit: Designsysteme können auch dazu beitragen, die Zusammenarbeit zwischen Designern und Entwicklern zu erleichtern. Durch die Bereitstellung eines gemeinsamen Rahmens für das Design können Designer und Entwickler effizienter und effektiver zusammenarbeiten und so das Risiko von Missverständnissen oder Verwirrung verringern.

Effizienz: Es steigert die Teamleistung. Designer verwenden bereits vorhandene Designelemente/Komponenten aus dem Designsystem. Dies ermöglicht es Designern, sich auf wichtigere Dinge zu konzentrieren und nicht darauf, wie eine bestimmte Schaltfläche aussehen soll.

Unterschied zwischen Designsystem und Styleguide

Ein Styleguide ist eine „Unterklasse“ im Designsystem. Der Styleguide konzentriert sich hauptsächlich auf den Stil, wobei das Designsystem mehr als nur eine visuelle Präsentation ist; Es konzentriert sich auf das Ökosystem.

Planung für Designsystem

Eine Roadmap für ein neues System deckt möglicherweise nur die Grundlagen ab, z. B. visuelles Design (z. B. Farbe und Typografie), wichtige Elemente der Benutzeroberfläche (z. B. Schaltflächen und Formulare) und die Teile, die zum Erstellen typischer Präsentationen erforderlich sind (z. B. „Erste Schritte“ usw.). ein Layout-/Rastersystem).

Wir können das Designsystem in 3 Stufen planen.

1. Recherche: Erstellen Sie eine Liste aller einzelnen Designelemente und sehen Sie, was Sie haben. Sie können verschiedene Arten von Eingabefeldern, Schaltflächen mit unterschiedlichen Variationen von Farben, Symbolen und anderen verschiedenen Dingen entdecken. Alle designbezogenen Informationen können in drei Kategorien sortiert werden.
   A. Visuals: Farben, Typografie, Raster, Abstände und Ränder usw.
   B. Wiederverwendbare Assets: Schaltflächen, Links, Eingabefelder, Modalitäten, Tabellen, Tags, Registerkarten, Tooltips, Navigationsfeld, Suche, Optionsfeld, Kontrollkästchen, Datum Picker usw.
   C. Effekte: Mikroanimation, Schatten, Karte und Ränder.

3. System pflegen: Änderungen im System im Laufe der Zeit verwalten. Aktualisieren Sie von Zeit zu Zeit jede einzelne Änderung an Assets oder fügen Sie neue Assets im Designsystem hinzu.

Ich hoffe, dass Ihnen diese Informationen gefallen werden. Im nächsten Blog werden wir sehen, wie man ein Designsystem erstellt. Dann schauen Sie beim Blog „Building Design Systems: Teil 2“ vorbei!