Styleguide für Webseiten

Der Gestaltungsleitfaden definiert die Optik und das Verhalten von Webseiten-Elementen. Gerade für größere Webseiten oder bei der Zusammenarbeit verschiedener Personen ist es nützlich, in einem Styleguide alle wichtigen Gestaltungsregeln festzuhalten. Anhand von Screenshots wird der Einsatz und Kontext verdeutlicht. So ist schnell zu erkennen, welche Elemente verfügbar sind, wie diese gestalterisch definiert sind und welche Bedingungen bei der Verwendung zu beachten sind.

Ein Styleguide kann sehr kompakt ausfallen, beispielsweise als kommentierte und bemaßte Screenshot-Sammlung. Je mehr Personen die Umsetzung bzw. Anwendung des Designs betreuen, desto notwendiger ist eine ausführliche Version – bis hin zu Hinweisen für die Texterstellung (Schreibstil, Anrede, etc.). Oft wird man sich auf eine Version verständigen können, die zwischen den beiden Extremen liegt.

In jedem Fall ist der Styleguide ein lebendes Dokument und wird regelmäßig aktualisiert. Dazu gehört, neue Elemente nachzupflegen, veränderte Gestaltungsregeln zu dokumentieren, neue Icons oder Standard-Elemente zu ergänzen.

Ob ein Styleguide in einem Layout-Programm, mit einer Textverarbeitung oder in einem Wiki erstellt und gepflegt wird, ist nachrangig. Entscheidend ist, dass alle (!) relevanten Personen Zugriff auf die aktuelle Version haben und dass das kontinuierliche Pflegen gewährleistet ist.

Praktischer Hinweis: Der Styleguide regelt durch seine Benennung auch die Bezeichnungen für jedes Element, sodass alle Beteiligten eine gemeinsame Sprache verwenden, wenn sie von „Buttons in Flyouts“ oder „Hinweis-Boxen auf Rubrik-Seiten“ sprechen.

Die folgenden sieben Bereiche zeigen auf, welche Aspekte ein Styleguide enthalten sollte. Sie können als Anregung für die Struktur dienen. In einigen Fällen können Elemente in unterschiedlichen Kapiteln untergebracht werden. Dann entscheidet man sich für jene, die einem plausibel erscheint und fügt in den anderen Verweise ein. Beispielsweise ist es sinnvoll, die formalen Definitionen von Buttons im Kapitel „Basis-Elemente“ vorzunehmen, aber die Verwendung (Platzierung) von Buttons in den Kapiteln „Widget“ und „Kontext“ und ggf. „Layout“ zu regeln.

1. Grundlagen
2. Basis-Elemente
3. Layout
4. Widgets
5. Interaktionen
6. Inhalte
7. Kontext

Grundlagen

Dieser Teil ist vermutlich eher textlastig. Er stellt die Ansprüche vor, denen die Gestaltung folgen soll. Gibt es ein Corporate Design, wird auf dieses verwiesen. Es ist sinnvoll, die wichtigsten Funktionen der Webseite aufzuführen und die gewünschte Gesamtanmutung zu beschreiben.

Auch ganz pragmatische Aspekte werden hier geregelt. Dazu gehört beispielsweise, welche Bildschirmgröße als Standard angesehen wird. Dadurch ergibt sich die Grenze, ab der ein Webseitenbesucher scrollen muss – eine wichtige Größe für die Gestaltung einzelner Seiten.

Technische Anforderungen wie zu unterstützende Browser und Gerätegrößen sowie Umsetzungshinweise (z.B. responsive Design) werden ebenfalls festgehalten.

