Rheinwerk Computing < openbook >

 
Inhaltsverzeichnis
Vorwort
1 Prinzipien des modernen Webdesigns
2 Projektmanagement
3 Konzeption und Strategie
4 Responsive Webdesign
5 Informationsarchitektur
6 Gestaltungsgrundlagen
7 Screendesign
8 Layout und Raster
9 Farbe im Webdesign
10 Typografie
11 Bilder und Grafiken
12 Navigations- und Interaktionsdesign
13 Webdesign-Stile und -Trends
14 Animationen
15 Website-Typen
16 Tipps, Tricks und Tools
Stichwortverzeichnis

Download:
- Beispieldateien, ca. 3.64 MB

Buch bestellen
Ihre Meinung?

Spacer
<< zurück
Webdesign von Martin Hahn
Das Handbuch zur Webgestaltung
Buch: Webdesign

Webdesign
Pfeil 11 Bilder und Grafiken
Pfeil 11.1 Einführung: Die Macht der Bilder
Pfeil 11.1.1 Eigenschaften von Bildern
Pfeil 11.1.2 Konsequenzen für die Auswahl von Bildern
Pfeil 11.1.3 Bilder im Einsatz
Pfeil 11.2 Bilder im Web
Pfeil 11.2.1 Bilder als Layoutelemente
Pfeil 11.2.2 Bilder als Orientierungselemente
Pfeil 11.2.3 Bilder als Inhaltselemente
Pfeil 11.2.4 Bilder als emotionale Elemente
Pfeil 11.3 Bilderquellen
Pfeil 11.3.1 Urheberrecht
Pfeil 11.3.2 Creative-Commons-Bilder
Pfeil 11.3.3 Bilder vom Kunden
Pfeil 11.3.4 Fotos und Grafiken selbst erstellen
Pfeil 11.3.5 Fotoagenturen
Pfeil 11.3.6 Fotografen beauftragen
Pfeil 11.4 Motive & Bildstimmung 
Pfeil 11.4.1 Menschen, Mitarbeiter und das Team
Pfeil 11.4.2 Porträts
Pfeil 11.4.3 Profilbilder
Pfeil 11.4.4 Räumlichkeiten
Pfeil 11.4.5 Inszenierung von Produktfotos
Pfeil 11.4.6 Austauschbare Bilderwelten
Pfeil 11.5 Bildgestaltung
Pfeil 11.5.1 Der Bildausschnitt
Pfeil 11.5.2 »Unrechteckige« Formate und andere geometrische Formen
Pfeil 11.5.3 »Out of the Box«
Pfeil 11.5.4 Graustufen/Duplexfarben
Pfeil 11.5.5 Montagen/Collagen
Pfeil 11.5.6 Großformatige Bilder/Hintergrundbilder
Pfeil 11.6 Icons
Pfeil 11.6.1 Icons bringen Inhalte auf den Punkt
Pfeil 11.6.2 Aufmerksamkeit steuern und Struktur geben
Pfeil 11.7 Icon-Fonts
Pfeil 11.7.1 Vor- und Nachteile von Icon-Fonts
Pfeil 11.8 Illustrationen
Pfeil 11.8.1 Thematische Illustrationen
Pfeil 11.8.2 Dekorative Illustrationen
Pfeil 11.8.3 Illustrativer Text
Pfeil 11.8.4 Informative Illustrationen (Infografiken)
Pfeil 11.9 Bildbearbeitung
Pfeil 11.9.1 Die nicht destruktive Bildbearbeitung
Pfeil 11.10 Bildformate
Pfeil 11.10.1 Die Bildgröße
Pfeil 11.10.2 Die Bildkomprimierung
Pfeil 11.10.3 Die Auswahl des richtigen Bildformats
Pfeil 11.10.4 Für Web speichern
Pfeil 11.10.5 Bildgrößen optimieren
Pfeil 11.11 Bilder in HTML und CSS
Pfeil 11.11.1 Bilder in HTML
Pfeil 11.11.2 Bilder in CSS
Pfeil 11.11.3 Responsive Bilder
Pfeil 11.11.4 Retina-Displays
Pfeil 11.12 Weitere Bilder-Tools
Pfeil 11.13 Fazit
 
Zum Seitenanfang

11    Bilder und Grafiken Zur vorigen ÜberschriftZur nächsten Überschrift

Bilder sind seit jeher ein essenzielles Kommunikationsmittel der Menschen – von den Höhlenmalereien vor zigtausend Jahren bis zu den Billionen Fotos, die bei flickr, Instagram oder Facebook in den letzten Jahren hochgeladen wurden. Und auch im Webdesign lässt es sich mit Bildern effektiv kommunizieren.

 
Zum Seitenanfang

11.1    Einführung: Die Macht der Bilder Zur vorigen ÜberschriftZur nächsten Überschrift

Zwischen einem Bild und der Realität besteht eine magische Verwandtschaft. Bilder können die Wirklichkeit sehr genau und objektiv wiedergeben, sprichwörtlich ein Abbild der Wirklichkeit schaffen. Der Mensch denkt, träumt, redet und erinnert sich in Bildern. Bilder schaffen eine »zweite, fiktive Wirklichkeit«. Durch sie erschließen wir uns die Welt. Ohne Bilder haben wir keine Vorstellung von Objekten, Erlebnissen oder Orten, die wir nicht real erfahren haben.

»Bilder sind schnelle Schüsse ins Gehirn!«
Professor Dr. Werner Kroeber-Riel

Die Bilderwelt, in der wir leben, spiegelt sich auch in Online-Plattformen wie Pinterest.com wider, einer Sammelstelle für unzählige Bildmotive aller Arten. Bilder sind auch in der Webgestaltung ein unverzichtbares Mittel: Packende Teaser-Bilder, erklärende Produktfotos, Infografiken, verzierende Hintergründe sind nicht umsonst tragender gestalterischer Bestandteil vieler Webdesigns. Professionalität im Webdesign drückt sich daher auch in der Motivwahl und Bildbearbeitung aus. Klischeehafte Bilder von Fotoagenturen oder unprofessionelle Self-made-Fotografien können ein ganzes Design abwerten.

Um Bilder effektiv im Webdesign einzusetzen, gibt es jedoch einige theoretische, gestalterische und technische Aspekte zu beachten, die im Folgenden vorgestellt werden.

Lust auf ein Bad? eldoradostone.com arbeitet mit großformatigen Bildern.

Abbildung 11.1    Lust auf ein Bad? eldoradostone.com arbeitet mit großformatigen Bildern.

 
Zum Seitenanfang

11.1.1    Eigenschaften von Bildern Zur vorigen ÜberschriftZur nächsten Überschrift

Als Folge unserer Wahrnehmung besitzen Bilder folgende Eigenschaften für uns:

  • Hohe Kommunikationsgeschwindigkeit: Bilder sind das Erste, was wir – beispielsweise bei einer Werbeanzeige – wahrnehmen. In Bruchteilen von Sekunden haben wir Bildinhalte erfasst und sie für uns eingeordnet. Dagegen müssen Texte erst gelesen und verstanden werden.

  • Hohe Anschaulichkeit & Verständlichkeit: »Ein Bild sagt mehr als tausend Worte.« Bilder wirken als Ganzes und werden im Gehirn parallel verarbeitet. Sie gelten als eine Form analoger Kommunikation. Dagegen läuft die Verarbeitung sprachlicher Informationen sequenziell ab. Hier wird die Botschaft linear vermittelt, und erst mit ihrem Abschluss fügen sich die Elemente zu einem Ganzen. Daher wirken Bilder im Vergleich zu Text sehr anschaulich und verständlich.

  • Hohe Erinnerungsrate: An einmal gesehene Bilder erinnern wir uns oft noch Jahre später. Aufgrund ihrer emotionalen Wirkung bleiben sie im Vergleich zu Texten länger und besser im Gedächtnis haften. Daher besitzt die Bildkommunikation gerade auch in der Konsumgüterwerbung eine hohe Dominanz und Wirksamkeit. Zu beobachten ist dies in der Fernseh- und Anzeigenwerbung. Dadurch ist auch zu erklären, warum die Konsumenten Produkte kaufen, deren Werbung sie unter Einschaltung ihres Verstandes nicht ansprechend finden. Durch Bilder am Verkaufsort werden die unbewusst abgespeicherten Bilder wieder – ebenso unbewusst – erinnert und aktiviert.

  • Subtile Übermittlung von Einstellungen & Gefühlen: Bilder können automatisch und unkontrollierbar emotionale Haltungen hervorrufen. Bilder eignen sich somit besser als Texte zur Vermittlung emotionaler Erlebnisse. Die Anschaulichkeit eines Bildes kann im Extremfall so weit gehen, dass ein Erlebnis vermittelt werden kann, dessen Intensität fast so stark ist wie das Originalerlebnis. Sprachliche Informationen haben hier gegenüber bildlichen Eindrücken kaum eine Chance, wahrgenommen zu werden. Bilder eignen sich somit besser als Texte zur Vermittlung emotionaler Erlebnisse.

    Anschaulich und glaubwürdig – die Zwillinge in der Gesundheitswerbung bei ratiopharm.de

    Abbildung 11.2    Anschaulich und glaubwürdig – die Zwillinge in der Gesundheitswerbung bei ratiopharm.de

  • Hohe Glaubwürdigkeit: Bilder erscheinen als besonders objektiv und manipulationsunverdächtig, insbesondere dann, wenn sie nur flüchtig wahrgenommen werden. Sie sind selbstverständlicher und somit auch glaubwürdiger als der leicht zu manipulierende Text. Natürlich sind Bilder in Zeiten der digitalen Bildbearbeitung genauso veränderbar. Aber die Unschuldsvermutung bezüglich des Wahrheitsgehalts eines Bildes bleibt erst einmal.

  • Keine Sprachgrenzen: Bilder sind in der internationalen Kommunikation, unabhängig von Muttersprache und Kultur, gut verständlich, wenn der Zusammenhang, in dem die Abbildung steht, klar ist.

 
Zum Seitenanfang

11.1.2    Konsequenzen für die Auswahl von Bildern Zur vorigen ÜberschriftZur nächsten Überschrift

Was bedeutet das gerade Gesagte nun für die Auswahl der Bilder für die Webgestaltung? Austauschbare Produkte und Dienstleistungen, Informationsüberflutung und Emotionalisierung sind alles Gründe, welche die Bedeutung von Bildern als Teil der Unternehmenskommunikation begünstigen bzw. geradezu verlangen. Die Eigenschaften von Bildern, uns schnell und emotional anzusprechen, tun ihr Übriges.

Für Unternehmen bedeutet dies, dass sich die angebotenen Produkte und Leistungen nicht mehr hauptsächlich aufgrund von objektiven Eigenschaften auseinanderhalten lassen, sondern die Konsumenten sich sprichwörtlich ein Bild machen. Aufgrund der Emotionalität und ihrer hohen Erinnerungsrate sind Bilder bestens dafür geeignet, die Unternehmensidentität zu vermitteln und das Image zu beeinflussen. Die durch die Kommunikation entstandenen inneren Marken- und Unternehmensbilder sorgen vermehrt für die Angebotsdifferenzierung.

(Groß)unternehmen müssen also Bilder(welten) finden, die durchgängig in allen Medien konsistent eingesetzt werden, um für eine hohe Wiedererkennung zu sorgen, wichtige emotionale Inhalte schnell zu transportieren und das Vorstellungsbild der Zielgruppen entsprechend zu beeinflussen. Gelungene Beispiele sind der rauchende Cowboy, das Segelschiff mit den grünen Segeln oder die lila Kuh. Ohne die Namen oder die Logos zu sehen, wissen wir (durch jahrelanges »Werbetraining«), welche Firmen dahinterstecken.

Menschlichkeit ist immer emotional – sogar beim Zahnarzt! zahnarzt-kyber.de

Abbildung 11.3    Menschlichkeit ist immer emotional – sogar beim Zahnarzt! zahnarzt-kyber.de

