Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Modulares Webdesign – Komponenten, Pattern, Templates & Co.

Eine Website setzt sich aus verschiedenen modularen Einheiten zusammen, die in einem gemeinsamen Layout angeordnet werden. Die Denkweise in solch unabhängigen Einheiten ist für erfolgreiches Webdesign eine notwendige Grundvoraussetzung.

Wie groß eine einzelne Einheit ist, hängt von der Komplexität des Projekts und von der Professionalität des Teams ab. Je komplexer das System, desto eher werden die Einheiten verschachtelt. Eine sehr populäre Methode ist die Organisation anhand des Konzepts »Atomic Design«. Hier bilden die sog. Atome die kleinste Einheit. Mehrere Atome werden zu Molekülen zusammengesetzt. Die nächst größere Einheit sind Organismen. Es folgen Templates und Pages.

Dokumentation der »Billboard«-Komponente im Design System von FutureLearn

Keine einheitlichen Begriffe

Auch wenn Atomic Design sehr weit verbreitet ist, gibt es keine allgemein festgelegten Begriffe für die verschiedenen modularen Einheiten. Ebenfalls sehr verbreitet sind Wörter wie Komponenten, Symbole, Pattern, Blöcke, Module oder Layouts. Je nachdem mit welcher Software gearbeitet wird, gibt es ggf. bereits festgelegte Begriffe. WordPress nutzt beispielsweise »Pattern« und »Blöcke«. Design-Tools wie Figma, XD oder Sketch arbeiten mit »Komponenten«.

Komponente für »Testimonials« im Design System von Sipgate.

Wichtiger als die einzelnen Begriffe ist, dass alle am Projekt beteiligten Personen das gleiche Verständnis für die verschiedenen Einheiten und das Verhältnis dieser zueinander haben. In der Kommunikation mit weniger erfahrenen Personen (z.B. Kunden) kann es Sinn machen, die kleinteiligen Systematiken nicht zu erwähnen und dadurch die Kommunikation zu vereinfachen.

Professionelle Teams – insbesondere solche mit technischem Schwerpunkt – nutzen normalerweise den Begriff »Komponente«. Hier ist z.B. von einer »Component Library« die Rede, wenn die organisierte Liste aller Einheiten im Code oder im Design-Tool gemeint ist. Letzteres wird häufig auch als UI-Kit oder Design-Kit bezeichnet.

Komponenten organisieren

Eine nicht zu vernachlässigende Aufgabe von Design- und Development-Teams ist die Organisation der Design-Systematik – also der Module, Komponenten usw. Hierbei spielen die Benennung und die Kategorisierung eine zentrale Rolle. Diese Arbeit ist komplex und zeitintensiv.

Gesamtübersicht eines modular aufgebauten Website-Projekts.

Häufig werden die einzelnen Komponenten ausschließlich anhand visueller Eigenschaften organisiert. Besser ist es, wenn der Zweck einer Komponente bei der Organisation im Vordergrund steht. Wenn Komponenten zweckgebunden geplant und benannt werden, fallen überflüssige Komponenten schneller auf. Dieses Prinzip nennt sich auch »Purpose First«

Wir bevorzugen daher beispielsweise eine Komponente namens »Overview« (inhaltlich benannt) gegenüber der gleichen Komponente mit Namen »Card Grid« (visuell benannt). Bei der visuellen Benennung kommt es auch häufig zu Problemen beim Redesign. Zudem ändert sich das Aussehen meist auf verschiedenen Displaygrößen.

Wie nennen wir diese Komponente? Wir bevorzugen »Overview« gegenüber »Card Grid«.

Varianten

Von vielen Komponenten gibt es Varianten. So existieren beispielsweise Buttons in verschiedenen Farben, mehrere Boxen können in einem Raster oder als Liste angezeigt werden und eine Text/Bild-Komponente kann gespiegelt werden.

Wann etwas eine neue Komponente wird, und wann es eine Variante einer bereits existierenden Komponente darstellt, muss individuell entschieden werden. Alle modernen Design-Tools bieten Funktionen zum Organisieren von Varianten.

Modulare vs. integrierte Komponenten

Der modulare Aufbau von Websites und Apps kann zu sehr austauschbaren Komponenten bzw. Layouts führen. Je universeller eine Komponente eingesetzt werden soll, desto charakterloser kann das finale Layout wirken.

Aus diesem Grund ist es sinnvoll, modular einsetzbare und universell gestaltete Komponenten mit sog. integrieren Komponenten zu kombinieren. Letztere lassen sich nicht überall einsetzen, erlauben daher aber mehr gestalterische Raffinesse. In diesem Zusammenhang wird auch von einer »Signature Component« gesprochen, die an passender Stelle eingesetzt eine Vielzahl von Usern erreichen kann. Über solche Komponenten kann u.a. eine Marken-Identität transportiert werden.

Signature-Komponente auf der Website des DAKS.

Vorteile von modularen/universellen Komponenten

Vorteile von spezifischen/integrierten Komponenten

Modulares Denkweise im gesamten Workflow

Die Denkweise in modularen Einheiten findet sich in allen Schritten des digitalen Workflows wieder:

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Anspruchsvolle Projekte mit kulturbanause

Wir lieben es gewachsene Strukturen aufzuräumen und perfekt im Content Management abzubilden. Strukturell komplexe Projekte realisieren wir regelmäßig und sehr gerne.

Konzeptionelles Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →