Der Wiedererkennungswert und eine einheitliche Präsentation sind praktisch das Alpha und das Omega der Website-Gestaltung. Das ist meist auch kein Problem, solange man allein an einem Projekt arbeitet. Bei größer angelegten Webprojekten – beispielsweise beim Erstellen bzw. Bearbeiten einer Unternehmenswebsite – arbeiten häufig jedoch mehrere Teams an der Gestaltung und Pflege einer Website. Die Lösung bei solchen Arbeitsumgebungen bietet ein Styleguide. Doch was verbirgt sich konkret hinter dem Begriff? Und wie kann man schnell und einfach einen Styleguide erstellen und was sollte man darin thematisieren?
Ein Styleguide bezeichnet im Onlinemarketing den Leitfaden für die einheitliche Gestaltung von Online-Auftritten. Dazu gehören neben der eigenen Website auch die Accounts in den sozialen Netzwerken und Apps. Ein Styleguide hängt somit eng mit dem Corporate Design und der Corporate Identity eines Unternehmens zusammen. Er sorgt dafür, dass die visuelle Identität des Unternehmens auch im Netz sofort erkennbar ist. Der Styleguide ist notwendig, um Unternehmen in sämtlichen Kommunikationskanälen – ob in sozialen Medien, E-Mails, auf der eigenen Website oder in anderen Veröffentlichungen – als Einheit zu präsentieren. Er bietet Richtlinien für alle Mitarbeiter, wie das Unternehmen grafisch und textuell dargestellt werden soll, damit die (potenziellen) Kunden es sofort zuordnen können.
Somit umfasst ein digitaler Styleguide für Websites weit mehr als nur das Logo und die Gestaltung des Firmenschriftzugs: Er legt neben den zu verwendenden Schriften und Farben auch die Bildgestaltung oder die Anordnung von Elementen fest und enthält Angaben zur Tonalität der Texte. Wird er befolgt, vermittelt die Website ein einheitliches Bild – auch wenn unterschiedliche Webdesigner für die einzelnen Bereiche der Website verantwortlich sind.
Die Verantwortlichen eines Unternehmens stehen früher oder später vor der Frage, wie die Website die Firma am besten widerspiegelt – und wie Seitenbesucher die Website sofort richtig zuordnen können. Die Antworten auf diese Frage fließen dann in den Styleguide ein – er fasst das Erarbeitete zusammen und bildet die Grundlage für die Gestaltung der Website. Ein Styleguide ist wichtig, da nur mit seiner Hilfe die Website zielgruppengerecht und einheitlich gestaltet werden kann. Dadurch ist die eigene Brand im Internet schnell erkennbar. Eine ideal konzipierte Website sorgt zudem dafür, dass sich die Besucher leichter mit der Brand oder der Marke identifizieren können und sie vielleicht sogar weiterempfehlen.
Darüber hinaus vermittelt eine einheitlich gestaltete Website Professionalität und Seriosität. Kunden oder Nutzer fühlen sich angesprochen und bleiben länger auf der Seite.
Um einen guten Styleguide aufzubauen, ist es unabdingbar, sich zunächst Gedanken über die Zielgruppe der Website zu machen. Ein Beispiel: Ein Finanzdienstleister würde seine Kunden niemals mit „du“ ansprechen oder anschreiben. In diesem Dienstleistungssektor prägt das förmlichere und seriösere „Sie“ die Anrede. Das lässt sich von der Face-to-Face-Kommunikation auch auf den Content der Website übertragen: Wird in der Branche größtenteils das „Sie“ verwendet, sollte man auf der Website genauso vorgehen und dies im Styleguide ausdrücklich festhalten. Ist hingegen ein Portal für Jugendliche geplant, wirkt eine Anrede mit „Sie“ eher spießig, was die Hauptzielgruppe abschrecken könnte. Sie fühlt sich nicht angesprochen und sucht sich ein anderes Portal.
Bei der Erstellung eines Styleguides muss die Unternehmensphilosophie bzw. die Corporate Identity ebenso berücksichtigt werden wie die angepeilte Zielgruppe. Um diese zu ermitteln, sind umfangreiche Datenerhebungen und -analysen notwendig: Es gilt, Alter, Geschlecht, Bildungshintergrund, Lebensumstände und Interessen der Zielgruppe so genau wie möglich zu definieren. Nur wer seinen Kunden bzw. Leser kennt, kann auch zielgruppengerechte Websites mit entsprechendem Content erstellen. Ebenso sollte der Styleguide die Unternehmensphilosophie sowie Ziele und das Wording beschreiben: Für was steht das Unternehmen und welche Worte können bzw. sollen primär auf der Website verwendet werden, um Kunden und Lesern die eigenen Ideale zu vermitteln?
Das Unternehmensbild und die Daten über die Zielgruppe sollten dann auch in die Vorgaben zur Websitegestaltung einfließen. Um den Wiedererkennungswert zu erhöhen, greifen die meisten Websites beispielsweise die Farben des Firmenlogos auf. Aber auch die Zielgruppe beeinflusst die Farbgebung: So weisen Websites, die sich an ein jugendliches Publikum richten, meist eine auffälligere Farbgebung auf als Websites für eine ältere Zielgruppe. Letztere bevorzugt meist ein schlichteres Design mit gedeckten Farben. Häufig kann man bei einer jungen Zielgruppe mit unüblichen Schriftarten Interesse wecken, während ein klassischer Stil wiederum für Seriosität steht. Wichtiger als solche Überlegungen sollte aber stets die Lesbarkeit sein: Denn eine ausgefallene Schriftart, die nur schwer lesbar ist, wird auch jüngere Websitebesucher abschrecken.
Der Styleguides sollte zudem Angaben darüber enthalten, welche Farben, Worte, Icons usw. auf keinen Fall benutzt werden sollen. Einige negativ konnotierte Reizworte können beim Leser beispielsweise Assoziationen wecken, von denen sich die Website bzw. das dahinterstehende Unternehmen distanzieren möchte. Gleiches bei der Farbgebung und Grafiken: Welche Farbkombinationen sind unerwünscht? Welche Bildinhalte sollten vermieden werden?
Solche Richtlinien zu unerwünschten Inhalten gehören auch in einen guten Styleguide.
Je genauer die Vorgaben sind, desto weniger kosten- und zeitintensive Nachbearbeitungen sind später notwendig. Der Styleguide sollte die Richtlinien daher so detailliert wie möglich festhalten: Die Farben sollten z. B. deutlich mit Hex-Codes, RGB-Werten und zugehöriger Abbildung definiert werden. Durch eine kurze Beschreibung lässt sich schnell erklären, wie die vorgesehenen Farben auf den Betrachter wirken. Außerdem muss stets deutlich sein, welche Farben für welche Elemente vorgesehen sind. Dementsprechend muss man für Icons, Button-Elemente, Banner oder Logos festlegen, wo sie platziert werden und welche Farben sie enthalten dürfen.
Eine grafische Übersicht ist hierbei oft übersichtlicher als eine Erklärung nur über Text. In solch einer Grafik kann man auch Angaben zur Spaltenbreite und Zeilenhöhe machen; so sieht der Designer direkt, wie das Ganze auf der fertig gestalteten Seite ungefähr aussehen soll. Auch Größenangaben zu den Bildern, Icons und dem Logo sind sinnvoll.
Genauso sollte den vorgeschriebenen Schriftarten ein Verwendungszweck und eine bestimmte Schriftgröße zugewiesen werden: Wo und wie darf man welche Schriftart nutzen? Idealerweise enthält der Styleguide auch direkt Beispiele für die Verwendung (die verdeutlichen, welche Schriftart man für die Hauptüberschrift wählt, welche für die Zwischenüberschriften und welche im Fließtext). Ebenso sollten Angaben zum Zeilenabstand, dem Einzug und den Abständen zwischen den einzelnen Seitenelementen enthalten sein.
Wie aber sieht ein fertiger Styleguide für Websites schließlich aus? Einige Beispiele sind frei online verfügbar – so etwa die Styleguides der deutschen Bundesregierung und des Mozilla-Konzerns. Da die Styleguides selbst als Website vorliegen, kann man sich durch die verschiedenen Kapitel klicken und einen Eindruck gewinnen, wie genau die jeweiligen Richtlinien aussehen.
Die Guideline der Bundesregierung differenziert zunächst zwischen Print- und Onlinemedien. Bei den Ausführungen zu Onlinemedien kann man sich detailliert durch alle Vorgaben für die Webanwendung, die mobile Anwendung sowie für soziale Medien klicken. Im Abschnitt „Basiselemente“ findet man Informationen zu den Schriften, Bildern, Icons und Farben. Unter „Gestaltungsprinzipien“ werden Vorgaben für den Seitenaufbau gemacht oder die unterschiedlichen Navigationsebenen erläutert. Jeder Unterpunkt bietet beispielhaft Grafiken, Fonts, Logos und Icons, die die Vorgaben illustrieren.
Ähnlich umfangreich wie der Styleguide der Bundesregierung ist der digitale Styleguide von Mozilla: Sehr gut bebildert wird hier beispielsweise das Logo und dessen richtige Verwendung erläutert. So sieht man auch gleich, wie sich das aktuelle Logo von dem der Vorgängerversionen unterscheidet (benutzt werden darf aber nur das aktuelle). Weniger streng sind die Richtlinien zur Farbdarstellung der Wortmarke „Mozilla“. Diese darf – je nach restlichem Design – in jeder deckenden Farbe dargestellt werden. Unerwünscht sind jedoch beispielsweise regenbogenartige Farbverläufe.
Beide Beispiele verdeutlichen, dass für einen hilfreichen Styleguide gar nicht viel Text notwendig ist: Für die meisten Guides reichen kurze Beschreibungen und gute Illustrationen. Wichtig ist vor allem eine logische Struktur: Bei Mozilla funktioniert die Navigation über eine Menüstruktur am linken Seitenrand. Kapitelweise klickt man sich auch im Styleguide der Bundesregierung jeweils von einer Überkategorie (etwa „Basiselemente“) bis zu konkreten Fallbeispielen durch.
Natürlich hat nicht jedes Unternehmen die Möglichkeit, für den Styleguide eine eigene Website zu schalten. In der Regel reicht ein gut strukturiertes Handbuch – etwa im PDF-Format – völlig aus. Dies kann man den jeweiligen Webdesignern dann vorab zur Ansicht geben, bevor sie sich an die Arbeit machen.
Die folgende Tabelle fasst noch einmal die wichtigsten Punkte zusammen, die in jedem guten Styleguide geklärt werden sollte
Bereiche des Styleguides | Zentrale Fragen |
Grundsätzliche Gestaltungsprinzipien | Wofür steht das Unternehmen? Was sind die Ziele der Website? Welche Gestaltungsprinzipien unterstreichen die Unternehmensphilosophie? |
Zielgruppe/Personas | Wen soll die Website erreichen? Wie setzt sich die Zielgruppe zusammen? Was sind deren Vorlieben, Wünsche, Interessen? |
Tonalität und Wording | Wie sollen Kunden/Leser/Besucher angesprochen werden? Welche Reizwörter sind tabu bzw. sollen benutzt werden? |
Logo und Wortmarke | Wie sehen Logo und Wortmarke aus? Wann, wie und wo soll/darf/muss es verwendet werden? |
Grundstruktur der Website | Wie soll die Website aufgebaut sein? Wie breit sind die Spalten und wie hoch die Zeilen? Wie sollen Elemente angeordnet werden? Welche Menüstruktur soll gegeben sein? |
Farben | Welche Farben unterstreichen die Intention der Website und sprechen die Zielgruppe an? Wie setzen sich die RGB-Werte und Hex-Codes zusammen? |
Schriftarten | Welche Schriftarten sollen für welche Texte und Elemente benutzt werden? Wie groß soll die Schrift jeweils sein und welche Farbe darf sie haben? |
Icons | Welche Icons sollen benutzt werden? Wo sollen diese gesetzt werden und was bedeuten sie? |
Content | Welcher Content soll die fertige Website füllen? Wie soll dieser grafisch, textuell bzw. multimedial umgesetzt werden? |
Ist der Styleguide erstellt, muss er auch bei Aktualisierungen und Überarbeitungen der Website berücksichtigt werden. Nur so ist auch langfristig die Einheitlichkeit in allen Kommunikationskanälen gewährleistet. Uniformität ist essenziell für das Branding. Das heißt allerdings nicht, dass sich der Styleguide eines Unternehmens niemals verändern darf. Vielmehr sollte er regelmäßig überprüft werden: Sind die Designs noch aktuell, die Schriftarten noch zeitgemäß? Könnte das Logo ein Upgrade vertragen? Das Beispiel Mozilla zeigt, dass sich Logos im Lauf der Zeit durchaus verändern dürfen, ja sogar müssen. Schließlich kann sich auch der Geschmack der Zielgruppe wandeln. Für einen Webauftritt ist es daher wichtig, zwar der im Styleguide definierten Einheitlichkeit treu zu bleiben, aber dennoch mit der Zeit zu gehen und die Vorgaben up to date zu halten.
Haben Sie schon Ihr eigenes Logo? Mit dem IONOS Logo Generator können Sie kostenlos Ihr Eigenes kreieren!
Webdesigner werden im Jahr 2021 größtenteils dort weitermachen, wo sie 2020 schon ihr Hauptaugenmerk hatten: bei der Nutzerfreundlichkeit. Dabei liegt die Herausforderung hauptsächlich darin, interaktive Komponenten und 3D- bzw. VR-/AR-Effekte möglichst natürlich im eigenen Projekt unterzubringen. Wir verraten Ihnen anhand von 11 Trends, wie sich das Webdesign 2021 weiterentwickeln wird.
Der sogenannte One-Pager ist der neue Trend im Webdesign: Immer mehr Unternehmen bevorzugen für die Präsentation von Produkten, Kampagnen oder Projekten Websites im Single-Page-Design. Auf einer einzigen HTML-Seite navigiert sich der Nutzer durch Scrollen und andere Navigationselemente durch den Content. Die minimalistischen Websites setzen auf Storytelling und schaffen ein intuitives...
Ein Logo ist das Aushängeschild eines Unternehmens oder einer Marke: Es symbolisiert die Corporate Identity und führt beim Zielpublikum im besten Fall zu positiven Assoziationen. Jede Marke und jedes Unternehmen sollte deshalb über ein passendes Logo verfügen. Um ein Logo zu entwerfen, benötigen Sie nicht zwangsläufig herausragende Bildbearbeitungskenntnisse – obwohl Ihnen diese hilfreich beim...
Wir sind ständig umgeben von Marken-Logos. Doch wie genau schauen wir uns die Grafiken wirklich an? Die Studie „Branded in Memory“ hat den Test gemacht: Wie gut kann man ein bekanntes Logo aus der Erinnerung aufmalen? Über 150 Männer und Frauen, Jung und Alt, haben es versucht und teilweise sehr krude Ergebnisse abgeliefert. Großer Gewinner: Einfache Strukturen und starke Farben. Erfahren Sie,...
