Der Web Designers 'Guide zur Fotoauswahl

Fotografische Bilder ziehen unsere Aufmerksamkeit auf sich 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 bei der Bestimmung unseres ersten Eindrucks, aber sie können uns auch sagen, worum es bei der Website geht, und sie können ein großer Faktor für das Vertrauen sein. 

Bei richtiger Verwendung sind Fotos sehr effektiv und können die beabsichtigte Nachricht schnell an Ihr Publikum senden. Die Verwendung falscher 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 kümmern, die wir erstellen: Inhalte, Farben, Typografie, Hierarchie, Informationsarchitektur und andere Details, Fotos verdienen genauso viel Aufmerksamkeit hinsichtlich der Benutzerfreundlichkeit und der allgemeinen Benutzererfahrung auf Ihrer Website.

Der Umgang mit Fotos auf Websites sollte von Designern verstanden und effektiv angewendet werden. Dieser Artikel weist Sie in die richtige Richtung und zeigt Ihnen, wie Sie über Fotos nachdenken, wenn Sie sich entscheiden, eines für Ihr nächstes Webprojekt zu verwenden.

Verlangen Sie Aufmerksamkeit, indem Sie ein großes Foto verwenden

Personen scannen Bildschirme basierend auf früheren Erfahrungen und Erwartungen. Oben links ist der häufigste Ausgangspunkt für die Augen der Benutzer, auch wenn dies von den Lesemustern ihrer Kultur abhängt. Wenn Sie ein großes Foto auf der Seite verwenden, wird es sofort ihre Aufmerksamkeit auf sich ziehen und sie von ihrer üblichen Tendenz abbringen.

Foto als Inhalt behandeln

Ich bin sicher, dass Sie mit mir nicht streiten, dass ein Foto auf einer Webseite erscheint ist zufrieden, aber behandeln Sie es wirklich so? Verwenden Sie es nur als Add-On oder als hübscher Inhaltsfüller? Haben Sie alle Aspekte dieses bestimmten Inhalts berücksichtigt? Haben Sie das Foto richtig bewertet, bevor Sie es ausgewählt haben? Haben Sie die mentalen Modelle der Benutzer in Betracht gezogen und die Auswirkungen, die das Foto auf sie haben wird? Bietet das Foto aussagekräftige Informationen oder Hilfe für die aktuelle Aufgabe eines Benutzers? Dies sind nur einige der Fragen, die Sie beantworten müssen, bevor Sie ein Foto auf einer Webseite verwenden.

Fotos sollten niemals nur dazu benutzt werden, die Webseite aufzufrischen.

Ich habe viele Designer gesehen, die ein wunderschönes Fullscreen-Foto auf einer Webseite platziert haben, einen Slogan oder einen „Call to Action“ (Call to Action) hinzugefügt und dies für erledigt erklärt haben. In vielen Fällen wurde das Foto nicht bewertet, 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

Bei der Auswahl eines Fotos in Ihrem Design sollten Sie einige Punkte beachten.Ich gehe davon aus, dass Sie bereits wissen, wie Sie einschätzen grundlegende Aspekte von einem Foto sind dies: Qualität, Größe, Zusammensetzung und Belichtung. Qualität in Bezug auf die erforderliche Auflösung, die Größe des Bildes und vorzugsweise seine Ausrichtung für die beabsichtigte Verwendung, die effektive Zusammensetzung und das Zuschneiden des Fotos, um Aufmerksamkeit zu erregen, und ordnungsgemäß belichtete Motive auf dem Foto.

Wenn Sie dies getan haben und das Foto den grundlegenden Test bestanden hat, können Sie die Optionen für Ihren beabsichtigten Gebrauch weiter erkunden.

Unser Gehirn verarbeitet Bilder 60.000 Mal schneller als das Lesen von Text. - Mike Parkinson

Ist es nützlich?

Vor allem ein Foto muss nützlich sein. Es ist nichts Falsches daran, ein Foto als Platzhalter zu verwenden, um eine Seite aufzuhellen oder ein wenig Platz zu füllen. Berücksichtigen Sie jedoch auch den Kontext, in dem Sie das Foto verwenden. Nützliche, hilfreiche, zum Nachdenken anregende Inhaltsfotos sind es, die unsere besondere Aufmerksamkeit erfordern. Nützliche Fotos sollten 

  • hilf uns etwas besser zu verstehen, 
  • lehre uns, wie man etwas benutzt, oder 
  • zeig uns, wie etwas gemacht wird. 

