Karten und wiederverwendbare Komponenten entwerfen

Stellen Sie sich eine gut geführte Küche während eines geschäftigen Betriebs vor. Niemand erfindet für jede Bestellung ein brandneues Gericht. Es gibt feste Rezepte, vorbereitete Zutaten und eine Art des Anrichtens, die das ganze Team auswendig kennt. Deshalb kommt das Essen schnell, konstant und gut heraus. Eine Website, die wächst, ohne auseinanderzufallen, funktioniert genauso, und die Rezepte, auf die sie sich stützt, werden Komponenten genannt. Die bekannteste davon ist die bescheidene Karte.

Dieser Leitfaden handelt vom Design von Karten und der allgemeineren Idee wiederverwendbarer Komponenten: den kleinen, eigenständigen Bausteinen, die immer wieder auf einer Website verwendet werden. Wir werden uns ansehen, warum sie wichtig sind, wie eine Karte aufgebaut ist, welche Zustände Sie nicht vergessen dürfen und wie eine Handvoll gut gemachter Komponenten zu einem Designsystem heranwächst, das eine Website bei ihrer Erweiterung ordentlich hält. Nichts davon ist technisch. Es geht hauptsächlich darum, vorauszudenken, damit Sie in der Zukunft und jeder, der später an der Website arbeitet, es leichter hat.

Was eine Komponente eigentlich ist

Eine Komponente ist ein Interface-Element, das einmal entworfen und überall dort wiederverwendet wird, wo es benötigt wird. Ein Button ist eine Komponente. Ebenso eine Navigationsleiste, ein Formularfeld und die Karte. Es geht um Konsistenz und Effizienz: Anstatt jedes Mal ein neues Feld zu entwerfen, wenn Sie ein Produkt, einen Artikel oder ein Teammitglied anzeigen müssen, entwerfen Sie ein Kartenmuster und verwenden es wieder. Besucher lernen es einmal, und das Team baut es einmal.

Die Karte ist besonders allgegenwärtig. Sie ist das ordentliche Rechteck, das einen kleinen Satz verwandter Informationen, normalerweise ein Bild, einen Titel, ein oder zwei Zeilen Text und manchmal einen Button, zu einer einzigen klickbaren Einheit zusammenfasst. Sie sehen Karten in Produktübersichten, Blog-Listings, Preislayouts und Teamseiten. Sie funktionieren, weil sie Komplexität in etwas verpacken, das das Auge schnell erfassen kann, ähnlich wie eine gute visuelle Hierarchie eine ganze Seite verpackt.

Warum sich wiederverwendbare Komponenten lohnen

Das ordnungsgemäße Design einer Komponente erfordert im Vorfeld etwas mehr Überlegung, als einfach einen einmaligen Abschnitt zu erstellen. Der Nutzen ist enorm. Wenn jede Karte auf der Website demselben Muster folgt, wirkt die Website kohärent und professionell, da nichts zusammengestückelt aussieht. Wenn Sie etwas ändern müssen, ändern Sie das Muster einmal, und es wird überall aktualisiert, anstatt Dutzende leicht unterschiedlicher Versionen aufzuspüren.

Diese Konsistenz ist ein großer Teil dessen, was eine teuer aussehende Website von einer improvisiert aussehenden unterscheidet. Die in einer professionell aussehenden Website beschriebenen Eigenschaften resultieren fast immer aus disziplinierter Wiederverwendung statt aus endloser Kreativität. Wiederholung, bewusst eingesetzt, wirkt als Sorgfalt.

Die Anatomie einer guten Karte

Eine Karte mag einfach aussehen, aber jedes Element hat seinen Platz. Es gibt normalerweise einen Container mit konsistenten Abständen und einem subtilen Rahmen oder Schatten, der ihn vom Hintergrund abhebt. Im Inneren befindet sich ein Bild oder Symbol in einem festen Verhältnis, sodass ein Raster von Karten ordentlich ausgerichtet ist. Darunter ein klarer Titel, eine kurze unterstützende Zeile und oft ein einzelner Call-to-Action. Die Disziplin besteht darin, diese Elemente von Karte zu Karte konsistent zu halten.

Der häufigste Kartenfehler ist, den Inhalt stark variieren zu lassen. Eine Karte hat einen langen Titel, der über drei Zeilen umbrochen wird, die nächste hat ein winziges Bild, und plötzlich sieht das Raster kaputt aus. Gutes Kartendesign setzt Grenzen: Titel werden nach einer bestimmten Länge gekürzt, Bilder teilen sich ein Verhältnis, und der Abstand bleibt fest. Diese Vorhersehbarkeit ermöglicht es Karten, problemlos in einem Raster- und Layoutsystem zu sitzen, ohne aus der Ausrichtung zu geraten.

Vergessen Sie die Zustände nicht

Eine Komponente ist nicht nur das, wie sie im Ruhezustand aussieht. Sie hat auch Zustände: wie sie aussieht, wenn man darüber fährt, wenn sie angeklickt wird, wenn sie lädt, wenn kein Inhalt angezeigt werden soll und wenn etwas schiefläuft. Nur die perfekte, vollständige Version zu entwerfen, führt dazu, dass Komponenten im realen Einsatz auseinanderfallen. Ein leeres Produktgitter ohne Fallback-Nachricht oder eine Karte mit einem defekten Bild und ohne Platzhalter wirkt nachlässig.

