11.2    Bilder im Web 

Das Internet unterscheidet sich von anderen klassischen Medien. Es ist ein sogenanntes Pull-Medium, das heißt, im Vergleich zum Fernsehen (Push-Medium) sucht der Anwender (mehr oder weniger) gezielt Informationen bzw. muss mit einer bewussten Entscheidung eine von ihm gewählte Seite aufrufen. Der Informationsfluss wird vom Anwender gesteuert. Ein passives Wahrnehmen und Erleben ist im Internet so gut wie gar nicht gegeben. Das Webdesign muss dem Benutzer also die Möglichkeit geben, sich schnell einen Überblick zu verschaffen, es muss seinen Blickverlauf steuern, und es soll ihm ein gutes Gefühl vermitteln. Bilder sind dazu prädestiniert, denn sie können verschiedene Aufgaben im Webdesign erfüllen:

 

11.2.1    Bilder als Layoutelemente 

Bilder können als Layoutelemente eingesetzt werden, um dem Screendesign sein Look & Feel, seine Anmutung, zu geben. Diese Bildelemente schaffen in erster Linie Stimmungen. Klassische Beispiele für solche reinen Layoutbilder sind Webseitenhintergründe oder -muster.

Abbildung 11.8    Ein großformatiges Hintergrundbild mit Farbverlauf und Kurven setzt polymail.io ein.

Würden diese Grafiken fehlen, wären die Webseiten immer noch genauso gut bedienbar. Inhaltlich würde nichts fehlen. Für die visuelle Stimmung sind sie aber unentbehrlich.

Header-Bilder | Etwas anders sieht es beim sogenannten Header aus, also dem Kopfbereich des Screendesigns. Dieser ist der wichtigste Bereich einer Webseite, da der User optisch und inhaltlich abgeholt bzw. überzeugt werden muss, dass er auf dieser Seite richtig ist. Header-Bilder sind also nicht nur reine Layoutelemente, sondern meistens auch sehr bedeutende Inhaltselemente. Folgende Beispiele zeigen schön die inhaltliche und optische Bedeutung von Header-Bildern:

Abbildung 11.9    Header-Bild und Headline ergänzen sich inhaltlich und optisch wunderbar bei art4web.sk/en.

 

11.2.2    Bilder als Orientierungselemente 

Der Anwender scannt erst eine Webseite, bevor er sich Inhalten detaillierter zuwendet. Da Bilder unsere Aufmerksamkeit auf sich ziehen, sind sie ein gutes Mittel, um diesen »Scanablauf« zu unterstützen oder zu beeinflussen. Sie können hier als Informationsanker dienen und die Übersichtlichkeit der Webseite erhöhen.

Gerade auf Newsseiten und Blogs werden Bilder gerne als Informationsanker eingesetzt. Sie markieren hier den Beginn einer neuen Informationseinheit, wie beispielsweise einen neuen Blogeintrag, und erleichtern dem Anwender so das schnelle Überfliegen der Seite.

Und auch den Lockerheitsfaktor sollte man nicht unterschätzen. Reine Textseiten – vor allem sehr lange – schrecken den Leser eher ab. Bilder lockern auf und nehmen den Schrecken vor der Bleiwüste. Abbildung 11.10 zeigt dies anschaulich: Die drei verwendeten Bilder lockern das Layout der Website auf. Allein stehend würden die Bilder keinerlei Assoziation mit den entsprechenden Themen zulassen. Im Zusammenspiel mit dem Text sind sie allerdings als wichtige Orientierungselemente hilfreich.

Abbildung 11.10    Auf hurra.com lockern drei Bilder das Layout auf und dienen als Orientierungselemente.

Weitere Orientierungselemente sind beispielsweise ausgestaltete Trennstriche oder Listenpunkte, die dadurch oft markanter sind, als es durch reine CSS-Formatierung möglich wäre.

Abbildung 11.11    Bilder als Orientierungselement auf Newsseiten wie spiegel.de

Abbildung 11.12    thesocietyinc.com.au trennt einzelne Bereiche durch markant ausgestaltete Trennstriche.

 

11.2.3    Bilder als Inhaltselemente 

Bilder sind oft genug aber auch als Informationsträger unersetzlich. Mal ergänzen sie inhaltlich den Artikel oder zeigen, was mit vielen Wörtern nicht ausreichend beschrieben werden könnte. Denn was würde beispielsweise besser funktionieren, ein Produkt vorzustellen, als das selbige fotografisch in Szene zu setzen? relogik.com macht dies gekonnt.

Abbildung 11.13    Das Produkt fotografisch in Szene gesetzt. Das Bild auf relogik.com ist eindeutig ein Inhaltselement.

 

11.2.4    Bilder als emotionale Elemente 

Bilder sind vor allem eins: emotional! Also ideal dafür geeignet, Stimmungen zu schaffen, Gefühle hervorzurufen, eine Webseite interessant, markant, unverwechselbar zu machen und so für eine hohe Wiedererkennbarkeit zu sorgen. Folgendes Beispiel demonstriert die hohe Emotionalität, die Bilder auf Webseiten erzeugen können, ganz gut:

Abbildung 11.14    Voller Emotionen: lordz.ch.