Bei klein- und mittelständischen Unternehmen, die nicht eine solch penetrante Werbestrategie einsetzen (können), sind passende Bilder aber auch ein wichtiges Element der Unternehmenskommunikation.

Garten- und Landschaftsbau individuell in Szene gesetzt: andreasfretz.de

Abbildung 11.4    Garten- und Landschaftsbau individuell in Szene gesetzt: andreasfretz.de

Auch sie haben die Herausforderung, mit Informationen überlastete Konsumenten anzusprechen, und – ich pauschalisiere mal bewusst – auch für sie wird es wichtiger, eine Gefühlswelt aufzubauen und zu entwickeln, die mit dem Unternehmen verbunden wird. Diese Gefühlswelt stellt sich zunehmend als vielleicht nicht einziges, aber zumindest mitentscheidendes Unterscheidungskriterium und damit entscheidender Wettbewerbsfaktor heraus.

Betonung der Gefühlswelt auch in der Finanzwirtschaft

Selbst in der Investitionsgüterindustrie, in der bisher fast immer Informationen entscheidend waren, wird die Beachtung der Gefühlswelt der Beteiligten immer wichtiger.

Die Allgegenwart von Smartphones und Tablets mit Internetanschluss und integrierter hochauflösender Fotokamera führt dazu, dass eine enorme Menge an Bildern in immer besserer Qualität vorhanden ist. Instagram steht exemplarisch für diese Entwicklung, für dieses Bedürfnis nach visueller Kommunikation. Dadurch gewöhnen sich die Menschen auch immer mehr an eine Fülle von Bildern, und die Ansprüche an die Bildqualität steigen zwangsläufig. Nicht nur im technischen Sinne, sondern auch im künstlerisch-inhaltlichen Sinne. Um aus der Masse der visuellen Eindrücke herauszuragen, werden Unternehmen in Qualität und Kreativität von Bildern und Bilderwelten investieren müssen.

Der Instagram-Hype steht exemplarisch für die Bilderwelt, in der wir leben.

Abbildung 11.5    Der Instagram-Hype steht exemplarisch für die Bilderwelt, in der wir leben.

Beim Screendesign gilt es also, die Herausforderung zu meistern, dem Bildumfeld, in dem wir uns bewegen, gerecht zu werden. Dies kann dadurch passieren, dass auf die Auswahl und Gestaltung der Bilder entsprechend viel Wert gelegt wird; tolle Beispiele folgen noch in diesem Kapitel. Oder – auch das ist möglich – gerade entgegen der allgemeinen Entwicklung auf den Einsatz von Bildern zu verzichten und bewusst andere grafische Elemente wie Farben und Typografie stärker einzusetzen.

 
Zum Seitenanfang

11.1.3    Bilder im Einsatz Zur vorigen ÜberschriftZur nächsten Überschrift

Auch wenn es sicherlich möglich ist, mit Sprache Gefühle zu transportieren und mit Bildern sachliche Informationen zu äußern, so ist doch von der vorrangigen Koppelung Sprache – rational argumentieren und Bild – emotional beeindrucken auszugehen. Gut zu sehen in fast allen Werbeanzeigen: Mit einem Bild wird an die Gefühle und Bedürfnisse der Empfänger appelliert, und der Text liefert Informationen über die Eignung des angebotenen Produkts, die bildlich angesprochenen Gefühle und Bedürfnisse zu befriedigen. Selten kommt es zu einer Umkehrung dieses Musters.

Die Wirkung und Wahrnehmung eines Bildes hängt daher – besonders in der Werbekommunikation – vom parallelen und ergänzenden Einsatz von verbalen Informationen ab. Sprachliche Ergänzungen können die Mehrdeutigkeit eines Bildes einschränken und die Betrachtung von wichtigen Bildelementen verstärken und absichern.

Wirkt fast wie ein Werbeplakat: lamassu.is mit großem Bild und großer Headline

Abbildung 11.6    Wirkt fast wie ein Werbeplakat: lamassu.is mit großem Bild und großer Headline

Bei kurzen Kontakten mit wenig involvierten Empfängern – wie oft auch bei Webseiten üblich – ist es also zweckmäßig, dass Bild- und Textverständnis sich gegenseitig stützen.

