Ich kann es nicht mehr sehen.

Ich kann nicht mehr sehen, wie sich Geschäftsmänner die Hände schütteln, glückliche Familien um die Wette strahlen und junge gutaussehende Angestellte in einer total entspannten Büro-Atmosphäre ein total lockeres Meeting halten.

Diese Bilder sehe ich täglich auf Webseiten.
Auf zu vielen Webseiten.

Aber eigentlich ein verschenktes Potential.

Zu den Fakten:

Bilder sprechen uns emotional an. Bilder sagen uns mehr, als es tausend Worte tun können. Bilder bleiben lange im Gedächtnis. Bilder wirken in Sekundenbruchteilen.

Alles richtig und auch gute Gründe, warum Bilder auf Webseiten gerne eingesetzt werden.

Zu oft sind Bilder aber auf Webseiten austauschbar geworden, gerade wenn – oder besser: weil – sie aus Bildkatalogen stammen. Für wenig Geld bekommt man hier professionelle Fotos ohne groß eingeschränkte Nutzungsrechte.

Eine Folge ist aber, dass viele dieser Bilder nun auf vielen Webseiten (oder auch anderen Kommunikationsmedien) im Einsatz sind:

Familien-Klischeebild

Ein typisches Klischeebild, wie ich es zu oft sehe.

Fast jedes Unternehmen hat die Idee von Bildern „mit jungen fröhlichen gutaussehenden Menschen, die nett zuammen vor dem Laptop sitzen und gemeinsam surfen oder ein entspanntes Meeting halten“ – oder so ähnlich. Das mag nicht nur oft fernab jeglicher Realität sein, es ist auch zu oft erkennbar, dass diese Bilder nicht authentisch sind.

Mit Eigenständigkeit und einem Wiedererkennungeffekt haben diese Bilder nichts gemein. Schade eigentlich.

Was bei kleineren Vorschaubildern für Artikel oder Unterseiten und vor allem bei Newsportalen noch nachvollziehbar sein mag, ist gerade auf Unternehmensseiten und Online-Shops ein verschenktes Potential.

Was für Möglichkeiten gibt es aber aus diesem Stockfoto-Trott auszubrechen? Wie können individuelle Bildmotive und -formate gelingen, die sich aus dem täglichen Bildereinerlei hervorheben?

Im folgenden habe ich ein paar Möglichkeiten zusammengestellt, samt gelungenen Beispielen für individuelle Umsetzungen, die zeigen, dass es auch anders geht:

Individuell und persönlich

Ok, das ist die Variante für das größere Budget.

Es werden extra eigene Fotos erstellt. Ein Fotograf (oder ein sehr sehr talentierter Mitarbeiter, Freund, Bekannter…) nimmt Bilder des Unternehmens und der Mitarbeiter auf. Oft sind die Fotografen-Kosten im Kundenbudget nicht vorhanden. Dann sollte sich der Kunde aber diese trotzdem noch gönnen.

Warum?

Weil der Mehrwert eigener individueller Bilder rießig ist. Kein anderes Gestaltungsmittel kann ein Design so abheben lassen von den Webseiten der Konkurrenz und für so eine hohe Wiedererkennung sorgen wie markante Bilderwelten.

Die folgenden Beispiele verdeutlichen dies sehr gut:

Screendesign Greenfort

Die Anwälte haben sich nicht Lumpen lassen und in unterschiedlichsten Locations in Szene setzen lassen. Das Ergebnis kann sich sehen lassen – eitel Sonnenschein.
greenfort.de

Screendesign Mittwald

Etwas bodenständiger kommt Mittwald daher. Die Mitarbeiter standen Pate und wurden oft in ähnlichen Situationen aufgenommen wie es sie auch bei den klassichen Business-Stockfotografien gibt. Aber die Bilder sind eben nicht mit den typischen Fotomodels gemacht, sondern mit „echten Menschen“. Dadurch verleihen die Bilder der Seite einen große Portion Authentizität und Menschlichkeit.
mittwald.de

Screendesign AC Tischendorf

Sorry, noch einmal Rechtsverdreher, äh, Anwälte. Prominent in Szene gesetzt auf einer ansonsten eher spartanischen Seite.
ac-tischendorf.com

Screendesign kotlett

Noch einen Schritt weiter: Eine gelungene Produktinszenierung, die sogar auf das Medium Video setzt. Einzig dieser Hipster stört etwas…
kotelett.info

Das Team, einzelne Mitarbeiter, aber auch die Räumlichkeiten des Unternehmens oder Produkte können durch eigene, extra erstellte Bilder regelrecht inszeniert werden und so der ganzen Seite eine individuelle und persönliche Note geben.

Bildausschnitt

Eigene Fotos oder Bilder aus Fotoagenturen müssen nicht in voller Breite eingesetzt werden. Ein veränderter Bildausschnitt kann manchmal eine ganz andere Aussage bewirken. Oder viel mehr Spannung erzeugen.

