b..]Martin Steinacker
nach einer Fotografen-Lehre und Tätigkeit als Industrie-Fotograf studierte er in Darmstadt Kommunikationsdesign.
Im Anschluss daran sammelte er Erfahrungen mit freien Aufträgen für verschiedene kleinere Werbeagenturen.
1997 kam er zu Pixelpark nach Berlin, wo er als Designer, später Art Director und schließlich als Creativ Director Online-Auftritte für verschiedene Kunden realisierte.
Dabei spielte das Zusammenführen
klassischer Corporate-Design-Programme mit den Anforderungen des Internets eine besondere Rolle.
Zum 1. Oktober diesen Jahres wechselte er zu Frog Design, die in Berlin ein neues Büro mit dem Schwerpunkt Branding und Digitale Medien eröffneten.

http://www.frogdesign.de


Martin Steinacker, Berlin
Farbe im Internet


Das Gestalten mit Farbe für Bildschirmmedien ist immer Beschränkungen unterworfen. Jeder Gestalter, der für das sehr technische Medium Internet arbeitet, muss sich mit Restriktionen beschäftigen, bevor er mit der eigentlichen Gestaltung beginnt.
Zu diesen Restriktionen gehört beispielsweise, dass Webseiten auf verschiedenen Browsern unterschiedlich dargestellt werden. Wichtig ist auch, die technische Ausstattung der User, das heißt, mit welchem Bildschirm und mit welcher Grafikkarte beispielsweise gearbeitet wird. Bildschirm und Grafikkarte spielen unter anderem eine wichtige Rolle bei der Wiedergabe von Farbe im Medium Internet. Und genau mit diesem Thema möchte ich mich in meinem Vortrag beschäftigen.

Um uns diesem Thema zu nähern, habe ich drei Schwerpunkte ausgewählt:
1. Das Medium und die Farbe:
An einigen Beispielen will ich zeigen, wie man Farbe im Internet einsetzen kann, aber auch, welche Einschränkungen es gibt.
2. Leitsysteme und Strukturierung durch Farbe:
Dabei werde ich zu den Themen Navigation, Codierung und zur Strukturierung komplexer Inhalte referieren. Auch diese Aspekte werde ich an Beispielen erläutern.
3. Projektbeispiele:
Hierbei geht es um die konkrete Anwendung der eben genannten Punkte. Ich werde Arbeiten zeigen, in denen das Thema Farbe aus unterschiedlichen Aspekten eine wichtige Rolle spielt.



1. Das Medium und die Farbe

Wie schon erwähnt, gibt es für den Screen-Designer einige Restriktionen, mit denen er sich vor der Gestaltung beziehungsweise der visuellen Konzeption beschäftigen muss. Websites können bei jedem User einen unterschiedlichen Farbcharakter haben. Einfluss auf die Darstellung der Farben haben zum einen der Bildschirm - zum Beispiel Triniton oder LCD - die Grafikkarte, die eingestellte Helligkeit und der Kontrast. Wichtig ist auch das Farbprofil, das mittels Betriebssystem, also zum Beispiel Windows, MacOS und so weiter, erstellt wird.

216 Farben
Theoretisch stehen im RGB-Farbraum Millionen von Farben zur Verfügung. Ältere Monitore und einfache Grafikkarten, die bei einem Teil der User noch im Einsatz sind, können aber nur 256 Farben darstellen. Diese 256 Farben werden wiederum auf den beiden Betriebssystemen Windows und MacOS nicht gleich dargestellt. Gleicht man beide Systemfarbpaletten miteinander ab, bleiben 216 Farben übrig, die auf allen Betriebssystemen, Monitoren und Grafikkarten gleich dargestellt werden können. Diese Farben werden in der sogenannten HTML-Farbpalette zusammengefasst. Diese Farbpaletten sind Grundlage in den Programmen, mit denen Screen-Designer arbeiten, beispielsweise Photoshop und Dreamweaver.
Um zu zeigen, was diese Beschränkung für die Praxis bedeutet, will ich Ihnen zweimal das gleiche Bild zeigen: Einmal in einer Auflösung von 32.768 Farben und dann in der Reduktion auf die HTML-Farbpalette.

Auflösung
Zu dieser doch sehr starken Einschränkung, die ein Designer aus dem Print-Bereich so nicht kennt, kommt noch die Auflösung der Bildschirme. Diese beträgt nur 72 dpi, im Gegensatz zu 300 dpi aus dem Printbereich. Das heißt, besondere Feinheiten und Farbnuancen sind im Internet nur bedingt darstellbar. Um so wichtiger ist der bewusste Einsatz von Farbe im Netz.

