Was ist ein Designsystem

Ein Designsystem legt Farben, Schriften, Logo und Bausteine Ihrer Website fest, bevor die erste Seite gebaut wird. So sehen Sie früh, wie Ihr Auftritt wirken wird, und erleben beim Launch keine Überraschungen mehr.

Keine Überraschungen mehr

Viele Website-Projekte laufen nach demselben Muster ab: Die Agentur baut wochenlang, dann folgt die grosse Präsentation. Erst jetzt merkt der Kunde, dass ihm das Blau zu kühl ist oder die Schrift nicht zur Branche passt. Jede Änderung in dieser Phase kostet Zeit und Geld, weil sie sich durch alle Seiten zieht.

Mit einem Designsystem drehen wir diese Reihenfolge um. Zuerst definieren wir gemeinsam mit Ihnen das visuelle Fundament, danach wird gebaut. Was Sie im Designsystem freigegeben haben, sehen Sie später auch auf der fertigen Website.

Was ist ein Designsystem?

Ein Designsystem ist das Regelwerk für das Aussehen Ihrer Marke im Web. Man kann es sich wie einen Baukasten vorstellen: Alle Teile sind einmal sauber definiert und werden danach überall gleich eingesetzt.

Typischerweise gehören dazu:

• Farben mit klaren Rollen: Hauptfarbe, Akzentfarbe, Hintergründe, Textfarben und Signalfarben für Hinweise oder Fehler
• Schriften für Überschriften und Fliesstext, inklusive Grössen und Abständen
• Logo in den nötigen Varianten, etwa hell, dunkel und als kleines Icon
• Komponenten wie Buttons, Karten, Formulare, Navigation und Footer
• Abstände und Raster, damit jede Seite ruhig und aufgeräumt wirkt
• Bildsprache und Icons, also welche Art von Fotos und Symbolen zu Ihnen passt

Der grosse Vorteil: Neue Seiten, Landingpages oder sogar Social-Media-Beiträge entstehen später aus denselben Bausteinen. Ihr Auftritt bleibt einheitlich, auch wenn er wächst.

Moodboard oder Designsystem?

Viele kennen den Begriff Moodboard. Ein Moodboard ist eine Sammlung von Bildern, Farben und Beispielseiten, die eine Stimmung einfangen. Es beantwortet die Frage: Welches Gefühl soll die Website vermitteln?

Das Designsystem geht einen Schritt weiter. Es macht aus dieser Stimmung verbindliche Regeln: genaue Farbwerte, konkrete Schriften, fertige Buttons und Abstände. Das Moodboard ist also der Anfang, das Designsystem die Grundlage für die Umsetzung. Bei uns fliesst beides ineinander: Ihre Lieblingsbeispiele bilden das Moodboard, daraus entsteht das Designsystem.

Gute Farben definieren

Farben entscheiden in Sekunden, ob eine Website seriös, verspielt, edel oder technisch wirkt. Eine gute Palette besteht meist aus vier bis sechs Farben, die gut zusammenspielen.

So gehen wir vor:

1. Inspiration sammeln: Plattformen wie Coolors zeigen tausende fertige Paletten, sortiert nach aktuellen Trends. Hier finden auch Laien schnell eine Stimmung, die ihnen gefällt.
2. Rollen vergeben: Jede Farbe bekommt eine Aufgabe. Eine bewährte Faustregel ist 60 30 10: rund 60 Prozent ruhige Grundfarbe, 30 Prozent Sekundärfarbe und 10 Prozent Akzent für Buttons und wichtige Elemente.
3. Kontrast prüfen: Text muss auf jedem Hintergrund gut lesbar sein. Wir prüfen die Kombinationen nach den Richtlinien für Barrierefreiheit (WCAG), damit auch ältere Menschen oder Personen mit Sehschwäche alles lesen können.
4. Bestehendes berücksichtigen: Haben Sie bereits ein Logo, Fahrzeugbeschriftungen oder Geschäftsdrucksachen, leiten wir die Palette davon ab.

Beispiel: Für ein gehobenes Restaurant direkt am See passen gedämpfte Petrol- und Mintöne, ein helles Weiss mit Blaustich und ein warmer Pfirsichton als Akzent. Die Palette erinnert an Wasser und Sonnenuntergang und wirkt trotzdem edel.

Die passende Schrift finden