Da das Design (und damit der Styleguide) ja den Funktionen der Webseite dienen soll, sind Verweise auf bestimmte Funktionalitäten durchaus angebracht. Beispielsweise gibt es Konventionen jeder Website, ihre Primär- und Sekundär-Funktionen zu platzieren und zu gestalten. Eine Regel könnte beispielsweise sein, dass die Primärfunktion einer Seite immer ohne Scrollen erreichbar ist, während die Sekundärfunktion immer am unteren Seitenende platziert wird. Konkret könnte die Primärfunktion einer Content-Webseite das Bereitstellen eines Artikels sein und die Sekundärfunktion das Kommentieren.

Basis-Elemente

Hier werden die Elemente hinsichtlich ihrer Gestaltung beschrieben und die Hinweise zur Verwendung gegeben. Die konkrete Verwendung wird in den folgenden Kapiteln geregelt. Basis-Elemente sind quasi die Atome, die dann in Widgets zu Molekülen und im Layout zu Stoffen zusammenfinden.

Buttons: für Primär- und Sekundäraktionen, womöglich in verschiedenen Größen; ggf. sind Hinweise zur Schreibweise (Imperativ-Verben mit großem Anfangsbuchstaben wie „Speichern“) angebracht

Text: alle Vorkommen von Fließtext, Überschriften (h1 bis h6), Aufzählungen und Auflistungen, Tabellen, Navigationstext, Hinweistexte etc.; idealerweise wird zu jedem Textelement ein Screenshot-Beispiel integriert oder ein Dummy-Text, der sämtliche Textvarianten enthält

Eingabe-Elemente: Eingabefelder, Checkboxen, Radio-Buttons, Auswahlmenüs sowie die Feldbeschriftungen

Farben: Standardfarben für Elemente, ggf. sind die verschiedenen Abstufungen, Schattierungen definiert; angegeben werden sollte jeweils der RGB- und Hex-Wert; werden Transparenzen (opacity) verwendet, so sind diese ebenfalls zu definieren

Trenn-Elemente: alle Elemente, die Blöcke auf einer Webseite voneinander abgrenzen, dazu gehören beispielsweise Linien, Kästen oder Bildelemente.

Logo: Die Größen und Einsatzzwecke des Logos werden geregelt; ggf. wird auf die Ablageorte für die Quelldateien verwiesen, oder das Logo liegt in allen vorgesehenen Größen bereits fertig auf dem CDN, dann die jeweiligen Dateipfade auflisten

Icons, Icon-Text: Gestaltungshinweise, beispielsweise Größe, Farbigkeit, technische Umsetzung als Einzelgrafiken, Sprite oder Icon-Font sowie – sofern verwendet – die Parameter für die Beschriftung von Icons. Alle verfügbaren Icons werden als Screenshot und wenn möglich die Quell-Datei (meist in einem Vektor-Format) beigefügt

Die folgende Tabelle listet die potenziellen Eigenschaften auf, die für jedes Element zu definieren sind. Dabei bietet es sich zwar an, die CSS-Bezeichnungen und -Einheiten zu verwenden. Diese bedeuten aber nicht, dass diese in der Umsetzung 1:1 übernommen werden können. Sie gelten quasi nur als Bemaßungshinweis, wie diese praktisch umgesetzt werden können, ist Aufgabe des HTML/CSS-Designers bzw. Frontemd-Entwicklers. Beispielsweise würde ein „margin: 10px“ für einen Button bedeuten, dass dieser in jeder Richtung 10 Pixel Abstand zu Nachbarelementen haben muss.

Zu berücksichtigende Parameter für jedes Element

Device/Viewport	Status	Layout	Typo	Grafisch
PC/Laptop Tablet-Landscape Tablet-Portrait Smartphone	neutral hover focus active visited	width height display float …	font-size line-height font-weight spacing hyphenation text-align …	border border-radius shadow color background …

Aus der Kombination von Device/Viewport und Status können sich bei einigen Elementen zahlreiche Einzeldefinitionen ergeben. Dabei kann es sich anbieten, zunächst den neutralen Standard-Fall zu definieren und für die anderen Status nur die Änderungen zu diesem aufzuführen.

Layout