Print meets Online
Nachdem das Internet allgemein als ernst zu nehmendes Medium anerkannt worden ist und der kommerzielle Aspekt des Netzes für die Unternehmen nicht mehr von der Hand zu weisen ist, ist die Umsetzung des Corporate Designs für Unternehmen im Netz unausweichlich. Aufgrund der eben beschriebenen technischen Restriktionen stellt das den Screen-Designer immer wieder vor größere Probleme. Denn in den seltensten Fällen wurde das Corporate Design auch unter Berücksichtigung des Mediums Internet entwickelt. Die Einschränkungen, die Screen-Designer in Bezug auf Grafikkarten und Betriebssysteme beachten müssen, bedeuten im Umkehrschluss: Eigentlich dürfte die Erscheinung einer Marke auch in allen anderen Bereichen, zum Beispiel im Print, nur aus den vorher genannten 216 Farben erstellt werden.
Was macht also ein Screen-Designer, der ein Coperate Design vor sich hat, das ausschließlich für Printmedien entwickelt wurde? Um dieses Problem zu lösen, gibt es eigentlich nur zwei Wege:

Abweichung
Die Unternehmensfarben werden mit der HTML-Farbpalette abgeglichen. Das kann bedeuten, dass die Erscheinung des Unternehmens in den verschiedenen Medien voneinander abweicht. Aus Corporate Identity-Gesichtspunkten ist dieser Weg oft nicht tragbar.

Zielgruppe
Die zweite Möglichkeit ist stark von der Zielgruppe abhängig. Denn natürlich gibt es auch neuere Monitore und Grafikkarten, die über eine sehr hohe Farbwiedergabe verfügen und somit die Anzahl der möglichen dargestellten Farben weit höher ist als 256. Gehen wir also von einer Zielgruppe für die geplante Website aus, die technisch gut ausgestattet ist, hat der Screen-Designer die Möglichkeit, weitere Farben zu der eigentlichen HTML-Farbpalette hinzu zu nehmen. Das bedeutet aber, dass nur ein eingeschränkter User-Kreis, beispielsweise 25- bis 34-jährige technisch interessierte Führungskräfte - ich nenne sie die "technikaffinen Entscheider" - die Website in ihrem vollständigen farblichen Umfang erfassen können. Das hat natürlich großen Enfluss auf den Inhalt und betrifft viele der User, die an normalen Bürorechnern arbeiten, die oft eher weniger gut ausgestattet sind.
Für die Agentur und das Unternehmen, die gemeinsam die Internet-Präsenz erarbeiten, bedeutet das, dass sie eine genaue Zielgruppenanalyse machen müssen, um das Unternehmen im Netz richtig, und den Usern entsprechend, zu präsentieren.
Und noch eine Anmerkung: Die Farben, die zusätzlich zu der HTML-Farbpalette aufgenommen werden, werden von den Betriebssystemen nicht wirklich identisch interpretiert. Die Abweichung wirkt aber dann eher so, als seien verschiedene Monitore unterschiedlich hell eingestellt.

Einschränkung umgehen
Um es noch einmal zu wiederholen: Eigentlich müsste bei der Auswahl von Farben für ein Corporate Design auch immer die HTML-Farbpalette berücksichtigt werden, wenn ein Unternehmen auch eine Internet-Präsenz anstrebt. Nur dann ist eine einheitliche Identität in allen Medien gewährleistet. Das heißt, das mögliche Farbspektrum für alle Medien reduziert sich von Millionen auf 216 Farben.
Aber, als kleiner Trost: Die technischen Möglichkeiten schreiten so weit voran, dass sich dieses Problem in absehbarer Zeit erledigen wird. Außerdem gibt es Möglichkeiten, dieses Thema konzeptionell zu umgehen.



2. Leitsysteme und Strukturierung durch Farbe

Ich habe mir mit der Navigation einen Aspekt ausgewählt, bei dem Farbe im Internet eine ganz besondere Rolle spielt, die völlig von klassischen Medien abweicht. Aufgabe einer Navigation beziehungsweise eines Leitsystemes für Online-Auftritte ist es, die Informationen zu strukturieren und den Zugang zu Informationen zu erleichtern. Das Internet bietet dazu eine ganze Menge mehr Möglichkeiten als klassische Medien. Große Informationsmengen, wie sie auf Webseiten zu finden sind, können zusätzlich zur Farbe durch Bewegung und Interaktion strukturiert werden. Es hat sich gezeigt, dass Navigation nicht ausschließlich über Farbe begreifbar ist, sondern auch durch zusätzliche - zum Beispiel typografische Elemente - klarer wird. Deshalb kann Farbe in der Navigation nur unterstützend eingesetzt werden. Sie erleichtert dem User, sich in einzelnen Bereichen einer Webseite zurecht zu finden. Beispiel für eine lineare, das heißt nicht hierarchisch organisierte Navigation, in der Farbe als strukturierendes Element eingesetzt wird, ist die Website "Fit-for-IT.de".
Solch eine Farbcodierung lässt sich natürlich auch auf eine kaskadische, das heißt hierarchisch organisierte Informationsstruktur übertragen. Dabei kann der Screen-Designer beispielsweise hierarchisch unterschiedliche Navigationspunkte in unterschiedlichen Sättigungen darstellen.

