Phase 02 – Formen
Phase 02 – Formen
Design System:
Einmal entschieden, überall gültig.
Ein Designsystem macht aus der Identität ein Arbeitsgerät. Komponenten, Templates und Muster sind dokumentiert und so strukturiert, dass euer Team und eure Dienstleister markenkonform produzieren können, ohne vorher zu fragen. Das System übernimmt die Arbeit, die sonst jedes Mal neu anfällt.
Ein Designsystem macht aus der Identität ein Arbeitsgerät. Komponenten, Templates und Muster sind dokumentiert und so strukturiert, dass euer Team und eure Dienstleister markenkonform produzieren können, ohne vorher zu fragen. Das System übernimmt die Arbeit, die sonst jedes Mal neu anfällt.
Die Definitionszeile
Ein Designsystem ist ein zusammenhängender Satz von Standards, mit dem sich Gestaltung in großer Zahl steuern lässt: wiederverwendbare Komponenten, Vorlagen und Layoutregeln, an einem Ort dokumentiert. Es enthält den Styleguide, ist aber mehr als er.
Ein Designsystem ist ein zusammenhängender Satz von Standards, mit dem sich Gestaltung in großer Zahl steuern lässt: wiederverwendbare Komponenten, Vorlagen und Layoutregeln, an einem Ort dokumentiert. Es enthält den Styleguide, ist aber mehr als er.
Ein Designsystem ist ein zusammenhängender Satz von Standards, mit dem sich Gestaltung in großer Zahl steuern lässt: wiederverwendbare Komponenten, Vorlagen und Layoutregeln, an einem Ort dokumentiert. Es enthält den Styleguide, ist aber mehr als er.
Scope
Was drin ist
Problem List
Das ist für dich, wenn
Jedes Layout muss über eine Person.
Ohne Vorlagen gibt genau ein Mensch bei euch alles frei, und dieser Mensch ist der Engpass für alle anderen.
Neue Dienstleister brauchen jedes Mal ein Briefing.
Was ihr beim letzten Projekt erklärt habt, erklärt ihr beim nächsten wieder, weil es nirgends aufgeschrieben ist.
Vorlagen gibt es, aber jeder hat seine eigene.
Drei Versionen derselben Präsentation sind im Umlauf, und niemand kann sagen, welche die aktuelle ist.
Kleine Änderungen kosten unverhältnismäßig viel.
Eine neue Farbe oder ein neuer Button muss an dreißig Stellen einzeln nachgezogen werden, und eine wird immer vergessen.
„Ein Designsystem wird nicht daran gemessen, wie gut es aussieht, sondern daran, wie oft jemand daran vorbeiarbeitet."
„Ein Designsystem wird nicht daran gemessen, wie gut es aussieht, sondern daran, wie oft jemand daran vorbeiarbeitet."
„Ein Designsystem wird nicht daran gemessen, wie gut es aussieht, sondern daran, wie oft jemand daran vorbeiarbeitet."
Häufig gestellte
Häufig Gestellte
Häufig gestellte
Fragen
Fragen
Was ist eigentlich ein Design-System?
Ein Design-System ist ein komplettes Regelwerk, um Design skalierbar zu machen: wiederverwendbare Komponenten, Vorlagen und Layoutregeln, dokumentiert und benannt an einem zentralen Ort.
Zwei Dinge unterscheiden es von einer einfachen Ordnerstruktur. Erstens: Die Elemente sind klar benannt. So nutzt jeder denselben Begriff für dasselbe Element, und Missverständnisse zwischen Design, Marketing und Entwicklung gehören der Vergangenheit an.
Zweitens: Sie sind dokumentiert. Das bedeutet, es ist festgehalten, wann was wie genutzt wird – und wann eben nicht. Eine Bibliothek ohne diese Erklärung wird genauso oft falsch genutzt wie gar keine Bibliothek. Die Dokumentation ist also kein optionaler Anhang, sondern das Herzstück, das die wahre Qualität des Systems zeigt!
Ein dritter Punkt wird oft übersehen: Ein System lebt auch von Entscheidungen darüber, was es nicht gibt. Wenn es nur drei Buttongrößen gibt, taucht auch keine vierte auf – und genau das hält eine Marke über Jahre hinweg konsistent zusammen.
Framer is a web builder for creative pros. Be sure to check out framer.com to learn more.
Ein Design-System ist ein komplettes Regelwerk, um Design skalierbar zu machen: wiederverwendbare Komponenten, Vorlagen und Layoutregeln, dokumentiert und benannt an einem zentralen Ort.
Zwei Dinge unterscheiden es von einer einfachen Ordnerstruktur. Erstens: Die Elemente sind klar benannt. So nutzt jeder denselben Begriff für dasselbe Element, und Missverständnisse zwischen Design, Marketing und Entwicklung gehören der Vergangenheit an.
Zweitens: Sie sind dokumentiert. Das bedeutet, es ist festgehalten, wann was wie genutzt wird – und wann eben nicht. Eine Bibliothek ohne diese Erklärung wird genauso oft falsch genutzt wie gar keine Bibliothek. Die Dokumentation ist also kein optionaler Anhang, sondern das Herzstück, das die wahre Qualität des Systems zeigt!
Ein dritter Punkt wird oft übersehen: Ein System lebt auch von Entscheidungen darüber, was es nicht gibt. Wenn es nur drei Buttongrößen gibt, taucht auch keine vierte auf – und genau das hält eine Marke über Jahre hinweg konsistent zusammen.
Was ist eigentlich der Unterschied zwischen einem Design-System und einem Styleguide?
Ein Styleguide beschreibt, wie etwas aussehen soll. Ein Design-System liefert die fertigen Bausteine dazu. Der Styleguide ist also nur ein Teil des Systems, nicht das Ganze.
In der Praxis merkst du den Unterschied sofort am Aufwand: Mit einem Styleguide schlägt man nach, wie breit ein Abstand sein soll, und baut ihn jedes Mal selbst nach – und jedes Mal ein kleines bisschen anders. Mit einem System nimmst du einfach das fertige Teil und der Abstand stimmt sofort! Bei uns entspringt der Styleguide der Corporate Identity, und das System baut direkt darauf auf.
Die technische Brücke zwischen beiden nennen wir Design Tokens: Farben, Abstände und Schriften werden als feste Werte statt als reine Beschreibungen gespeichert. So ist dieselbe Farbe in der Design-Datei auch im Code wirklich absolut identisch! Was von beidem du brauchst, hängt ganz davon ab, wer am Werk ist. Wenn nur wir das sind, reicht ein Styleguide völlig aus. Sobald aber auch andere mitmischen – dein Team, eine Agentur oder externe Entwickler – wird jede Beschreibung schnell zur Interpretationssache. Und dann ist das fertige Bauteil am Ende einfach günstiger als jede lange Erklärung!
Framer is a web builder for creative pros. Be sure to check out framer.com to learn more.
Ein Styleguide beschreibt, wie etwas aussehen soll. Ein Design-System liefert die fertigen Bausteine dazu. Der Styleguide ist also nur ein Teil des Systems, nicht das Ganze.
In der Praxis merkst du den Unterschied sofort am Aufwand: Mit einem Styleguide schlägt man nach, wie breit ein Abstand sein soll, und baut ihn jedes Mal selbst nach – und jedes Mal ein kleines bisschen anders. Mit einem System nimmst du einfach das fertige Teil und der Abstand stimmt sofort! Bei uns entspringt der Styleguide der Corporate Identity, und das System baut direkt darauf auf.
Die technische Brücke zwischen beiden nennen wir Design Tokens: Farben, Abstände und Schriften werden als feste Werte statt als reine Beschreibungen gespeichert. So ist dieselbe Farbe in der Design-Datei auch im Code wirklich absolut identisch! Was von beidem du brauchst, hängt ganz davon ab, wer am Werk ist. Wenn nur wir das sind, reicht ein Styleguide völlig aus. Sobald aber auch andere mitmischen – dein Team, eine Agentur oder externe Entwickler – wird jede Beschreibung schnell zur Interpretationssache. Und dann ist das fertige Bauteil am Ende einfach günstiger als jede lange Erklärung!
Wir haben doch schon Vorlagen. Reicht das nicht völlig aus?
Wenn deine Vorlagen genutzt werden, aktuell sind und niemand erst nachfragen muss, dann reicht das völlig aus. Überprüfe das lieber, bevor du Geld ausgibst. Die Realität sieht oft anders aus, wenn man erst mal genauer hinschaut!
Meistens findet man einen Ordner voller Vorlagen aus verschiedenen Jahren, von denen drei genutzt werden und der Rest veraltet ist. Das ist kein Vorlagen-Problem, sondern ein Wartungs-Problem: Niemand fühlt sich verantwortlich, also altert alles vor sich hin. Ein neues System löst das nicht von allein, aber es macht Updates super einfach – weil du eine Änderung an einem Ort statt an dreißig Stellen machst. Und es zeigt sofort, was überhaupt da ist. Bei einem über Jahre gewachsenen Ordner ist das oft schon die halbe Miete!
Ein einfacher Schritt vor dem Projektstart: Schicke jemandem außerhalb des Marketings den Link zum Vorlagenordner und bitte ihn, eine Präsentation zu erstellen. Wo auch immer er steckenbleibt – genau da liegt die echte Schwachstelle. Und die ist selten dort, wo man sie vermutet!
Framer is a web builder for creative pros. Be sure to check out framer.com to learn more.
Wenn deine Vorlagen genutzt werden, aktuell sind und niemand erst nachfragen muss, dann reicht das völlig aus. Überprüfe das lieber, bevor du Geld ausgibst. Die Realität sieht oft anders aus, wenn man erst mal genauer hinschaut!
Meistens findet man einen Ordner voller Vorlagen aus verschiedenen Jahren, von denen drei genutzt werden und der Rest veraltet ist. Das ist kein Vorlagen-Problem, sondern ein Wartungs-Problem: Niemand fühlt sich verantwortlich, also altert alles vor sich hin. Ein neues System löst das nicht von allein, aber es macht Updates super einfach – weil du eine Änderung an einem Ort statt an dreißig Stellen machst. Und es zeigt sofort, was überhaupt da ist. Bei einem über Jahre gewachsenen Ordner ist das oft schon die halbe Miete!
Ein einfacher Schritt vor dem Projektstart: Schicke jemandem außerhalb des Marketings den Link zum Vorlagenordner und bitte ihn, eine Präsentation zu erstellen. Wo auch immer er steckenbleibt – genau da liegt die echte Schwachstelle. Und die ist selten dort, wo man sie vermutet!
Ab wann lohnt sich ein Design-System für dich?
Wenn mehrere Personen oder verschiedene Zulieferer regelmäßig die gleichen Dinge produzieren. Die Schwelle ist nicht die Unternehmensgröße, sondern die Wiederholung: dieselben Formate, mehrmals im Monat, aus verschiedenen Händen.
Bei drei Produktionen im Monat, bei denen eine Person alles selbst macht, kostet ein System mehr als die Situation, die es ersetzt. Bei zwanzig Produktionen, verteilt auf vier Köpfe, zahlt es sich meist innerhalb eines Jahres aus – und zwar nicht durch die Designzeit, sondern durch die wegfallende Abstimmung.
Der zweite Auslöser ist Veränderung: neue Kollegen, eine neue Agentur, ein neuer Kanal. Jedes Mal, wenn jemand Neues einsteigt, bezahlst du entweder für ein Briefing oder du hast ein System. Es gibt auch eine kleine Variante: Wenn sich das Ganze nicht rechnet, aber die wöchentlichen Präsentationen nerven, baust du einfach diesen einen Vorlagensatz richtig auf und lässt den Rest. Das ist dann kein halbes System, sondern ein komplettes für ein einzelnes Format – und das kannst du später ganz einfach erweitern!
Framer is a web builder for creative pros. Be sure to check out framer.com to learn more.
Wenn mehrere Personen oder verschiedene Zulieferer regelmäßig die gleichen Dinge produzieren. Die Schwelle ist nicht die Unternehmensgröße, sondern die Wiederholung: dieselben Formate, mehrmals im Monat, aus verschiedenen Händen.
Bei drei Produktionen im Monat, bei denen eine Person alles selbst macht, kostet ein System mehr als die Situation, die es ersetzt. Bei zwanzig Produktionen, verteilt auf vier Köpfe, zahlt es sich meist innerhalb eines Jahres aus – und zwar nicht durch die Designzeit, sondern durch die wegfallende Abstimmung.
Der zweite Auslöser ist Veränderung: neue Kollegen, eine neue Agentur, ein neuer Kanal. Jedes Mal, wenn jemand Neues einsteigt, bezahlst du entweder für ein Briefing oder du hast ein System. Es gibt auch eine kleine Variante: Wenn sich das Ganze nicht rechnet, aber die wöchentlichen Präsentationen nerven, baust du einfach diesen einen Vorlagensatz richtig auf und lässt den Rest. Das ist dann kein halbes System, sondern ein komplettes für ein einzelnes Format – und das kannst du später ganz einfach erweitern!
Möchtest du mehr über uns erfahren? Sieh dir unser komplettes FAQ an!
Möchtest du mehr über uns erfahren? Schau dir unser komplettes FAQ an!
Möchtest du mehr über uns erfahren? Schaue dir unser komplettes FAQ an!
Interessiert an Content-Marketing?
Dann bist du hier genau richtig!
Interessiert an
Content-Marketing?
Dann bist du hier genau richtig!
Azubis finden im Handwerk: 5 Schritte
Azubis und Mitarbeiter finden im Handwerk: Warum Stellenanzeigen allein nicht reichen und welche fünf Schritte wirklich Bewerbungen bringen.
KI-Suche ist da. SEO ist nicht tot.
Beschreibung: 43 Prozent der Deutschen nutzen ChatGPT. Die Suche verändert sich unter unseren Füßen. Was real ist, was Hype ist, und was dein Unternehmen jetzt tun sollte.
Warum deine Website im Handwerk deutlich mehr Potenzial hat
94 Prozent der deutschen Handwerksbetriebe haben eine Website. Nur 3 von 500 geprüften Seiten kommen in die Nähe dessen, was sie leisten könnten. Wie viel Potenzial in deiner Website steckt, ohne dass du es siehst
Framer vs. WordPress vs. TYPO3
Framer oder WordPress für dein Handwerksunternehmen? Ein ehrlicher Vergleich zu Kosten, Wartung und SEO. Plus wann Webflow oder TYPO3 lohnt.
Azubis finden im Handwerk: 5 Schritte
Azubis und Mitarbeiter finden im Handwerk: Warum Stellenanzeigen allein nicht reichen und welche fünf Schritte wirklich Bewerbungen bringen.
KI-Suche ist da. SEO ist nicht tot.
Beschreibung: 43 Prozent der Deutschen nutzen ChatGPT. Die Suche verändert sich unter unseren Füßen. Was real ist, was Hype ist, und was dein Unternehmen jetzt tun sollte.
Warum deine Website im Handwerk deutlich mehr Potenzial hat
94 Prozent der deutschen Handwerksbetriebe haben eine Website. Nur 3 von 500 geprüften Seiten kommen in die Nähe dessen, was sie leisten könnten. Wie viel Potenzial in deiner Website steckt, ohne dass du es siehst
Azubis finden im Handwerk: 5 Schritte
Azubis und Mitarbeiter finden im Handwerk: Warum Stellenanzeigen allein nicht reichen und welche fünf Schritte wirklich Bewerbungen bringen.
KI-Suche ist da. SEO ist nicht tot.
Beschreibung: 43 Prozent der Deutschen nutzen ChatGPT. Die Suche verändert sich unter unseren Füßen. Was real ist, was Hype ist, und was dein Unternehmen jetzt tun sollte.
Warum deine Website im Handwerk deutlich mehr Potenzial hat
94 Prozent der deutschen Handwerksbetriebe haben eine Website. Nur 3 von 500 geprüften Seiten kommen in die Nähe dessen, was sie leisten könnten. Wie viel Potenzial in deiner Website steckt, ohne dass du es siehst
Framer vs. WordPress vs. TYPO3
Framer oder WordPress für dein Handwerksunternehmen? Ein ehrlicher Vergleich zu Kosten, Wartung und SEO. Plus wann Webflow oder TYPO3 lohnt.
Deine Brand. Unser Content. Let's GO!
Deine Brand. Unser Content.
Let's GO!
Deine Brand. Unser Content. Let's GO!
Nikkan & Soli Geschäftsführer
Nikkan & Soli Geschäftsführer
Nikkan & Soli Geschäftsführer
