Glossary
Dieses Glossar definiert wichtige Begriffe, die im Kontext von Celestia und Design Systems verwendet werden. Es dient als Referenz für konsistente Kommunikation und klare Verständigung.
Accessibility (A11y) Barrierefreiheit bezeichnet die Gestaltung von Produkten, Geräten, Dienstleistungen oder Umgebungen für Menschen mit Behinderungen. Im Web-Kontext bedeutet dies, dass Websites und Anwendungen für alle Nutzer*innen zugänglich sind, unabhängig von körperlichen, sensorischen oder kognitiven Fähigkeiten.
Adaptive Design Ein Ansatz, bei dem separate Layouts für verschiedene Geräte erstellt werden (im Gegensatz zu Responsive Design, das fluid ist). Jede Version ist speziell für ein bestimmtes Gerät optimiert.
Atomic Design Eine Methodologie für Design Systems, entwickelt von Brad Frost. Sie unterteilt Interfaces in fünf Ebenen: Atoms, Molecules, Organisms, Templates und Pages. Celestia folgt einem ähnlichen, angepassten Ansatz.
Baseline Grid Ein vertikales Rastersystem, das auf einer konsistenten Zeilenhöhe basiert. Alle UI-Elemente werden an diesem Grid ausgerichtet, um visuelle Harmonie zu schaffen.
Border Radius Der Rundungsgrad von Ecken bei UI-Elementen. In Celestia durch Design Tokens definiert (z.B. sm, md, lg).
Brand Identity Die visuelle und kommunikative Ausdrucksweise einer Marke, einschliesslich Logo, Farben, Typografie und Tone of Voice.
Breakpoint Ein definierter Viewport-Breitenpunkt, an dem das Layout einer Website oder Anwendung angepasst wird, um auf verschiedenen Geräten optimal zu funktionieren.
Bundle Eine Datei oder Sammlung von Dateien, die alle notwendigen Code-Ressourcen für eine Anwendung enthält. Bundle-Grösse ist ein wichtiger Performance-Faktor.
Changelog Ein Dokument, das alle Änderungen, Ergänzungen und Deprecations einer Software oder eines Design Systems in chronologischer Reihenfolge aufzeichnet.
Color Palette Ein definierter Satz von Farben, die in einem Design System verwendet werden. In Celestia unterteilt in Primär-, Sekundär-, Neutrale und Semantische Farben.
Component Eine wiederverwendbare, eigenständige Einheit einer Benutzeroberfläche mit definierter Funktionalität und visuellem Erscheinungsbild (z.B. Button, Card, Input).
Component Library Eine Sammlung von UI-Komponenten, die wiederverwendet werden können. In Celestia implementiert als Code-Bibliothek (Astro-Komponenten) und Figma-Bibliothek.
Composition Pattern Ein Design-Pattern, bei dem komplexe Komponenten aus einfacheren Komponenten zusammengesetzt werden (z.B. Card bestehend aus Header, Content und Footer).
Container Ein Layout-Element, das den Inhalt auf eine maximale Breite begrenzt und zentriert. In Celestia mit verschiedenen Grössen verfügbar (sm, md, lg, xl).
Content Strategy Die Planung, Entwicklung und Verwaltung von Inhalten. Umfasst Text, Bilder, Video und andere Medien.
CSS Custom Properties Auch CSS-Variablen genannt. Ermöglichen die Definition von wiederverwendbaren Werten in CSS. In Celestia werden sie für Design Tokens verwendet.
Dark Mode Ein Farbschema mit dunklem Hintergrund und hellem Text, das in Umgebungen mit wenig Licht angenehmer zu verwenden ist und Energie spart (bei OLED-Displays).
Design System Ein umfassendes Set an Standards, Dokumentation und Komponenten zur Verwaltung von Design auf massiver Skala. Kombiniert Design und Code zu einem kohärenten System.
Design Tokens Die atomaren Werte eines Design Systems (Farben, Abstände, Typografie), die als Platform-unabhängige Variablen gespeichert werden und in Code und Design-Tools verwendet werden.
Deprecation Der Prozess, eine Komponente oder Funktion als veraltet zu markieren, um sie in zukünftigen Versionen zu entfernen. In Celestia mit Warnungen und Migrationspfaden.
Easing Eine Funktion, die definiert, wie ein Wert zwischen zwei Zuständen über die Zeit interpoliert wird. In Animationen verwendet, um natürliche Bewegungen zu schaffen.
Edge Case Ein selten auftretender oder unerwarteter Nutzungsszenario, das besondere Berücksichtigung im Design und der Implementation erfordert.
Elevation Der Eindruck von Tiefe oder Höhe in einer Benutzeroberfläche, typischerweise durch Schatten oder unterschiedliche Hintergrundfarben erzeugt.
Figma Ein cloud-basiertes Design-Tool, das für die Erstellung von Mockups, Prototypen und Design Systems verwendet wird. Celestia nutzt Figma als primäres Design-Tool.
Focus State Der visuelle Zustand eines Elements, wenn es über die Tastatur fokussiert wird. Essentiell für Barrierefreiheit.
Font Family Eine Gruppe von Schriftarten, die ein gemeinsames Design teilen. In Celestia definiert als Design Token.
Functional Color Farben, die eine semantische Bedeutung haben (Success, Warning, Error, Info), unabhängig von der Markenidentität.
Gaia Der interne Tech Stack von Stutz Medien, bestehend aus Astro, Sanity und Netlify. Das technische Fundament für Celestia.
Grid System Ein Struktur-System aus Spalten und Reihen, das als Framework für das Layout von Inhalten dient. Celestia verwendet ein 12-Spalten-Grid.
Gutter Der Abstand zwischen Spalten in einem Grid-System.
Hover State Der Zustand eines Elements, wenn der Mauszeiger darüber schwebt. Gibt visuelles Feedback über Interaktivität.
Icon Ein kleines, symbolisches Bild, das eine Aktion, einen Zustand oder ein Objekt repräsentiert. In Celestia aus der Tabler Icons Bibliothek.
Interaction Design Der Bereich des Designs, der sich mit der Gestaltung von Interaktionen zwischen Nutzern und Produkten befasst.
Kerning Die Anpassung des Abstands zwischen einzelnen Buchstabenpaaren zur Verbesserung der Lesbarkeit.
Layout Die Anordnung von visuellen Elementen auf einer Seite oder einem Bildschirm. In Celestia durch das Grid-System und Spacing-Scale definiert.
Leading Die Zeilenhöhe in der Typografie. Der vertikale Abstand zwischen Baselines aufeinanderfolgender Zeilen.
Line Height Siehe Leading. In Celestia als Design Token definiert.
Micro-Interaction Eine kleine, subtile Animation, die auf eine Nutzeraktion reagiert (z.B. ein Button, der beim Klicken kurz skaliert).
Mockup Eine statische Darstellung eines Designs, das das endgültige visuelle Erscheinungsbild zeigt.
Motion Bewegung in Interfaces durch Animationen. In Celestia durch Timing, Easing und Patterns definiert.
Naming Convention Ein konsistentes Schema für die Benennung von Dateien, Variablen, Komponenten und anderen Ressourcen.
Neutral Colors Farben ohne dominante Farbtemperatur (Grau-Skala), verwendet für Text, Hintergründe und Strukturen.
Pattern Eine wiederverwendbare Lösung für ein häufig auftretendes Design-Problem. In Celestia dokumentiert und standardisiert.
Primary Color Die Hauptfarbe der Markenidentität, verwendet für primäre Aktionen und wichtige UI-Elemente.
Primitive Die grundlegenden Bausteine eines Design Systems (z.B. einzelne Farbwerte, Schriftgrössen), die zu semantischen Tokens kombiniert werden.
Prototype Ein klickbarer, interaktiver Entwurf, der das Nutzer*innen-Verhalten und die Interaktion simuliert.
Radius Siehe Border Radius.
Responsive Design Ein Ansatz, bei dem Layouts sich fluid an verschiedene Bildschirmgrössen anpassen.
Roadmap Ein strategischer Plan, der die Vision, Ziele und Meilensteine eines Projekts über einen bestimmten Zeitraum darstellt.
Semantic Token Ein Design Token, der eine Bedeutung im Kontext der Benutzeroberfläche hat (z.B. “color-text-primary” statt “color-gray-900”).
Shadow Ein visueller Effekt, der Tiefe und Elevation erzeugt. In Celestia durch Design Tokens definiert.
Single Source of Truth Das Prinzip, Informationen an einer zentralen Stelle zu pflegen, um Inkonsistenzen zu vermeiden. In Celestia die Dokumentation und das Code-Repository.
Spacing Der Abstand zwischen UI-Elementen. In Celestia durch eine konsistente Spacing-Scale (4px-Basis) definiert.
State Ein bestimmter Zustand eines UI-Elements (z.B. default, hover, active, disabled, loading).
Storybook Ein Tool zur Entwicklung und Dokumentation von UI-Komponenten in Isolation.
Style Guide Ein Dokument, das visuelle Standards und Regeln für ein Design System festlegt. Teil der umfassenderen Celestia-Dokumentation.
Theme Ein Satz von visuellen Eigenschaften (Farben, Typografie), die zusammen ein konsistentes Erscheinungsbild ergeben. In Celestia: Light Mode, Dark Mode, Custom Themes.
Timing Die Dauer einer Animation. In Celestia durch Tokens wie —animation-duration-fast definiert.
Token Siehe Design Token.
Touch Target Der klickbare Bereich eines interaktiven Elements auf Touch-Geräten. Mindestgrösse in Celestia: 44x44px.
Typography Die Kunst und Technik des Satzes von Schrift. Umfasst Schriftarten, Grössen, Abstände und hierarchische Strukturen.
UI (User Interface) Die visuelle Schnittstelle, über die Nutzer*innen mit einem Produkt interagieren.
Usability Die Benutzerfreundlichkeit eines Produkts. Wie einfach können Nutzer*innen ihre Ziele erreichen?
UX (User Experience) Das Gesamterlebnis eines Nutzers mit einem Produkt, einschliesslich Utility, Ease of Use und Efficiency.
Variant Eine alternative Version einer Komponente mit unterschiedlichen Eigenschaften (z.B. Button in primary, secondary, danger).
Versioning Das System zur Kennzeichnung von verschiedenen Zuständen eines Produkts. In Celestia: Semantische Versionierung (Major.Minor.Patch).
Viewport Der sichtbare Bereich einer Webseite im Browser.
Visual Hierarchy Die Anordnung von Elementen nach ihrer Wichtigkeit, um den Blick des Nutzers zu führen.
WCAG (Web Content Accessibility Guidelines) Internationale Standards für Web-Barrierefreiheit, entwickelt vom W3C. Celestia orientiert sich an WCAG 2.1 Level AA.
Whitespace Leerraum in einem Design, der visuelle Atmung ermöglicht und Elemente voneinander trennt. Auch “Negative Space” genannt.
Widow Ein einzelnes Wort am Ende eines Absatzes, das allein in einer Zeile steht. Wird typografisch vermieden.
Zeplin Ein Tool für den Design-to-Development-Handoff (wird bei Stutz Medien nicht verwendet, stattdessen Figma Dev Mode).
Zeroheight Eine Plattform für Design System-Dokumentation (Alternative zu unserem Astro-basierten Ansatz).
Dieses Glossar wird kontinuierlich erweitert. Vorschläge für neue Begriffe können an das Celestia-Team gesendet werden.