Design system
Brand Strategy brainstorming session
Brand Strategy brainstorming session

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

01.
Komponenten-Bibliothek
Die wiederkehrenden Bauteile, einmal richtig gebaut: Buttons, Formularfelder, Karten, Navigation, Tabellen, dazu die Zustände, die im Alltag wirklich vorkommen, also aktiv, deaktiviert, Fehler, leer. Jedes Bauteil mit Namen, damit Gestaltung, Marketing und Entwicklung dasselbe meinen, wenn sie dasselbe sagen.
02.
Template-Design
Fertige Vorlagen für das, was ihr regelmäßig produziert: Präsentationen, Social-Formate, Anzeigen, Dokumente. Gebaut in den Programmen, in denen ihr wirklich arbeitet, nicht nur in unseren. Eine Vorlage, die bei euch niemand öffnen kann, ist keine Vorlage.
03.
Grid- & Layoutsystem
Die Regeln darunter: Raster, Abstände, Größenstufen und das Verhalten auf kleinen und großen Flächen. Das ist der Teil, den niemand bewusst sieht und der darüber entscheidet, ob etwas Neues in zwei Jahren noch dazupasst.
01.
Komponenten-Bibliothek
Die wiederkehrenden Bauteile, einmal richtig gebaut: Buttons, Formularfelder, Karten, Navigation, Tabellen, dazu die Zustände, die im Alltag wirklich vorkommen, also aktiv, deaktiviert, Fehler, leer. Jedes Bauteil mit Namen, damit Gestaltung, Marketing und Entwicklung dasselbe meinen, wenn sie dasselbe sagen.
02.
Template-Design
Fertige Vorlagen für das, was ihr regelmäßig produziert: Präsentationen, Social-Formate, Anzeigen, Dokumente. Gebaut in den Programmen, in denen ihr wirklich arbeitet, nicht nur in unseren. Eine Vorlage, die bei euch niemand öffnen kann, ist keine Vorlage.
03.
Grid- & Layoutsystem
Die Regeln darunter: Raster, Abstände, Größenstufen und das Verhalten auf kleinen und großen Flächen. Das ist der Teil, den niemand bewusst sieht und der darüber entscheidet, ob etwas Neues in zwei Jahren noch dazupasst.

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

What is a design system?

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 und benannt.

Der Unterschied zu einer Sammlung von Dateien liegt in zwei Dingen. Erstens sind die Teile benannt, sodass alle dasselbe Wort für dasselbe Element benutzen und die Missverständnisse zwischen Gestaltung, Marketing und Entwicklung wegfallen.

Zweitens sind sie dokumentiert, es steht also dabei, wann man was benutzt und wann nicht. Eine Bibliothek ohne diese Erklärung wird genauso oft falsch verwendet wie gar keine. Deshalb ist die Dokumentation kein Anhang am Ende, sondern ein Teil des Systems, und sie ist der Teil, an dem man die Qualität erkennt.

Ein dritter Punkt wird oft übersehen: Ein System besteht auch aus Entscheidungen darüber, was es nicht gibt. Wenn nur drei Buttongrößen existieren, entsteht die vierte gar nicht erst, und genau das hält einen Auftritt über Jahre zusammen.

Framer is a web builder for creative pros. Be sure to check out framer.com to learn more.

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 und benannt.

Der Unterschied zu einer Sammlung von Dateien liegt in zwei Dingen. Erstens sind die Teile benannt, sodass alle dasselbe Wort für dasselbe Element benutzen und die Missverständnisse zwischen Gestaltung, Marketing und Entwicklung wegfallen.

Zweitens sind sie dokumentiert, es steht also dabei, wann man was benutzt und wann nicht. Eine Bibliothek ohne diese Erklärung wird genauso oft falsch verwendet wie gar keine. Deshalb ist die Dokumentation kein Anhang am Ende, sondern ein Teil des Systems, und sie ist der Teil, an dem man die Qualität erkennt.

Ein dritter Punkt wird oft übersehen: Ein System besteht auch aus Entscheidungen darüber, was es nicht gibt. Wenn nur drei Buttongrößen existieren, entsteht die vierte gar nicht erst, und genau das hält einen Auftritt über Jahre zusammen.

What is the difference between a design system and a style guide?

A style guide describes how something should look. A design system supplies the finished parts. The style guide is one component of the system, not the same thing.

In practice you notice the difference in effort. With a style guide someone looks up how wide a margin should be and rebuilds it themselves, every time, slightly differently each time. With a system they take the finished part and the margin is right. With us the style guide comes out of the corporate identity and the system builds on it.

The technical bridge between the two is called design tokens: colour, spacing and type stored as values rather than as descriptions, so the same colour in the design file and in the code really is the same. Which of the two you need depends on who produces. If that is only us, a style guide is enough. As soon as other people produce too, your team, an agency, a developer, every description becomes a matter of interpretation, and then the finished part is cheaper than the explanation.

Framer is a web builder for creative pros. Be sure to check out framer.com to learn more.

A style guide describes how something should look. A design system supplies the finished parts. The style guide is one component of the system, not the same thing.

In practice you notice the difference in effort. With a style guide someone looks up how wide a margin should be and rebuilds it themselves, every time, slightly differently each time. With a system they take the finished part and the margin is right. With us the style guide comes out of the corporate identity and the system builds on it.

The technical bridge between the two is called design tokens: colour, spacing and type stored as values rather than as descriptions, so the same colour in the design file and in the code really is the same. Which of the two you need depends on who produces. If that is only us, a style guide is enough. As soon as other people produce too, your team, an agency, a developer, every description becomes a matter of interpretation, and then the finished part is cheaper than the explanation.

We already have templates. Isn't that enough?

If your templates get used, are current and nobody has to ask first, then it is enough. Check that before spending money. The answer often looks different once you actually look.

The typical state is a folder of templates from several different years, three of which get used while the rest are out of date. That is not a template problem but a maintenance problem: nobody owns it, so everything ages at once. A system does not solve that by itself, but it makes updating cheap, because one change happens in one place instead of thirty. And it makes visible what exists at all, which with a folder that grew over years is often half the work already.

A simple step before starting a project: send someone outside marketing the link to the template folder and ask them to build a deck. Wherever they get stuck is the real gap, and it is rarely where people expect it to be.

Framer is a web builder for creative pros. Be sure to check out framer.com to learn more.

If your templates get used, are current and nobody has to ask first, then it is enough. Check that before spending money. The answer often looks different once you actually look.

The typical state is a folder of templates from several different years, three of which get used while the rest are out of date. That is not a template problem but a maintenance problem: nobody owns it, so everything ages at once. A system does not solve that by itself, but it makes updating cheap, because one change happens in one place instead of thirty. And it makes visible what exists at all, which with a folder that grew over years is often half the work already.

A simple step before starting a project: send someone outside marketing the link to the template folder and ask them to build a deck. Wherever they get stuck is the real gap, and it is rarely where people expect it to be.

At what point does a design system pay off?

When several people or several suppliers produce the same things regularly. The threshold is not company size but repetition: the same formats, several times a month, from changing hands.

At three productions a month with one person doing everything, a system costs more than the situation it replaces. At twenty productions across four people it usually pays back within a year, and not through design time but through the coordination that disappears.

The second trigger is turnover: new colleagues, a new agency, a new channel. Every time somebody new has to start, you either pay for a briefing or you have a system. There is also a small version. If the full scope does not add up but the weekly decks hurt, you build that one set of templates properly and leave the rest. That is not half a system but a complete one for a single format, and it can be extended later.

Framer is a web builder for creative pros. Be sure to check out framer.com to learn more.

When several people or several suppliers produce the same things regularly. The threshold is not company size but repetition: the same formats, several times a month, from changing hands.

At three productions a month with one person doing everything, a system costs more than the situation it replaces. At twenty productions across four people it usually pays back within a year, and not through design time but through the coordination that disappears.

The second trigger is turnover: new colleagues, a new agency, a new channel. Every time somebody new has to start, you either pay for a briefing or you have a system. There is also a small version. If the full scope does not add up but the weekly decks hurt, you build that one set of templates properly and leave the rest. That is not half a system but a complete one for a single format, and it can be extended later.

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!

SEO and AI
SEO and AI

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.

SEO and AI
SEO and AI
Cover-Illustration: Warum deine Handwerk-Website ihren Job nicht macht. FRÆM Mascot mit kaputtem Laptop und Baustellenband."
Cover-Illustration: Warum deine Handwerk-Website ihren Job nicht macht. FRÆM Mascot mit kaputtem Laptop und Baustellenband."

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

Cover-Illustration: Warum deine Handwerk-Website ihren Job nicht macht. FRÆM Mascot mit kaputtem Laptop und Baustellenband."
Cover-Illustration: Warum deine Handwerk-Website ihren Job nicht macht. FRÆM Mascot mit kaputtem Laptop und Baustellenband."
Framer vs Wordpress vs TYPO3
Framer vs Wordpress vs TYPO3

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.

Framer vs Wordpress vs TYPO3
Framer vs Wordpress vs TYPO3
Sales vs Marketing
Sales vs Marketing

Sales vs. Marketing: Wer hat wirklich Recht?

Das klassische Sales-vs.-Marketing-Argument dreht sich selten darum, wer Recht hat. Meistens geht es um eine Distanz, die niemand offen ansprechen will. Wie du sie erkennst, und wie du sie schließt.

Sales vs Marketing
Sales vs Marketing

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