Das perfekte Webdesign 2/5 - Design-Systems sind der Schlüssel zu konsistenten Webprojekten
Habt ihr schon einmal an einem Webprojekt gearbeitet, bei dem plötzlich auffiel, dass Buttons auf verschiedenen Seiten unterschiedlich aussehen? Oder wo die Abstände zwischen Elementen irgendwie... unregelmässig wirkten? Bei Code Crush haben wir diese Herausforderungen nicht nur gesehen, sondern auch gemeistert – mit einem "Tool", das wir nicht mehr missen möchten: dem Design System
Autor:
Samuel Rhyner
Datum: 18. März 2025
Lesezeit: ca. 3 min
Das ist Artikel 2 von 5. Die Serie beginnt hier.
Was ist ein Design System überhaupt?
Ein Design System ist weit mehr als nur eine Sammlung von UI-Elementen. Es ist die zentrale Bibliothek eurer digitalen Markenidentität. Stellt es euch wie ein lebendiges Handbuch vor, das alle visuellen und funktionalen Elemente eurer Website oder App definiert und dokumentiert.
Die Bausteine eines effektiven Design Systems
Farben mit System statt Chaos: Anstatt "irgendein Blau" zu verwenden, definieren wir präzise Farbpaletten mit Primär-, Sekundär- und Akzentfarben sowie deren Abstufungen. Diese werden in Figma als Variablen festgelegt, sodass Änderungen global wirken – ohne dass eine Farbanpassung 100 Aktualisierungen benötigt. 🙃
Typografie-Hierarchie: Welche Schriftarten nutzen wir? In welchen Grössen, Gewichtungen und Zeilenabständen? Ein gutes Design System legt nicht nur die Fonts fest, sondern auch, wie Überschriften, Fliesstexte und funktionale Texte aussehen sollen.
Spacing-System: Konsistente Abstände schaffen visuelle Harmonie. Wir definieren ein Raster (meist 4px oder 8px basiert), an dem sich alle Abstände orientieren – kein "das sieht ungefähr richtig aus" mehr!
Komponenten-Bibliothek: Hier wird es spannend: Buttons, Karten, Navigation, Formulare – all diese Elemente werden als wiederverwendbare Komponenten definiert, komplett mit ihren verschiedenen Zuständen (Normal, Hover, Fokus, Disabled). Gerade in grösseren Applikationen sehr sinnvoll!
Woher kommen die Konflikte?
Unterschiedliche Perspektiven
Designer:innen wollen visuell begeistern, Entwickler:innen denken an Code-Strukturen und Performance.
Zeitdruck & knappe Budgets
In der Projektplanung rücken „nice to haves" wie Accessibility-Funktionen gerne in den Hintergrund, besonders dann, wenn die Zeit drängt oder das Budget knapp ist.
Kommunikationslücken
Der Design- und der Entwicklungsprozess überschneidet sich in der Praxis leider nur selten, sodass die Entwickler erst ins Spiel kommen, wenn das Design bereits fertig ist.
Warum uns Design Systems begeistern
Die Vorteile eines gut durchdachten Design Systems sind klar und wir möchten am liebsten nie mehr ohne arbeiten:
Effizienz: Änderungen an Basiskomponenten wirken sich automatisch auf alle Instanzen aus. Eine Anpassung, hunderte Updates!
Bessere Zusammenarbeit: Designer:innen und Entwickler:innen sprechen dieselbe Sprache.
Garantierte Konsistenz: Keine abweichenden Styles oder unterschiedlichen Interpretationen mehr. Zudem schnelles Feedback für alle Beteiligten
Schnelleres Reagieren auf neuen Inhalt: Neue Seiten und Features lassen sich aus bestehenden Komponenten zusammensetzen.
Tipps für euer eigenes Design System
Für alle, die jetzt motiviert sind, ihr eigenes Design System zu starten:
Klein anfangen: Baut zunächst die wichtigsten, häufig verwendeten Komponenten.
Dokumentiert gründlich: Ein Design System ohne klare Nutzungsrichtlinien ist nur halb so wertvoll.
Regelmäßig pflegen: Behandelt es als lebendiges Produkt, nicht als einmaliges Projekt.
Team einbeziehen: Designer:innen UND Entwickler:innen sollten von Anfang an dabei sein.
Wir bei Code Crush glauben fest daran, dass ein gut gepflegtes Design System der Schlüssel zu konsistenten, skalierbaren und qualitativ hochwertigen Webprojekten ist. Die anfängliche Investition zahlt sich vielfach aus – in Zeit, Qualität und nicht zuletzt in der Zufriedenheit eurer Nutzer:innen.
In unserem nächsten Artikel der Serie werden wir tiefer in die Welt des komponentenbasierten Designs mit Auto Layout eintauchen – ein Game Changer, der eure Designs auf ein neues Level hebt!
Serie: Das perfekte Webdesign
Dieser Artikel ist ein Bestandteil aus unserer Blog-Serie:
Design-Systems sind der Schlüssel zu konsistenten Webprojekten
Komponentenbasiertes Design mit Auto Layout
Warum echter Inhalt wichtig ist
Accessibility und Best Practices