Webseitenbesucher wollen sich schnell zurechtfinden und schnell die gesuchten Informationen bekommen. Der Webseitenbetreiber will demgegenüber natürlich seine »Message« verkünden. Nicht nur bei Werbeanzeigen, auch auf Webseiten ist die Wirkung von Bildern im Kontext mit sprachlichen Informationen stärker. Die Verwendung von bezugslosen Bildern erschwert dagegen das Verständnis der (Werbe)botschaft und führt zu einer schlechteren und ungenaueren Erinnerung an das Bild und die Botschaft.

Hat schon Werbeanzeigencharakter: nettes Produktbild, das erst durch den Text ein echter Hingucker wird. sma.de

Abbildung 11.7    Hat schon Werbeanzeigencharakter: nettes Produktbild, das erst durch den Text ein echter Hingucker wird. sma.de

Neben sprachlichen Informationen können Bilder im Zusammenhang mit den Elementen Form und Farbe die unterschiedlichsten Effekte erzielen. In der Werbekommunikation erscheinen Bilder meist mit einem Markennamen oder -zeichen. Erscheint ein Bild oft mit bestimmten Elementen (z. B. Logo), prägen sich diese zusammen ein.

Vorteile von Bildern | Zusammengefasst lassen sich folgende allgemeine Vorteile und Aufgaben von Bildern festhalten:

  • hohe Kommunikationsgeschwindigkeit

  • wird in der Regel zuerst fixiert

  • höhere Glaubwürdigkeit

  • höhere Anschaulichkeit

  • platzsparende Informationen (viel spezifische Information auf wenig Raum)

  • allgemeine Verständlichkeit (auch für Lese- und Sprachunkundige)

  • Räumliche Vorstellungen lassen sich gut vermitteln.

  • Einstellungen und Gefühle können subtiler vermittelt werden.

  • Erweckung von Interesse

  • im Text Geäußertes verdeutlichen, belegen bzw. »beweisen«

  • Vertrautmachen mit dem Produkt bzw. dem Aussehen des Produkts

  • Produktnutzen vorführen und dramatisieren

  • Einstellung zu dem Produkt verbessern, die Botschaft verschönern

Bilder bzw. alle gestalterischen Möglichkeiten sollten nicht deswegen eingesetzt werden, weil es sie gibt oder weil sie nach eigenem Empfinden schön aussehen, sondern weil sie im Idealfall eine bessere Bedienbarkeit zur Folge haben. So hat der Einsatz von Bildern auch entscheidenden Einfluss auf die User Experience einer Website. Durch das eingesetzte Bildmaterial kann die Aufmerksamkeit des Website-Besuchers gesteuert und können zudem Emotionen angesprochen bzw. geweckt werden. Der Joy of Use wird gesteigert, je mehr eigene emotionale Bedürfnisse in dem Online-Angebot angesprochen und (wieder)erkannt werden. Diese Emotionen lassen sich somit umso einfacher gezielt einsetzen, um sie beispielsweise für den Verkauf von Produkten im Onlineshop zu nutzen.

 


Ihre Meinung?

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de

<< zurück
 Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: Webdesign Webdesign
Jetzt Buch bestellen

 Buchempfehlungen
Zum Rheinwerk-Shop: HTML5 und CSS3
HTML5 und CSS3


Zum Rheinwerk-Shop: Praxisbuch Usability und UX
Praxisbuch Usability und UX


Zum Rheinwerk-Shop: Responsive Webdesign
Responsive Webdesign


Zum Rheinwerk-Shop: Website-Konzeption und Relaunch
Website-Konzeption und Relaunch


Zum Rheinwerk-Shop: UX Writing und Microcopy
UX Writing und Microcopy


Zum Rheinwerk-Shop: WordPress 5
WordPress 5


Zum Rheinwerk-Shop: Stile & Looks
Stile & Looks


Zum Rheinwerk-Shop: Digitale Illustration
Digitale Illustration


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und in die Schweiz
InfoInfo

 
 


Copyright © Rheinwerk Verlag GmbH 2020
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

 
[Rheinwerk Computing]

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern