Die Erstellung von Websites wird immer komplexer und ist selten eine Aufgabe für eine einzelne Person. Es ist von entscheidender Bedeutung, dass das Design konsistent und optimiert ist, um die Geschäftsziele zu erreichen und gleichzeitig ein angenehmes Benutzererlebnis zu bieten. Die Erstellung einer Designdokumentation oder eines Webdesign Styleguides für die Website ist eine Möglichkeit, um sicherzustellen, dass das Team bei der Gestaltung einzelner Teile der Website oder beim Speichern von Entwürfen von Entwicklern auf derselben Seite steht. Webdesign Styleguides helfen dabei, ein einheitliches Erscheinungsbild über mehrere Seiten hinweg zu schaffen. Außerdem kann so sichergestellt werden, dass künftige Entwicklungen oder Produktionen von Drittanbietern die Markenrichtlinien einhalten und als Erweiterung der Gesamtmarke wahrgenommen werden.
Was ist ein Webdesign Styleguide?
Bevor wir uns mit den Einzelheiten der Erstellung eines Webdesign Styleguides befassen, sollten wir zunächst definieren, was ein Styleguide ist. Ein Webdesign Styleguide ist eine Seite auf deiner Website, auf der alles beschrieben wird, was bei der Erstellung einer neuen Seite oder eines Blogbeitrags auf dem Rest deiner Website zu beachten ist. Dazu gehören Markengrafiken, Logos, Schriftarten und -größen, Text- und Hintergrundfarben und alles andere, was mit der Aktualisierung der Website und der Erstellung von Inhalten zu tun hat. Dies ist besonders wichtig, wenn mehrere Designer oder Entwickler an deiner Website arbeiten. So bleiben alle auf derselben Seite. Darüber hinaus wird die Entwicklung gestrafft, da du dieses Webdesign Styleguide verwenden kannst, um neue Inhalte schneller und effizienter zu erstellen.
Wie erstellt man einen Webdesign Styleguide?
Wir haben bereits über Webdesign Styleguides gesprochen und darüber, warum du einen solchen für deine Website erstellen solltest. Als Nächstes wollen wir nun alle Schritte durchgehen, die du bei der Erstellung eines Webdesign Styleguides für deine Website durchführen musst.
1. Recherchiere deine Marke
Bild von Strikingly Website Nutzer genommen
Mach dich zunächst mit deiner Marke und deinem Zielpublikum vertraut. Als Ausgangspunkt kannst du ein Moodboard erstellen. Dein Ziel ist es, deine Kernwerte durchzugehen und sie in eine visuelle Sprache zu übersetzen, wobei du auf dem Weg dorthin alle Assets und Komponenten sammelst, die sie definieren.
Es ist eine gute Idee, die Werte und die Mission deiner Marke als Referenzpunkt in deinen Webdesign Styleguide aufzunehmen.
2. Lege Richtlinien für die Verwendung deines Logos fest
Der nächste Schritt bei der Erstellung eines Webdesign Styleguides für eine Website besteht darin, Richtlinien für die Verwendung deines Logos in all seinen Variationen festzulegen. Wenn zu deinem Team ein Grafik- oder Markendesigner gehört, solltest du dich mit ihm über eventuell bereits vorhandene Richtlinien beraten. Diese können das Raster deines Logos, die Schriftart, die Farben, den richtigen Abstand und die richtige Platzierung, das Aussehen auf verschiedenen Hintergründen und vieles mehr umfassen. Außerdem solltest du die Regeln für die Verwendung von Logos durch Dritte, z. B. durch Partner, festlegen.
3. Lege dein Farbschema fest
Bild von Strikingly Website Nutzer genommen
Farbe beeinflusst, wie deine Website und deine Marke wahrgenommen werden und in Erinnerung bleiben. Stelle daher sicher, dass du deine wesentlichen Primärfarben definierst, die maximal drei sein sollten. Außerdem benötigst du Sekundär-, Tertiär- und neutrale Farben, um deine Farbpalette abzurunden. Zudem musst du diese Farben in deinem Webdesign Styleguide anhand ihrer visuellen Erscheinung und ihrer technischen Werte darstellen. Wenn du zum Beispiel "Blau" hinzufügen, musst du auch die entsprechenden RGB- und Hex-Werte angeben. Bei der Auswahl der richtigen Farbpalette für deine Marke ist viel zu beachten. Um in diesem Bereich erfolgreich zu sein, musst du dich mit den Schlüsselbegriffen vertraut machen und mehr über die Farbtheorie lernen.
4. Erstelle Regeln für die Typografie
Wie die Farbe ist auch die Typografie ein wesentlicher Bestandteil des Styleguides für das Webdesign. Erstelle in deinem Webdesign Styleguide eine Typografie-Hierarchie, um sicherzustellen, dass deine Schrift auf der gesamten Website ansprechend und einheitlich ist. Lege zunächst die Schriftfamilien und -größen für deine Hauptüberschriften (H1-H6) fest. Zusätzlich zu den Überschriften solltest du auch Stile für Fließtext, Formulare, Warnmeldungen und andere Elemente festlegen. Schriftfamilien (Gruppen von Schriftarten wie Roboto, Lato oder Montserrat) und Schriftgrößen werden in diese Stile aufgenommen. Die Schriftgrößen sollten in Pixeln (px) angegeben werden und für alle Elemente einheitlich sein. Um die Entwickler zufrieden zu stellen, solltest du dich an progressive Größen wie 14px, 16px, 18px oder 20px halten und Zwischengrößen wie 15px vermeiden.
5. Lege Regeln für Layout und Abstände fest
Layout-, Raster- und Abstandsregeln sind ebenfalls wichtige Bestandteile eines Webdesign-Styleguides, und die meisten von ihnen können mit HTML und CSS umgesetzt werden. Sie bestimmen, wie deine Seiten aufgebaut sind. Erstelle zunächst einige grundlegende Vorlagen für deine Hauptlayouts. Dies wird zukünftige Erweiterungen und Ergänzungen deiner Website erheblich erleichtern.
6. Denke über den Ikonenstil nach
Die Ikonografie ist eine weitere wichtige stilistische Entscheidung, wenn du einen Webdesign Styleguide für eine Website entwirfst. Du solltest einige Grundregeln für ihre Verwendung festlegen. Dazu gehört auch die Entscheidung, ob du eine fertige Icon-Bibliothek wie Font Awesome oder deine eigenen Icons verwendest und welchen Stil die Icons haben sollen - farbig oder einfarbig, ausgefüllt oder umrandet, usw. Du solltest auch die wichtigsten Icon-Größen angeben, die verwendet werden sollen, genau wie bei deinen Schriftarten. Denke daran, dass bei der Erstellung von benutzerdefinierten Symbolen bestimmte Symbolraster oder Regeln für die Erstellung der Grafiken erforderlich sein können.
7. Lege Richtlinien für Illustration und Bildmaterial fest
Du kannst versuchen, eigene Illustrationen zu erstellen, um deine Website und dein Branding einzigartig zu machen. Dies kann deiner Website ein unverwechselbares Aussehen und eine eigene Stimme verleihen. Du solltest Stil- und Farbreferenzen für die von dir verwendeten Illustrationen angeben. Möglicherweise musst du auch einige strenge Regeln und Richtlinien für die auf deiner Website verwendeten Bildtypen aufstellen. So könntest du zum Beispiel einige Gebote und Verbote für die Verwendung von Archivfotos aufstellen. Um sicherzustellen, dass die Bilder auf deiner Website visuell einheitlich sind, kannst du außerdem Einstellungen für die Bildbearbeitung in Bezug auf Hintergründe, Filter, Helligkeit, Kontrast und andere Faktoren festlegen. Es ist auch wichtig, den allgemeinen Ton und die Botschaft festzulegen, die die Bilder vermitteln sollen. So kann es sein, dass dein persönlicher Geschmack eher zu Schnappschüssen als zu übermäßig bearbeiteten Bildern tendiert. Vielleicht bevorzugst du auch bestimmte Hintergründe gegenüber anderen. Behalte während des gesamten Prozesses die Vorlieben deiner Zielgruppe im Hinterkopf
Bild von Strikingly Website Nutzer genommen
8. Skizziere stilistische Überlegungen für die wichtigsten Website-Komponenten
Sobald du deine grundlegenden Stildefinitionen festgelegt hast, ist es an der Zeit, deine wichtigsten Website-Komponenten in deinen Webdesign Styleguide einzubeziehen. Dazu gehören das Aussehen, die Größe und der Status von Schaltflächen, Formularfeldern, Formularelementen, Navigationsmenüs, Benachrichtigungen und Alarmen, Karten, Modals und anderen Elementen. Du kannst für jeden Schaltflächentyp noch einen Schritt weiter gehen, indem du die verschiedenen Zustände wie normal, schwebend, aktiv oder fokussiert angibst. Stile für Formularelemente wie Optionsfelder und Kontrollkästchen sollten ebenfalls definiert werden.
9. Erstelle den Tonfall deiner Marke
Bild von Strikingly Website Nutzer genommen
Ein effektiver Webdesign Styleguide befasst sich mit dem Erscheinungsbild deiner Website, der Kommunikation und der Ausdrucksweise. Möglicherweise musst du dich mit Marketingfachleuten und Textern beraten, um Richtlinien für deine Website und andere Inhalte zu erstellen und diese schriftlich festzuhalten. Schließlich sind der Ton und die Stimme der Texte auf deiner Website die Art und Weise, wie du Besucher und potenzielle Kunden ansprichst, daher ist es wichtig, dass du es richtig machst.
10. Enthalte spezifische Dos und Don'ts
Die Konzepte in deinem Webdesign Styleguide lassen sich manchmal nur schwer mit Text allein erklären. Deshalb ist es oft besser, anhand konkreter Beispiele - z. B. visueller Dos und Don'ts - zu zeigen, wie die im Dokument festgelegten Regeln tatsächlich umgesetzt werden. Anschauliche Beispiele machen deutlich, wie der Webdesign Styleguide in der Praxis angewendet werden sollte.
11. Vergiss nicht die herunterladbaren Assets!
Abgesehen von den Regeln in deinem Webdesign Styleguide kann es notwendig sein, gelegentlich einige herunterladbare Assets aufzunehmen. Dazu könnten gehören:
- Dein Logo in allen für Web und Druck geeigneten Formaten
- Eine Pressemappe mit allen notwendigen Markenmaterialien
- Eine kurze Darstellung deines Markenbuchs
- Eine PDF-Version des Styleguides für die Website
Diese Ressourcen können für eine Vielzahl von Zwecken verwendet werden, z. B. für die Zusammenarbeit mit Partnerunternehmen, die Konvertierung von Leads, die Einarbeitung neuer Teammitglieder und vieles mehr. Ein Webdesign Styleguide ist nicht nur für interne Zwecke notwendig, sondern auch entscheidend für die Wiedererkennung der Marke bei Nutzern, Kunden, Partnern, der Presse und der breiten Öffentlichkeit. Wenn du davon ausgehst, dass deine Marke auch außerhalb deiner Website vertreten sein wird, z. B. in Presseveröffentlichungen, stelle sicher, dass Marken-Assets leicht anzufordern und zu erhalten sind.
Erstelle eine Website mit Strikingly
Der Website-Builder von Strikingly hat alles, was du brauchst, um eine professionelle Website zu erstellen, die mit der überwältigenden Konkurrenz an Webdesigns mithalten kann. Du kannst unsere vorgefertigten Vorlagen verwenden, aber du kannst auch von Grund auf neu beginnen und das hier Gelernte anwenden. Unser Website-Editor verfügt über eine Drag-and-Drop-Funktion, mit der du Elemente auf deiner Website ganz einfach verschieben kannst. Du kannst deine Bilder entweder von deinem Computer hochladen oder nach der Datei suchen, die du verlinken möchtest. Du musst nichts über Website-Design wissen, um Strikingly zu nutzen; klicke einfach auf deine Website und bearbeite sie. In wenigen Minuten kannst du sie veröffentlichen. Denke daran, die Website deines Unternehmens mit unseren mobilen App-Funktionen zu verwalten und zu bewerben und Kundenanfragen über eine Chatbox zu beantworten. Natürlich haben wir viele schön gestaltete Websites, die von unseren Nutzern erstellt wurden. Besuche gleich jetzt unsere Landing Page, und unser Expertenteam wird dich willkommen heißen.
Fazit
Der Webdesign Styleguide und die Living-Styleguides haben bei der Organisation und Fokussierung des Arbeitsablaufs geholfen. Sie helfen bei der Identifizierung von Unstimmigkeiten in der Benutzeroberfläche und erinnern mich daran, dass Benutzeroberflächen in der Entwurfsphase flexible Designsysteme sind. Sie helfen dabei, Fehler zu reduzieren und die Übergabe beim Übergang vom Design zur Entwicklung zu beschleunigen. Ein Webdesign Styleguide kann während der Entwicklungsphase nahtlos in HTML und CSS integriert werden, da sie wichtige Prinzipien mit Frontend-Richtlinien und komponentenbasierten CSS-Strukturen teilen. Aktualisierungen und Umgestaltungen werden durch lebende Styleguides so einfach und überschaubar wie möglich gemacht. Ich hoffe, dass dir ein Styleguide-Workflow weiterhilft, aber es gibt tausend Möglichkeiten, ein Projekt im Bereich Web und Design anzugehen. Wenn du einen Arbeitsablauf gefunden hast, der für dich funktioniert, bleib dabei!
