So implementieren Sie komponentenbasierte Designsysteme

Wenn Sie an die Erstellung einer robusten Website oder Anwendung denken, fallen Ihnen zwei wichtige Personengruppen ein, die dies ermöglichen: Designer und Entwickler. Beide sind für die Schaffung benutzerfreundlicher Erlebnisse verantwortlich, aber sie tun dies auf unterschiedliche Weise. 

Die Stellenbeschreibung von Designern und die von Entwicklern sind nicht dieselben, keineswegs. Einfach ausgedrückt: Der eine entwirft und der andere setzt ihn durch Code um.

Sie sind nicht gleichbedeutend miteinander. 

Kann ihre Arbeit gleichbedeutend werden?
Kann sie austauschbar sein?
Kann der eine die Arbeit des anderen ausführen?

Ja, das ist möglich. Und die Antwort liegt in komponentenbasierten Designsystemen, bei denen Designer nicht von Entwicklern abhängig sein müssen, um neue Landingpages zu erstellen, da sie bereits über Komponenten verfügen, mit denen sie arbeiten können.

Wie funktioniert der komponentenbasierte Designansatz?

Designsysteme sind die neue Art, Webdesigns und Produkte über ein gemeinsames Medium zwischen Designern und Entwicklern zu erstellen. Durch die Verwendung vorgefertigter Komponenten, die als Bausteine für die gesamte Website dienen, können Websites und Anwendungen modularer mit wiederverwendbaren Elementen gestaltet werden. 

Komponentenbasierte Designsysteme haben einen Wandel in der Erstellung digitaler Produkte mit sich gebracht, die auf jede gewünschte Art und Weise zusammengesetzt, angeordnet und zusammengefügt werden können.

Diese Komponenten beinhalten auch, was Ihre Seite darstellen soll. Es könnte ein Textblock, ein Kontaktformular, eine CTA-Schaltfläche oder ein ganzes Banner mit Fotos sein. Inhalt oder Grafiken, Sie haben die Wahl.

Nun komme ich zu der anfänglichen Frage, die ich gestellt habe, und beantworte sie.

Da die Komponenten bereits programmierte Segmente einer Seite sind, wird es für die Designer äußerst einfach, selbst ein reibungsloses Benutzererlebnis zu gewährleisten. Sie erhalten die Dinge, die funktionieren, und erstellen das Endprodukt mit einer klaren Begründung, die das Design erfordert.

Komponentenbasierte Designsysteme haben die Fähigkeit, konsistente Designs zu erstellen, die mit der Marke übereinstimmen. Sie stärken nicht nur Designer, sondern ebnen auch den Weg für skalierbarere Produkte. Mehr über komponentenbasierte Designsysteme finden Sie hier.

Die vorteilhafte Saga des komponentenbasierten Designs

Wie ich bereits sagte, bringt das komponentenbasierte Design der Welt der digitalen Designs mehr. Lassen Sie uns ein besseres Verständnis dafür bekommen, was mehr bedeutet.

Bringt Konsistenz

Redundanz in Designs;
Schwer zu verfolgende Änderungen;
Veraltete Stile;
Vergessene Funktionalitäten; 

All dies sind Probleme, mit denen Designer, Entwickler und Content-Editoren konfrontiert sind, wenn sie die Konsistenz der Markenstimme auf der gesamten Website aufrechterhalten müssen. 

Was wäre, wenn die Markenidentität und die Styleguides in jede Komponente jeder Seite integriert wären? Würde dies die Konsistenz nicht überall drastisch verbessern? In jedem Stil, jeder Funktion, jedem Design und der gesamten Marke?

Das würde es sicherlich. 

Komponentenbasierte Designsysteme tun genau das. Sie schaffen Raum für absichtliche und vorgefertigte Strukturen und Prozesse, die sicherstellen, dass die richtigen Komponenten verwendet werden. Sie dienen als Referenzen für Stile und Funktionen, die auf der gesamten Website verwendet werden. So wird Konsistenz erreicht, unabhängig davon, wie viele Designer oder Entwickler am Aufbau beteiligt sind.

Vereinfacht die Verwaltung 

Eine komponentenbasierte Website besteht ausschließlich aus Komponenten, was bedeutet, dass jedes Segment auf dieser Website eine Komponente ist und die Möglichkeit einer Wiederverwendung hoch ist. 

