Styleguide

Aus den Skizzen ergeben sich erste gestalterische Ideen, Flowcharts und eine Hierarchisierung der Inhaltsstruktur (siehe ›Flowchart‹ im Kapitel ›Orientierung gestalten, planen und strukturieren‹). Daraus lassen sich erste Funktionslayouts, die Festlegung funktionaler Aspekte im Sinne ihrer Positionierung und Funktionalität herleiten und eventuelle Drehbücher erstellen (siehe ›Funktionslayout‹ und ›Drehbuch‹ im Kapitel ›Orientierung gestalten, planen und strukturieren‹). Innerhalb eines Gestaltungslayouts und seines Rasters werden all diese Ideen zu einer den Anforderungen entsprechenden Gestaltung zusammengefasst. Die Details dieser Gestaltung werden dann in einem Styleguide festgehalten. Dies geschieht u.a. in Form einer präzisen Vermaßungen aller Bestandteile und des gesamten Layouts und all seiner Varianten unterschiedlicher Layout-Schemata. Des Weiteren werden im Styleguide alle verwendeten Farben, Schrifttypen und -schnitte und sonstige Formatierungsangaben dokumentiert. Zudem erfolgt dort die Beschreibung aller Interaktionsmuster. Daher sind das Flowchart, die Funktions- und Gestaltungslayouts, das erweiterte Funktionslayout, das Storyboard und das eventuelle Drehbuch Bestandteile des Styleguides. Im Styleguide werden aber auch alle Eigenschaften formuliert, die die Corporate Identity eines Produkts ausmachen. Ein Styleguide kann in seiner Endfassung mehrere hundert Seiten stark sein.

Dies alles erscheint sehr aufwändig. Aber je präziser der Styleguide formuliert ist, umso weniger Fragen bleiben offen und umso unwahrscheinlicher wird es, dass er unterschiedlich interpretiert wird. Grundsätzlich gilt, dass es für die Erstellung eines Styleguides keine allgemeingültigen Antworten gibt und dass für jedes Produkt und jeden Medientyp die eigene unverwechselbare Lösung gefunden werden muss. Dies gilt auch für die Frage, wie umfangreich ein Styleguide formuliert sein muss. Mit einem Styleguide werden sämtliche Einzelheiten der Produktion detailliert beschrieben und dokumentiert. Je genauer ein Styleguide erstellt wird, umso komplikationsfreier wird die Umsetzung eines Projekts. Er stellt für die jeweilige Produktion die auf sie zugeschnittene Design- und Umsetzungsrichtlinie dar. Dies ist besonders dann wichtig, wenn bereits bestimmte Vorgaben, wie z. B. die Einhaltung von Barrierefreiheit, definiert wurden, die nun für alle Beteiligten kommunizierbar vorbereitet werden müssen (siehe ›Barrierefreiheit – eine erweiterte Form der Usability‹ im Kapitel ›Usability‹). Der Styleguide ist die Produktionsvorgabe und dient der Kommunikation innerhalb des Produktionsteams und gegenüber dem Kunden. Außerdem entlastet er den Projektleiter, der mit einem Styleguide als Planungsvorgabe das Team besser einteilen und ansteuern kann und auch alle einzelnen Produktionsabschnitte besser unter Kontrolle hat. Wodurch nicht zuletzt alle Arbeitsschritte sicherer und schneller durchgeführt werden können. Ein Styleguide stellt Wissenskapital dar. Mit ihm wird nicht nur das Projekt selbst, sondern auch die bei einem Projekt gesammelten Erfahrungen dokumentiert.

Vom Erstellungsprozess abgesehen wird der Styleguide insbesondere dann wichtig, wenn nach längerer Zeit – manchmal nach Monaten – Veränderungen bzw. Ergänzungen an einem Projekt vorgenommen werden sollen. Der Styleguide liefert den Bauplan und die Leitlinien, nach denen die Arbeit fortgesetzt werden kann. Ohne Styleguide wäre diese Fortsetzung um ein Vielfaches aufwändiger oder sogar beinahe unmöglich. Es kann z. B. vorkommen, dass nicht mehr alle damals beteiligten Teammitglieder zur Verfügung stehen und das Wissen über die jeweilige Produktion somit abgewandert ist. Aus Sicht der Gestaltung und auch aus Sicht der Usability liegt zudem ein wesentliches Ziel des Styleguides in der Wahrung eines einheitlichen Erscheinungsbildes und der Corporate Identity. Der Styleguide soll sicherstellen, dass das Produkt noch über Jahre hinaus auch nach eventuellen Aktualisierungen und Ergänzungen unverwechselbar, einheitlich und positiv erscheint. Er sollte daher gerade bei Projekten mit hoher, langjähriger Gebrauchsdauererwartung regelmäßig hinsichtlich seiner Wirksamkeit evaluiert und bei Bedarf fortgeschrieben werden. Für diese Evaluierung müssen entsprechende Checklisten und Testverfahren vorformuliert sein, die selbstverständlich ebenso in regelmäßigen Abständen auf ihre Aktualität und Wirksamkeit überprüft werden müssen.

Um die Verfügbarkeit des Styleguides zu gewährleisten, aber auch um die Aktualisierbarkeit zu vereinfachen, ist es sinnvoll, den Styleguide im Internet bereitzustellen. Der Zugang kann durch Passwort geschützt sein. So können entsprechend autorisierte Personen den Styleguide einsehen und eventuell aktualisieren. Der Umgang mit einem Online-Styleguide ist zudem praktischer, da Querverweise nicht durch lästiges Blättern in einer eventuell mehrere hundert Seiten dicken Printausgabe nachgeschlagen werden müssen, sondern mit einen ›Klick‹ anwählbar sind. Außerdem entfallen Kosten für den Druck und die Verteilung und man delegiert die Verantwortung, stets die aktuellste Ausgabe des Styleguides vorliegen zu haben, an die jeweiligen Anwender weiter. All dieser Aufwand ist zwar möglicherweise mit Kosten verbunden, die allerdings an anderer Stelle eingespart werden bzw. erst gar nicht anfallen, da mit einem Styleguide kontrollierbar und planerisch entwickelt wird. Komplikationen können verringert oder gar ganz vermieden werden und die gesamte Entwicklung ist nachhaltiger.

Ein Styleguides dient allerdings auch der Vorevaluierung. Dadurch, dass man sich zur Erstellung eines Styleguides sehr genau mit jedem Detail auseinandersetzt, können bereits durch die Erstellung, wie bei den vorangegangen Entwicklungsstufen auch (Flowchart, Funktionslayout, Gestaltungslayout, Raster), Fehler erkannt und behoben werden. Aber selbst eine verantwortungsvolle Durchführung all dieser Entwicklungsetappen kann Usability-Tests und Evaluierungen nicht ersetzen. Diese Überprüfungsstrategien sollten stets während der Produktionsphase erfolgen, um sich späteren Ärger und aufwändige Nachbereitungen zu ersparen (siehe Kapitel ›Usability‹). Ein ausführlicher Styleguide dient sowohl den Gestaltern als auch den Programmierern bzw. Ingenieuren bei der Gestaltung und Umsetzung von Produkten. Dabei spielt es keine Rolle, ob es sich um eine Informationssoftware (Internetseite, CD-ROM, DVD etc.), eine Funktionssoftware (Betriebssystem, Steuerungssoftware, Texteditor-Software, Grafikeditor-Software etc.) oder um ein Hardware-Produkt (Fernbedienung, Mobiltelefon, Fahrkartenautomat etc.) handelt. Es folgen nun einige exemplarische Styleguides unterschiedlicher Produktionen.

Styleguide für Funktionssoftware

Styleguides von Funktionssoftware sind zu umfangreich, als dass sie hier einzeln besprochen werden könnten. Daher wurden hier einige Styleguides von Betriebssystemen aufgelistet, die beispielhaft sind und deren Guidelines sich von den genannten Internetseiten herunterladen lassen.

Windows

Windows

Zum Betriebssystem Microsoft Windows Vista findet man auf der Microsoft-Internetseite einige Abbildungen: www.microsoft.com/windowsvista
Einen Styleguide bzw. User Interface Empfehlungen von Microsoft sind zu finden unter: msdn.microsoft.com/library
Weitere Informationen zu Microsoft Vista ist zu finden unter: www.winsupersite.com
Informationen zum neuen User Interface für Office 12 sind zu finden unter: www.microsoft.com/presspass/features
Jensen Harris ist User Interface Designer bei Microsoft und beschreibt in seinem Weblog sehr informativ und ausführlich das Interface von Office 12 und wie es mit Hilfe von Usability-Tests entwickelt wurde: blogs.msdn.com
Die User Experience Interaction Guidelines des Betriebssystems Microsoft Windows 7 findet man unter: www.microsoft.com/downloads/en/details

GNOME

GNOME

GNOME ist eine kostenfrei verfügbare Desktop-Umgebung für Unix-Systeme, wie z. B. Linux, Berkeley Software Distribution (BSD) oder Solaris. Der ›GNOME Human Interface Guidelines 2.0‹ wurde geschrieben für Interface Designer und Software Entwickler. developer.gnome.org/projects

KDE

KDE

