Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Redaktion Dr. Web 1. Februar 2018

Bildsprache im Web: So gestaltest du deine Seite attraktiv

Bei der Gestaltung einer Website ist das pas­sen­de Bildmaterial in vie­ler­lei Hinsicht ent­schei­dend. Bilder zie­hen die Aufmerksamkeit des Lesers an, sie lockern Websites auf und ver­an­schau­li­chen die in Texten beschrie­be­nen Dinge oder Sachverhalte. Das ist vor allem für die Websites von Unternehmen von Bedeutung. Doch auch für Blogs sind Bilder ein sehr wich­ti­ges Gestaltungsmittel. Sie ver­mit­teln über die Bildsprache wesent­li­che Informationen und wir­ken auf den Betrachter.

Grundsätzliches zur Gestaltung von Websites

Bei der Gestaltung einer Website ist auf ver­schie­de­ne Dinge zu ach­ten: eine anspre­chen­de Gestaltung, Benutzerfreundlichkeit und rele­van­te Informationen. Das pas­sen­de Gestaltung der Website schafft es, den Benutzer an die Website zu bin­den. Das ist beson­ders für Unternehmen, die neue Kunden anlo­cken wol­len, ein sehr ent­schei­den­der Punkt.

Wichtig für einen guten Eindruck ist ein abge­stimm­tes Design mit dazu pas­sen­der Farbgestaltung. Denn gutes Design ver­mit­telt Professionalität, Individualität, Kompetenz und Vertrauen, es spie­gelt außer­dem den Stil des Unternehmens wider.

Eine gute Website wird mit jedem Browser opti­mal dar­ge­stellt und ist nicht für eine bestimm­te Auflösung opti­miert. Außerdem soll­ten die Bilder nicht zu hoch­auf­lö­send sein und die Seite nicht zu vie­le Bild- oder Videoelemente ent­hal­ten, damit sie nicht zu lan­ge braucht, um voll­stän­dig zu laden.

Die Gestaltung einer Website soll­te zwar anspre­chend sein, aller­dings darf bei der Gestaltung der Benutzer nicht in Vergessenheit gera­ten. Wie so oft, gilt auch hier die Devise: Weniger ist mehr. Wenn ein Benutzer nur weni­ge Auswahlmöglichkeiten hat, um auf der Seite zu agie­ren, reagiert er dem Hickschen Gesetz zufol­ge schnel­ler und han­delt enga­gier­ter. Aus die­sem Grund soll­ten klick­ba­re Elemente über­sicht­lich ange­ord­net und gestaf­felt wer­den. So wird das Design gleich­zei­tig ein­fach und ziel­füh­rend.

Darum sind Bilder so wichtig

Bilder spie­len für die gelun­ge­ne Gestaltung einer Website eine gro­ße Rolle. Sie wer­ten die Seite optisch auf und ver­mit­teln dem Benutzer auf einen Blick einen ers­ten Eindruck von den Inhalten bzw. den Produkten oder Dienstleistungen eines Unternehmens.

Und wie jeder weiß, ist der ers­te Eindruck ent­schei­dend, ob das Interesse ver­stärkt wird oder eben nicht. Bezogen auf die Website heißt das: ist der ers­te Eindruck posi­tiv, wird sich der Benutzer mit hoher Wahrscheinlichkeit län­ger auf der Seite auf­hal­ten und sich mit den dar­ge­bo­te­nen Inhalten beschäf­ti­gen.

Bilder kön­nen und soll­ten aber auch dazu genutzt wer­den, den Besucher der Website in die gewünsch­te Stimmung zu ver­set­zen. Gerade für Unternehmen ist das inter­es­sant, weil sie über Bilder eine Kauflust oder Kontaktlaune beim poten­zi­el­len Kunden gene­rie­ren kön­nen. Steht der Besucher der Website bis­her noch nicht in Verbindung zum Unternehmen, ist es ganz beson­ders wich­tig, ihn als mög­li­chen Neukunden zu über­zeu­gen.

Wenn das gelingt, gewinnt er den Eindruck, das pas­sen­de Unternehmen für die Lösung sei­nes Problems oder sei­ner Nachfrage gefun­den zu haben. Denn: hoch­wer­ti­ge Bilder und Grafiken ver­lei­ten Benutzer dazu, eine Website und das zuge­hö­ri­ge Unternehmen als attrak­ti­ver zu emp­fin­den. Nicht umsonst gehö­ren Bilder zu den wich­tigs­ten Instrumenten, um Benutzer emo­tio­nal anzu­spre­chen.

Das funk­tio­niert auch, wenn Benutzer schnell Seite für Seite anklickt. Mit der rich­ti­gen Bildauswahl schafft man einen wirk­sa­men Eye Catcher, der inner­halb von Sekundenbruchteilen die Aufmerksamkeit des Benutzers auf sich zieht. Ein geziel­ter Einsatz von Bildern lenkt das Auge des Betrachters in die rich­ti­ge Richtung, etwa auf Dienstleistungen oder Produkte, die ein Unternehmen anbie­tet.

Eine gute Website funk­tio­niert auf ver­schie­de­nen Geräten und Browsern. (Quelle: Fotolia, Bild 2)

So funktioniert Bildsprache

Bilder sind in vie­len Bereichen ein wich­ti­ges Kommunikationselement, so auch auf Websites. Durch ihre Gestaltung und eine geziel­te Platzierung im Text oder all­ge­mein auf der Seite wir­ken Bilder in bestimm­ter Weise auf den Betrachter bzw. den Besucher der Website. Mit dem rich­ti­gen Bildmaterial lässt sich also zum Beispiel die Wirkung des Textes in der gewünsch­ten Art und Weise beein­flus­sen.

Um die­sen Effekt zu erzie­len, muss man die Bildsprache ken­nen und rich­tig ein­set­zen. Dabei gibt es ein paar Faktoren zu beach­ten. Die Bilder müs­sen die Aufmerksamkeit des Betrachters erre­gen und ihn neu­gie­rig machen. Außerdem müs­sen die Bilder dem Image und dem Stil des Unternehmens ent­spre­chen – das betrifft die Art der Gestaltung genau­so wie die Farbwahl und das pas­sen­de Motiv.

Bei einer gelun­ge­nen Bildauswahl wird die Botschaft des Textes her­vor­ge­ho­ben, außer­dem wer­den die Informationen emo­tio­na­li­siert und posi­tiv besetzt. Allerdings sind Bilder nicht in der Lage, schlech­te Texte und Defizite bei ande­ren Inhalten der Website auf­zu­po­lie­ren. Kurz gesagt: der Text ver­kauft, nicht die Bilder.

Bilder soll­te man auch immer pas­send zur Zielgruppe wäh­len. Denn nur Bilder, die „die Sprache der Zielgruppe spre­chen“, kön­nen die Botschaft der Website in der Weise und mit den Effekten ver­mit­teln, die man erzie­len will. Daher ist immer zu über­le­gen, was die Zielgruppe sehen möch­te, wel­che Bilder sie im wahrs­ten Sinne anspre­chen.

Das Bildmaterial muss farb­lich und sti­lis­tisch zur Website pas­sen. (Quelle: Fotolia, Bild 3)

Passende Bilder finden

Unzählige Eyetracking-Analysen haben gezeigt, dass Bilder Emotionen beson­ders dann trans­por­tie­ren, wenn dar­auf Personen zu sehen sind. Das mensch­li­che Gehirn unter­nimmt stets den soge­nann­ten „Freund-oder-Feind“-Check und scannt auch Personen auf Bildern nach die­sem Schema ab. Sind uns die Personen auf den Bildern sym­pa­thisch, über­tra­gen wir das auto­ma­tisch auf den Eindruck, den wir von der Website bzw. vom Unternehmen haben.

Außerdem wir­ken Bilder mit Personen dar­auf gleich viel ein­la­den­der. Das ent­schei­den­de Stichwort in die­sem Zusammenhang lau­tet Blickkontakt. Denn Blickkontakt bedeu­tet Kontaktaufnahme und ist somit der ers­te Schritt zur Kommunikation.

Auch Produktfotos haben die Fähigkeit, den Benutzer zu beein­flus­sen und das Gehirn zu sti­mu­lie­ren. So ent­steht beim Betrachten sol­cher Fotos der Wunsch des „Habenwollens“, die Kauflust wird ange­regt. Grundsätzlich soll­ten die Bilder auf der Website so hoch­wer­tig wie mög­lich sein, um Attraktivität für die Website und Vertrauen in das Unternehmen zu erzeu­gen.

