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.
Bei der Gestaltung von benutzerfreundlichen und effizienten Webseiten spielt die Verwendung von Bildern eine entscheidende Rolle. Ein Guide mit Beispielen und Tipps.
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.
Woher bekommst du passende Bilder für deine Website? Dazu gibt es folgende Möglichkeiten:
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:
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.
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.
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.
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.
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.
Dir hat der Artikel gefallen? Hier findest du einen Betrag zu Hero Images im Webdesign: Inspiration & nützliche Tips.