Artikel mit dem Tag: Atomic Design

Design Systems 101 – Teil 4: Ein flexibles Naming-Schema für Patterns

Neben vielen weiteren Vorteilen sollen Pattern Libraries und Design Systeme für ein gemeinsames Verständnis und effiziente Kommunikation zwischen Designern, Entwicklern, Produktmanagern und allen anderen Beteiligten der Produktentwicklung sorgen. Um dieses zu erreichen, bedarf es aber eines eindeutigen Schemas zur Bezeichnung der Patterns. Spricht man zum Beispiel von einem „Button“ ist nicht unmissverständlich klar, ob ein Button im allgemeinen oder exakt eines der definierten Button-Patterns gemeint ist (und wenn ja, welches).

Nachdem wir im letzten Teil der Serie gelernt haben, wie sich Patterns für den Aufbau einer Library identifizieren und strukturieren lassen, will ich als nächsten Schritt unseren Weg zu einem eindeutigen und sehr flexiblen Naming Schema für OTTOs Design Patterns aufzeigen.

← Zum Anfang der Serie

Weiterlesen →

Design Systems 101 – Teil 3: Patterns identifizieren und strukturieren

Zum Aufbau einer Pattern Library oder eines Design System braucht man Patterns. Natürlich. Im ersten Teil haben wir gelernt was ein Pattern ist. In diesem Teil soll es nun darum gehen, welche Arten von Patterns es gibt, wie man diese in seinem Produkt identifiziert und wie man mit den gefundenen Patterns ein verständlich strukturiertes Design System aufbaut.

Darüber hinaus möchte ich einige pragmatische Ansätze zeigen, wie man mit neu entstehenden Patterns umgeht und wann man entscheidet, dass ein Element kein Pattern ist.

← Zum Anfang der Serie

Weiterlesen →

Design Systems 101 – Teil 2: Auf der Suche nach der perfekten Pattern Library

Design Patterns sind wenig wert ohne Struktur, die sie auffindbar macht und erklärt. Sie brauchen eine Pattern Library oder ein Design System. Im ersten Teil der Artikelserie habe ich gezeigt, warum Design Patterns wichtig sind. In diesem Teil werde ich zeigen, wie wir für die Patterns von OTTO.de eine effektive und praktikable Pattern Library aufgebaut haben, die auch heute – fünf Jahre nach dem Launch – immer noch ein wichtiges Werkzeug in unserer Produktentwicklung ist. Besonders möchte in dieser Case Study auf die ersten beiden Versuche eingehen, die zwar mehr oder minder gescheitert sind, bei denen wir aber viele wertvolle Dinge gelernt haben.

← Zum Anfang der Serie

Weiterlesen →

Design Systems 101 – Teil 1: Warum braucht man eine Pattern Library?

Wer Design Patterns keinerlei Beachtung schenkt, landet früher oder später in Teufels Küche. Versprochen! Design Patterns sind wichtig für ein nutzerfreundliches Produkt. Insbesondere große Produktteams können mit einer Design Pattern Library bzw. einem Design System Inkonsistenzen, Wildwuchs und unnötige Doppelarbeit vermeiden. In dieser Artikelserie will ich euch den Umgang mit Design Patterns näher bringen und zeigen, wie in den letzten fünf Jahren bei OTTO eine sehr leistungsstarke Pattern Library entstanden ist, die zum Erfolg des Produkts otto.de nachhaltig beträgt.

Als erster Teil, wird dieser Artikel vor allem auf die Grundlagen eingehen: Wie entstehen inkonsistente Produkt-Erlebnisse, wie kann eine Pattern Library helfen dieses Problem zu vermeiden und was ist überhaupt ein Design Pattern?

Weiterlesen →

Card Studio – Design Systeme in der Praxis strukturieren

Design Systeme enthalten – wie ihre Verwandten, die Pattern Libraries – geteilte UI-Komponenten und Design-Prinzipien. Es geht also nicht nur darum, Entwickler_innen eine Anlaufstelle fürs Copy & Paste zu geben. Gute Design Systeme erlauben Menschen aus den verschiedensten Berufskategorien ein gemeinsames Verständnis einer Designsprache zu bekommen.

Deshalb ist es wichtig, beim Start eines neuen Design Systems Benennungen und Kategorien zu finden, die ein gemeinsames Gespräch zwischen Design, Entwicklung und Produktmanagement erlauben. Egal ob das eigene Medium Sketch, HTML oder Excel ist: wenn von einem Akkordeon gesprochen wird, sollten sich alle auf die gleiche Komponente beziehen.

Um in kurzer Zeit zu einem Vokabular zu kommen, das für heterogene Gruppen funktioniert, haben wir zu diesem Zweck den Informationsarchitektur-Klassiker Card Sorting mit der kollaborativen Designmethode Design Studio kombiniert.

Und das Ergebnis konsequenterweise Card Studio getauft.

Weiterlesen →

Bauanleitung für eine Pattern Library – Teil 3: Prinzipien für eine Lean Pattern Library

Im zweiten Teil dieser Artikelserie habe ich unseren Weg zur schlanken Pattern Library beschrieben. Eine solche Pattern Library schlank zu betreiben und schlank zu halten ist aber nicht nur eine Frage des richtige Tools und der richtigen Struktur. Auf dem Weg zu OTTOs heutiger Pattern Library haben wir daher Prinzipien, Regeln und Prozesse aufgestellt um dies zu gewährleisten.

Weiterlesen →