Ein schönes Beispiel für ein nützliches Foto im Webdesign ist die Square-Website.

Sie können sofort erkennen, dass dieses Bild professionell aufgenommen wurde (schauen Sie sich die Hände und Fingernägel an). Am wichtigsten ist jedoch, dass direkt kommuniziert wird, worum es bei dem Produkt geht und wie einfach es zu verwenden 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 sich bei dem Produkt handelt (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 dazu verwendet wird, Ihren Mac zu verbessern, aber auch nützliche USB-Verbindungen zur Verfügung stellt. Stellen Sie sich vor, dass dieses Produkt ohne Kontext (der iMac) isoliert ist. Glaubst du, das Foto wäre so nützlich wie dieses?

Grovemade bietet eine großartige Aufgabe, eine Sammlung ihres Produkts auf einem einzigen Hintergrundbild im Vollbildmodus zu präsentieren. Es ist offensichtlich, dass sie hochwertiges Bürozubehör aus Holz herstellen. Dieses Foto ist nicht nur nützlich, es ist auch sehr effektiv und emotional zugleich. Wir werden gleich zu effektiven und emotionalen Fotos kommen.

Wenn Sie sich die obigen Beispiele ansehen, werden Sie feststellen, dass alle Fotos ziemlich offensichtlich und selbsterklärend sind und die beabsichtigte Nachricht sehr gut kommunizieren. Sie müssen nicht lange suchen, um herauszufinden, worum es sich bei dem Produkt / der Dienstleistung / der Website handelt. Dies sind alles Merkmale eines nützlichen Fotos im Webdesign.

Ist es effektiv??

Ein effektives Foto ist dasjenige, das zum Handeln auffordert, unser Verhalten beeinflusst und die beabsichtigte Botschaft klar kommuniziert. Insbesondere gute und effektive Produktfotos sollten die Benutzer zum Kauf dieser Produkte anregen. Aus den obigen Beispielen haben wir gesehen, dass verwendbare Fotos tatsächlich effektiv sind, da sie das Produkt wünschenswert machen und uns daher zum Kauf animieren. Wenn wir ein Foto sehen, das eine Änderung unseres Verhaltens auslöst, können wir es als Sein beschreiben Wirksam.

Wenn Sie sich die Mobility-Website und die saftigen roten Kopfhörer ansehen, werden Sie sofort angezogen und möchten sie möglicherweise kaufen!

Apple ist bekannt für Perfektionismus bei allem, was sie tun. Die iPhone-Landingpage ist voller brillanter und begehrenswerter Produktfotos, bei denen Sie eines ihrer Produkte besitzen möchten.

Ein anderes Beispiel für ein effektives Foto ist die tsptr-Website. Beachten Sie, wie der Mann auf dem Foto nach unten schaut, als wäre unten etwas zu entdecken? In der Tat ist da unten etwas.

Die Mapquest-Website vermittelt nicht nur Emotionen mit den Bildern, sondern führt die Benutzer mithilfe einer intelligenten Blickrichtung zu wichtigen Inhalten auf der Seite, in diesem Fall dem Link für den mobilen Download.

Poco People verwendet auf ihrer Homepage ein lustiges und unterhaltsames Foto. Sie können sofort feststellen, dass etwas seltsam ist. Aufgrund dessen und durch die gute Verwendung von Farben, Licht und Belichtung wird Ihr Interesse geweckt, um zu sehen, worum es bei dieser Website geht.

Auf der Colossal-Website ist auf der Homepage ein großes Foto zu sehen, das zeigt, was sie tun (sie malen große Anzeigen und Wandbilder) und wie sie es tun (siehe den Mann auf der rechten Seite). Das Interessante an diesem Foto sind die Menschen, die links vorbeigehen. Sie sehen begeistert aus, was sie miterleben, was Sie als Beobachter mit einbezieht und das gesamte Foto und die Botschaft aufregend und effektiv macht.

Ist es emotional??

Ein emotionales Foto sollte zu einer emotionalen Reaktion des Betrachters führen. Sei es einfach nur angenehm anzusehen oder zu beruhigen oder auf eine Art und Weise zu stören, die uns dazu zwingt, etwas zu tun, oder lustig und unterhaltsam oder attraktiv und begehrenswert, solange das Foto unsere Emotionen irgendwie anspricht, wird es größer sein Auswirkungen als eine, die nicht tut.

Frogdesign bietet auf seiner Website eine Fallstudie zu FEMA und dem Katastrophenhilfemanagement. Das Hauptfoto, kombiniert mit einem guten Slogan, ist sehr effektiv und emotional. Es erzählt eine Geschichte und zeigt Gefahr und aufgrund der Tatsache, dass wir uns damit verbunden fühlen. 

Das Hauptfoto der Breath-Website ist sehr beruhigend. Kombiniert mit einem guten Slogan und einer richtigen Blickrichtung überträgt die Frau auf dem Foto ihre Atmungsaktivität auf den Betrachter. Beachten Sie die Schaltfläche "Inhale"? 

Das Hauptfoto der Website von Shaun Groves erzählt eine großartige Geschichte über ihn. Sie vermittelt dem Betrachter Glück, Vertrauen, Hoffnung, Freundschaft und Vorfreude, der daran gefesselt ist und Mitgefühl für seine Arbeit empfindet.

Neben der Nützlichkeit und Wirksamkeit der Fotoauswahl von Relay Foods vermitteln sie auch Emotionen über den angebotenen Service. Die Frauen links und rechts zeigen ihre Freude an der Arbeit für sie. Da es bei Relay Foods nur um Naturprodukte geht, stimmen die Gesichtsausdrücke der Frauen auf diesen Fotos mit ihrer Marken- / Servicebotschaft überein.

Die Kraft der Gesichter

Es gibt sieben (oder acht) grundlegende Emotionen: 

  1. Freude
  2. Traurigkeit
  3. Verachtung
  4. Angst
  5. der Ekel
  6. Überraschung
  7. Zorn

Sie sind universell und werden (normalerweise) durch Gesichtsausdruck und körperliche Gesten kommuniziert. Wenn Sie Fotos von Personen verwenden, um Ihre beabsichtigte Botschaft mitzuteilen, achten Sie auf diese sieben grundlegenden Emotionen und entscheiden Sie, welche die Zielgruppe antreiben.

Nahaufnahmen von Menschen ziehen sofort unsere Aufmerksamkeit auf sich und helfen, Emotionen auszulösen, die sie zu einem starken Gestaltungselement machen. 

Wenn wir ein Gesicht sehen, werden wir automatisch dazu gebracht, etwas zu fühlen oder in diese Person hineinzufühlen

Wir haben bereits Fotos von Menschen in vorherigen Beispielen gesehen, aber lassen Sie uns diese etwas näher untersuchen.

Auch wenn das Build-Fire-Foto einer Frau uns nichts über ihr Produkt sagt, fügt es ihrem Produkt Persönlichkeit hinzu und ist eine nützliche und effektive Möglichkeit, die Aufmerksamkeit der Benutzer auf sich zu ziehen. Der gleiche Effekt kann nicht erzielt werden, wenn statt der Frau nur ein Foto des iPhone vorhanden wäre.

Wenn Sie sich jemals entschließen, ein großes Porträtfoto auf Ihrer persönlichen Website zu verwenden, grüße ich Sie. Ich war dort. Aber sei vorsichtig! Ein winziger Gesichtsausdruck kann einen großen Unterschied in der Nachricht bewirken, die Sie kommunizieren. Daniel Eckler macht es wirklich gut, sich dem Publikum vorzustellen. Sein Gesichtsausdruck vermittelt Vertrauen, Ruhe und Vertrauen. 

Leute können sagen, wenn ein Lächeln echt oder falsch ist

Jeder weiß, was mit dem WTC passiert ist. Die 9/11 Tribute Center-Website widmet sich den Geschichten derjenigen, die dort waren. Der Mann auf dem Foto schaut uns direkt an und hilft uns dabei, sich mit dem Thema der Website in Verbindung zu setzen, die uns in die Community einlädt.

Hinweis: dies geschieht ohne Konfrontation; eine feine Linie!

Ein weiteres gutes Beispiel für die Übermittlung der Nachricht mit einem Foto aus der Nähe eines menschlichen Gesichts 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ätigkeitsstätte am überzeugendsten, und das stimmt. Save the Children zeigt ein Nahaufnahmenfoto eines Kindes in Not, das perfekt mit dem Slogan und dem Thema der Website übereinstimmt. Beachten Sie die Blickrichtung zum Spendenknopf?

Wie * nicht * Fotos in Webdesign verwenden

Auch wenn wir viele gute 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 nicht Fotos verwenden und was zu vermeiden ist.

Foto ohne Bezug - Ein Webdesignstudio, das maßgeschneiderte Dienste anbietet, verwendet ein Hintergrundfoto (farbige Fäden), das einen falschen ersten Eindruck erzeugt und falsche Meldungen an den Besucher sendet. Hier ist Bedeutung, aber es ist eine undeutliche Metapher.

 Eine viel bessere Lösung wäre hier, entweder einfarbig oder ein Team-Gruppenfoto zu verwenden. Außerdem können digitale Produkte nicht maßgeschneidert werden.

Eine Software als Service, die Collaboration-Tools für Teams anbietet, verwendet ein Foto einer besorgten Frau bei der Arbeit. Dies könnte den Eindruck erwecken, dass sie sich um die gleiche Software Sorgen macht, die die Website bewirbt. Eine viel bessere Lösung wäre, entweder die echten Produkt-Screenshots zu zeigen oder eine glückliche Frau mit ihrem Produkt zu zeigen.

Unscharfer Fotohintergrund - Wird nur als dekorativer Platzhalter verwendet, kommuniziert nichts über die Site und hat somit keine wirkliche Wirkung. Ich würde dir raten, unscharfe Fotohintergründe so weit wie möglich zu vermeiden, du kannst es besser machen;)

