Website, UI

Einfache Tipps für den effektiven Einsatz von Bildern im Webdesign

Bei der Gestaltung von benutzerfreundlichen und effizienten Webseiten spielt die Verwendung von Bildern eine entscheidende Rolle. Ein Guide mit Beispielen und Tipps.

A table with laptops showing images of a website.

Bilder spielen für die User Experience und Benutzerfreundlichkeit auf Webseiten eine wichtige Rolle. Die meisten Internetnutzer sind visuell orientiert und nehmen Informationen durch Bilder viel schneller wahr als Worte. Daher sind Bilder oft die Layout-Elemente, die zuerst erfasst und gescannt werden. Ausserdem wirken sie, richtig eingesetzt, emotional ansprechend, was bei Usern besondere Botschaften vermitteln kann.

Je nach den Zielen den des Webdesigns wählen Designer oder Marketingteams verschiedene Arten von Bilder für Websiten aus. Im Folgenden findest du einige Tipps und Tricks zur Verwendung von Bildern im Webdesign.


Ressourcen für Stockbilder

Woher bekommst du passende Bilder für deine Website? Dazu gibt es folgende Möglichkeiten:

  • Fotoshootings: Personen, Räumlichkeiten oder Produkte werden professionell fotografiert. Dies ist zwar meistens die teuerste Option, aber die Fotos wirken dann extrem hochwertig, sind einzigartig und du besitzt automatisch die Lizenzrechte.
  • Kostenpflichtige Stockbilder: Auf vielen Plattformen kannst du Stockbilder erwerben. Diese sind auf jeden Fall billiger als ein Fotoshooting aber weniger individuell. Allerdings spart man sich Zeit, da man die Bilder direkt kaufen und verwenden kann. 
  • Kostenlose Stockbilder: Verschiedene Fotografen oder Communites stellen Fotos kostenlos zur Verfügung. Das ist die billigste Option, aber du musst damit rechnen, dass diese Fotos auch auf unzähligen anderen Webseiten verwendet werden.

Die Auswahl der Bildquelle ist also stark vom Projekt, Budget und Zielen deiner Website abhängig. Im folgenden findest du ein paar Inspirationsquellen für Stockbilder:

  • Unsplash: Eine Community von Fotografen aus der ganzen Welt, die ihre Fotos kostenlos zur Verfügung stellen. 
  • iStock: Plattform für hochwertige, kostenpflichtige Stockbilder, Grafiken & Illustrationen
  • Adobe Stock: Plattform für unterschiedlichste Medien Ressourcen. Komfortabler Workflow mit CreativeCloud Programmen.
  • Moose Photos: Professionelle Produktion von Stockfotos, die als Serien funktionieren.
  • Pixabay: Eine grosse Auswahl an kostenlosen Bildern, Illustrationen und Vektorgrafiken.

Emotionen mit echten Menschen

Unzählige Eyetracking-Analysen zeigen, dass sich Emotionen besonders gut durch die Verwendung von Bildern mit Personen erzeugen lassen. Bilder mit Menschen in reellen Alltagssituationen wirken für User viel überzeugender, da sie sich eher damit identifizieren können. Solche Bilder ziehen die Blicke der User automatisch an und verleiten sie dazu länger auf deiner Website zu verweilen.

Website Beispiel flatiron.com
Emotionen durch Menschen (flatiron.com)
Website Beispiel overlookedventures.com
Emotionen durch Menschen (overlookedventures.com)

Grossflächige Hintergrundbilder

Einer der beliebtesten Designtrends der letzten Jahre ist die Verwendung von Fotos als Hintergrundbild. Dieser Ansatz macht die Bildschirme visuell und emotional ansprechend. Ausserdem unterstützt es das Gefühl der Integrität aller Layout-Elemente. Auf der anderen Seite erfordert es ein hohes Mass an Aufmerksamkeit für den Kontrast und die Lesbarkeit aller Elemente, was im Falle eines einfarbigen Hintergrunds schwieriger zu erreichen ist.

