Bei der Gestaltung einer Website ist es wichtig, dass alle Beteiligten dieselbe visuelle Sprache verwenden, um ein konsistentes und kohärentes Endergebnis zu erzielen. An dieser Stelle kommt der Style Guide ins Spiel.In diesem Artikel erläutert unser Produktentwickler, warum und wie du deinen eigenen Style Guide erstellen solltest.
Über den Autor: Alina Khazanova, Produktdesignerin @ Elementor
Alina ist Produktdesignerin bei Elementor. Ihre Leidenschaft ist es, den Nutzern wertvolle und zufriedenstellende Produkterfahrungen zu bieten.
Webdesign-Projekte können sehr komplex sein und erfordern, dass viele Entwickler*innen, Designer*innen und andere Beteiligte im Laufe der Zeit mitarbeiten. Darüber hinaus können sich entwickelnde Technologien und Standards im Laufe eines Projekts zahlreiche Änderungen erforderlich machen. Unabhängig von diesen Faktoren kann es schwierig sein, das Gesamtbild deiner Website konsistent zu halten.
Eine Möglichkeit, dies allen Beteiligten zu erleichtern, besteht darin, in die Erstellung eines Styleguides für das Webdesign zu investieren. Dies wiederum kann die Effizienz und Produktivität steigern und gleichzeitig als Ressource für die Wahrung der Markenkonsistenz dienen.
In diesem Artikel erläutern wir, was ein Styleguide ist und warum und wie du einen erstellen solltest. Außerdem zeigen wir dir Beispiele, an denen du dich orientieren kannst, wenn du deinen eigenen erstellst. Fangen wir an!
Style Guide Vorlage
Brauchst du einen Startpunkt? Mit unserer Styleguide-Vorlage kannst du im Handumdrehen loslegen; sie enthält Beispiele für die Verwendung:
- Logos
- Schriftart
- Farben
- Schaltflächen
- Icons
Und andere visuelle Elemente, die du brauchst, um deinen eigenen Styleguide zu erstellen – lade ihn jetzt herunter!
Was ist ein Web Design Style Guide?
Ein Styleguide ist eine Referenzquelle, in der du alle Designentscheidungen für deine Website sammelst und präsentierst. Dazu gehören das Farbschema, die Typografie, die Abstände, die Icons, die Bilder und die gesamte visuelle Sprache, die auf Ihrer Website verwendet wird.
Styleguide vs. Designsystem
Als Webdesigner*in hast du die Begriffe „Styleguide“ und „Designsystem“ wahrscheinlich schon oft gehört. Obwohl es sich um verwandte Konzepte handelt, gibt es auch einige bedeutende Unterschiede.
Ein Styleguide ist gewissermaßen das jüngere Geschwisterchen eines Designsystems. In einem Gestaltungssystem würdest du versuchen, jede kleine Regel und jedes Element deiner Arbeit zu definieren und dabei alle möglichen Zustände der Komponenten zu berücksichtigen.
Ein Styleguide hingegen ist eher ein Ausgangspunkt für die Definition des digitalen Images und der Stimme deiner Marke. Hier würdest du dich darauf konzentrieren, nur die wichtigsten Komponenten darzustellen, möglicherweise mit der Absicht, später ein Designsystem zu entwickeln.
Warum solltest du einen Style Guide erstellen?
Wenn mehrere Webprofis an einer Website arbeiten, ist es wichtig, alle Designentscheidungen in einer einzigen Referenzquelle zusammenzufassen. Dies trägt dazu bei, dass deine Vision über alle Seiten und Elemente hinweg konsistent bleibt.
Wie du vielleicht schon weißt, kann das Design einer Website sehr komplex sein. Wenn viele Leute an einem Projekt arbeiten und so viele Wiederholungen und Änderungen erforderlich sind, ist es wichtig, dass alle dieselbe visuelle Sprache verwenden, damit das Endergebnis konsistent und stimmig ist.
Die Vorteile eines Style Guide
Ein gut ausgearbeiteter Styleguide kommt nicht nur dir, sondern deinem gesamten Webdesign-Team zugute. Während des Designprozesses hilft diese Ressource allen Beteiligten, deren Effizienz zu maximieren und mühsame Aufgaben zu minimieren, wie z. B. die Suche nach „genau dieser Farbe“ oder „genau diesem Schaltflächenstil“, die für bestimmte Elemente zu verwenden sind.
Außerdem kann ein Styleguide als Referenz dienen, um die richtigen Entscheidungen für zukünftige Designs zu treffen. Du musst dich nicht mehr mit der Entscheidung herumschlagen, wie bestimmte Funktionen eingesetzt werden sollen, weil du die Regeln für ihre Verwendung bereits festgelegt hast. Das spart Zeit und verringert die Sorge, ob das Ergebnis richtig ist.
Und wenn du deinen Styleguide öffentlich zugänglich machst, kann er ein wirksames Mittel sein, um die Markenbekanntheit zu erhöhen. Die Besucher*innen können sich ein Bild von den Werten und der Persönlichkeit deiner Marke machen.
Sie können auch einen kleinen Einblick in den Arbeitsprozess hinter Ihrer Website gewinnen. Schließlich kann ein Style Guide auch ein guter Ort sein, um Kund*innen, Partner*innen und der Presse herunterladbare Markenelemente zur Verfügung zu stellen.
Wie man einen Styleguide für Webdesign erstellt (in 11 Schritten)
Wir haben besprochen, was ein Styleguide ist und warum du einen für deine Website erstellen solltest. Als Nächstes wollen wir einen Blick auf alle notwendigen Schritte werfen, die du bei der Zusammenstellung dieser wichtigen Referenzquelle beachten solltest.
Schritt 1: Erforsche deine Marke
Zunächst solltest du dich mit deiner Marke und deinem Zielpublikum vertraut machen. Als Ausgangspunkt kannst du dir ein Moodboard erstellen. Dein Ziel ist es, deine wichtigsten Werte zu überprüfen und sie in eine visuelle Sprache zu übersetzen, wobei du alle Assets und Komponenten sammelst, die sie auf diesem Weg definieren.
Es ist ratsam, deine Markenwerte und dein Leitbild in deinen Styleguide aufzunehmen, damit sie als Referenzpunkt dienen.
Schritt 2: Festlegen der Regeln für die Verwendung deines Logos
Der nächste Schritt besteht darin, Regeln für die Verwendung deines Logos in all seinen Variationen festzulegen. Wenn du einen Grafik- oder Markendesigner*in in deinem Team hast, solltest du dich mit ihm*ihr über alle relevanten Richtlinien beraten, die möglicherweise bereits existieren.
Diese könnten das Raster, die Schriftart, die Farben, den richtigen Abstand und die richtige Platzierung des Logos, die Darstellung auf verschiedenen Hintergründen und vieles mehr betreffen.
Außerdem solltest du die Regeln für die Verwendung des Logos durch Dritte, z. B. durch Partner, festlegen.
Schritt 3: Bestimme deine Farbpalette
Die Farbe spielt eine entscheidende Rolle dabei, wie deine Website und deine Marke wahrgenommen werden und in Erinnerung bleiben. Daher solltest du sicherstellen, dass du deine wichtigsten Primärfarben definierst, in der Regel maximal drei.
Um deine Farbpalette zu vervollständigen, musst du auch Sekundär-, Tertiär- und neutrale Farben einbeziehen.
Außerdem muss der Styleguide diese Farben sowohl mit deinem visuellen Erscheinungsbild als auch mit deinen technischen Werten darstellen. Wenn du zum Beispiel „Blau“ hinzufügst, musst du auch die entsprechenden RGB- und Hex-Werte angeben.
Bei der Erstellung der richtigen Farbkombination für deine Marke gibt es eine Menge zu beachten. Um in diesem Bereich erfolgreich zu sein, musst du dich mit den wichtigsten Begriffen vertraut machen und mehr über die Farbtheorie lernen.
Schritt 4: Regeln für die Typografie aufstellen
Genau wie die Farbe ist auch die Typografie ein wesentlicher Bestandteil des Webdesigns. Um sicherzustellen, dass die Typografie auf deiner gesamten Website ansprechend und einheitlich ist, musst du eine Typografie-Hierarchie in deinem Style Guide erstellen.
Zunächst musst du die Schriftfamilien und -größen für deine Hauptüberschriften (H1-H6) festlegen:
Zusätzlich zu den Überschriften solltest du Stile für den Fließtext sowie für Formulare, Warnmeldungen und vieles mehr einfügen. Diese Stile umfassen Schriftfamilien – das sind Gruppen von Schriftarten wie Roboto, Lato oder Montserrat – und Schriftgrößen.
Die Schriftgrößen sollten in Pixel (px) angegeben werden und über alle Elemente hinweg einheitlich sein. Außerdem solltest du deine Entwickler bei Laune halten, indem du progressive Größen wie 14px, 16px, 18px oder 20px verwendest und Zwischengrößen wie 15px vermeidest.
Schritt 5: Layout- und Abstandsregeln festlegen
Weitere wichtige Bestandteile eines Styleguides sind die Layout-, Raster- und Abstandsregeln, von denen die meisten mit HTML und CSS umgesetzt werden können. Damit wird festgelegt, wie deine Seiten strukturiert sind. Für den Anfang kannst du einige grundlegende Vorlagen für deine Hauptlayouts erstellen.
Dadurch wird es viel einfacher, deine Website zu erweitern und in Zukunft neue Seiten hinzuzufügen.
Schritt 6: Überleg dir einen Icon-Stil
Die Ikonografie ist eine weitere wichtige stilistische Entscheidung für deine Website, und du solltest einige grundlegende Regeln für ihre Verwendung festlegen. Dazu gehören Entscheidungen wie die, ob du eine fertige Icon-Bibliothek wie Font Awesome oder deine eigenen benutzerdefinierten Icons verwendest, sowie der Stil der Icons – farbig vs. einfarbig, gefüllt vs. umrandet, etc.
Wie bei den Schriftarten solltest du auch bei den Icons die wichtigsten Größen angeben, die verwendet werden sollen. Denk daran, dass es bei benutzerdefinierten Symbolen erforderlich sein kann, bestimmte Symbolraster oder Regeln für die Erstellung der Grafiken festzulegen.
Schritt 7: Bestimme Richtlinien für Illustrationen und Bildmaterial
Um deiner Website und ihrem Branding etwas Einzigartiges zu verleihen, könntest du dazu neigen, eigene Illustrationen zu erstellen. Dies kann deiner Website ein einzigartiges Aussehen und eine eigene Stimme verleihen. Achte darauf, dass du Stil- und Farbreferenzen für die Art der Illustrationen, die du verwendest, festlegst.
Möglicherweise musst du auch einige strenge Regeln und Richtlinien dafür aufstellen, welche Art von Bildern du auf deiner Website verwenden kannst. Du könntest zum Beispiel einige Gebote und Verbote für die Verwendung von Stockfotos aufstellen.
Um sicherzustellen, dass die Bilder auf deiner Website visuell einheitlich sind, könntest du außerdem Fotobearbeitungseinstellungen für Hintergründe, Filter, Helligkeit, Kontrast und mehr festlegen.
Es ist auch wichtig, den allgemeinen Ton und die Botschaft anzugeben, die die Bilder vermitteln sollen. Dein persönlicher Geschmack könnte zum Beispiel eher zu offener Fotografie neigen als zu stark bearbeiteten Bildern. Oder vielleicht magst du bestimmte Hintergründe mehr als andere. Berücksichtige bei diesem Prozess auch die Vorlieben deiner Zielgruppe.
Schritt 8: Skizziere stilistische Überlegungen für die wichtigsten Website-Komponenten
Sobald die grundlegenden Stildefinitionen feststehen, ist es an der Zeit, die Hauptkomponenten der Website in Ihren Styleguide aufzunehmen. Diese betreffen das Aussehen, die Größe und den Status von Schaltflächen, Formularfeldern, Formularelementen, Navigationsmenüs, Benachrichtigungen und Alarmen, Karten, Modals und mehr.
Darüber hinaus kannst du für jeden Schaltflächentyp die verschiedenen Zustände angeben, wie z. B. normal, schwebend, aktiv oder fokussiert. Du solltest auch Stile für die verschiedenen Formularelemente wie Optionsfelder oder Kontrollkästchen definieren.
Es empfiehlt sich, eine Komponentenbibliothek wie das Material Design von Google oder das Ant Design von Alibaba zu Rate zu ziehen, um wichtige Elemente zu identifizieren, die in deinem eigenen Style Guide fehlen.
Schritt 9: Entwicklung der Stimme deiner Marke
Ein effektiver Styleguide deckt nicht nur das Erscheinungsbild Ihrer Website ab, sondern auch das Messaging und die Stimme deiner Marke. Um diese schriftlich festzuhalten, solltest du dich mit Marketingfachleuten und Textern beraten, um Richtlinien für deine Website und andere Inhalte zu erstellen.
Schließlich ist der Ton und die Stimme der Texte auf Ihrer Website die Art und Weise, wie du deine Besucher*innen und potenziellen Kunden ansprichst, daher ist es wichtig, dass du es richtig machst.
Schritt 10: Spezifische Dos und Don’ts einbeziehen
Manchmal ist es schwierig, die Konzepte in deinem Styleguide allein mit Text zu erklären. Deshalb ist es oft besser, konkrete Beispiele – wie visuelle Gebote und Verbote – zu verwenden, um die tatsächliche Umsetzung der im Dokument festgelegten Regeln zu veranschaulichen.
Anschauliche Beispiele zeigen, wie der Styleguide in der Praxis angewendet werden sollte.
Schritt 11: Vergiss die herunterladbaren Elemente nicht
Abgesehen von den Regeln in deinem Styleguide kann es manchmal notwendig sein, auch einige herunterladbare Inhalte einzubinden. Dazu könnten gehören:
- Dein Logo in all seinen verschiedenen Formaten, geeignet für Web und Druc
- Eine Pressemappe mit den notwendigen Markenmaterialien
- Eine kurze Darstellung deines Markenbuchs
- Der Styleguide in einem PDF-Format
Diese Ressourcen sind für eine Vielzahl von Zwecken nützlich, z. B. für die Zusammenarbeit mit Partnerunternehmen, die Konvertierung von Leads, die Einarbeitung neuer Teammitglieder und vieles mehr.
Ein Styleguide ist zwar für den internen Bedarf unerlässlich, aber auch für die Wiedererkennung der Marke bei Nutzer*innen, Kund*innen, Partner*innen, der Presse und der Öffentlichkeit sehr wichtig. Wenn du denkst, dass deine Marke auch außerhalb deiner Website vertreten sein könnte – z. B. in Presseveröffentlichungen -, solltest du dafür sorgen, dass deine Marken-Assets leicht abrufbar und erreichbar sind.
Finde Inspiration für deinen Style Guide
Recherche ist der beste Ausgangspunkt für jedes Designprojekt. Bevor du dich also an die Erstellung deines Styleguides machst, solltest du dich mit den besten Praktiken vertraut machen und Referenzen finden, die dich bei deiner Arbeit inspirieren.
Um dir dabei zu helfen, haben wir einige schöne Beispiele von Styleguides gesammelt, die dir einen Eindruck davon vermitteln, wie verschiedene Marken deine Identität online darstellen. Weitere Inspirationsquellen sind Online-Verzeichnisse wie Style Guides.io oder Design Systems Repo, wo du verschiedene Beispiele für Styleguides und Designsysteme von führenden Unternehmen und Marken finden kannst.
Halte deinen Style Guide auf dem neuesten Stand
Webtechnologien und Designtrends entwickeln sich ständig weiter. Das gilt auch für Unternehmen, so dass du deine Markensprache mit der Zeit aktualisieren musst. Deine Styleguide wird daher nicht statisch bleiben. Vielmehr solltest du schon bei seiner Erstellung damit rechnen, dass du ihn regelmäßig ändern wirst.
Dies erfordert von dir als Designer*in Flexibilität und Liebe zum Detail. Du musst mit den neuesten Branchentrends Schritt halten und bereit sein, dich an sie anzupassen.
Um dir dabei zu helfen, deine Designsprache konsistent zu halten, führt Elementor 3.0 globale Site-Einstellungen ein. Jetzt kannst du deine gesamte Website innerhalb des Editors verwalten. Das neue Site Settings Panel bietet viele Konfigurationswerkzeuge und gibt Ihnen einen zentralen Ort, um alle deine Site-Optionen zu ändern.
Auf jeder Seite, die du mit Elementor bearbeitest, kannst du auf das linke Panel gehen und auf das Symbol oben links klicken. Dies bringt dich zum Panel „Globale Einstellungen“. Hier kannst du auf viele Einstellungen deiner Seite zugreifen, wie z.B. die Lightbox-Einstellungen und die Layout-Standardeinstellungen.
Hier findest du auch Optionen für die Site-Identität, mit denen du deine seitenübergreifende Identität mit Optionen für dein Logo, dein Favicon, deinen Titel, deinen Slogan und vieles mehr anpassen kannst. Im Abschnitt Designsystem der Site-Einstellungen kannst du mit den Optionen Globale Farben und Globale Schriftarten auch ein einheitliches Design für die gesamte Site durchsetzen.
Mit Layout kannst du die Standard-Layout-Einstellungen von Elementor festlegen, z. B. die Breite des Inhalts und das Seitenlayout. Mit Lightbox kannst du das Standard-Styling der Elementor-Leuchtkästen festlegen. Theme Style bietet globale Einstellungen, um das Standard-Styling für verschiedene nicht-Elementor-bezogene Elemente wie Überschriften, Buttons, Bilder und Formularfelder zu definieren.
Mit diesen neuen Funktionen kannst du die Konsistenz des Designs und die Wiedererkennung der Marke auf deiner gesamten Website sicherstellen.
Markenkonsistenz mit einem Style Guide aufrechterhalten
Es kann eine Herausforderung sein, das Design einer großen Website trotz der vielen Hände, die daran arbeiten, konsistent zu halten. Hier kommt ein Styleguide ins Spiel. Er ist ein zentraler Bezugspunkt für alle Ihre Designentscheidungen und sorgt dafür, dass alle Beteiligten auf derselben Seite stehen. Dies kann sowohl die Effizienz steigern als auch den Wiedererkennungswert für Ihre Zielgruppe erhöhen.
In diesem Artikel haben wir verschiedene Schritte zur Erstellung eines Styleguides für das Webdesign besprochen. Dazu gehören die Untersuchung Ihrer Marke, die Festlegung Ihrer Farbpalette, die Erstellung von Markenrichtlinien für die Typografie und vieles mehr. Eine praktische Möglichkeit, damit zu beginnen, ist die Verwendung der globalen Einstellungen von Elementor, um seitenweite Designregeln aufzustellen.
Übersetzt von Lisa Kraus
von Website Freiburg
Quelle, unser Websoftware Partner Elementor Pro:
www.elementor.com/blog/web-design-style-guide/