Wenn Sie also Ihre Website pflegen, pflegen Sie im Wesentlichen diese einzelnen Komponenten. 

Sie können Änderungen verwalten, indem Sie winzige Änderungen oder drastische Aktualisierungen an den Designs vornehmen. Und Sie können all dies mit einer einzigen Quelldatei derselben Komponenten tun. Die Tatsache, dass jede Komponente mehrere Anwendungsfälle auf mehreren Seiten hat, würde eine einzige Änderung, unabhängig davon, wie groß oder klein sie ist, an der gesamten Anwendung vorgenommen.

Ermöglicht Effizienz und Skalierbarkeit

Wenn Sie ein Designsystem erstellen, müssen Sie wissen, dass Sie in Zukunft mit vorhandenen Komponenten arbeiten werden. Jede Komponente hat nach dem Bau eine lange Lebensdauer, da sie zusammen mit ihren Variationen wiederverwendet wird.

Diese Tatsache über komponentenbasierte Designs macht sie effizient. Warum?

Da Entwickler in Zukunft keine Änderung neu implementieren müssen. Das Designsystem wird immer breiter sein als seine aktuelle Implementierung. Seine Bewertung und sein Aufbau machen es prägnant für die Anwendung. 

In Anbetracht dessen fördern komponentenbasierte Designsysteme auch die Skalierbarkeit. 

Sie können vorhandene Komponenten sehr einfach erweitern oder einfach neue Segmente zusammenstellen. Die Arbeit mit einem System, das extrem gut definiert ist, macht die Skalierung bequem, da Sie darauf aufbauen können. 

Eine andere Möglichkeit, dies zu verstehen, ist, dass Sie eine Komponentenbibliothek haben, die mit Ihrer Website weiter wächst. Diese klar verständlichen, wiederverwendbaren und flexiblen Komponenten machen die Erweiterung Ihrer Plattform bequem.

Erhöht die Modularität 

Jede Komponente in einem Designsystem wird immer von Grund auf neu aufgebaut. 

Dies erleichtert den Entwicklungsprozess, da jede Komponente integrierte Variationen aufweisen kann. Sie werden nicht einfach auf einer einzelnen Seite angebracht und werden für anderswo obsolet.

Komponenten sind von Natur aus anpassungsfähiger und weniger starr, wenn überhaupt. Sie können für jeden Inhaltsbereich verwendet werden, sei es eine bestimmte Kampagne oder eine permanente Anzeige. Mit diesen können Sie Iterationen Ihres Layouts im laufenden Betrieb testen und gleichzeitig die Konsistenz der Markenstimme beibehalten.

Fördert die funktionsübergreifende Zusammenarbeit 

Komponentenbasierte Designsysteme sind zum Inbegriff der Zusammenarbeit geworden. Basierend auf dem, was ich bisher geschrieben habe, ist es ziemlich offensichtlich.

Ihre Organisation hätte keine operativen Silos, wenn Sie Designsysteme eingerichtet hätten. Inhalt, Design und Entwicklung können zusammenarbeiten, und das auch noch kohärent. Der Ansatz von Designsystemen in Bezug auf Design und Ausführung macht dies möglich, da er vereinheitlicht wird. 

Aufbrechen des Designsystems 

Die nächste Phase von Designsystemen besteht darin, zu verstehen, was von ihnen umfasst wird. Natürlich wird es die Designprinzipien geben. Das ist selbstverständlich, denn Konsistenz braucht ein Regelwerk. 

Diese Prinzipien sind genau Regeln und Werte, die Designteams helfen, ihre Designs voranzutreiben. Sie könnten so einfach sein wie;

Die Benutzererfahrung einfach gestalten;
Konzentrieren Sie sich auf das Erzählen von Geschichten;
Erstellen Sie ein Multi-Device-Layout.

Es gibt keine Standardsätze von Designprinzipien, die mit diesen Systemen einhergehen. Es ist Ihre Marke, die sie basierend auf ihren Bedürfnissen entschlüsseln würde.

Kommen wir nun zum spezifischeren Teil.

Styleguide 

Farben;
Typografie;
Logos;
Tonfall;
Und spezifische Front-End-Stile;