KDE ist eine kostenfrei verfügbare grafische Arbeitsumgebung für Unix-Systeme. Die ›KDE User Interface Guidelines‹ sind zu finden unter: developer.kde.org/documentation/standards/kde/style/basics
Deutschsprachige KDE-Internetseiten sind: de.kde.org und www.kde-forum.de

Java

Java

Der Java Look and Feel Design Guidelines gibt wesentliche Hinweise, was man bei der Entwicklung von Software und der Gestaltung ihrer Interfaces grundsätzlich beachten sollte. Dieser Guideline bezieht sich zwar sehr konkret auf Applikationen und Applets, die mit Java programmiert wurden, eignet sich allerdings als Beispiel auch zur Übertragung auf die allgemeine Entwicklung von Funktionssoftware. java.sun.com/products/jlf/ed1/dg/higtitle

Mac

Mac

Die sehr ausführlichen Apple Human Interface Guidelines können im Internet eingesehen bzw. als PDF heruntergeladen werden: developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines

palm

palm

Palm OS ist ein sehr weit verbreitetes Betriebssystem für mobile Geräte. Seine User Interface Guidelines findet man im Internet unter: www.palos.com/dev/support/docs/ui

User Interface

User Interface

Eine sehr umfangreiche Auflistung von Betriebssystem-Interfaces ist zu finden auf der Internetseite Graphical User Interface Gallery. Die Dokumentation beginnt mit dem Xerox 8010 Star von 1981 und reicht bis zum Mac OS X 10.5 Leopard im Jahr 2006: www.guidebookgallery.org/timelines
Was man bei ›guidebookgallery.org‹ nicht findet, bietet eventuell die Internetseite von Nathan Lineback: www.toastytech.com/guis

Styleguide für Informationssoftware

Je nach Komplexität der Informationssoftware kann der Styleguide sehr umfangreich werden. Anhand des studentischen Crossmedia-Prototypen ›Passepartout‹, bestehend aus Druckerzeugnis, PDA-Applikation und Internetseite, wird der betriebene Aufwand deutlich.

›Passepartout‹ – ein crossmedialer Reiseführer – Hier wird in Ausschnitten der Styleguide zum Projekt ›Passepartout‹ vorgestellt. ›Passpartout‹ ist eine Arbeit des Studenten Andreas Nickel, die im einsemestrigen Seminar ›Crossmedia Publishing‹ im Fach ›Gestaltung interaktiver Medien‹ an der FH Bielefeld entstanden ist. ›Passepartout‹ ist Reiseplaner und Reiseführer in einem. Vorbereitet wird die Reise mit einem gedruckten Reiseführer, der alle klassischen Informationen bereithält. Aktualisiert werden die Informationen mittels einer Internetseite und genutzt werden die ausgewählten Informationen über ein PDA. ›Passepartout‹ ist ein Reiseplaner und Reiseführer und soll Abenteuerlust wecken, aber auch die Assoziationen, die mit Reisen in Verbindung gebracht werden, unterstützen und begleiten. Für die Wahl geeigneter Farben bietet es sich stets an, die Farben zu ermitteln, die mit dem Produkt oder seiner Kernabsicht am ehesten in Verbindung gebracht werden. Bei Reisen wird oft an Wärme, Sonne, blauen Himmel und bei Abenteuern an Naturverbundenheit, vergilbte Karten oder Entdeckertum gedacht. Bereits daraus ergeben sich die hier abgebildeten Farben. Andreas Nickel erstellte für seine Seminarbeit allerdings zudem eine Collage aus mehreren typischen Bildern touristischer Werbeprospekte und Reiseberichte, um ein Moodboard zu erhalten (siehe unter ›Moodboard‹ im Kapitel ›Zielgruppenanalyse und -ansprache‹).

Passepartout

›Passepartout‹.

Da ein nicht unwesentlicher Teil der Gebrauchsanwendung bei diesem Produkt über selbstleuchtende Medien (Computermonitor, Display eines PDA) vollzogen wird und die Texte am PDA zudem eine relativ geringe Schriftgröße haben, wurde es notwendig, eine serifenlose Schriftart zu verwenden (siehe auch im Kapitel ›Typografie‹). Dabei bot sich die serifenlose Syntax an, da sie auch in kleinen Schriftgrößen gut lesbar bleibt und zudem ebenso bei gedruckten Medien gut verwendet werden kann. Für die selbstleuchtenden Medien wäre zwar auch eine Pixelschrift sehr gut geeignet gewesen. Sie hätte allerdings bei den gedruckten Medien dazu geführt, dass der Lesefluss bei längeren Texten beeinträchtigt worden wäre. Ein weiterer Vorteil der Syntax ist der Ausbau dieser Type. Für ein einheitliches Bild aller Medien ist ein großer Vorrat an Schnitten notwendig, um eine typografisch gelungene Lösung zu garantieren.