Print-Designer haben mit dem Layout wenig Probleme. Das Layout regelt die Grundaufteilung jeder Seite in Bereiche. Webseiten arbeiten meist ebenfalls mit einem Raster oder Gitter, das dem Satzspiegel aus dem Druckzeitalter entspricht. Beliebt ist die Aufteilung in zwölf Spalten, die dann in verschiedenen Blöcken zusammengefasst werden, beispielsweise bilden die drei linken Spalten die Navigationsspalte, die nächsten sieben den Hauptbereich und die rechten zwei Spalten werden für Zusatzinformationen verwendet.

Wird die Webseite auf verschiedene Bildschirmgrößen unterschiedlich dargestellt, so definieren die Viewports, an welchen Stellen ein Umbruch erfolgt. Beispielsweise kann bis 500 Pixel die Mobilansicht, bis 1000 Pixel die Tablet-Ansicht und über 1000 Pixel die PC-Ansicht verwendet werden.

Das Layout liefert für jeden Seitentyp ein Wireframe, das die Anordnung der Elemente und Funktionsbereiche regelt. Beispielsweise enthält das Wireframe für die Produktseite in einem Webshop alle Elemente, die potenziell vorkommen können und definiert, was in Sonderfällen geschieht (z.B. rutschen Elemente nach oben oder bleiben Lücken, wenn Daten fehlen). Dabei werden vor allem auch die primären und sekundären „Call to Action“-Elemente platziert (beispielsweise Warenkorb- und Bewerten-Button).

Das Layout regelt also, wo jedes Element hinkommt und wie sich seine Platzierung zu anderen Elementen verhält.

Widgets

Zahlreiche Elemente kehren auf Webseiten immer wieder. Diese könnten im Rahmen eines Master-Layouts definiert werden, oder man fasst sie in einem eigenen Kapitel gesondert zusammen. In einem Wireframe/Layout braucht man diese Elemente dann z.B. nicht mehr auszufüllen, sondern kann diese als Fläche mit dem jeweiligen Widget-Titel eintragen.

Widgets sind auch bei der Umsetzung hilfreich. Sie werden einmal erstellt und können dann in zahlreichen Kontexten immer wieder verwendet werden. Das gibt einer Webseite Einheitlichkeit und einen runden Gesamteindruck.

Zu den Elementen, die sich als Widget erfassen lassen, gehören:

Webseitenkopf: Header meist mit Logo, Hauptnavigation oft mit Flyout-Navigation, Suchfeld und wenigen Zusatzelementen (Claim, Siegel, Illustration)

Webseitenfuß: Footer meist mit Linkliste (Impressum, AGB, Über uns, Kontakt, etc.) sowie Teasern zu nachrangigen Angeboten

Formulartypen: Adresseingabe, Kommentar- oder Bewertung- oder Kontaktformulare

Informationsblöcke: beispielsweise „Produkt-Kacheln“ in einem Webshop, Text-Teaser in einer Content-Seite

Textarten: verschiedene Textarten oder -typen in einer Webseite jeweils mit einem Beispiel definieren (z.B. „Langtext“: h1 + Untertitel + Text mit Zwischentitel + Autorzeile; „Kurztext“: h1 + Text ohne Zwischentitel)

Info-Boxen

Navigationsspalte oder -zeile

Brotkrumen: Breadcrumb

Paginierung oder ABC-Sprungmarken: Navigation, Link-Listen, Seitenwechsel-Navigation

Bilder: im Content-Bereich als Haupt-Bild, als Nebenbild, in Bildergalerien, als Link oder statisch

Interaktionen

Abläufe