All dies fasst einen Styleguide zusammen. Sie unterscheiden auch eine Marke, verleihen ihr eine Identität und heben sie von ihren Pendants ab. 

Styleguides erreichen dasselbe, indem sie Richtlinien für Branding, Inhalte und interaktive Elemente auf der Website festlegen. Die Design-Deliverables werden aufgrund von Styleguides und der spezifischen Implementierungsmethodik, die sie festlegen, konsistent.

Sie können auch als Teil einer Komponentenbibliothek geliefert werden, sodass jedes Element darin relevante Anleitungen und Kontext hat, um es voranzutreiben.

Komponentenbibliothek 

Sie können es eine Komponentenbibliothek oder eine Designbibliothek nennen, was auch immer Sie tun, es wird immer ein Geschäft für Designer und Entwickler sein.

Komponentenbibliotheken ermöglichen es dem Entwicklungs- und Designteam, UI-Elemente einfach zu verstehen und zu implementieren. Sie sind gründlich, da jede Komponente, die für das System entwickelt wurde, mit vorgegebener und wiederverwendbarer Funktionalität darin enthalten wäre. 

Es ist offensichtlich, dass eine Komponentenbibliothek die visuellen Darstellungen jeder einzelnen Komponente enthält. Was nicht offensichtlich ist, ist, dass sie viel organisierter und umfassender ist als das. 

• Komponentenname mit Einzigartigkeit für jede Komponente; 
• Beschreibung mit einer prägnanten Erklärung der Komponenten und ihrer Verwendung; 
• Attribute für zukünftige Anpassungen mit dem Bereich der Variablen und Anpassungen, die vorgenommen werden können;
• Komponentenzustand zur Empfehlung von Standardänderungen;
• Code-Ausschnitte jeder Komponente;
• Und schließlich die Frontend- und Backend-Frameworks für die Bibliotheksimplementierung. 

Eine Komponentenbibliothek ist so vielfältig und vielseitig, dass sie Entwicklern auch helfen kann, schmerzhaftes und redundantes Debugging zu vermeiden.

Musterbibliothek 

Inhaltsstrukturen;
Layouts;
Designvorlagen; 

Dies ist der Kern einer Musterbibliothek, die sich von einer Komponentenbibliothek unterscheidet, wie wir im vorherigen Unterabschnitt besprochen haben. Daher muss die allgemeine Fehlvorstellung, dass beide gleich sind, vergessen werden.

Anstelle einzelner UI-Komponenten einer Komponentenbibliothek bietet eine Musterbibliothek Sammlungen von Elementgruppen und Layouts. Abgesehen davon sind sie ähnlich, in dem Sinne, dass beide robust sind und für ihre Komponenten und Muster angepasst und wiederverwendet werden können. Mehr über die Implementierung von Musterbibliotheken finden Sie hier.

Zusammenstellung eines Designsystems 

Basierend auf dem vorherigen Abschnitt müssen Sie ein grundlegendes Verständnis dafür erhalten haben, wie ein komponentenbasiertes Designsystem zusammengestellt wird. 

Sie müssten bauen;

Einen Styleguide; 
Eine Komponentenbibliothek;
Und eine Musterbibliothek für Ihr System.

Wenn wir also über die Montage sprechen, werden wir diese nicht besprechen, sondern das größere Bild, das die einzelnen Builds übersteigt.

Hier ist es.

Bewerten Sie den aktuellen visuellen Zustand 

Wie bei jedem Entwicklungsprozess sollten Sie mit einer Bewertung des aktuellen Zustands beginnen. In diesem Fall ist es das visuelle Design und Sie müssen es gründlich prüfen. 

Was Sie tun müssen, ist;

• Analysieren Sie Ihr Produkt, um eine Überprüfung aller Front-End-Designkomponenten zu erhalten;
• Erstellen Sie einen Katalog der Komponenten, die Sie behalten würden;
• Identifizieren Sie die Inkonsistenzen im Design und denken Sie daran, sie später zu überwinden;
• Und achten Sie auf das verwendete CSS zusammen mit den visuellen Qualitäten der Komponenten.

Sobald Sie das getan haben, sind Sie bereit für den nächsten Schritt.

Bewerten Sie die Bauzeit 

Zu wissen, was Sie bauen werden, bedeutet nicht unbedingt, dass Sie mit dem Bau beginnen. Es gibt eine Menge anderer Parameter, über die Sie vor dem Bau nachdenken müssen. 