Website Beispiel ljubicicacademy.com
Grossflächige Hintergrundbilder im Webdesign (ljubicicacademy.com)
Website Bespiel idyl.com
Grossflächige Hintergrundbilder im Webdesign (idyl.com)

Produktfotos im E-Commerce 

Hochwertige Produktbilder auf E-Commerce Webseiten ist eine der besten Methoden um die Verkäufe zu erhöhen. Kunden wollen sehen wofür sie bezahlen. Um ihnen ein besseres virtuelles „Gefühl“ vom Produkt zu geben, ist es immer vorteilhaft ein Produkt von mehreren verschiedenen Perspektiven zu zeigen. Für eine bessere Visualisierung hilft es auch das Produkt in Verwendung einer realen Umgebung zu zeigen.

Website Beispiel tropicfeel.com
Bilder im E-Commerce (tropicfeel.com)

Nutze keine offensichtlichen Stockbilder

Das Problem bei kostenlosen Stockbildern ist, dass die gleichen Bilder immer wieder verwendet werden können. Ein nichtssagendes Stockbild und kann sich negativ auf dein Design auswirken. 

Oft wirken Stockfotos nämlich „zu perfekt“ oder stellen die Situationen zu überspitzt dar, was schnell dazu führen kann, dass die zu vermittelnde Botschaft durch unpersönliche Bilder nicht authentisch und unglaubwürdig wirkt.

Diese Unglaubwürdigkeit kann durch viele weitere Aspekte entstehen: Dasselbe Model auf unterschiedlichen Fotos in unterschiedlichen Rollen, die Konkurrenz verwendet zufällig das gleiche oder ein ähnliches Foto, zu gut aussehende Menschen und keine Einzigartigkeit, da Stockfotos für die breite Masse produziert werden. Daher ist auch ziemlich leicht zu erkennen, welche Fotos aus Stockarchiven stammen und welche extra für die eigene Agentur oder Firma gemacht wurden.

2 Stockbilder im Vergleich.
Stockbilder im Vergleich

Der richtige Bildausschnitt

Neben der richtigen Bildauswahl spielt auch der Ausschnitt des Bildes eine entscheidende Rolle um die bestmögliche Wirkung zu erzielen. Bei der Wahl des Abschnittes sollte man immer der Drittelregel folgen. Diese leitet sich aus dem Goldenen Schnitt für Bildgestaltung aus der Fotografie ab. Dabei unterteilt man das Bild mit horizontalen und vertikalen Linien in ein 3er-Raster. Das Hauptmotiv platziert man dann eher versetzt auf einen der Hauptlinien. Während bei einer mittigen Platzierung das Motiv sehr statisch und langweilig wirkt, erzeugt man durch die Drittelregel ein dynamisches und spannendes Bildmotiv.

Vergleich von 2 Stockbildern mit Ausschnitt.
Stockbilder Bildausschnitt - Links: mittig / Rechts: Drittelregel

Warum du Bilder auf deiner Website verwenden solltest:

  • Studien zeigen, dass Menschen Bilder viel schneller wahrnehmen als Text
  • Wichtige Informationen werden vom Gehirn oft als visuelle Bilder gespeichert, auch wenn sie über Texte aufgenommen wurden
  • Mit Bildern kannst du deine Website, für Menschen aus verschiedenen Ländern, universeller gestalten
  • Bilder können besser im Langzeitgedächtnis gespeichert werden. Damit ist es wahrscheinlicher, dass sich User später an deine Website erinnern
  • Durchdacht eingesetzt und optimiert, können Bilder auch deine Platzierung in Suchmaschinen verbessern und mehr organischen Traffic auf deine Website bringen

Dir hat der Artikel gefallen? Hier findest du einen Betrag zu Hero Images im Webdesign: Inspiration & nützliche Tips.

Portrait von Lukas Rudrof, Webflow Designer aus Nürnberg.

Lukas Rudrof

November 16, 2022