Anfang des Jahres gab es einen etwas anderen Halunkenvortrag. Dabei wurde den Teilnehmern in Form eines Styleguide-Quiz spielerisch gezeigt, für was ein Styleguide benötigt wird und wie dieser aufgebaut ist.
Was ist ein Styleguide?
In einem Styleguide sind verschiedene Design-Elemente wie Farben, Schriften und Logos abgebildet. Ein Styleguide ist also eine Art Leitfaden und gibt an, wie das Design eines Unternehmens auszusehen hat. Das klingt jetzt vielleicht ein wenig abstrakt. Man kann das ganz gut mit einem Lego-Bausatz vergleichen. Bei dem Bausatz ist klar definiert, welche Legosteine es gibt und wie diese aussehen. Wenn man die Lego-Teile nach der Anleitung zusammensetzt, entsteht aus den unterschiedlichen Legoteilen zusammengesetzt ein stimmiges Gesamtbild.
Bei SÜDKURIER App und Webseite gibt es einen eindeutigen Wiedererkennungswert
Wenn man das auf den Styleguide übertägt, kann man die Legoteile in etwa mit den festgelegten Design-Elementen im Styleguide vergleichen. Aus den Design-Elementen und Vorgaben im Styleguide entstehen nämlich Printprodukte, Webseiten und Apps, die ebenfalls ein stimmiges Gesamtbild ergeben. Wenn wir digitale Produkte, wie z. B. eine App ansehen, entsteht dabei ja auch ein Eindruck über das Unternehmen. Unternehmen kommunizieren also über Ihre Produkte mit den Nutzern. Durch den Styleguide wird sichergestellt, dass über alle Produkte eines Unternehmens hinweg eindeutig mit den Kunden kommuniziert wird. Dadurch gibt es einen Wiedererkennungswert, sodass verschiedene Produkte auf den ersten Blick einem Unternehmen zugeordnet werden können.
Neben dem Wiedererkennungswert der Marke ist es wichtig, den Nutzer durch die Gestaltung zu leiten und ihm Orientierung zu bieten. Unsere digitalen Produkte sollen vom Nutzer schnell zu erfassen und zu verstehen sein. Wir schaffen beispielsweise Orientierung, indem wir bestimmte Farben nur für einen bestimmten Zweck einsetzen. Für die direkte Ansprache des Nutzers in redaktionellen Umfeldern verwenden wir z. B. sogenannte „Handshake-Boxen“ mit einer besonderen Champagner-Farbe.
Wie sieht so ein Styleguide denn jetzt genau aus?
Um einen Überblick zu bekommen, wie ein Styleguide genau aussieht und welche Vorgaben es dazu gibt, kannst du dir gerne unseren SÜDKURIER Digital Styleguide hier einmal genauer ansehen.
In diesem ist z. B. genau definiert, an welcher Stelle die SÜDKURIER-Logos eingesetzt werden . Das SÜDKURIER-Logo mit schwarzer Schrift und weißem Hintergrund wird im Kopfbereich der SÜDKURIER-Seite und der App eingesetzt, während das Logo mit dem blauen Hintergrund und weißer Schrift für Online-Werbung (z. B. Online-Banner auf Facebook oder in Newslettern) eingesetzt wird.
Im Vergleich zu einem Styleguide, der nur auf Print ausgerichtet ist, hat der Digital Styleguide vom SÜDKURIER einige Besonderheiten. Digitalen Medien sind sehr vielfältig. Wie bereits erwähnt sollten sich SÜDKURIER-Produkte auf dem Desktop-PC gleich anfühlen und aussehen, wie auf dem Smartphone. Um das zu schaffen, muss es im Styleguide Vorgaben geben, die für alle Endgeräte funktionieren. Bei digitalen Medien gibt es zudem viele Interaktionen, die gestaltet werden müssen. Dazu gehören z. B. Formularfelder und Buttons.
Wie war das jetzt genau beim Styleguide-Quiz?
Beim Styleguide-Quiz wurden den Teilnehmern zu jedem Thema des Styleguides verschiedene Darstellungen gezeigt. Dabei entsprachen eine oder mehrere Darstellungen dem Vorgaben im Styleguide, in andere wurden absichtlich ein paar Fehler eingebaut. Die Teilnehmer durften dann erraten, welche der Darstellungen dem Styleguide entspricht. Um sich das etwas besser vorzustellen, hier eine Beispielfrage aus dem Quiz:
Frage: Wie sehen Formulare im Styleguide aus?
Auflösung der Frage
Richtig ist hierbei die 2. Darstellung. Für den Nutzer hat diese Darstellung folgende Vorteile:
- Reihenfolge: Nutzer sind es gewohnt, Ihren Namen vor der Adresse einzutragen. Ebenso erfolgt die Eingabe der Postleitzahl üblicherweise vor dem Ortsnamen. Bei der Darstellung 1 ist der Nutzer zunächst verwirrt und muss sich zurechtfinden, um die seine Eingabe in das richtige Feld zu machen. Die Reihenfolge bei Darstellung 2 ist vom Nutzer gelernt und er findet sich hierbei schnell zurecht.
- Größe des Feldes: Die Größe des Formularfeldes sollte zur Eingabegröße passen. Es macht keinen Sinn, dass das Feld für die Postleitzahl deutlich größer ist, als das Feld für den Ortsnamen. Auch hierbei kann es bei dem Nutzer bei Darstellung 1 zu einer Verwirrung kommen. Der Nutzer könnte möglicherweise unsicher sein, ob er die Eingabe in das richtige Formularfeld macht, da die Größe des Feldes nicht zur Eingabe passt.
- Vordergrund-Hintergrund: Um dem Nutzer zu verdeutlichen, welche Felder interaktive Formularfelder sind, haben diese eine andere Hintergrundfarbe. Dadurch gibt es eine klare Trennung von Formularfeld (Vordergrund) und dem Inhaltsbereich der Seite (Hintergrund)
- Beschriftung: Die Beschriftung des Formularfeldes (z. B. „E-Mail-Adresse“) sollte am besten direkt über oder im Formularfeld stehen. Bei Darstellung 1 muss das Auge ständig zwischen Beschriftung und Formularfeld hin- und herspringen. Es fällt dem Nutzer dadurch schwer, die Beschriftung dem richtigen Formularfeld zuzuordnen.