Fragen Sie sich also;

An welchen Stellen wird eine Komponente verwendet?
Wird es einen Unterschied zwischen derselben Komponente geben, die an zwei verschiedenen Stellen verwendet wird?
Welche Arten von Funktionalitäten wird eine Komponente haben?
Wären zwei weitere Komponenten für die Funktionalität miteinander verbunden oder abhängig?

Sobald Sie eine Antwort auf diese Fragen haben, haben Sie ein besseres Verständnis der Bauzeit pro Komponente. Dies hilft auch, Umschreibungen und Zeit- und Ressourcenverschwendung zu vermeiden, da Sie sich einfach nicht auf die Visuals konzentrieren. 

Darüber hinaus hätten Sie einen Überblick über die Art von Komplexität und Funktionen, die alle Komponenten bieten werden, sowohl kombiniert als auch einzeln. Verstehen Sie, dass Designsysteme kein Repository sind, sie sind viel mehr als das. Verwenden Sie sie also so, dass Sie das Beste aus ihnen herausholen.

Definieren Sie Prioritätselemente 

Welche Komponenten sind am wichtigsten?
Welche Komponenten werden zuerst benötigt?
Welche Komponenten bilden die Grundlage für andere Komponenten?

Diese Fragen helfen Ihnen, Prioritäten für jeden Komponentenaufbau zu definieren und sie während des gesamten Entwicklungsprozesses anzuwenden.

Es gibt ein paar Möglichkeiten, wie Sie Ihre Designsysteme erstellen können.

• Die erste ist, die grundlegenden Komponenten zuerst zu entwickeln. Mit grundlegend meine ich die grundlegendsten Komponenten. Dies könnten Schaltflächen, Farben, Symbole oder sogar Überschriften sein. Sobald das aus dem Weg geräumt ist, können Sie mit der Arbeit an komplexeren Komponenten beginnen.
• Der alternative Ansatz könnte darin bestehen, globale Elemente zuerst zu erstellen. Dies könnten Navigation und Seitenlayouts sein. Dies wird empfohlen, da Sie nach dem Festlegen eines Seitenlayouts die Vorarbeit geleistet haben und nur noch der Aufbau übrig bleibt.

Nachdem Sie sich für die ersten zu erstellenden Elemente entschieden haben, kann der Rest mithilfe des Eisenhower-Box-Prinzips ausgearbeitet werden. Dies sagt uns, dass wir auf der Grundlage der Wichtigkeit und der Art der Dringlichkeit, die eine Komponente hat, priorisieren sollen. Die Bewertung hängt in gewisser Weise von den Funktionen ab, die die besagte Komponente mit sich bringt.

Halten Sie sich an die Dokumentation 

Der Entwicklungsprozess eines Designsystems umfasst viele Schritte und viele Personen, um diese Schritte auszuführen. Zu denken, dass nur Designer ein ganzes Designsystem erstellen können, ist völlig irrational.

Designer 
Entwickler
Content-Editoren 

Jede Person hat eine wichtige Rolle zu spielen. In Anbetracht der Entwickler gibt es Frontend- und Backend-Entwickler, die völlig unterschiedliche Verantwortlichkeiten haben. 

Wenn Sie also die Entwicklung eines Designsystems planen, müssen Sie über die Beziehung zwischen allen am Aufbau beteiligten Akteuren nachdenken und darüber, wie Sie sie effektiv gestalten können, darüber nachdenken, wie die Übergaben erfolgen würden, und darüber nachdenken, wie Sie Verantwortlichkeiten aufteilen würden. 

Die Antwort auf all dies wäre eine klare und prägnante Dokumentation. Das Dokumentieren und Standardisieren hat dazu beigetragen, dass Designsysteme so effizient bleiben, wie sie es vorgeben zu sein. 

Besondere Erwähnung für Brad Frosts Atomic Design 

Wenn komponentenbasiertes Design erwähnt wird, schweifen unsere Gedanken definitiv zu Atomic Design ab, einem Konzept des Designsystems, das von Brad Frost vorgeschlagen wurde.

Brad konzipierte seine Methodik basierend auf den Prinzipien der Chemie. Es mag seltsam klingen, aber es ist sehr effektiv.

