German (Deutsch) translation by Valentina (you can also view the original English article)
Fotografische Bilder erregen unsere Aufmerksamkeit und lösen eine fast sofortige Reaktion aus, wenn wir ihnen begegnen. Sie sind daher ein wichtiger Bestandteil jeder von uns erstellten Website. Fotos spielen eine wichtige Rolle für unseren ersten Eindruck, aber sie können uns auch sagen, worum es auf der Site geht und können ein großer Faktor sein, um Vertrauen zu gewinnen.
Bei richtiger Verwendung sind Fotos sehr effektiv und können schnell die beabsichtigte Botschaft an Ihr Publikum senden. Die Verwendung der falschen Fotos kann jedoch die Benutzererfahrung beeinträchtigen. Wie wählen wir die richtigen aus?
Verwenden von Fotos im Webdesign
So sehr wir uns um alle Aspekte der Website, die wir erstellen, kümmern: Inhalt, Farben, Typografie, Hierarchie, Informationsarchitektur und andere Details, Fotos verdienen genauso viel Aufmerksamkeit in Bezug auf die Benutzerfreundlichkeit und das Gesamterlebnis der Benutzer auf Ihrer Website.
Der Umgang mit Fotos auf Websites sollte etwas sein, das Designer verstehen und effektiv anwenden können. Dieser Artikel weist Sie also in die richtige Richtung und zeigt Ihnen, wie Sie über Fotos nachdenken, wenn Sie sich für die Verwendung eines Fotos in Ihrem nächsten Webprojekt entscheiden.
Fordern Sie Aufmerksamkeit, indem Sie ein großes Foto verwenden
Menschen scannen Bildschirme basierend auf früheren Erfahrungen und Erwartungen. Oben links ist der häufigste Ausgangspunkt für die Augen der Benutzer, obwohl dies von den Lesemustern ihrer Kultur abhängt. Wenn Sie ein großes Foto auf der Seite verwenden, wird es sofort ihre Aufmerksamkeit erregen und sie von ihrer üblichen Tendenz ablenken.
Ein Foto als Inhalt behandeln
Sie werden mir sicher nicht widersprechen, dass ein Foto auf einer Webseite Inhalt ist, aber behandeln Sie es wirklich so? Verwenden Sie es nur als Add-On oder als netter Inhaltsfüller? Haben Sie alle Aspekte dieses bestimmten Inhalts berücksichtigt? Haben Sie das Foto richtig bewertet, bevor Sie es verwenden? Haben Sie die mentalen Modelle der Benutzer und die Auswirkungen, die das Foto auf sie haben wird, berücksichtigt? Liefert das Foto aussagekräftige Informationen oder eine Hilfestellung für die aktuelle Aufgabe eines Nutzers? Dies sind nur einige der Fragen, die Sie beantworten müssen, bevor Sie ein Foto auf einer Webseite verwenden.
Fotos sollten niemals nur verwendet werden, um die Webseite zu „jazzen“.
Ich habe viele Designer gesehen, die einfach ein schönes Vollbildfoto auf einer Webseite platziert haben, einen Slogan oder einen „Call to Action“ eingefügt und erklärt haben, dass es erledigt ist. In vielen Fällen wurde das Foto nicht ausgewertet, der Designer folgte lediglich einem anhaltenden Trend. Sehen wir uns an, wie Sie ein Foto bewerten, bevor Sie es auf Ihrer Website verwenden.
Das perfekte Foto auswählen
Es gibt ein paar Dinge zu beachten, wenn Sie sich für ein Foto in Ihrem Design entscheiden. Ich gehe davon aus, dass Sie bereits wissen, wie man grundlegende Aspekte eines Fotos bewertet, nämlich Qualität, Größe, Komposition und Belichtung. Qualität in Bezug auf die erforderliche Auflösung, die Größe des Bildes und vorzugsweise seine Ausrichtung für den vorgesehenen Verwendungszweck, die effektive Komposition und das Beschneiden des Fotos, um die Aufmerksamkeit zu erregen, und richtig belichtete Motive auf dem Foto.
Sobald Sie dies getan haben und das Foto den grundlegenden Test bestanden hat, können Sie die Optionen für Ihre beabsichtigte Verwendung weiter erkunden.
Unser Gehirn verarbeitet Bilder 60.000 Mal schneller als das Lesen von Text. - Mike Parkinson
Ist es nützlich?
Ein Foto muss vor allem nützlich sein. Es ist nichts falsch daran, ein Foto als Platzhalter zu verwenden, um eine Seite aufzuhellen oder etwas Platz zu füllen, aber bedenken Sie selbst dann den Kontext, in dem Sie dieses Foto verwenden. Nützliche, hilfreiche, zum Nachdenken anregende Inhaltsfotos sind diejenigen, die unsere besondere Aufmerksamkeit erfordern. Nützliche Fotos sollten
- helfen uns, etwas besser zu verstehen,
- uns beibringen, wie man etwas benutzt, oder
- zeig uns wie etwas geht.
Ein schönes Beispiel für ein nützliches Foto im Webdesign ist die Square-Website.
Man merkt sofort, dass dieses Bild professionell aufgenommen wurde (schauen Sie sich die Hände und Fingernägel an). Am wichtigsten ist, dass es direkt kommuniziert, worum es bei dem Produkt geht und wie einfach es zu bedienen ist. Sehr nützliches, lehrreiches und lehrreiches Foto.
Ein weiteres Beispiel für ein nützliches Foto ist die Pencil-Website. Ähnlich wie im vorherigen Beispiel zeigt dieses Foto genau, worum es bei dem Produkt geht (ein Stift), wo und wie es verwendet werden kann (iPad-Anwendung).
Die Woodster-Website verwendet auch Fotos, um das Produkt zu erklären. Es ist klar, dass ihr Produkt verwendet wird, um Ihren Mac zu verbessern, aber auch hilfreiche USB-Anschlüsse zur Hand bietet. Stellen Sie sich dieses Produkt isoliert ohne Kontext vor (den iMac). Glaubst du, das Foto wäre so nützlich wie dieses?
Grovemade leistet hervorragende Arbeit, um eine Sammlung seiner Produkte auf einem einzigen Vollbild-Hintergrundfoto zu präsentieren. Es liegt auf der Hand, dass sie hochwertige Büroaccessoires aus Holz herstellen. Dieses Foto ist nicht nur nützlich, sondern auch sehr effektiv und emotional zugleich. Zu wirkungsvollen und emotionalen Fotos kommen wir gleich.
Wenn Sie sich die obigen Beispiele ansehen, werden Sie feststellen, dass alle Fotos ziemlich offensichtlich, selbsterklärend sind und die beabsichtigte Botschaft sehr gut vermitteln. Sie müssen nicht lange suchen, um herauszufinden, worum es bei dem Produkt/der Dienstleistung/der Website geht. All dies sind Merkmale eines nützlichen Fotos im Webdesign.
Ist es effektiv?
Ein wirkungsvolles Foto ist dasjenige, das zu einer Handlung auffordert, unser Verhalten beeinflusst und die beabsichtigte Botschaft klar kommuniziert. Insbesondere gute und wirkungsvolle Produktfotos sollen die Nutzer zum Kauf dieser Produkte animieren. Wir haben an den obigen Beispielen gesehen, dass brauchbare Fotos tatsächlich effektiv sind, da sie das Produkt begehrenswert machen und uns so ermutigen, sie zu kaufen. Immer wenn wir ein Foto sehen, das eine Verhaltensänderung auslöst, können wir es als wirksam bezeichnen.
Wenn man sich die Mobility-Website und diese saftigen roten Kopfhörer ansieht, wird man sofort angezogen und möchte sie möglicherweise kaufen!
Apple ist bekannt für Perfektionismus in allem, was sie tun. Die iPhone-Landingpage ist voll von brillanten und begehrenswerten Produktfotos, die Lust machen, eines ihrer Produkte zu besitzen.
Ein weiteres Beispiel für ein wirkungsvolles Foto ist die tsptr-Website. Bemerken Sie, wie der Mann auf dem Foto nach unten schaut, als ob Sie unten etwas erkunden können? In der Tat gibt es unten etwas.
Die Mapquest-Website vermittelt nicht nur mit der Bildsprache Emotionen, sondern lenkt die Augen der Nutzer durch geschickte Blickrichtung auf wichtige Inhalte der Seite, in diesem Fall den Link zum mobilen Download auf der linken Seite.
Poco People verwendet auf ihrer Homepage ein lustiges und unterhaltsames Foto. Man merkt sofort, dass da etwas Seltsames ist. Aus diesem Grund und der guten Verwendung von Farben, Licht und Belichtung wird Ihr Interesse geweckt, um zu sehen, worum es auf dieser Site geht.
Die Colossal-Website zeigt ein großes Foto auf der Homepage, das zeigt, was sie tun (sie malen große Anzeigen und Wandbilder von Hand) und wie sie es tun (sehen Sie den Mann auf der rechten Seite). Das Interessante an diesem Foto sind die Passanten auf der linken Seite. Sie wirken aufgeregt über das, was sie erleben, was Sie als Beobachter mit einbezieht und das ganze Foto und die Botschaft spannend und effektiv macht.
Ist es emotional?
Ein emotionales Foto sollte beim Betrachter eine emotionale Reaktion hervorrufen. Sei es nur angenehm anzusehen oder beruhigend oder verstörend auf eine Art und Weise, die uns zum Handeln zwingt, oder lustig und unterhaltsam oder attraktiv und begehrenswert, solange das Foto unsere Emotionen in irgendeiner Weise anspricht, wird es mehr haben Auswirkungen als eine, die dies nicht tut.
Frogdesign bietet auf ihrer Website eine Fallstudie über FEMA und Katastrophenhilfemanagement. Das Hauptfoto, kombiniert mit einem guten Slogan, ist sehr effektiv und emotional. Es erzählt eine Geschichte und es zeigt Gefahren und aufgrund derer fühlen wir uns daran gebunden.
Das Hauptfoto der Breath-Website ist sehr beruhigend. Kombiniert mit einem guten Slogan und der richtigen Blickrichtung überträgt die Frau auf dem Foto ihre Leichtigkeit auf den Betrachter. Bemerken Sie die Schaltflächenbeschriftung "Einatmen"?
Das Hauptfoto der Website von Shaun Groves erzählt eine großartige Geschichte über ihn. Es vermittelt dem Betrachter Glück, Vertrauen, Hoffnung, Freundschaft und Vorfreude, der sich daran bindet und Empathie für seine Arbeit empfindet.
Neben der Nützlichkeit und Wirksamkeit der Fotoauswahl von Relay Foods übertragen sie auch Emotionen über den von ihnen angebotenen Service. Die Frauen links und rechts zeigen ihre Freude an der Arbeit für sie, und weil es bei Relay Foods um Naturprodukte geht, ist die Mimik der Frauen auf diesen Fotos auf ihre Marken-/Servicebotschaft abgestimmt.
Die Macht der Gesichter
Es gibt sieben (oder acht) Grundemotionen:
- Freude
- Traurigkeit
- Verachtung
- Angst
- Ekel
- Überraschung
- Zorn
Sie sind universell und werden (meist) durch Mimik und körperliche Gesten kommuniziert. Wenn Sie Fotos von Personen verwenden, um Ihre beabsichtigte Botschaft zu kommunizieren, achten Sie auf diese sieben grundlegenden Emotionen und entscheiden Sie, welche Ihre Zielgruppe antreiben.
Nahaufnahmen von Menschen erregen sofort unsere Aufmerksamkeit und helfen, unsere Emotionen auszulösen, was sie zu einem starken Gestaltungselement macht.
Wenn wir ein Gesicht sehen, werden wir automatisch dazu gebracht, etwas zu fühlen oder uns in diese Person einzufühlen
Wir haben in früheren Beispielen bereits Fotos von Personen gesehen, aber lassen Sie uns sie etwas genauer untersuchen.
Auch wenn das Build Fire-Foto einer Frau nichts über ihr Produkt aussagt, verleiht es ihrem Produkt Persönlichkeit und ist eine nützliche und effektive Möglichkeit, die Aufmerksamkeit der Benutzer zu erregen. Der gleiche Effekt würde nicht erzielt, wenn statt der Frau nur ein Foto des iPhones vorhanden wäre.
Wenn Sie sich jemals entscheiden, ein großes Porträtfoto auf Ihrer persönlichen Website zu verwenden, grüße ich Sie, ich war dabei. Aber sei vorsichtig! Ein winziger Gesichtsausdruck kann einen großen Unterschied in der Botschaft ausmachen, die Sie kommunizieren. Daniel Eckler macht einen wirklich guten Job, sich dem Publikum zu präsentieren. Sein Gesichtsausdruck vermittelt Zuversicht, Ruhe und Vertrauen.
Menschen können erkennen, ob ein Lächeln echt oder gefälscht ist
Jeder weiß, was mit dem WTC passiert ist. Die Website des 9/11 Tribute Center ist den Geschichten derer gewidmet, die dort waren. Der Mann auf dem Foto sieht uns direkt an und hilft uns so, uns mit dem Thema der Site zu identifizieren, die uns in die Community einlädt.
Hinweis: Dies geschieht ohne Konfrontation; eine feine Linie!
Ein weiteres großartiges Beispiel dafür, die Botschaft mit einem Nahaufnahmefoto eines menschlichen Gesichts zu vermitteln, ist die Conservation-Website. Der Kayapo-Mann auf dem Foto vermittelt Autorität, Mut und Wertschätzung.
Wie Susan Weinschenk sagte, sind Nahaufnahmen auf einer Wohltätigkeitsseite am überzeugendsten, und das ist wahr. Save the Children zeigt ein Nahaufnahmefoto eines bedürftigen Kindes, das perfekt zum Slogan und Thema der Site passt. Beachten Sie die Blickrichtung zum Spendenbutton?
Wie kann man Fotos im Webdesign *nicht* verwenden?
Auch wenn wir viele tolle Beispiele für die Verwendung von Fotos in unserem Webdesign gesehen haben, können diese leicht missbraucht werden. Daher werde ich Ihnen einige Beispiele zeigen, wie Sie Fotos nicht verwenden und was Sie vermeiden sollten.
Nicht verwandtes Foto - ein Webdesign-Studio, das "maßgeschneiderte" Dienste anbietet, verwendet ein nicht verwandtes Hintergrundfoto (farbige Fäden), das einen falschen ersten Eindruck erzeugt und dem Besucher falsche Nachrichten sendet. Es gibt hier eine Bedeutung, aber es ist eine obskure Metapher.
Eine viel bessere Lösung wäre hier, entweder Volltonfarbe oder ein Teamgruppenfoto zu verwenden. Außerdem lassen sich digitale Produkte nicht maßschneidern.
Eine Software as Service, die Kollaborationstools für Teams anbietet, verwendet ein Foto einer besorgten Frau bei der Arbeit. Dies könnte den Eindruck erwecken, dass sie sich Sorgen um dieselbe Software macht, für die die Site wirbt. Eine viel bessere Lösung wäre hier, entweder die echten Produkt-Screenshots zu zeigen oder eine glückliche Frau zu zeigen, die ihr Produkt verwendet.
Unscharfer Fotohintergrund - wird nur als dekorativer Platzhalter verwendet, kommuniziert nichts über die Site und hat daher keine wirkliche Wirkung. Ich würde Ihr raten, unscharfe Fotohintergründe so gut wie möglich zu vermeiden, das können Sie besser machen ;)
Ein weiteres Foto, das völlig unabhängig vom Thema der Site ist. Auch wenn die Wörter "handgefertigt" und "Werkstatt" mit dem Foto selbst in Verbindung gebracht werden können, vermittelt es nicht das eigentliche Thema der Site. Bei Brand Bat dreht sich alles um die Entwicklung von Markenstrategien und mit der Fotoserie zum Thema Holzbearbeitung verpassen sie eine großartige Gelegenheit, ihre Botschaft zu kommunizieren.
Falsche Fotowahl - was war Ihr erster Eindruck, als Sie dieses Foto sahen? Zwei glückliche Menschen, die in einem Café stehen, helfen Ihrem Unternehmen, online erfolgreich zu sein. Recht? Nein, eine Full-Service-Webdesign-Agentur bietet diese Hilfe tatsächlich an, und das Foto sollte einen ihrer glücklichen und erfolgreichen Kunden zeigen. Dies kann möglicherweise auch ein Stock-Foto sein, das Sie vermeiden sollten.
Stockfotos - sie vermitteln fast nie die richtige Botschaft. Warum trägt ein Junge eine Brille und hält die Daumen hoch? Ist er ein Entwickler, der PHP-Codierungsdienste anbietet? Ich glaube nicht.
Die Nationwide-Website kann die Nachricht mit diesem Foto nicht kommunizieren. Erstens hat das Foto keinen Bezug zum Thema, die Frau scheint sich in die Nägel zu kauen (wir wissen, dass es sich um eine psychische Störung handelt), und der Bildschirm ihres Tablets ist unscharf. Dieses Foto zeigt Angst, Nervosität und Stress und ich glaube nicht, dass Nationwide das seinen Besuchern mitteilen wollte.
Abschließende Gedanken
In diesem Artikel drehte sich alles um die Verwendung großer Fotos auf Ihrer Website, aber es gibt viele andere Möglichkeiten, wie Fotos richtig verwendet werden können, um Ihr Publikum anzusprechen. Denken Sie schon früh in Ihrem Designprozess über Fotos nach. Wenn Sie die richtige Projektrecherche durchgeführt haben, haben Sie bereits viele Einblicke.
Investieren Sie in gute Fotoshootings: Ein großartiger Fotograf kann den Geschäftswert Ihrer Website um ein Vermögen steigern.
Was auch immer Sie entwerfen, Ihr Publikum besteht aus den Menschen, die von Ihrem Design profitieren. Das Verständnis des menschlichen Verhaltens ist wirklich der einzige Weg, um ein effektives Design zu erstellen. Dies gilt für die Auswahl der besten Fotos für Ihr nächstes Website-Design.
Weiterlesen
