Styleguide auf der Website umsetzen: Leitfaden für die Praxis

Wir bei Talha Aslan und Team haben diese Arbeit schon oft begleitet. Das häufigste Problem ist schlicht: Der Styleguide liegt als schönes PDF in der Schublade, während die Website sich unabhängig davon entwickelt. In diesem Leitfaden zeigen wir Schritt für Schritt, wie wir aus dem PDF ein System machen, mit dem Entwickler direkt arbeiten. Das heißt, das Ziel ist, die Lücke zwischen Dokument und Live Website dauerhaft zu schließen.

Warum driften Styleguide und Website auseinander?

Die meisten Styleguides zielen auf Druckprodukte und denken in festen Seiten. Eine Website ist allerdings flexibel. Bildschirmbreite, Nutzereinstellungen und Textlänge ändern sich ständig. Deshalb sagt eine Regel wie „Logo immer oben links, 40 mm breit“ im Browser allein wenig aus. Jemand muss klar definieren, was diese Regel auf dem Bildschirm bedeutet.

Der zweite Grund ist die Arbeitsteilung. Eine Markenagentur schreibt den Styleguide, ein anderes Team programmiert die Website. Übersetzt niemand die Regeln dazwischen, arbeitet der Entwickler nach Gefühl. Folglich entsteht auf jeder neuen Seite ein etwas anderes Blau, ein etwas anderer Button und eine etwas andere Überschriftengröße. Mit der Zeit verwischen diese kleinen Abweichungen die Marke.

Der dritte Grund: Styleguides beschreiben selten Interaktion. Eine gedruckte Broschüre zeigt nie, wie ein Button beim Überfahren mit der Maus, beim Klicken oder im inaktiven Zustand aussieht. Daher müssen Sie diese Zustände neu gestalten, ohne den Geist des Styleguides zu verlassen.

Welche Teile des Styleguides sollten Sie zuerst herausziehen?

Zunächst lesen Sie das Dokument und sammeln jede für das Web relevante Regel in einer Liste. Wir nutzen dafür eine Tabelle. Jede Zeile enthält die Regel, die Seite im PDF und das Gegenstück im Web. So kann das restliche Team entscheiden, ohne das PDF zu öffnen. Achten Sie beim Herausziehen vor allem auf diese Bereiche:

• Logovarianten, Schutzzone, Mindestgröße und unzulässige Verwendungen.
• Primär und Sekundärfarben mit HEX, RGB, CMYK und Pantone Werten, falls vorhanden.
• Die Hausschrift, ihre Schnitte und eine mögliche Ersatzschrift.
• Hierarchie von Überschriften und Fließtext, Zeilenabstand und Ausrichtung.
• Bildsprache, Illustrationsstil und das Iconset.
• Tonalität, Schreibregeln und verbotene Formulierungen.

Markieren Sie außerdem die Lücken in dieser Liste. Zum Beispiel fehlen oft digitale Farbcodes, oder die Weblizenz der Hausschrift ist unklar. Klären Sie diese Punkte, bevor das Design beginnt. Sonst färben Sie wenige Wochen später alles neu ein.

Was sind Design Tokens, und warum übersetzen Sie den Styleguide in Tokens?

Ein Design Token ist ein kleiner, benannter Eintrag, der genau eine Gestaltungsentscheidung speichert. Ein Token namens „markePrimaer“ enthält zum Beispiel einen HEX Wert, ein Token namens „abstand4“ einen festen Abstand. Im Code leben Tokens meist als CSS Custom Properties, also als CSS Variablen.

Die Stärke der Tokens liegt in der einzigen Quelle. Der MDN Leitfaden zu CSS Custom Properties erklärt, dass Sie solche Werte einmal definieren und im gesamten Dokument wiederverwenden. Ändert sich also die Markenfarbe, passen Sie einen einzigen Wert an statt hunderter Zeilen.

Wir bauen Tokens in zwei Ebenen. Die untere Ebene enthält Rohwerte: Blautöne, eine Graustufenskala und Abstandsstufen. Die obere Ebene enthält Namen mit Bedeutung wie „buttonHintergrund“, „linkFarbe“ oder „fehlerText“. Komponenten lesen ausschließlich aus der oberen Ebene. Wenn Sie dann einen Dark Mode oder ein Kampagnenthema ergänzen, ändern Sie nur die Zuordnung. Das größere Bild beschreiben wir in unserem Leitfaden zum Design System.