Lassen Sie es uns herausfinden. 

Wie wir wissen, besteht alles, was Materie ist, aus Atomen, die sich zu Molekülen verbinden, die sich zu Organismen verbinden. Und Organismen sind es, die das Universum ausmachen. 

Wenn wir dasselbe Konzept auf das Webdesign übertragen, wird die vollständige Benutzeroberfläche in grundlegende Teile zerlegt und dann wieder aufgebaut. 

Das Erstellen von Designsystemen mit Atomic Design hat fünf Ebenen.

• Atome, die HTML-Tags wie Formularbeschriftungen und Schaltflächen umfassen;
• Moleküle, die gebundene Atome sind, wie eine Formularbeschriftung und eine Schaltfläche zusammen;
• Organismen, die gruppierte Moleküle sind, um einen komplexen und deutlichen Abschnitt in einem Layout wie einem Produktgitter zu bilden;
• Vorlagen, die von Organismen gebildet werden und ein Seitenlayout ermöglichen. 
• Seiten, die der Höhepunkt der vorherigen vier sind und die Effektivität der bisher geleisteten Arbeit testen.

Atomare Designs sind in ihrer Methodik klar und ermöglichen es Teams, ihr angestrebtes Ziel detaillierter zu sehen. Sie bieten Konsistenz und Skalierbarkeit und sind heute das Paradigma komponentenbasierter Designsysteme. Lesen Sie diesen Leitfaden zur Atomic-Design-Methodik, um mehr zu erfahren.

Erleichtern von komponentenbasierten Designs 

Sie wissen jetzt fast alles über Designsysteme, was Sie jetzt wissen müssen, ist, welche Designsysteme Sie nutzen können, um den Aufbau komponentenbasierter Designs selbst zu erleichtern. 

Ja, es gibt immer die Möglichkeit, Ihre eigenen Designsysteme zu erstellen, und viele Marken, darunter Atlassian, haben ihre eigenen Systeme konzipiert. Für kleinere Marken und Organisationen, die nicht über die Ressourcen verfügen, um alleine loszulegen, gibt es jedoch viele Optionen auf dem Markt. 

Hier sind die Top fünf Picks für Sie.

Storybook 

Storybook, ein Open-Source-Tool zum Entwerfen und Entwickeln von UI-Komponenten, verkörpert die Leichtigkeit bei der Erstellung eines komponentenbasierten Designs. 

• Sie können Komponenten in der Vorschau anzeigen, während Sie sie erstellen;
• Sie können einzelne Komponenten inspizieren, sobald Sie sie erstellt haben;
• Sie können die verschiedenen Zustände, in denen die erstellten Komponenten funktionieren würden, betrachten und analysieren;
• Und Sie können auch Komponenten in Storybook importieren.

Mit Unterstützung von einem Dutzend JavaScript-Bibliotheken und einfachem HTML ist Storybook einfach zu bedienen und verstärkt den Build-Prozess.

Pattern Lab 

Erstellen, betrachten, testen und demonstrieren Sie Ihre UI-Komponenten schnell mit Pattern Lab. Es ermöglicht Ihnen, mit Interaktivität in enormer Geschwindigkeit Prototypen zu erstellen, anstatt einfach nur flache Designs bereitzustellen. 

Mit Cross-Browser- und Multi-Device-Tests hilft Pattern Lab, Modifikationen effizient mit minimalem bis gar keinem Eingriff in die Codebasis zu implementieren. 

Ein Node-betriebener statischer Site-Generator kann alles liefern, was Sie zum Einrichten Ihrer komponentenbasierten Benutzeroberfläche benötigen;

• Verschachtelte Muster 
• Designs, die mit dynamischen Daten ausgestattet sind 
• Atomare Designsprache 
• Starter Kits (siehe Abbildung unten) und mehr 

Pattern Lab ist schneller, erreicht ein höheres Maß an Konsistenz und bietet Ihnen den echten Wert für Ihr Geld.

Material Design 

Android;
iOS;
Oder das Web; 

Material Design von Google ist das Designsystem, das immer hochwertige digitale Erlebnisse überall schafft.

Es versucht, die Dinge einfach, klar und prägnant zu halten, damit jeder sie befolgen kann. Mit drei Hauptteilen im Kern, Prinzipien, Komponenten und Theming, hilft es Designteams, ein besseres Verständnis für das Erstellen und Anpassen von Designs zu bekommen. 