In die­sem Zusammenhang kann es hilf­reich sein, auf Computerprogramme wie GIMP zurück­zu­grei­fen. Sie bie­ten ver­schie­de­ne Funktionen, um Grafiken zu erstel­len und eigens erstell­te Bilder nach­träg­lich zu bear­bei­ten. So las­sen sich mit dem Grafikprogramm GIMP rote Augen ent­fer­nen und ver­wa­ckel­te Bilder nach­schär­fen. Außerdem kann GIMP von Anfängern wie auch von Profis ver­wen­det wer­den.

Die Auswahl geeig­ne­ter Bilder und infor­ma­ti­ver Grafiken ist enorm wich­tig. Fehler sor­gen dafür, dass der Benutzer einen nega­ti­ven Eindruck von der Website und vom Unternehmen bekommt und sich nach einer ers­ten Betrachtung die Seite nicht wei­ter anschau­en möch­te.

Nicht immer hat man geeig­ne­te Bilder aus dem eige­nen Fundus zur Verfügung. Dann kann man sich mit Stockfotos hel­fen. Wenn man weiß, wie sie rich­tig ein­ge­setzt wer­den, las­sen sich auch damit die gewünsch­ten Effekte erzie­len. Hier ist ganz beson­ders auf ein pas­sen­des Motiv zu ach­ten, wel­ches mög­lichst natür­lich und nicht gestellt wirkt. Sollte Farbgebung und Lichteinfall nicht zum Stil der Website pas­sen, ist es rat­sam, dem Bild mit Photoshop den gewünsch­ten Anstrich zu ver­pas­sen.

Fazit: Das macht gute Bilder aus

Viele Betreiber von Websites, ins­be­son­de­re Unternehmen, haben inzwi­schen die gro­ße Bedeutung von Bildern erkannt. Wer die Bildsprache kennt und sie für sich als Kommunikationsmittel rich­tig zu nut­zen weiß, wird sei­ne Website zum Erfolg füh­ren.

Für die Bildauswahl gibt es kein Patentrezept, da sie indi­vi­du­ell für jede Website aus­ge­sucht und ein­ge­setzt wer­den müs­sen. Es gibt aber ein paar grund­le­gen­de Eigenschaften, die Bilder für Websites immer erfül­len soll­ten.

  • Auf die Größe kommt es an: gro­ße Bilder wer­den bes­ser wahr­ge­nom­men und blei­ben eher im Gedächtnis hän­gen.
  • Aufmerksamkeit gene­rie­ren: Bilder die­nen als Eye Catcher. Sie len­ken die Aufmerksamkeit des Betrachters auf die Website sowie auf die dort prä­sen­tier­ten Produkte und Dienstleistungen.
  • Inhalte visua­li­sie­ren: Bilder soll­ten in der Lage sein, die Inhalte aus Texten sinn­voll visu­ell wie­der­zu­ge­ben und Botschaften des Textes zu unter­stüt­zen.
  • Ins rech­te Licht rücken: gute Bilder schaf­fen gezielt Emotionen beim Betrachter und wecken in ihm posi­ti­ve Gefühle gegen­über der Inhalte der Website.
  • Keep it simp­le: Statt über­la­de­ner Motive soll­ten Bilder lie­ber ein­fach gehal­ten sein und sich auf das Wesentliche kon­zen­trie­ren.
  • Was nicht passt, wird pas­send gemacht: Bilder müs­sen zum Gesamtbild, zum Design der Website und des Unternehmens pas­sen – sowohl farb­lich als auch sti­lis­tisch. Gegebenenfalls kann man mit Photoshop nach­hel­fen.

Bildquellen

Redaktion Dr. Web

Unter der Bezeichnung "Redaktion Dr. Web" findest du Beiträge, die von mehreren Autorinnen und Autoren kollaborativ erstellt wurden. Auch Beiträge von Gastautoren sind hier zu finden. Beachte dann bitte die zusätzlichen Informationen zum Autor oder zur Autorin im Beitrag selbst.

3 Kommentare

  1. Toller Artikel … stim­me voll und ganz zu 👍 Aber, woher bekom­me ich tol­le Bilder? Wo fin­de ich super­schar­fe Fotos im Netz, am bes­ten noch gra­tis, v.a. ohne ver­steck­te Nutzungsrechte und so? Hat hier jemand Tipps – weg von den Mainstream-Portalen?

  2. Bei den gan­zen Bildern die Ladezeiten nicht aus den Augen las­sen. :-)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.