Wie übersetzen Sie Markenfarben in digitale Werte?

Nennt Ihr Styleguide nur CMYK oder Pantone Codes, brauchen Sie einen eigenen Wert für Bildschirme. Denn Druckfarbe und Bildschirmlicht funktionieren unterschiedlich, und eine automatische Umrechnung wirkt oft matt. Die Details dieser Umrechnung behandeln wir im Beitrag Corporate Design digital umsetzen. Hier konzentrieren wir uns nur auf die Website.

In der Praxis wählen wir für jede Markenfarbe einen HEX Wert im sRGB Farbraum. Dann vergleichen wir ihn auf mehreren Bildschirmen, in heller und dunkler Umgebung. Nach der Freigabe durch die Markenverantwortlichen kommt der Wert als offizieller Code in den digitalen Anhang. Zum Umrechnen zwischen Formaten können Sie unser Tool für HTML Farbcodes nutzen.

Eine einzige Primärfarbe reicht nicht. Eine Oberfläche braucht hellere und dunklere Abstufungen derselben Farbe: für Hintergründe, Hoverzustände, Rahmen und ausgewählte Elemente. Deshalb leiten wir aus jeder Primärfarbe meist eine Skala mit acht bis zehn Stufen ab. Bauen Sie diese Skala mit gleichmäßigen Helligkeitsschritten statt nach Augenmaß. So passen die Töne zueinander.

Welche Farbe übernimmt auf der Website welche Aufgabe?

Die Palette in Rollen aufzuteilen, ist der wichtigste Schritt bei der Übertragung des Styleguides ins Web. Der Styleguide spricht meist von „Primärfarbe“ und „Sekundärfarbe“. Die Website braucht dagegen Rollen wie „Link“, „Primärbutton“, „Warnung“ und „Erfolg“. Die folgende Tabelle zeigt beispielhaft eine Rollenverteilung, die wir oft verwenden.

Fehler, Erfolgs und Infofarben fehlen in den meisten Styleguides. Trotzdem braucht jede Website sie. Suchen Sie Töne, die zur Wärme und Sättigung der Markenpalette passen. Zudem sollte Farbe nie allein eine Bedeutung tragen; ergänzen Sie eine Fehlermeldung um ein Icon oder klaren Text. Wie Farben wirken, erklärt unser Beitrag zur Farbpsychologie im Webdesign.

Was tun Sie, wenn die Markenfarbe den Kontrasttest nicht besteht?

Dieses Problem begegnet uns am häufigsten. Viele Markenfarben sind für Text auf weißem Grund zu hell. Laut der W3C Erläuterung zum Mindestkontrast verlangt Stufe AA für normalen Text mindestens 4.5:1 und für großen Text mindestens 3:1. Zudem runden Sie diese Schwellen nicht; ein Verhältnis von 4.499:1 fällt durch.

Dasselbe Dokument klärt allerdings ein wichtiges Detail. Text, der Teil eines Logos oder Markennamens ist, unterliegt keiner Kontrastanforderung. Der Styleguide kann diese Ausnahme jedoch nicht auf gewöhnlichen Fließtext ausdehnen. Anders gesagt: Auch wenn Ihre Marke ein helles Orange nutzt, setzen Sie Absätze und Buttons nicht in diesem Orange, wenn niemand sie lesen kann.

Für die Lösung wählen wir meist einen dieser Wege:

• Die Markenfarbe als Fläche nutzen und dunklen Text daraufsetzen.
• Für Text und Links einen dunkleren Ton derselben Farbe ableiten.
• Die Farbe nur für große Überschriften, Icons und dekorative Bereiche verwenden.
• Mit den Markenverantwortlichen eine barrierefreie „digitale Textfarbe“ in den Styleguide aufnehmen.

Jeden Versuch messen Sie mit unserem Kontrastrechner. Den größeren Rahmen der Barrierefreiheit erklärt unser Beitrag zur barrierefreien Website nach WCAG.

Wie wählen Sie Farben für Fokuszustände und Formulare?

Styleguides denken fast nie an Tastaturnutzer. Wer allerdings mit der Tabulatortaste durch eine Seite navigiert, muss klar sehen, wo er sich befindet. Die W3C Erläuterung zum Kontrast von Nicht Text Inhalten fordert für Bedienelemente und bedeutungstragende Grafiken mindestens 3:1. Außerdem gilt die Logoausnahme nicht für Fokusindikatoren.

