Als induktive Designmethodologie hat Christopher Alexander 1977 die inhaltliche Beschreibung von Entwurfsgegenständen durch Pattern (Muster) beschrieben. Für das Webdesign identifizierten die Designer van Welie und van der Veer vier wesentlich Pattern-Ebenen:
- Posture Level, auf dem Typen bzw. Genre von Websites liegen,
- Experience Level, auf dem die übergeordneten Ziele und Aufgaben derNutzer liegen,
- Task Level, auf dem konkrete Aufgaben, als Reihe von Interaktionen, liegen,
- Action Level, auf dem konkrete Ziele der Nutzer liegen.
Eine beispielhafte Patternstruktur stellten sie für eine E-Commerce Shopsite dar:
Mit dem Fokus auf der Interface-Designentwicklung hat der Webdesigner Brad Frost unter dem Stichwort Atomic Design eine fünfstufige Methodik beschrieben, um ein „Web Design System“ zu entwickeln. Dabei geht er von der kleinsten Gestaltungs-Einheit Atoms (z.B. Eingabefelder oder Buttons) über die Aggregationsstufen „Molecules“, „Organisms“ und „Templates“ hin zu „Pages“.
In der Designpraxis hängt der Erfolg einer solchen Design-System Entwicklung nicht zuletzt davon ab, dass man stets eine gute Übersicht, über die einzelnen Elemente auf den verschiedenen Stufen hat. Der klassische Webdesign-Ansatz mit vielen einzelnen Layout-Dokumenten hilft da wenig weiter.
Und so ist es erfreulich, dass Brad Frost auch gleich einen statischen Website-Generator anbietet, in den man seine Design-Elemente mit ein wenig HTML und CSS Kenntnissen einfügen kann.
Auch designpraktischer Sicht dreht der „Atomic Design“ Ansatz den Design-Pattern Ansatz konsequent von der strategischen Entwurfsebene auf die formale Entwicklungsebene. Und stellt dadurch für Designteams selber, die Weiterentwicklung einer einheitlichen Design-Entwicklungssprache dar.
—
Periodic Table designed by Jakob Vogel from the Noun Project
Research zu Webdesign Pattern-Language:
van Welie, M. / van der Veer, G.C. (2003): Pattern Languages in Interaction Design – Structure and Organization. In: Proceedings of Interact ’03, 1-5 September. Amsterdam: IOS Press.