Und mit ungewöhnlichen Ausschniten lässt sich Aufmerksamkeit und Individualität erreichen.

alt

Ups, eigentlich sind doch Portraits so emotional. Hier wird der Kopf einfach abgeschnitten und das Bild gewinnt gerade dadurch an Spannung.
agentur-loop.com

Die unterschiedlichen Wirkungen unterschiedlicher Bildausschnitte zeigen die beiden folgenden Beispiele gut auf:

Verschiedene Bildausschnitte

Montagen

Warum nicht aus mehreren Bildern eines machen?

Mit Bildmontagen lassen sich ganz neue Motive und Aussagen gestalten, die mit „normalen“ Bildern nicht möglich wären.

Screendesign Bildmontage

Witzig, kreativ und vor allem individuell. Aus mehreren Bildern wird eine Gesamtkomposition.
andreasfretz.de

Screendesign Bildmontagen

Das wächst was aus dem Kopf. Nicht eine nur einfache Bildmontage, sondern auch noch interaktiv.
robinizer.de

Illustrationen

Es müssen nicht immer fotorealistische Bilder sein.

Mit Illustrationen lässt sich häufig ein individueller Stil umsetzen, mit dem man sich gut von anderen Webseiten abgrenzen kann. Die Vielfalt der Illustrationsmöglichkeiten ist dabei schier unerschöpflich.

Screendesign Illustration

Illustrationen im Zusammenspiel mit Farbe:
Markant und individuell und ein hoher Wiederekennungseffekt.
legworkstudio.com

Screendesign Illustrationen

Ähnlicher Effekt, aber anderer Illustrationsstil.
martin-walker.de

Webdesign Illustration

Wirkt wie gezeichnet, ausgeschnitten und aufgeklebt.
2create.bg

Farbfilter

Zurück zu den fotorealistischen Motiven.

Wenn man – aus welchen Gründen auch immer – doch an den Standardbildern nicht vorbei kommt, steht einem immer noch das Bildbearbeitungsprogramm seiner Wahl zur Verfügung.

Warum also nicht einmal an den Farbreglern drehen?

Aber die Bilder nicht so verfremden, dass die Farbebung wie ein LSD-Rausch wirkt. Eher der gezielte Einsatz von Farbverläufen, die die gewünschte Stimmung wiedergeben, bzw. die Kontraste auch abschwächen, damit Text auf dem Bild besser wirken kann.

Webdesign Farbfilter

Sehr markant und auffällig. Und einprägsamer als die „normalen“ fotorealistischen Farben.
ingramcoleland.com.au

Webdesign Farbfilter Effekt

Farbverläufe funktionieren auch im Video.
camps.winshape.org

Screendesign Farbfilter Effekt

Der Gelbstich als Teil des Corporate Designs passend zum Screendesign.
lobagola.com

Screendesign Farbfilter

Hier wurde nicht viel verändert. Aber manchmal reicht ja schon ein bisschen…
joycevherck.com

Duplexfarben

Etwas konsequenter als die Farbfilter ist der Duplexton.

Duplexbilder sind Fotos, die nur aus zwei Farben bestehen (meistens Schwarz und ein weiterer Farbton). Hierdurch lässt sich eine sehr hohe Wiedererkennung erreichen wie die folgenden Beispiele zeigen:

Duplexbild

Zwei Farben: Schwarz und Orange erzeugen hier ein markantes Duplexbild mit hoher Wiedererkennung.
rocketandwink.com

Screendesign Duplexbilder

Auch auf Webseiten lässt sich dieser Duplex-Effekt gut anwenden.
mybootcamp.at

Screendesign Duplexton

Ein sehr dezentes Duplexbild.
spotify-tasterewind.com

Website Duplexton

Funktoniert mit so ziemlich jedem Farbton: Duplexbilder.
underbelly.is

Graustufen

Man kann auch gleich jeden Farbton weglassen und auf Schwarz-Weiß-Bilder setzen. Diese fallen gerade durch die Abwesenheit jeglicher Farbe so auf.

Zusammen mit ein, zwei markanten Farbtönen bei anderen Gestaltungslementen heben sich diese gegenseitig hervor.

Graustufen Webdesign

Was für eine Wirkung! Ein Graustufenbild und der markante Gelbton.
vibrantcomposites.com

Graustufen Screendesign

Graustufenbilder passen zu minimalistischen Screendesigns.
praesens.co

Freie Formen

Bilder sind ja per se rechteckig. Alleine schon von dieser vorgegebenen Form abzuweichen sorgt für Abwechslung. Das können andere typische geometrische Formen sein wie Kreise oder Dreiecke oder auch völlig freie Formen. Auf jeden Fall brechen diese freien Formen das übliche Gestaltunsgraster, dass sich eben auch aus horizontalen und vertikalen zusammensetzt.

Webdesign Freie Form

Statt der üblichen waagerechten Trennung, einfach eine senkrechte umgesetzt – erzeugt Spannung.
socia.li

Screendesign Freie Form

Eine freie Form aus vielen Geraden. So kommt Dynamik ins Design.
fe-gruppe.de