Atlassian Design System 

Das Atlassian Design System, das als End-to-End-Designsprache bezeichnet wird, hilft bei der Erstellung einfacher, intuitiver und funktionaler digitaler Erlebnisse

Sein Alleinstellungsmerkmal ist ein ganzheitliches Designsystem, das dem Designteam alles bietet, was es benötigt, von Komponenten über Musterbibliotheken bis hin zu umfassenden Einblicken in die Marke selbst, ihre stilistischen Grundlagen und sogar Inhalte. 

Bit 

Bit, ein weiteres Open-Source-Designtool, treibt die komponentenbasierte Entwicklung voran, die auf zusammensetzbarer Software basiert, um konsistente und wiederverwendbare Plattformen zu erstellen. 

• Es fördert Autonomie und Standards mit verteiltem Code und Teams;
• Es erleichtert die teamübergreifende Zusammenarbeit zur Skalierung;
• Es ermöglicht auch eine zusammensetzbare Skalierung mit den Plattformen und wiederholt sich nie.

Einfach ausgedrückt, Bit macht die komponentenbasierte Entwicklung einfach, verteilt, konsistent, wiederverwendbar und effizient verwaltbar. 

OpenSense Labs Verbindung mit komponentenbasierten Designs 

OpenSense Labs hat eine lange Geschichte mit komponentenbasierten Designs. Wir lieben die Arbeit mit Komponenten und sie haben uns bisher gute Dienste geleistet und es uns ermöglicht, einige unserer besten Arbeiten zu erstellen.

Hier ist eine komponentenbasierte Designgeschichte für Sie.

Edredo: Unsere eigene Edtech-Plattform

Letztes Jahr wurde Edredo von Techtud umbenannt. Die Umbenennung bedeutete eine Überarbeitung des Designs auf der gesamten Website und Anwendung. Es wäre ein riesiges Unterfangen gewesen, wenn es nicht das komponentenbasierte Design gegeben hätte. 

Edredo, früher Techtud, wurde teilweise auf dem Konzept des komponentenbasierten Designs aufgebaut. Dies half unserem Designteam unter der Leitung von Sahil Sharma, Änderungen voranzutreiben und sie konsistenter zu gestalten. 

Änderungen an globalen Elementen vorzunehmen war ein Kinderspiel. Eine Änderung in universellen Headern bedeutete nur, die übergeordnete Komponente zu ändern, und Designs wurden dadurch konsistent. 

Wir konnten einfach einen Header entwerfen und das Design dieser Komponente zur Genehmigung vorlegen, bevor wir ihn codierten. Sobald das Design der Komponente genehmigt war, wurde es codiert und die Designarbeit an der nächsten Komponente begann. 

Dieser Prozess wurde wiederholt, bis alle Teile fertig waren und "Seiten" zusammengestellt werden konnten. Es war besonders nützlich, wenn ein anderer Designer die Gestaltung übernahm, gefolgt von einem anderen Entwickler, der die Codierung der Komponente übernahm, da sie für eine hohe Effizienz zusammenarbeiten können. 

„Als Designer habe ich persönlich das Gefühl, dass das komponentenbasierte Design die Konsistenz im Design enorm verbessert hat. Kleinste Änderungen wie Farbe oder Schriftart können innerhalb von Sekunden auf dem gesamten Produkt auf allen Geräten aktualisiert werden. Es hat das Design flexibler für alle zukünftigen Updates gemacht.“ - Sahil Sharma, UI/UX-Designer, OpenSense Labs 

Das letzte Wort 

„Die komponentenbasierte Entwicklung erhöht die Wiederverwendbarkeit von Code, reduziert die Zeitdauer und das Budget für das Projekt und es ist viel einfacher, sie global zu implementieren.“ - Pritish Kumar, Technischer Leiter, OpenSense Labs 

Die Wiederverwendbarkeit von Design ist heute wichtig, komponentenbasierte Designsysteme machen dies möglich. Das Aufteilen von Komponenten in kleinere Teile und das Aufbauen von dort aus ist weitaus effizienter als die traditionelle Designmethodik. Komponentenbasierte Designs sind also ein Gewinn, für Entwickler, für Designer und auch für Content-Editoren.