Schrift ist Stimme. Eine klassische Serifenschrift wirkt vertrauenswürdig und traditionell, eine klare serifenlose Schrift modern und sachlich. Meist kombinieren wir zwei Schriften: eine mit Charakter für Überschriften und eine gut lesbare für den Fliesstext.

Damit die KI mit der richtigen Schrift arbeitet, braucht sie eine klare Vorgabe. Dafür gibt es zwei einfache Wege:

• Schriftnamen nennen: Sie suchen sich bei Google Fonts oder einer Kombinationshilfe wie Fontpair zwei Schriften aus, die Ihnen gefallen. Wir übergeben die Namen direkt ins Designsystem.
• Beispielseite zeigen: Sie kennen eine Website, deren Schriftbild Ihnen gefällt? Schicken Sie uns den Link. Wir finden heraus, welche Schriften dort verwendet werden, und schlagen gleichwertige Alternativen vor, falls die Originalschrift lizenzpflichtig ist.

Beispiel aus der Praxis: Unsere eigene Website amplus.ch verwendet Merriweather für Überschriften und Konnect für den Fliesstext. Die Serifenschrift sorgt für Vertrauen, die serifenlose Schrift für gute Lesbarkeit am Bildschirm.

Wichtig für Schweizer KMU: Wir binden Schriften datenschutzkonform direkt auf Ihrem Server ein, statt sie bei jedem Seitenaufruf von Google zu laden.

Logo und Designsystem mit KI vorab erstellen

Früher war ein Designsystem ein aufwändiges Projekt, das sich nur grössere Firmen leisten konnten. Mit KI hat sich das grundlegend geändert. Wir erstellen heute innert kurzer Zeit einen ersten Entwurf, inklusive Logo, Farben, Schriften und den wichtigsten Komponenten.

Das hat drei Vorteile für Sie:

• Günstiger Einstieg: Das Designsystem entsteht vorab zu einem kleinen Fixpreis von [Preis ergänzen]. Sie sehen konkret, wie Ihr Auftritt aussehen könnte, bevor Sie sich für das ganze Projekt entscheiden.
• Logo inklusive: Haben Sie noch kein Logo, entwickelt die KI mehrere Vorschläge. Wir verfeinern den besten davon von Hand, damit er auch klein und einfarbig funktioniert.
• Gemeinsame Besprechung: Wir gehen das Designsystem mit Ihnen durch und passen es an, bis es sich richtig anfühlt.

Die KI liefert dabei Tempo und Varianten, die Erfahrung und das Auge kommen von uns. Kein Entwurf geht ungeprüft an Sie.

So sieht ein Designsystem aus

Auf einer einzigen Übersicht sehen Sie alle Entscheidungen, die Ihre Website prägen. Genau diese Seite besprechen wir gemeinsam, bevor die Umsetzung beginnt.

Änderungen dann, wenn sie günstig sind

Eine andere Farbe im Designsystem ist eine Sache von Minuten. Dieselbe Änderung auf einer fertigen Website mit zwanzig Seiten kann Stunden kosten. Darum lohnt es sich, Diskussionen über Geschmack ganz am Anfang zu führen.

Dazu kommen weitere Vorteile, die oft unterschätzt werden:

• Schnellere Umsetzung: Wir bauen Ihre Website direkt aus den freigegebenen Bausteinen. Weniger Abstimmungsrunden bedeuten einen früheren Launch.
• Einheitlicher Auftritt überall: Dieselben Farben und Schriften nutzen Sie auch für Flyer, Präsentationen, Social Media oder Ihre E-Mail-Signatur.
• Einfache Erweiterung: Kommt in zwei Jahren ein neues Angebot dazu, passt die neue Seite automatisch ins Gesamtbild.
• Sicherheit bei Teamwechseln: Arbeiten später andere Personen an Ihrer Website, finden sie alle Regeln an einem Ort.

Fazit

Ein Designsystem macht aus einem Bauchgefühl eine klare Vorlage, die Sie früh sehen, prüfen und mitgestalten können. Dank KI ist dieser Schritt heute schnell und günstig. Das Ergebnis: eine Website ohne böse Überraschungen.

Wie das Designsystem in den gesamten Ablauf einer modernen Website-Erstellung passt, zeigen wir im Beitrag Website-Erstellung im KI-Zeitalter: ein Praxistest.

Sie möchten Ihr Designsystem sehen, bevor Sie sich festlegen? Kontaktieren Sie uns unter 044 535 00 55 oder über das Kontaktformular. Wir erstellen Ihnen einen ersten Entwurf.