Die Abläufe für jeden Verwendungszweck der Webseite werden aufgeführt. Dabei genügt es meist, die Namen der Seiten und zu bedienenden Elemente zu verwenden. Nur bislang nicht definierte Elemente sollten hier spezifiziert werden. Abläufe können als Text-Liste (wenn sie größtenteils linear sind) oder als Flussdiagramm abgebildet werden. Oft sind Abläufe an bestimmte Bedingungen geknüpft, beispielsweise, ob ein Kunde eingeloggt ist oder über einen bestimmten Kanal auf die Webseite kam. Solche Parameter werden direkt unter dem Ablauf-Titel aufgeführt, sodass nicht jeder mit dem selben Punkt anfangen muss: „Kunde ruft www.seitenname.de im Browser auf“. Jeder Ablauf enthält nur die für ihn relevanten Schritte (man kann sich darauf einigen, dass jeder Ablauf mit der Ansicht der Startseite beginnt, um so darzustellen, wie der Nutzer zu einem Ablauf gelangt) und kennzeichnet, welche Aktionen, Informationen, Optionen vorgegeben und welche optional sind.

Abläufe können sein:

• Suche, Produkt oder Artikel finden
• Produkt Warenkorb hinzufügen
• Passwort ändern
• Bestellung auslösen
• Kommentieren, Bewerten
• Kontaktnachricht senden

Overlays

In vielen Webseiten werden Overlays für Mikro-Aktionen oder zur Detaildarstellung genutzt. Sind diese statisch (verschwinden also erst nach Klick woandershin) oder dynamisch (verschwinden bei Mausverlassen), bieten sie Bedien- oder Medienfunktionen oder Eingabefelder – alle Fälle werden beschrieben:

• Auslösen des Overlays
• Verschwinden des Overlays
• Vorkommen, Kontext des Overlays
• „Standard-Elemente“ wie Schließ-Button, Überschrift
• Standard-Aufbau/Layout
• Standard-Platzierung von Auslöse-Buttons

Overlays sind quasi interaktive Widgets und sollten daher wie diese detailliert definiert werden. Es empfiehlt sich, im Vorfeld den Einsatz von Overlays gut zu definieren, damit nicht in der Umsetzung in jedem kniffligen Fall auf ein Overlay ausgewichen wird.

Messages, Nachrichten, Hinweise

Führt der Nutzer eine Aktion aus, gibt es vier Möglichkeiten darauf zu reagieren:

• das Ergebnis ist sofort sichtbar
• es gibt eine Erfolgsmeldung (Ampel: grün)
• es gibt einen Hinweis (Achtung; Ampel: gelb)
• es gibt eine Warnung oder Fehlermeldung (Ampel: rot)

Für die drei Meldung-Varianten wird ein Standard in der gesamten Webseite definiert. Wann eine Meldung erscheint, ist im Ablauf geregelt, aber wie sie erscheint, sollte gesondert definiert werden, beispielsweise dynamisch als Overlay oder Ajax-Element oder bei einem Seitenaufruf. Manche Webseiten integrieren einen „Notification“-Bereich, in dem solche Meldungen erscheinen. Ebenso kann es geeignet sein, dass der Nutzer den Hinweis schließt, beispielsweise über ein „X“-Symbol. Ebenso wird die Erscheinung aller Hinweis-Varianten definiert:

• Gestaltung mit Icon, Farbe oder anderen Zusatzelementen
• Textbestandteile, beispielsweise eine Hauptzeile mit ergänzenden Informationen
• Tonfall der Meldungen, vielleicht gibt es einen Standardsatzbau

Animationen

Spätestens mit jQuery oder CSS3-Animationen werden Webseiten lebendiger. Animationen können dabei helfen, bestimmte Vorgänge optisch zu veranschaulichen, beispielsweise ein Produktbild in den Warenkorb bewegen, Webseitenblöcke nachträglich erscheinen lassen oder Bereiche ein- oder ausklappen.