Emotion
Farbe kann in diesem Zusammenhang eine sehr emotionale und atmosphärische Komponente haben. Die Farbgebung für einzelne Navigationsbereiche wird spannender und überraschender, wenn sich hinter dem Navigationspunkt ein komplettes Farbklima befindet, das den User emotional an den Inhalt bindet. Die Website "popinger.de" ist ein sehr gutes Bespiel dafür.
Der Eindruck der Fotografien wird hierbei atmosphärisch durch die Farbe verstärkt, ohne dass sie in Konkurrenz zur eigentlichen Abbildung steht.



3. Projektbeispiele

a) Siemens-knows.com
"Es ist morgens 7:00 Uhr und du bist auf dem Weg ins Bad..."
So beginnt die neue Imagekampagne der Siemens AG im Netz. Im Laufe eines Jahres entsteht auf der Site ein Tagesablauf, dessen Etappen die zukunftsweisenden Lösungen von Siemens präsentieren.
Geführt von der chinesischen Netzbotin Hsiang Yü erhalten die User Gelegenheit, ihre Zukunftsvisionen mit anderen zu teilen und so ein aktiver Bestandteil des weltweiten Wissensnetzes der Siemens-Entwickler zu werden. Die besten Visionen werden von den Besuchern der Site prämiert und liefern die Story für den "Tag in der Zukunft", der den Höhepunkt der Website bilden wird.

216 Farben +
Bei diesem Projekt habe ich eine erweiterte HTML-Palette verwendet. Zielgruppe ist also die der eingangs erwähnten "technikaffinen Entscheider".
Die Navigation spielt bei diesem Projekt keine Hauptrolle. Denn die Kampagne ist in verschiedene Phasen untergliedert. Im Abstand von wenigen Wochen wird eine neue Tageszeit online gestellt. Mit ihr ändert sich auch das aktuelle Farbklima, das heißt der Gesamteindruck der Seite ändert sich. Morgens um sieben Uhr befindet sich die Szene in einem dunklen Blau, es ist noch kalt und ungemütlich. Im Tagesverlauf (nach Ablauf einiger Wochen) ändert sich das Farbklima hin zu warmen Farben. Die Navigation erhält dadurch eine eher archivarische Funktion. Jede Szene besteht nur aus zwei bis drei Farbtönen in unterschiedlichen Sättigungen, die die Illustrationen unterstützen, aber nicht stören.
Die Bereiche in der Website, in denen der User selbst eigene Visionen entwickeln kann, sind in einem aktiven Rot gehalten. Im Vergleich zu den anderen Bereichen bedeutet diese Farbe damit eine Aufforderung.

b) Portal: Konsumgütermesse der Messe Frankfurt
Es handelt sich um ein Portal für die Messe Frankfurt, für den Bereich Konsumgütermessen (zum Beispiel Ambiente, Paperworld). Die einzelnen Messen, die jeweils einen eigenen Internetauftritt bekommen haben, sind eigenständige Applikationen, die in ihrer Erscheinung alle zueinander passen. Eine einheitliche Bildsprache verbindet sie.
Bei der Entwicklung des visuellen Konzeptes sollte das Thema "Konsumgüter" mit ganz einfachen grafischen Mitteln umgesetzt werden. Wir haben uns für eine schlichte Form, das Oval, entschieden. In Verbindung mit Farben wird das Thema "Konsumgüter" unterstützt. Das heißt, die verwendeten Farben stammen aus unterschiedlichen Farbfamilien, signalisieren aber, dass es sich bei allen Messen um hochwertige Produkte handelt.
Die Farben stammen alle aus der HTML-Farbpalette, da die Messen einer breiten Öffentlichkeit zugänglich gemacht wurden.


Fazit:

Dynamik
Farbe spielt in den Bildschirmmedien eine besondere, aber etwas andere Rolle als im Print-Bereich. Farbe hat im Internet eine stärker leitende und Content-bezogene Funktion. Farbe ist ein strukturierendes und weniger plakatives Element.

Strukturierung
Farbe ist eine Möglichkeit, Inhalte zu strukturieren und dem User Informationen leicht zugänglich zu machen. Daneben treten andere Möglichkeiten, wie zum Beispiel Bewegung und Interaktion.

Online meets Print
Das Corpporate Design einer Marke sollte immer mit Designern aus beiden Bereichen (Branding/Print und Online) erarbeitet werden.



powered by editus 4.0 | letzte Änderungen: 2.3.2010 16:44