Hierarchie
Das Spaceship Design System ist in Schichten aufgebaut, von denen jede Klarheit, Struktur und Zweck hinzufügt. Sie bilden eine Hierarchie, die vorgibt, wie wir Produkte entwerfen, entwickeln und skalieren – von der kleinsten visuellen Entscheidung bis zur umfassendsten Nutzerreise.
Indem wir den Prinzipien des Atomic Design folgen, haben wir unsere wichtigsten Ressourcen in die folgenden Kategorien gegliedert, damit sie für alle Teams einfacher zu nutzen sind.
Grundlagen
Definieren die Kernregeln unserer visuellen Sprache — Farben, Typografie, Abstände, Raster, Bewegung und Tokens. Sie geben uns eine konsistente Grundlage, auf der wir arbeiten können.
Komponenten
Erwecken die Grundregeln in wiederverwendbaren Oberflächenelementen zum Leben, die alltägliche Designprobleme lösen.
Vorlagen
Zeigen, wie Komponenten und Muster im Kontext zusammenwirken, und bieten vorgefertigte Strukturen für vollständige Seiten und Erlebnisse.
Muster
Erfassen bewährte Lösungen und Best Practices und stellen sicher, dass unsere Arbeit an jedem Berührungspunkt konsistent, barrierefrei und nutzerzentriert bleibt.
Grundlagen
Die wesentlichen Atome des Spaceship Design System. Sie definieren die visuellen und strukturellen Regeln, auf denen jede Komponente und jedes Muster aufbaut.
Farbe
Definiert Marken- und Funktionspaletten, die Harmonie, Barrierefreiheit und Flexibilität über alle Produkte hinweg sicherstellen.
Typografie
Schafft Hierarchie und Klarheit mit einer typografischen Skala, die Inhalte leicht lesbar und gut erfassbar macht.
Abstände
Bietet eine systematische Skala für Ränder, Innenabstände und Layoutrhythmus, um konsistente Benutzeroberflächen zu gewährleisten.
Raster
Erstellt responsive Layouts, die sich an verschiedene Geräte anpassen und dabei Struktur und Ausrichtung beibehalten..
Bewegung
Nutzt Übergänge und Animationen, um Aufmerksamkeit zu lenken, Status zu vermitteln und Interaktionen natürlich wirken zu lassen.
Design Tokens
Übersetzen grundlegende Werte in Code, dienen als zentrale Quelle der Wahrheit und ermöglichen zugleich schnelle und einfache Aktualisierungen.
Klare Grundlagen bedeuten weniger Barrieren, mehr Inklusivität und mehr Zeit für die Lösung echter Probleme, anstatt bei null anzufangen.
Komponenten
Dies sind die wiederverwendbaren Elemente des Spaceship Design System. Jedes davon löst ein spezifisches Problem der Benutzeroberfläche — von Schaltflächen und Eingabefeldern bis hin zu Navigation und Rückmeldungen. Jede Komponente ist barrierefrei, responsiv und lässt sich leicht an unterschiedliche Kontexte oder Geräte anpassen.
Wiederverwendbare Komponenten sorgen dafür, dass jedes Produkt, das wir entwickeln, schneller ausgeliefert wird und sich mit dem großen Ganzen verbunden anfühlt.
Vorlagen
Vorlagen sind die Brücke zwischen Bausteinen und dem Nutzererlebnis. Sie kombinieren Grundlagen und Komponenten zu vollständigen Seitenkontexten und zeigen, wie das System in der Praxis funktioniert.
Produktseitenvorlagen
Übergeordnete Seitenstrukturen für Landingpages und Produktseiten, bei denen Designer hauptsächlich Inhalte aktualisieren und Module an den jeweiligen Kontext anpassen.
Teilbare Komponenten
Komplexere, wiederverwendbare Strukturen wie Vergleichstabellen oder Preiskarten sind dafür konzipiert, spezifische Szenarien produktübergreifend konsistent abzubilden.
Mit vorgefertigten Strukturen als Ausgangspunkt können sich Teams weniger auf Layoutentscheidungen und mehr auf die Erfüllung echter Nutzerbedürfnisse konzentrieren.
Muster
Muster halten fest, was wir aus Tests, Feedback und der Nutzung in der Praxis gelernt haben, und verwandeln es in wiederverwendbare, standardisierte Lösungen. Jedes Muster basiert auf der Nutzerabsicht, sei es die Vereinfachung des Checkout-Prozesses, der Umgang mit Fehlern oder die Führung von Nutzern durch Formulare.
Durch die Definition bewährter Lösungen machen Muster unsere Arbeit zielgerichtet und stellen sicher, dass jedes Erlebnis nicht nur funktional, sondern auch durchdacht gestaltet ist.