Welche Eigenschaften der Elemente von einer Animation erfasst werden, wird ebenso definiert wie die Dauer von Animationen. Bewährt hat es sich, dass für die zweite Animation, die auf einen Bereich angewendet wird (z.B. Wieder-Ausblenden nach dem Einblenden) etwa 60% der ursprünglichen Animationsdauer genutzt werden. Die meisten Animationen sollten subtil und rasch ablaufen, da die Nutzer sie schnell satt haben, wenn sie eine Webseite häufiger benutzen.

Insbesondere, wenn Animationen Aktionen verzögern, beispielsweise einen Bereich erst einblenden, in dem dann die Aktion stattfindet, sollten sie deutlich kürzer als eine Sekunde (Empfehlung 300 bis maximal 450 Millisekunden) ablaufen (die folgende entgegengesetzte Animation dann 150 bis maximal 300 Millisekunden). Animationen, die nur etwas verdeutlichen, aber die Bedienung nicht beeinflussen, können auch etwas länger dauern, um auch wahrgenommen zu werden.

Inhalte

Gibt es bereits einen Corporate Styleguide für das Textschreiben, wird auf diesen verwiesen. Gelungene Beispiele sollten referenziert oder gleich – im korrekten Design – integriert werden. Der Text-Styleguide regelt beispielsweise:

Schreibstil: förmlich, umgangssprachlich, höflich, Komplexität (kurze Sätze, lange Sätze)

Anrede: Du, du, Ihr, ihr oder Sie

Aufbau, Standard-Struktur: Lead-in, Zwischentitel, Vom Allgemeinen zum Konkreten oder vom Konkreten zum Allgemeinen

Dos and Don’ts: Phrasen und Wörter, die gewünscht sind oder vermieden werden sollen

Auszeichnungen: Welche Textformate sind zulässig (fett, kursiv), in welchen Fällen werden sie verwendet, welche Anführungszeichen („“, «», »«) werden verwendet

Schreibung: Umgang mit Varianten im Duden, Anglizismen, konservative oder progressive Schreibweise und Zeichensetzung

Bilder: Stil (Denkhilfe: welche Kriterien sollte ein Bild bei Recherche bei einer Bildagentur wie istockphoto oder fotolia erfüllen), Größe (ganze oder halbe Textbreite oder Angabe in Pixeln, an Quer-, Hoch- und Sonderformate denken), Platzierung im Text

Insbesondere Texte und Texttypen, die dem Nutzer häufig begegnen, sind gut zu definieren und ein Workflow für Erstellung, Lektorat, Freigabe festzulegen. Für die häufigsten Meldungen können (und sollten) die Texte gleich beispielhaft im Styleguide definiert werden.

Kontext

Damit erkennbar ist, wie all die Elemente im Zusammenspiel wirken, enthält der Styleguide für jeden Seitentyp eine Musterseite. Zunächst wird dies beispielsweise die Entwurfsdatei sein. Diese sollte später gegen einen Screenshot aus der Umsetzung ausgetauscht werden.

Folgende Seiten sind mindestens zu dokumentieren:

• Startseite
• Übersichtsseiten
• Beitrags- oder Produktseiten
• Kundenkonto
• Sonderseiten: Gewinnspiele, Newsletter, Umfragen

Gibt es wenige Seitentypen, kann dieses Kapitel auch unter Layout eingegliedert werden. Sinnvoll ist es, zu jedem Seitentyp Hinweise und Anmerkungen anzubringen, die aus den übrigen Kapiteln nicht direkt ableitbar sind oder darin nicht erfasst wurden.

Besonders der Bezug zur Funktionalität sollte dokumentiert werden, beispielsweise dass bestimmte Teaser-Plätze von der Redaktion genutzt werden, während andere für externe Auftraggeber vorgesehen sind. Gelegentlich ist es auch sinnvoll, die Beweggründe für eine bestimmte Gestaltung oder Entscheidung aufzuführen – dann kann man Monate oder Jahre später immer noch nachvollziehen, warum beispielsweise eine Teaserplatzierung an einer bestimmten Stelle erfolgte.

Autor: Alexander Florin bei LinkedIn