Design-Systeme: alles, was Sie wissen müssen

Seite 1 von 2: Design-Systeme: Alles, was Sie wissen müssen

Jeder, der im Bereich digitales Design arbeitet, muss inzwischen den Begriff „Designsysteme“ gehört haben. Sie können jedoch nicht sicher sein, was es bedeutet. In diesem Fall sind wir hier, um Ihnen zu helfen.

In diesem Artikel definieren wir genau, was ein Entwurfssystem ist, warum Sie eines verwenden, wie Sie eines erstellen und welche Tools Sie nützlich finden. Auf Seite 2 finden Sie einen tiefen Einblick in die Geschichte des Webs, um herauszufinden, woher die Designsysteme stammen.

Was ist ein Designsystem?

Ein Designsystem ist eine einzige Quelle der Wahrheit, die Designer und Entwickler gemeinsam erstellen, referenzieren und entwickeln. Es handelt sich um eine Regelmatrix, die aus einer Bibliothek von Symbolen besteht - Schriftarten, Symbole, Farben, Formen, Gitter, Animationen, Tonfall oder mehr -, die unterschiedliche Bedeutungen haben, die durch ihre Funktion und hierarchische Relevanz bestimmt werden.



Es handelt sich im Wesentlichen um einen lebenden Organismus aus Elementen, die sich von der Erfüllung bereits bestehender zu neu definierten Anforderungen entwickeln, wenn das Produkt komplexer wird. Diese Elemente werden in entwicklungsbereite Komponenten übersetzt, die sofort in einer Live-Umgebung aufgenommen und verwendet werden können.

Wer definiert ein Designsystem?

Designer und Entwickler arbeiten eng mit einem agilen Ansatz zusammen, um die Regeln eines Designsystems festzulegen. Designer definieren alle Aspekte der visuellen Kommunikation - Benutzeroberfläche, Branding und Benutzererfahrung -, während sie mit Entwicklern zusammenarbeiten, um diese Eigenschaften in codierte Komponenten umzuwandeln, indem sie sie konsistent iterieren, bis sie technisch und stilistisch in sich geschlossen sind.

Warum ein Designsystem?

Obwohl ein Designsystem eine Grundvoraussetzung für alle skalierbaren digitalen Produkte ist, sind im Kern Prinzipien, die für jede Designarbeit gelten. Der wichtigste Aspekt ist die Einführung einer Reihe von Regeln, die, wenn sie immer wieder wiederholt werden, immer wieder dieselben Prinzipien zurückgeben.

Auf die gleiche Weise sich anpassendes Webdesign wird als modularer Ansatz in Bezug auf das Verhalten von Inhaltsblöcken auf einer Webseite in verschiedenen Ansichtsfenstern betrachtet. Ein Entwurfssystem folgt einem atomaren Ansatz, indem es jedes bestimmte Element anspricht, das die Eigenschaften einer Komponente definiert.

Der Zweck der Einrichtung eines Systems besteht darin, über eine Bibliothek bewährter Komponenten zu verfügen, die konsistent wiederverwendet werden können und bei jeder Produktdimension - Stil, Branding, Verhalten, Funktion und Lieferung - voraussichtlich jedes Mal funktionieren. Der größte Vorteil eines Designsystems besteht darin, dass Prototypen effizient erstellt und sowohl Design als auch Code auf dem Weg zu einem qualitativ hochwertigen Produkt symbiotisch iteriert werden können.

Wie entwickle ich ein Designsystem?

Schauen wir uns nun die Schritte an, die Sie möglicherweise unternehmen, um ein Designsystem für ein digitales Produktprojekt zusammenzustellen.

01. Stellen Sie eine klare Produktvision auf

Zunächst müssen Sie eine klare Vorstellung von dem Produkt haben, das Sie entwickeln. Hier sind einige wichtige Fragen zu berücksichtigen:

Was tut es?

  • Was ist der Zweck Ihres Produkts?
  • Was sind die Anforderungen für dieses Produkt?
  • Welche Funktionalität benötigt das Produkt, um eine Leistung zu erbringen?

Für wen ist das?

wie man etwas in Photoshop abwählt
  • Wer ist das Publikum für dieses Produkt?
  • Hat der Benutzer irgendwelche Macken, die sich auf den Empfang des Produkts auswirken könnten?
  • Warum wird sich der Benutzer mit diesem Produkt beschäftigen? Was macht es einzigartig?
  • Ist der Benutzer mit ähnlichen Produkten vertraut?
  • Reagiert das Produkt auf einen erkannten Bedarf oder erstellt es einen neuen?
  • Geht es um Barrierefreiheit?

Wo wird es leben?

  • Ist dieses Produkt eine Website? Eine Web-App? Eine App? Etwas anderes?
  • Ist es geräteunabhängig?

Sollte es dieselbe Erfahrung plattformübergreifend liefern oder sich auf bestimmte Mikroerfahrungen in bestimmten Kontexten konzentrieren?

Der Zweck eines Entwurfssystems besteht darin, die Komplexität in der Entwicklung zu verringern, indem bekannte Probleme angesprochen und neue in der Konzeptionsphase identifiziert werden. Es ist wichtig, die Produktzuordnung frühzeitig im Prozess zu definieren, da dies dazu beiträgt, potenzielle Verzögerungen zu erkennen, die in der Prototyping-Phase vermieden werden können.

02. Erarbeiten Sie Ihren Angriffsplan

Zweitens müssen Sie den besten Ansatz bewerten. Wenn Sie an einem neuen Produkt arbeiten, beginnen Sie wahrscheinlich mit einem MVP (Minimum Viable Product), bei dem die Validierung der Funktionalität und das Lernen des Benutzerfeedbacks im Vordergrund stehen. In diesen Fällen ist es sinnvoll, vorhandene UI-Kits von etablierten Plattformen wie z Die Material-Benutzeroberfläche von Google oder Apples UI-Kit .

Die Material-Benutzeroberfläche von Google

Die Material-Benutzeroberfläche von Google verändert die Produktentwicklung durch eingehende grafische Erkundung und Open Source-Code

Wenn Sie die MVP-Phase hinter sich haben oder ein komplettes Design-System von Grund auf neu erstellen, informiert Sie Ihre Produktzuordnung, die wichtige Aspekte wie Informationsarchitektur, Sitemap und Benutzerreisen umfassen sollte, darüber, welche grundlegenden Funktionen zuerst behandelt werden müssen.

Wenn es sich bei Ihrem Produkt beispielsweise um eine E-Commerce-App handelt, welche Elemente müssen Sie während der gesamten Benutzerreise benötigen, um einen Kauf durchzuführen - von der Startseite über die Produktseite bis hin zur Kaufabwicklung und Bestellbestätigung? Ist es vertikale oder horizontale Navigation? Wie sehen CTAs aus: Sind sie Symbole, nur Text, haben einen farbigen Hintergrund? Welche Bildverhältnisse ziehen Sie in Betracht: Hochformat, Quadrat, Landschaft?

Indem Sie die Eigenschaften jedes Elements nach hierarchischen Funktionen adressieren, können Sie solide Grundlagen für progressive UI-Releases legen und so ein durchweg zuverlässiges System aufbauen.

03. Wählen Sie die richtigen Werkzeuge

Drittens sollte die Entwicklung eines Produkts immer ein integrativer Prozess sein, der von allen Beteiligten abhängt: Designern, Entwicklern, Produktbesitzern, Kunden und Benutzern. Zusammen bilden diese Personen ein Ökosystem, ein Testgelände, das das Designsystem auf dem Weg zur Endproduktlieferung prägen wird.

Da Fortschritte geteilt und manchmal in Echtzeit bearbeitet werden müssen, ist es wichtig, die Tools auszuwählen, die am besten zu Ihrem Workflow passen. Zum Glück haben wir die Qual der Wahl, wenn es darum geht Design- und Prototyping-Tools .

Die Entwicklung eines Designsystems ist ein kollaborativer Ansatz, der auf Prinzipien der Teamarbeit und Transparenz beruht. Es ist eine Verpflichtung zwischen Teams, die bereit sind, Fehler zu machen und daraus zu lernen, neue Wege zu finden, gemeinsam Innovationen zu entwickeln und insgesamt nur einen Kick für eine gut gemachte Arbeit zu bekommen, weil das Produkt funktioniert und die Erwartungen übertrifft. Welches ist das beste Gefühl der Welt.

Nächste Seite: Die Geschichte der Designsysteme

  • 1
  • zwei

Aktuelle Seite: Design-Systeme: Alles, was Sie wissen müssen

Nächste Seite Die Geschichte der Designsysteme