Deshalb wählen wir für den Fokusrahmen eine kräftige Farbe aus der Markenpalette. Oft passt ein dunkler Ton der Primärfarbe oder eine kontrastierende Sekundärfarbe. Danach testen wir den Rahmen auf hellem und dunklem Grund. Formularfelder brauchen dieselbe Sorgfalt: Rahmen, aktivierte Checkboxen und Fehlerzustände sollten ebenso die Grenze 3:1 erreichen.

Behandeln Sie Hover und gedrückte Zustände genauso gründlich. Ein Primärbutton darf beim Überfahren zum Beispiel einen Ton dunkler erscheinen. Dennoch muss der Kontrast der Beschriftung über der Schwelle bleiben. Halten Sie auch diese kleinen Wechsel als Tokens fest, damit jeder Entwickler denselben Ton wählt.

Inaktive Komponenten fallen nicht unter die Regel. Trotzdem sollten sie nicht so blass sein, dass Nutzer nicht verstehen, warum ein Button nicht reagiert. Kurz gesagt: Treffen Sie für jeden Zustand eine klare Entscheidung und speichern Sie sie als Token.

Wie bringen Sie die Hausschrift ins Web?

Die erste Frage ist rechtlich, nicht technisch: Hat die Hausschrift eine Weblizenz? Eine Desktoplizenz deckt die Einbindung auf einer Website oft nicht ab. Prüfen Sie daher den Lizenzvertrag oder fragen Sie den Schriftanbieter. Passt die Lizenz nicht, wählen Sie eine weblizenzierte Alternative, die dem Charakter des Styleguides nahekommt.

Ist die Lizenz geklärt, geht es um Ladezeit. Die Best Practices für Schriften auf web.dev empfehlen das Format WOFF2, das Entfernen unnötiger Zeichen per Subsetting und eine bewusste Wahl der Anzeigestrategie beim Laden. Außerdem erinnert der Artikel daran, vor dem Subsetting die Lizenz zu prüfen.

Styleguides nennen oft vier oder fünf Schnitte. Eine Website braucht meist zwei oder drei: Regular, Semibold und Bold. Jeder zusätzliche Schnitt bedeutet eine weitere Datei. Laden Sie also nur die Schnitte, die das Design wirklich nutzt. Auswahl und Kombination von Schriften behandeln wir in unserem Leitfaden zur Webtypografie.

Wie bauen Sie eine Schriftskala für alle Bildschirmgrößen?

Der Styleguide gibt Überschriften in Punkt an. Das Web arbeitet dagegen mit Pixel, rem und Viewporteinheiten. Wir legen zuerst die Größe des Fließtexts fest. Dann skalieren wir die Überschriften mit einem einheitlichen Verhältnis. Somit bilden die sechs Überschriftenebenen eine proportionale Treppe.

Auf dem Smartphone nehmen große Überschriften zu viel Platz ein. Daher definieren wir Überschriftengrößen in einem Bereich, der mit der Bildschirmbreite mitwächst. Die CSS Funktion clamp hält dabei eine Unter und Obergrenze ein und erlaubt dazwischen einen fließenden Übergang. So folgen Leser der Hierarchie des Styleguides auf dem Desktop und auf dem Smartphone nach derselben Logik.

Zeilenabstand und Zeilenlänge gehören ebenfalls zur Skala. Ein angenehmer Zeilenabstand und nicht zu lange Zeilen erleichtern das Lesen. Übertragen Sie zudem Regeln zur Ausrichtung mit Bedacht, denn Blocksatz erzeugt am Bildschirm oft unruhige Lücken. Konkret funktioniert Fließtext, der im Katalog im Blocksatz steht, im Web meist linksbündig besser.

Wie übertragen Sie Logoregeln auf den Seitenkopf?

Der Styleguide beschreibt die Schutzzone meist relativ zu einem Teil des Logos, etwa der Höhe eines Buchstabens. Um dieses Verhältnis im Web zu halten, binden wir das Logo als SVG ein. Dann geben wir den umgebenden Abstand als Wert an, der an die Logohöhe gekoppelt ist. Wächst oder schrumpft das Logo, wächst oder schrumpft also auch die Schutzzone.

Auch die Mindestgröße müssen Sie übersetzen. Statt des Millimeterwerts aus dem Druck testen wir die kleinste Pixelhöhe, bei der das Logo klar erkennbar bleibt. Danach unterschreitet der mobile Seitenkopf diese Grenze nie. Verschwimmt das Logo in dieser Größe, wechseln wir zur vereinfachten Variante oder nur zum Bildzeichen.