Für eine Karte ist der Hover-Zustand besonders wichtig, da er signalisiert, dass das Ganze anklickbar ist. Ein sanftes Anheben, ein Schatten oder eine Farbverschiebung teilt dem Besucher mit, dass sein Klick etwas bewirken wird. Diese kleinen Reaktionen gehören zur selben Familie wie das Feedback von Call-to-Action-Buttons: winzige Hinweise, die eine Oberfläche lebendig und reaktionsschnell statt statisch wirken lassen.

Von wenigen Komponenten zu einem Designsystem

Sobald Sie eine Handvoll gut gemachter Komponenten haben, entsteht ein Muster. Zusammen bilden sie den Anfang eines Designsystems: eine gemeinsame Bibliothek von Schaltflächen, Karten, Formularen, Headern und mehr, die alle denselben Regeln für Abstände, Farben und Schriftarten folgen. Ein Designsystem ist einfach das Rezeptbuch der Küche, das niedergeschrieben wurde, damit jeder auf die gleiche Weise kocht. Es ermöglicht einer Website, auf Dutzende von Seiten zu wachsen, ohne im Chaos zu versinken.

Das System verbindet alles miteinander. Ihre Farb- und Schriftauswahl, wie sie in Schriftarten und Farben für Ihre Website und auf Markenebene in Markentypografie behandelt werden, werden zu Regeln, die in jede Komponente integriert sind, sodass Konsistenz automatisch und nicht durch ständige Wachsamkeit entsteht. Bauen Sie das System einmal auf, und die Website hält sich weitgehend selbst in Ordnung.

Komponenten einfach und ehrlich halten

Eine häufige Falle ist es, Komponenten zu viel tun zu lassen. Eine Karte, die versucht, zehn verschiedene Layouts zu handhaben, wird zu einem Durcheinander, das niemand versteht. Es ist normalerweise besser, zwei oder drei klare Kartentypen zu haben, jeder mit einem klaren Zweck, als eine Monsterkarte mit einem Dutzend Einstellungen. Einfachheit macht Komponenten einfacher korrekt zu verwenden, was bedeutet, dass die Website konsistent bleibt, selbst wenn mehr Leute daran arbeiten.

Widerstehen Sie auch der Dekoration, die ihren Platz nicht verdient. Ein subtiler Hover-Effekt und saubere Abstände wirken selbstbewusst. Starke Schatten, überladene Rahmen und konkurrierende Farben wirken nervös. Die Zurückhaltung, die Weißraum effektiv macht, gilt auch für Komponenten: Geben Sie jeder Raum und eine einzige klare Aufgabe.

Benennen und dokumentieren Sie Ihre Komponenten

Eine Komponentenbibliothek ist nur nützlich, wenn die Leute die darin enthaltenen Teile finden und verstehen können. Das bedeutet, jedem Teil einen klaren, einfachen Namen zu geben, der beschreibt, was es ist, und nicht, wo es zuerst aufgetaucht ist. Etwas als Produktkarte zu bezeichnen, sagt jedem, wofür es ist, während es als Homepage-Box drei bedeutungslos wird, sobald es an anderer Stelle wiederverwendet wird. Gute Namen machen den Unterschied zwischen einer Bibliothek, zu der die Leute greifen, und einer, die sie stillschweigend ignorieren, während sie ihre eigene Version neu erfinden.

Es hilft auch, kurz aufzuschreiben, wann jede Komponente verwendet werden sollte und wann nicht. Ein kurzer Hinweis, dass eine bestimmte Karte zum Verlinken von Artikeln und nicht zum Anzeigen von Preisen gedacht ist, verhindert das langsame Abdriften, bei dem Komponenten für Aufgaben eingesetzt werden, für die sie nie gedacht waren. Diese leichte Dokumentation sorgt dafür, dass ein Designsystem vertrauenswürdig bleibt, wenn ein Team wächst und wenn die Leute, die es ursprünglich gebaut haben, weiterziehen. Das Ziel ist, dass jemand Neues die Bibliothek öffnen, die Teile verstehen und sie korrekt verwenden kann, ohne fragen zu müssen.

Planen Sie Veränderungen von Anfang an ein

Komponenten glänzen am meisten, wenn sich Dinge ändern, was auf jeder lebendigen Website ständig der Fall ist. Eine neue Produktlinie, ein Rebranding, ein neuer Abschnitt – all das wird viel weniger schmerzhaft, wenn Ihre Benutzeroberfläche aus wiederverwendbaren Teilen und nicht aus handgefertigten Seiten besteht. Die einmalige Aktualisierung des Kartenmusters wirkt sich überall aus, anstatt einen seitenweisen Kampf zu erzwingen. Dies ist wiederverwendbares Design als Absicherung, und es steht im Mittelpunkt der Zukunftssicherung Ihrer Website. Wenn Sie Hilfe bei der Gestaltung einer übersichtlichen Komponentenbibliothek für Ihre Website wünschen, können Sie uns jederzeit kontaktieren.

Häufig gestellte Fragen

Referenzen

1. Nielsen Norman Group. "Cards: UI-Component Definition." nngroup.com.
2. Material Design. "Components and States." m3.material.io.
3. W3C. "Design Patterns and Components." w3.org.