Wieso Modulares Design das Richtige für Dich ist

Die meisten Design Systeme bauen auf dem Modularen Design auf. Das ist auch nicht verwunderlich – schließlich bietet es zahlreiche Vorteile.

Welche Vorteile das sind, was Modulares Design eigentlich ist und wie sich Künstliche Intelligenz im Rahmen des Modularen Design einsetzten lässt, erfährst Du im Folgenden.

Was versteht man unter Modularem Design?

Diese Form des Designs zeichnet sich dadurch aus, dass sie flexibel, einfach und interaktiv ist. Sie basiert auf dem von Brad Frost entwickelten Konzept des Atomic Design, auf das wir im folgenden Kapitel näher eingehen werden.

Grob zusammengefasst werden im Atomic Design Grundbausteine entwickelt, die sich beliebig zusammensetzen lassen. So können aus einer geringen Anzahl an Modulen beliebig viele Anwendungen, Produkte und Oberflächen entstehen.

Im Gegensatz zum Atomic Design ist das Modulare Design jedoch umfassender und ist somit nicht nur auf den digitalen Bereich anwendbar, sondern auch auf Print und 3D.

Atomic Design – die Basis von Modularem Design

Brad Frost zieht mit seinem Ansatz für die Entwicklung von Design Systemen eine Parallele zur Chemie: So wie sich im chemischen Bereich Atome zu Molekülen und Moleküle zu Organismen zusammensetzen, können auch Komponenten des Design Systems zu größeren Einheiten verbunden werden. So unterteilt er die Module eines Design Systems in Atome, Moleküle, Organismen, Templates und Seiten.

Atome

Atome bilden die kleinsten Einheiten eines Design Systems. Sie stellen die Grundbausteine dar und können deshalb nicht weiter verkleinert werden, da sie ansonsten ihre Funktionalität verlieren.

Beispielsweise stellt ein Badge in einem Design System ein Atom dar. Badges zeigen dem Nutzer gezielt Informationen an – beispielsweise einen Statuswert oder Benachrichtigungen.

Moleküle

Moleküle setzen sich aus zwei oder mehr Atomen zusammen. So lässt sich das auch auf das Design System übertragen.

Moleküle erfüllen einen bestimmten Zweck – setzt man etwa ein Badge mit einem Icon und einem Text zusammen und verleiht diesem die nötigen Funktionen, entsteht dadurch das Molekül eines Tabs.

Organismen

Eine größere Einheit stellen die Organismen dar. Sie bilden bereits einen festen Abschnitt der Benutzeroberfläche und setzen sich aus Molekülen und ggf. weiteren Atomen zusammen.

So können beispielsweise mehrere Tabs zu einer Tableiste zusammengesetzt werden, die dann die Rolle eines Organismus im Design System einnimmt.

Templates

Werden Organismen miteinander verbunden, entstehen Templates. Ein Template zeichnet sich dadurch aus, dass es bereits ein vollständiges Layout darstellt, allerdings noch nicht mit spezifischem Content versehen wird.

Seiten

Werden die Platzhalter der Templates durch konkreten Content ausgetauscht, entsteht eine Seite – das größte Modul im Atomic Design.

Info

Fertiggestellte Seiten sind essentiell für das Testen der einzelnen Komponenten, da meist erst im finalen Zusammenspiel deutlich wird, ob die Atome, Moleküle und Organismen richtig funktionieren.

Die Vorteile eines modularen Designs

Modulares Design wird deshalb immer beliebter, weil es viele Vorteile bietet. Dazu zählen:

• Effizienz: Ein Modulares Design sorgt dafür, dass neue Projekte viel schneller verwirklicht werden können, da die Grundbausteine dafür bereits gelegt sind.
• Konsistenz: Dadurch, dass beim Modularen Design der Markenauftritt bereits definiert und festgehalten wurde, wird (bei Befolgung der Richtlinien!) ein konsistentes Erscheinungsbild gewährleistet.
• Markenkonformität: Die Richtlinien sind im Modularen Design so klar ausgearbeitet, dass neue Projekte immer markenkonform sind.
• Kreativität: Das Modulare Design bietet trotz klarer Vorgaben einen großen kreativen Freiraum.
• Flexibilität: Ein Modulares Design System lässt sich problemlos anpassen und erweitern.

Künstliche Intelligenz als Unterstützung für Modulares Design

Künstliche Intelligenz kann eine große Unterstützung für Modulare Design Systeme darstellen. Ein tolles Beispiel dafür ist der Layout Creator, den DHL in seinem Design System (dem Brand Hub) nutzt.

Der Layout Creator bietet den Mitarbeitenden die Möglichkeit, einfach, schnell und effizient Medien in hoher Qualität zu erstellen. Diese sind zudem automatisch markenkonform, sodass keine Freigabeprozesse mehr nötig sind.

Der Nutzer kann zwischen verschiedenen Medien wählen, für die der Layout Creator dann ein Layout generiert. Dieses wird mit einem Bild aus der integrierten Mediathek versehen. Lediglich Text muss selbst erstellt und eingefügt werden.

Durch einen solchen KI-Generator haben nicht mehr nur Designer, sondern grundsätzlich alle die Möglichkeit, markenkonforme Medien zu gestalten. Das macht die Designprozesse natürlich effektiver.

Prinzipiell besteht für jedes Modulare Design System die Möglichkeit, einen KI-Generator einzubinden und damit Prozesse zu optimieren.

Die Effizienz von Modularem Design nutzen

Modulare Design Systeme steigern die Effizienz, die Konsistenz und die Markenkonformität. Gleichzeitig sind sie flexibel und bieten einen großen kreativen Freiraum.

Somit bietet sich Modulares Design für jeden an, der sein Design System effektiver gestalten möchte.