Für dunkle Hintergründe brauchen Sie eine negative Logovariante. Außerdem ist das Favicon die kleinste und einfachste Form des Logos und erscheint auch in Suchergebnissen. Dazu passt unser Beitrag, wenn das Favicon in Google nicht angezeigt wird. Dient das Logo als Link, geben Sie ihm schließlich einen aussagekräftigen barrierefreien Namen.

Wie leiten Sie Abstände und Raster aus dem Styleguide ab?

Viele Styleguides legen Seitenränder und Spaltenzahlen für den Druck fest. Im Web kopieren wir diese Werte nicht direkt. Stattdessen wählen wir eine Basiseinheit, zum Beispiel einen Schritt von 4 oder 8 Pixeln. Dann definieren wir jeden Abstand als Vielfaches davon. Folglich folgen Komponenten einem vorhersehbaren Rhythmus statt zufälliger Werte.

Für das Raster bauen wir meist zwölf Spalten auf dem Desktop und vier auf dem Smartphone. Enthält der Styleguide asymmetrische Layouts, interpretieren wir sie innerhalb dieses Rasters neu. Anders gesagt: Das Ziel ist, den visuellen Charakter zu bewahren und trotzdem die Flexibilität des Bildschirms zu nutzen.

Benennen Sie Abstandstokens genauso wie Farbtokens. Namen wie „abstand2“ und „abstand4“ verhindern, dass Entwickler Pixel von Hand eintippen. Zudem sprechen Designdatei und Code so dieselbe Sprache.

Wie bleiben Bildsprache und Icons markentreu?

Bildregeln im Styleguide beschreiben oft eine Stimmung: natürliches Licht, echte Menschen, warme Töne. Im Web machen wir daraus konkrete Regeln. Wir legen zum Beispiel Seitenverhältnisse für Titelbilder fest, den Bildausschnitt und die Abdunklung, die greift, sobald Text auf einem Foto steht.

Bei Icons zählt Konsistenz noch mehr. Icons aus verschiedenen Sets fallen sofort auf, weil Strichstärke und Eckenradius abweichen. Deshalb wählen wir ein einziges Iconset und zeichnen fehlende Icons mit derselben Strichstärke nach. Zudem bereiten wir Icons als SVG Dateien vor, die die aktuelle Textfarbe übernehmen.

Auch Alternativtexte gehören zur Markensprache. Allerdings beschreibt ein Alternativtext, was ein Bild zeigt, und wiederholt keinen Werbeslogan.

Wie übertragen Sie die Tonalität auf Texte der Oberfläche?

Regeln zur Tonalität zielen meist auf Werbetexte. Die meistgelesenen Texte einer Website stehen jedoch auf Buttons, in Formularfeldern und in Fehlermeldungen. Man nennt sie Microcopy. Sagt der Styleguide „freundlich, aber seriös“, müssen Sie zeigen, wie das in einer Fehlermeldung klingt.

Für jede Tonregel schreiben wir ein Paar aus „so ja“ und „so nicht“. Zum Beispiel statt „Ein Fehler ist aufgetreten“ lieber „Diese E-Mail Adresse kennen wir nicht. Prüfen Sie bitte die Schreibweise.“ Außerdem wählen wir einheitliche Verben auf Buttons und schreiben nie auf einer Seite „Senden“ und auf der nächsten „Abschicken“. Wie Sie eine durchgängige Sprache aufbauen, erklärt unser Leitfaden zur Markensprache.

Legen Sie zudem die Anrede von Anfang an fest. Ob „du“ oder „Sie“: Die Entscheidung gilt von der Überschrift bis zum Cookiebanner. Sonst haben Leser das Gefühl, auf jeder Seite mit einem anderen Unternehmen zu sprechen.

Wie bauen Sie eine Komponentenbibliothek nach dem Styleguide auf?

Sobald die Tokens stehen, folgen die Komponenten. Eine Komponente ist ein wiederverwendbarer Teil der Oberfläche, etwa ein Button, ein Formularfeld, eine Karte oder ein Navigationsmenü. Jede Komponente bezieht ihre Werte ausschließlich aus Tokens und enthält keine von Hand eingetippte Farbe. Ändert sich der Styleguide, ändern sich die Komponenten somit automatisch mit.

Beim Aufbau der Bibliothek gehen wir in dieser Reihenfolge vor:

1. Grundelemente: Überschriften, Absätze, Links, Listen und Tabellen.
2. Interaktive Elemente: Buttons, Formularfelder, Checkboxen und Auswahllisten.
3. Zusammengesetzte Teile: Karten, Hinweisboxen, Tabs und Akkordeons.
4. Layoutteile: Seitenkopf, Fußzeile, Navigation und Inhaltsbereiche.

Dokumentieren Sie für jede Komponente die Zustände Standard, Hover, Fokus, gedrückt und inaktiv. Notieren Sie daneben, welche Tokens sie nutzt. Dieses Dokument ist dann die lebendige Webfassung Ihres Styleguides.

Wie halten Sie Tokens zwischen Designdatei und Code synchron?

Leben Tokens nur im Code, arbeiten Designer mit alten Werten weiter. Leben sie nur in der Designdatei, kopieren Entwickler jeden Wert von Hand. Daher sorgen wir dafür, dass beide Seiten aus derselben Quelle lesen. In der Praxis halten wir die Tokenliste in einer Datei und erzeugen daraus sowohl die Stile im Designtool als auch die CSS Variablen.

Auch hier entscheidet die Benennung. Ein Stil namens „Blau 600“ in der Designdatei trägt im Code denselben Namen. Halten Sie zudem jede Änderung mit einer kurzen Notiz fest: Was hat sich geändert, warum und wer hat zugestimmt? Fragt dann jemand Monate später, warum das Blau dunkler ist, finden Sie die Antwort sofort.

Legen Sie außerdem einen festen Rhythmus für den Abgleich fest. Ein kurzer Vergleich von Designstilen und Codevariablen vor jedem Release fängt Abweichungen früh ab.

Zerstört ein Dark Mode Ihr Corporate Design?

Nicht, wenn Sie ihn sauber aufsetzen. Allerdings bereitet es oft Probleme, Markenfarben unverändert auf einen dunklen Hintergrund zu übertragen. Gesättigte Farben flimmern auf dunklen Flächen, dunkle Töne verschwinden. Deshalb wählen wir für den Dark Mode eine etwas hellere, weniger gesättigte Version der Primärfarbe.

Hier zahlt sich die zweistufige Tokenstruktur aus. Das bedeutungstragende Token „buttonHintergrund“ zeigt im hellen Modus auf einen Wert und im dunklen Modus auf einen anderen. Der Code der Komponenten bleibt dagegen gleich. Das Logo tauschen Sie gegen die negative Variante. Vergessen Sie nicht, die Kontraste für beide Modi getrennt zu prüfen.

Welche Fehler beschädigen den Styleguide auf der Website am häufigsten?

Die häufigsten Fehler entstehen aus Gewohnheit, nicht aus Technik. Ein Team will schnell eine Kampagnenseite veröffentlichen und nimmt eine Abkürzung. Allerdings hinterlässt jede Abkürzung eine kleine Abweichung vom Styleguide. Achten Sie besonders auf diese Fehler:

• Eine neue Farbe außerhalb der Palette auf einer Kampagnenseite einsetzen.
• Das Logo stauchen, strecken oder mit Schatten versehen.
• In Überschriften eine Schrift testen, die der Styleguide nicht vorsieht.
• Buttons mit unterschiedlichen Eckenradien und Höhen gestalten.
• Die Standardfarben eines Themes statt der Markenpalette stehen lassen.

Die gemeinsame Lösung lautet: Die Komponentenbibliothek ist der einzige gültige Weg. Lässt sich eine neue Seite nicht mit vorhandenen Komponenten bauen, ergänzen Sie also zuerst die Bibliothek und bauen erst dann die Seite. So entsteht eine dauerhafte Lösung statt einer Abkürzung.

Was wird im Web aus den Regeln des Styleguides?

Die folgende Tabelle fasst zusammen, welches Gegenstück typische Regeln eines Styleguides im Web haben. Nutzen Sie sie als Startvorlage für Ihr eigenes Projekt.

Beispielszenario: Wie entsteht die Website eines Herstellers?

Stellen Sie sich als Beispielszenario einen Hersteller vor, der seit Jahren gedruckte Kataloge nutzt. Sein Styleguide enthält ein tiefes Marineblau und ein kräftiges Gelb, nennt aber nur Pantone Codes. Die Hausschrift besitzt zudem nur eine Desktoplizenz. In der ersten Woche ziehen wir die Regeln heraus und listen die Lücken auf.