Ein anderes völlig unabhängiges Foto zum Thema der Website. Obwohl die Wörter "handgefertigt" und "Werkstatt" sich auf das Foto selbst beziehen können, kommunizieren sie nicht mit dem eigentlichen Thema der Website. Bei Brand Bat geht es darum, Markenstrategien zu entwickeln, und mit der Serie von Fotos, die mit der Holzverarbeitung zu tun haben, verpassen sie eine großartige Gelegenheit, ihre Botschaft zu kommunizieren.

Falsche Fotoauswahl - Was war Ihr erster Eindruck, als Sie dieses Foto gesehen haben? Zwei glückliche Menschen, die in einem Café stehen, tragen dazu bei, dass Ihr Unternehmen online erfolgreich ist. Recht? Nein, eine Full-Service-Agentur für Webdesign bietet diese Hilfe an, und das Foto sollte einen ihrer glücklichen und erfolgreichen Kunden zeigen. Möglicherweise ist dies auch ein Foto, das Sie vermeiden sollten.

Stock Fotos - Sie kommunizieren 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 landesweite Website kann die Nachricht mit diesem Foto nicht kommunizieren. Erstens, das Foto hat nichts mit dem Motiv zu tun, die Frau scheint sich die Nägel zu beißen (wir wissen, dass es sich um eine psychische Störung handelt) und der Bildschirm auf ihrem Tablet ist unscharf. Dieses Foto zeigt Angst, Nervosität und Stress, und ich glaube wirklich nicht, dass Nationwide das seinen Besuchern mitteilen wollte.

Abschließende Gedanken

In diesem Artikel ging es nur darum, große Fotos auf Ihrer Website zu verwenden, aber es gibt viele andere Möglichkeiten, wie Fotos richtig verwendet werden können, um Ihr Publikum zu begeistern. Überlegen Sie sich schon früh in Ihrem Designprozess über Fotos. Wenn Sie richtig recherchiert haben, haben Sie bereits viele Einblicke. 

Investieren Sie in gute Fotoshootings: Ein großartiger Fotograf kann den geschäftlichen Wert Ihrer Website um ein Vielfaches steigern.

Was auch immer Sie entwerfen, Ihr Publikum besteht aus den Menschen, die von Ihrem Design profitieren werden. Das Verständnis des menschlichen Verhaltens ist wirklich der einzige Weg, um effektives Design zu gestalten. Dies gilt für die Auswahl der besten Fotos für das nächste Website-Design.

Lesen Sie weiter

  • Fotos als Webinhalt
  • 15 Fragen, die Sie sich beim Auswerten eines Fotos stellen sollten
  • Verwendbarkeit von Webfotos
  • Fotos für die Interaktion
  • Fallbeispiel: Die emotionale Anziehungskraft von Schönheitsmarken
  • Die Bedeutung von Emotionen im Design