Screendesign Form Hexagon

Warum nicht einmal ein Hexagon. Passt doch gut ins Layout.
thorstenbreyer.de

Screendesign Form Dreieck

Es kann so einfach sein, Statt geraden einfach eine schräge Kante eingesetzt – dynamisch und individuell.
dmdii.uilabs.org

Webdesign Form Kreis

Freigestelltes Objekt und eine Kreisform – markant auffällig.vnstar.com.ua

Freisteller

Eine weitere Möglichkeit Bilder attraktiv zu machen, ist es die Bildmotive freizustellen. Also die Hintergründe „wegzuschneiden“. Dies ist besonders hilfreich, wenn diese störend bzw. unattraktiv sind.

Das mag zwar manchmal aufwendig sein, aber der Effekt kann sich lohnen, wie diese drei Seiten zeigen:

Portrait Freisteller

Gerade Portraits bieten sich an: Freigestellt stört kein Hintergrund mehr und sie lassen sich besser, bzw. individueller in das Design intregrieren.
scicaster.de

Webdesign Freisteller

Auch eine Möglichkeit der Portfolio-Präsentation. Freigestellte Bildausschnitte der Referenzen.
neiouma.com

Screendesign Freisteller

Der Lehmann ist Trainer? Habe ich wohl irgendwas verpasst!
Egal, auf jeden Fall wurde er einige Male freigestellt und macht zumindest im Webdesign eine gute Figur. (Hätte er sich damals beim Schuß von Fabio Grosso mal so gestreckt…)
jenslehmann.com

Fazit

Es muss nicht immer der rechteckige Stockfoto-Einheitsbrei sein!

Die vielen Beispiele zeigen, dass mit etwas Kreativität sich recht einfach besondere Bildmotive und -formate erstellen lassen.

Individuelle Bilderwelten sorgen für eine hohe Wiedererkennung und Differenzierung von der Konkurrenz.

Das kann mal eine bildübergreifende bestimmte Farbgebung sein, mal eine andere Form und manchmal reicht ein besonderer Ausschnitt.

Kennst du noch erwähnenswerte Beispiele? Erzähle es uns in den Kommentaren!

Artikel als Präsentation:

Die Kurzfassung dieses Artikels gibt es auch als Präsentation auf slideshare – 9 einfache Ideen für individuelle Bildmotive.

9 einfache Ideen für individuelle Bildmotive, die keinen mehr langweilen.
4.728 Stimme[n]

Weiterempfehlen ausdrücklich erlaubt:

Die Webdesign Checkliste

Webdesign-Newsletter +
WEBDESIGN-CHECKLISTE
mit 90 Checkpunkten für
Dein nächstes Projekt:

Keine Sorge, Spam gibt es hier nicht und Adressen gebe ich natürlich auch nicht weiter!
(Beispiele, Datenschutz, Analyse und Widerruf)

Webdesign Survival Kit

Autor:
Martin Hahn ist Webdesigner, Dozent, Fachbuchautor und dreifacher Papa. Seit vielen Jahren hilft er anderen effektivere Webdesigns zu erstellen – in Schulungen und mit Artikeln in diesem Blog. Tägliche Webdesign-Links von Martin gibt es auch auf twitter.

9 Kommentare

  1. Interessante Liste. Gleichmal ein paar Ideen für unsere Webseite erhalten, um ein paar neue Möglichkeiten auszuprobieren. Mal sehen ob es mit Tieren genauso gut wirkt. Wie wäre es mal mit gezeichneten Bildern, wie unser Gravatar.

    • Dann bin ich gespannt, was demnächst auf eurer Seite zu sehen ist…
      Und der Gravatar hat natürlich auch eine hohe Wiedererkennung!

  2. Hallo Martin,
    vielen Dank für die coolen Beispiele. Ich hoffe, hier etwas Inspiration zu finden für unser neues Logo. Die Grafik steht schon fest, nur mit der Farbgebung tue ich mich noch schwer.
    VG, Thomas

    • Hallo Thomas,
      freut mich, wenn ich helfen kann.
      Sag Bescheid, wenn es was zu sehen gibt…

      Gruss
      Martin

  3. Sehr, sehr chice Liste. Vor allem die Auftritte der Kanzlei und des FKK/2-Knäckebrot. Der Bart ist allerdings echt zu viel 🙂
    Jetzt komme ich mir mit meiner eigenen Seite total schäbig vor.

Trackbacks/Pingbacks

  1. 9 einfache Ideen für individuelle Bildmotive - Freakinthecage Webdesign Stuttgart - Der Blog
  2. Fallstudie Webdesign – So einfach habe ich zwei Webdesigns optimiert - Webdesign Journal
  3. Bilder optimieren fürs Web – Tools zur Bildoptimierung - Webdesign Journal
  4. 12 „beliebte“ Designfehler, und wie Du sie vermeidest - Webdesign Journal

Kommentar schreiben

Email-Adresse wird nicht veröffentlicht!