Danach wählen wir Bildschirmwerte für Marineblau und Gelb. Das Marineblau besteht als Text auf Weiß problemlos. Das Gelb dagegen fällt als Text auf Weiß durch. Deshalb nutzen wir es als Buttonfläche mit marineblauer Schrift darauf. Dann erwerben wir eine Weblizenz für die Hausschrift oder schlagen eine nahe Alternative vor.

Anschließend richten wir Tokens und Komponentenbibliothek ein. Schließlich prüfen wir jede Seitenvorlage anhand der Checkliste. Dieses Szenario ist kein Versprechen; es zeigt nur den typischen Ablauf.

Was sollten Sie vor dem Livegang prüfen?

Vor dem Livegang haken wir die folgende Liste Punkt für Punkt ab. Sie wirkt kurz, doch jeder Punkt erfordert einen eigenen Durchgang durch die Seiten.

• Jede Farbe stammt aus einem Token, im Code steht keine von Hand eingetippte Farbe.
• Fließtext und Buttons erreichen 4.5:1, große Überschriften 3:1.
• Der Fokusindikator ist auf jedem interaktiven Element sichtbar und erreicht 3:1.
• Das Logo unterschreitet mobil nie die Mindestgröße, die Schutzzone bleibt erhalten.
• Schriftdateien liegen als WOFF2 vor, und die Seite lädt nur benötigte Schnitte.
• Fehler, Erfolgs und Infomeldungen unterscheiden sich auch durch Text oder Icon.
• Verben auf Buttons und die Anrede sind auf allen Seiten einheitlich.
• Gibt es einen Dark Mode, haben Sie die Kontraste für beide Modi getrennt getestet.
• Favicon und Vorschaubilder für soziale Netzwerke passen zum Logo im Styleguide.

Wie bleibt der Styleguide ein lebendiges Dokument?

Mit dem Livegang endet die Arbeit nicht. Neue Kampagnen, neue Seiten und neue Teammitglieder kommen hinzu. Pflegt niemand den digitalen Anhang des Styleguides, kehren alte Probleme innerhalb weniger Monate zurück. Deshalb braucht der Styleguide eine verantwortliche Person, die jede Änderung freigibt.

Wir empfehlen, den digitalen Anhang am selben Ort wie Tokens und Komponentenbibliothek zu führen. So bleiben Dokument und Code verbunden. Zudem ergänzen wir für jede neue Komponente einen kurzen Prüfschritt: Nutzt sie Farbtokens, besteht sie den Kontrasttest, stimmt die Tonalität? Kurz gesagt: Kleine, regelmäßige Prüfungen kosten weniger als ein großes Redesign.

Planen Sie außerdem einmal im Jahr ein umfassendes Audit. Vergleichen Sie dabei zufällige Seiten der Live Website mit dem Styleguide und notieren Sie jede Abweichung.

Wer sollte Ihren Styleguide auf der Website umsetzen?

Diese Arbeit braucht ein Team, das Markendesign und Frontend Entwicklung verbindet. Menschen, die einen Styleguide lesen, ihn in Tokens übersetzen, Kontraste messen und Komponenten programmieren, müssen zusammenarbeiten. Genau das richten wir auf Ihrer Website von Anfang bis Ende ein, prüfen Ihren Styleguide und erstellen einen Fahrplan. Für Umfang und Zeitrahmen fordern Sie über unsere Seite zum Webdesign Service ein Angebot an.

Möchten Sie mit Ihrem eigenen Team arbeiten, folgen Sie der Reihenfolge dieses Leitfadens: Herausziehen, Farbe, Kontrast, Typografie, Logo, Abstände, Tonalität, Komponenten und Prüfung. Kommen Sie an einer Stelle nicht weiter, können Sie für eine Prüfung Ihrer aktuellen Website ein Angebot von unserem Webdesign Team einholen. Vor allem soll die Marke aus dem PDF auf dem Bildschirm dasselbe Vertrauen wecken.

Bedenken Sie zudem: Einen Styleguide umzusetzen ist keine einmalige Umstellung, sondern eine Gewohnheit, die Sie bei jeder neuen Seite wiederholen. Sobald diese Gewohnheit sitzt, fallen Designentscheidungen schneller, Diskussionen schrumpfen und die Marke spricht an jedem Kontaktpunkt mit einer Stimme. Außerdem lernen neue Teammitglieder die Regeln direkt aus den Komponenten statt aus dem PDF.