Bei Webseiten ist das einheitliche und zum Image passende Erscheinungsbild wichtig. Deshalb sollte jede Webseite über einen Styleguide verfügen.
In diesem Artikel zeige ich Euch wie ein Styleguide aufgebaut sein sollte und wie man Ihn beim Erstellen von Webseiten nutzt.
Ein Styleguide ist eine Gestaltungsrichtlinie für Webseiten. Jeder sollte einen Styleguide haben.
Kunden fragen mich oft, warum ich am Anfang gleich einen Styleguide mit Ihnen vereinbaren möchte, wenn ich Ihre Webseite erstelle.
Ganz Einfach: Wer sich zu erst die Farbgestaltung, das Layout und die groben Strukturen überlegt, der kann gezielter bei der Umsetzung damit arbeiten und am Ende kommt eine Webseite wie aus einem Guss heraus, mit der sich der Kunde identifizieren und auch das Firmenimage verbinden kann.
Für ganz Eilige habe ich am Ende dieses Artikels meinen Styleguide für Webdesign Mittelfranken übersichtlich auf einer Seite zusammengefasst.
Vorher die Theorie 🙂
Ein Styleguide umfasst bei mir immer genau folgende Punkte, die ich einzelnen an Beispielen erklären werden.
- Konzept und Struktur der Webseite
- Konzept für einzelne Seiten / Beiträge
- Die Farbpalette
- Die Typografie
- Elemente der Webseite
Ein Styleguide ist immer eine Arbeitshilfe. Ich stelle mir den Styleguide immer auf circa einer A4 Seite zusammen, so das man Ihn auch ausdrucken kann und bei der Arbeit (meist in nem 2.Browsertab oder ausgedruckt) vorliegen hat. Speziell bei den Farben ist das beim Anpassen einer Webseite auf Kundenanforderungen echt Gold wert.
Das Strukturkonzept einer Webseite
Zuerst bespricht man den Zweck der Webseite mit dem späteren Webseitenbesitzer. Dabei wird festgelegt, welche Seiten alles vorkommen sollen:
Pflicht sind immer:
- Datenschutzerklärung
- Impressum
- Kontaktformular
- Startseite
Das Impressum und die Datenschutzerklärung sind in Deutschland Pflicht und müssen sichtbar und erreichbar sein. Deshalb setze ich diese beiden Seiten immer in den Footer Bereich.
Auf der Startseite wird immer das Unternehmen beschrieben. Diese Seite ist Quasi die Eingangstür zu einer Webseite und sollte entsprechend gestaltet sein, und alle weiteren Möglichkeiten klar aufzeigen.
Für Firmen, Vereine oder auch Private Homepages hat sich eingebürgert, das ein Kontaktformular oder eine Über mich Seite mit entsprechender Kontaktmöglichkeit existiert.
Darüber hinaus kann man beliebige weitere Strukturen aufziehen. Wichtig dabei ist, das man von Anfang an auch eine Navigationsmöglichkeit vorsieht, mit der jede Seite mit ein paar Klicks vom Nutzer intuitiv erreichbar ist. Bei Bedarf kann man auch eine Sekundärnavigation einbauen.
Bereits hier muss man sich Gedanken über die spätere URL Struktur machen. Der Nutzer wird zwangsläufig mit Links zu/auf Eurer Seite in Berührung kommen.
Fragen dabei sind:
- Mit oder ohne www Subdomain
- SSL (HTTPS://) oder Standard
- Hierarchische Links
Das WWW am Anfang von Internetadressen stellt eine Subdomain dar und ist heutzutage nicht mehr notwendig und kann problemlos entfallen. Vorteil: Auf Schriftstücken ist die Internetadresse viel kürzer.
Wenn viel Kundenkontakt und sensible Daten über die Internetseite ausgetauscht werden sollen dann ist Verschlüsselung Pflicht. Auf bestehenden Webseiten kann man sich überlegen, ob man wirklich auf Verschlüsselung umstellen möchte und beim Neuerstellen von Webseiten empfehle ich gleich auf Verschlüsselung anzufangen, wenn es der Webhoster anbietet.
Bei vielen Unterseiten auf einer Webseite bietet sich eine Hierarchische URL Struktur an. (z.B. https://domain.de/Kategorie1/Unterseite1)
Für kleineren Seiten sollte man eher auf gut lesbare und flache URLs zurückgreifen.
Diese Seite zum Beispiel hat die URL https://webdesign-mittelfranken.de/webseiten-styleguide/.
An diesem Beispiel sieht man auch sehr gut, das ich bereits die wichtigsten Keywords in der URL untergebracht habe. Das hilft den Suchmaschinen und auch Nutzern schon bei der Suche zu erkennen, um was es sich auf dieser Seite drehen wird. Das ist einer der Punkte die man bereits beim Erstellen einer Internetseite für Die Suchmaschinenoptimierung auf der Seite tun kann.
Der Aufbau einzelner Seiten und Beiträge
Die Navigationsmenüs sind je nach Kundenwunsch realisierbar. Üblich ist eine Primärnavigation am oberen Rand und eine Sekundärnavigation am linken Bildrand. Unterstützt wird das ganze meist von einer Sidebar auf der rechten Seite. Mir persönlich reicht eine Navigation am Oberen Bildrand mit feststehendem Header und eine Sekundärnavigation mittels Breadcrumbs.
Eine Seite ist immer in 3 Bereiche unterteilt:
- Der Kopfbereich - Header beinhaltet immer die Seitenüberschrift, das Logo und die Primäre Navigation.
- Der Seiteninhalt - Content besteht aus dem eigentlichen Inhalt der Seite und oft auch noch zusätzlich aus einer Spalte am Rand die zusätzliche Bedienelement oder Listen enthält, der sogenaten Sidebar.
- Der Fußzeile - Footersetzt sich aus den weniger relevanten Links und Informationen zusammen, die trotzdem auf jeder Seite präsent sein sollen. Ein Typisches Beispiel hierfür sind Kontaktdaten und Impressum.
Bei Beitragsseiten eines Blogs gilt diese Dreiteilung ebenfalls. Zusätzlich wird der Contentbereich rechts oder links noch mit einer Zusatzspalte versehen, die sogenannte Sidebar. In dieser Spalte sind weitere Artikel, Kategorien und Verlinkungen untergebracht, um dem Nutzer leicht weitere Artikel anzubieten.
Jetzt kommt der Punkt, an dem man sich über den Seiteninhalt der jeweiligen Seiten Gedanken machen muss.
Ich persönlich versuche immer nach folgendem Schema vorzugehen:
- Einleitung
- Inhalt
- Weiterführende Links auf der Seite
Durch eine knackige Einleitung erzeugt man Interesse weiterzulesen, am besten bevor der Nutzer überhaupt scollen muss.
Der Inhalt sollte gut strukturiert, logisch und informativ sein.
Am Ende der Seite kommt dann meist eine Reihe von Button-Links mit Auswahlmöglichkeiten.
Die Farbpalette
Je nach Firma gibt es eine oder zwei Grundfarben.
- Bei einer Grundfarbe verwende ich dazu immer eine hellere und eine dunklere Variation der Grundfarbe.
- Bei Zwei Grundfarben im Corporate Design werden alle Elemente auf der Seite meist in diesen beiden Farben gehalten.
Dazu gibt es dann noch Drei bis Fünf Schwarz/Weiß Farben.
- Schwarz für harte Abgrenzungen
- Weiß für Abgrenzungen auf farbigem Untergrund
- Ein dunkles Grau, meist für Textfarben
- (Optional) Ein helles Grau
- Ein ganz helles Grau, meist für den Hintergrund
Für die bessere Lesbarkeit bietet es sich oft an, den Hintergrund nicht in ganz Weiß, sondern in unterschiedlichen leichten Grautönen zu verwenden. Das ist angenehmer beim Lesen.
Wie Ihr seht, sollte man sich auf maximal 3 Farben und 5 Grautöne beschränken. Das sieht auf den ersten Blick nicht viel aus, reicht aber völlig. Dadurch ist es möglich die gesamte Webpräsenz einer Firma auf Ihre Corporate Farben abzustimmen.
Weiter unten bei den Elementen zeige ich dann noch auf, wie man mit Farbverläufen oder Transparenz noch viel mehr aus den Farben herausholen kann, ohne das die Webseite zu bunt wird.
Noch ein Tipp von mir: Gebt den Farben Namen! Das macht es um vieles leichter, wenn man mit Kunden diskutiert und sich über Farben unterhält. Egal was für Namen, Ziffern tun es auch.
Die Typografie
Den Begriff Typografie verwende ich für alles was mit der Schrift zu tun hat. Angefangen bei der Schriftart, da sollte es auf der Seite nur eine geben, über die Schriftgrößen bis hin zu Farben aller auf der Seite zu verwendenden Texte.
Dabei muss man an folgende Elemente denken:
- Überschriften - H1 bis H6
- Fließtext - Der normale Text
- Listenelemente - Nummerierte und Unnummerierte
- Tabellen - Rahmen, Überschriften und Body Elemente
- Buttons - Texte und Effekte
- Links - Unterschiedliche Zustände der Links
- Breadcrumbs
Überschriften
Es gibt 6 Überschriften Ebenen. Meist reichen bei den Überschriften die Kategorien H1 bis H3. Bei Überschriften ist darauf zu achten, das die Überschriften sich deutlich voneinander unterscheiden und für Leser eine deutliche Abstufung, H1 ist die größte, H6 die kleinste zu erkennen ist. Dabei sollte darauf geachtet werden, das die kleinste verwendete Überschrift immer noch größer ist als der Text.
Fließtext
Der normale Fließtext sollte gut lesbar sein. Ein kräftiges Grau ist zu empfehlen. Wie bereits im letzten Kapitel geschrieben, empfehle ich auch einen leicht grauen Hintergrund, damit längerer Texte besser gelesen werden können.
Listenelemente
Bei unnummerierten Listenelementen ist der Punkt so geeignet zu wählen, das er nicht zu aufdringlich wird. Für herausragende Listen kann man auch spezielle Listelemente in Vorm von Checkboxen, Pfeilen oder zum Thema passenden Icons einsetzen. Dazu kann ich die Schriftart "Font Awesome" empfehlen. Diese Iconschriftart setze ich auch heufig hier auf meiner Webseite ein.
Bei nummerierten Liste sollte die Zahl in der Schriftart, Farbe und Große des Textes gewählt werden, da sonst die Ziffern überwiegen.
Tabellen
Der Rahmen einer Tabelle sollte nicht zu aufdringlich sein. Ich bevorzuge meist rahmenlose Tabellen um Elemente auf Webseiten ausrichten zu können. Die Überschriftzeile sollte in der gleichen Schriftart und Größe wie der Body-Text gehalten sein. Zusätzlich kann man die Überschrift durch fett Darstellung hervorheben.
Buttons
Buttons sind immerwiederkehrende Elemente einer Webseite. Diesen knöpfen habe ich später noh mal einen Absatz bei den Elementen spendiert, wo es eher um das Layout geht. Die Schriftart der Knöpfe sollte auf farbigem Hintergrund gut lesbar sein. Je nach Button Zustand dürfen sich in meinen Augen nur die Farben ändern. Buttons verwende ich immer in 2 Farbvarianten.
Links
Links im Text sollten deutlich durch eine vom Fließtext abgesetzte Farbe erkennbar sein. Dabei verwende ich meist die Primärfarbe, da auch hier wieder der Bezug zum Corporate Design hergestellt werden kann. Hover-Effekte von Links kann man immer sehr gut mit einer 2. Farbe realisieren. Bereits besuchte Links werden dann meist in einer dunkleren Farbe angezeigt. Die Schriftgröße ist bei mir immer identisch zu den Fließtexten.
Farben der Texte
Breadcrumbs
Das Elemente einer Webseite
Bilder
Buttons
Farbverläufe
Sidebar
Boxes
Fazit
Wie Ihr seht gibt es viel zu beachten und festzulegen, aber wer sich einmal am Anfang diese Gedanken macht, hat nachher wesentlich leichteres Arbeiten.
Bei Firmen wird sehr viel Wert auf Corporate Design gelegt. Hier habe ich ein paar interessante Beispiele rausgesucht:
Und jetzt wie versprochen der Styleguide zu dieser Seite.
Styleguide Webdesign Mittelfranken
Styleguide Inntal Gerüstbau
COLOR PALETTE
Farbe | Name | Hex | R G B |
---|---|---|---|
Basisfarbe RAL 3020 |
#bb1e10 | 187 30 16 | |
Dark Basic | #9b1e10 | 155 30 16 | |
Super Dark | #7b1e10 | 123 30 16 | |
Black | #000000 | 0 0 0 | |
Anthrazit | #2c2c2c | 44 44 44 | |
Dark Grey | #999999 | 153 153 153 | |
Light Grey | #f9f9f9 | 249 249 249 | |
Snow White | #FFFFFF | 255 255 255 |
TYPOGRAPHY
Header 1
Font: Open Sans 36 / Color #2c2c2c
Header 2
Font: Open Sans 24 / Color #2c2c2c
Header 3
Font: Open Sans 20 / Color #2c2c2c
Das ist Bodytext. Dieser wird immer eine einheitliche Farbe und Schriftart haben.
Font: Open Sans 14 / Color Anthrazit #2c2c2c
Das ist ein im Text untergebrachter Link
Font: Open Sans 14 / Color #ce171a