Das aus den Absichten des Autors und dem Moodboard resultierende Farbsystem basiert auf nur wenigen Farben, die dazu beitragen sollen, den Anwender in eine bestimmte Stimmung und Atmosphäre des abenteuerlichen Reisens zu versetzen.

Das aus den Absichten des Autors und dem Moodboard
resultierende Farbsystem basiert auf nur wenigen Farben,
die dazu beitragen sollen, den Anwender in eine bestimmte
Stimmung und Atmosphäre des abenteuerlichen Reisens
zu versetzen.

Syntax

Syntax

Syntax

Begleitbuch:

Schriftschnitte: Roman, Kursiv
Schriftgrade: 9 pt, 8 pt
Zeilenabstand: 12 pt
Sperrung: +20 Einheiten

Website:

Schriftschnitte: Roman, Kursiv, Ultra Black
Schriftgrade: 15 pt
Zeilenabstand: 22 pt
Sperrung: +100 Einheiten

PDA:

Schriftschnitte: Roman, Black
Schriftgrade: 10 pt
Zeilenabstand: 14 pt
Sperrung: +100 Einheiten

Die Spiegelsatzkonstruktion des Begleitbuches von ›Passepartout‹ bietet zwei Textebenen, die primäre Textebene und die Marginalien. Die primäre Textebene beinhaltet den Haupttext mit den Reiseberichten. Die Marginalien unterstützen die primäre Textebene durch Erläuterungen und Übersetzungen der Begriffe in der jeweiligen Sprache des Reiselandes (hier: Chinesisch). Die zweite Funktion der Marginalien ist die Orientierung, die sich durch die Gliederung des Textes in Form von Überschriften, Unterüberschriften und Namen ergibt. Die Berichte sind im Blocksatz gesetzt, während die Marginalien, abhängig von ihrer Position, rechts- bzw. linksbündig sind. Zur weiteren Orientierung befindet sich ein Kolumnentitel mit integrierter Paginierung auf der Doppelseite. Der Italic-Schnitt der Syntax dient der Hervorhebung von Begriffen, die in den Marginalien im gleichen Schnitt erläutert werden, ebenso die chinesischen Übersetzungen. Außerdem werden französische Anführungsstriche verwendet, da sich diese besser in den Text integrieren lassen.

Format: 130 × 210 mm.

Format: 130 × 210 mm.

Die Website von ›Passepartout‹ teilt sich in drei Bereiche, den Navigationsbereich, den der untergeordneten Navigation und dem Bühnenbereich, der von dem Navigationsbereich umschlossen wird.

Format: 740 × 416 Pixel.

Format: 740 × 416 Pixel.

Das Raster und die Vermaßungen für das Layout der PDA-Applikationen sind, aufgrund der kleinen Aktionsfläche, je nach Funktion variabel gestaltet. Alle Variationen beinhalten jedoch die auf der rechten Seite befindliche Navigationsleiste.

Format: 320 × 480 Pixel. Je nach Funktion variiert die Größe der Aktionsfläche von 288 × 230 bis 316 × 476 Pixel.

Format: 320 × 480 Pixel. Je nach Funktion variiert die Größe
der Aktionsfläche von 288 × 230 bis 316 × 476 Pixel.

Gebote und Kriterien für einen Styleguide

Der Styleguide soll zwar ein Regelwerk sein, nach dem sich im Grunde genommen jeder der Beteiligten richten sollte. Er kann aber nie der Weisheit letzter Schluss sein. Auch nach der gewissenhaftesten Erstellung sind Fehler oder Ungenauigkeiten möglich. Zudem ist nichts selbstverständlicher als die Veränderung, erst recht in einer Welt der sich dynamisch entwickelnden Technologien. Ihr kann man nur mit der Anpassung des Styleguides an die sich stets verändernden Umstände begegnen. Deshalb sollte man nie stur auf die einmal festgelegten Bedingungen des Styleguides bestehen. Der beste Weg, unkontrollierten Veränderungen des Styleguides zu begegnen, ist die regelmäßige Aktualisierung und die Bereitschaft der Agentur, jederzeit für Veränderungen offen zu sein und für Modifikationen zur Verfügung zu stehen. Hier ist es selbstverständlich schwierig genau zu definieren, ab wann eine Modifikation sinnvoll und notwendig ist. Letztendlich ist es auch im Interesse der Gestalter, dass das Produkt immer optimiert wird und nicht zuletzt deswegen möglichst lange am Markt bestehen kann. Die in der Grafik genannten Kriterien sind nur Anhaltspunkte und müssen nicht alle und schon gar nicht um jeden Preis befolgt werden.

Grundlagen zur Erstellung eines Styleguides

Grundlagen zur Erstellung eines Styleguides