Wie wähle ich ein gutes Titelbild für meine Website aus?

Es ist im Trend, große Hintergrundbilder mit relativ wenig Text darüber für Kopfzeilen und Intros von Webseiten zu haben, einschließlich des Beginns von Blog-Posts. Ich könnte unzählige Beispiele dafür anführen, aber ich denke, Sie wissen genau, wovon ich spreche.

Was macht ein wirkungsvolles Titel-/Hintergrundfoto aus? Was sollte ich beachten, wenn ich nach Bildern suche oder plane, Bilder für meine Website aufzunehmen und zu bearbeiten?

Große Hintergrundvideos sind jetzt im Trend.
Gut gemacht, eine der besten selbst beantworteten Fragen auf der Website (ich kann mich an keine anderen erinnern, also möglicherweise die beste). :)

Antworten (1)

Müssen Sie wirklich dem Trend folgen?

Tu niemals etwas, weil es ein Trend ist. Tun Sie Dinge, weil sie gut für die Benutzererfahrung sind, denn das ist das Beste für Ihr Unternehmen und Ihr Design. Denken Sie wirklich genau über die Auswirkungen nach, die das Hinzufügen eines großen Bildes zu Ihrer Website haben wird, und wägen Sie die anderen Optionen ab, die Sie haben. Sie müssen diese Technik nicht anwenden, um eine "moderne" Website zu haben .

Abgesehen davon gibt es bei der Auswahl eines Hintergrundbilds für Ihre Website eine Menge Dinge zu beachten. Da diese Antwort so lang ist, hier ist die Liste in Kürze; Ich gebe mehr Details zu jedem einschließlich Beispielen weiter unten.

  • Stellen Sie sicher, dass das Bild mit dem Inhalt zusammenhängt
  • Stellen Sie sicher, dass das Bild sagt, was Sie wollen
  • Stellen Sie sicher, dass das Bild relativ einzigartig ist
  • Verwenden Sie ein Bild von realen Dingen
  • Stellen Sie sicher, dass das Bild mit Ihrem Layout funktioniert
  • Stellen Sie sicher, dass das Bild guten Fotografie- und Designregeln entspricht
  • Stellen Sie sicher, dass das Bild Ihrem Farbschema entspricht
  • Begrenzen Sie die Varianz innerhalb des Bildes
  • Stellen Sie sicher, dass die Bildgröße groß genug ist
  • Stellen Sie sicher, dass Sie die Rechte zur Verwendung des Bildes haben
  • Stellen Sie sicher, dass die Fotoqualität hoch ist

Stellen Sie sicher, dass das Bild mit dem Inhalt zusammenhängt

Ein Foto ohne Bezug wird nichts als Schaden anrichten. Genau wie alles in Ihrem Design, wenn es nicht direkt zum Zweck Ihrer Website passt, dann entfernen Sie es. Stellen Sie sicher, dass es sich direkt auf den Inhalt um ihn herum bezieht , nicht auf etwas späteres. Das Bild muss durch Text oder Layout zusätzlichen Kontext haben, damit die Benutzer verstehen, dass es sich um eine Website und nicht nur um ein statisches Bild handelt.

Geben Sie hier die Bildbeschreibung ein


Stellen Sie sicher, dass das Bild sagt, was Sie wollen

Alle Bilder haben eine Konnotation, die auf dem Inhalt des Bildes und seiner Gestaltung basiert. Stellen Sie sicher, dass das Image zu dem Gefühl passt, das Sie vermitteln möchten, sowie zur Marke. Das Bild sollte über das hinausgehen, was der umgebende Text bietet, zusätzliches Verständnis vermitteln. Stellen Sie außerdem sicher, dass es dazu beiträgt, Ihre Marke so aufzubauen, wie Sie es möchten.

Geben Sie hier die Bildbeschreibung ein

Es versteht sich von selbst, dass das Bild optisch ansprechend sein sollte. Weitere Details zu Merkmalen für ein attraktives Bild finden Sie unten.


Stellen Sie sicher, dass das Bild relativ einzigartig ist

Benutzerdefinierte Bilder sind besser als Standardbilder, vorausgesetzt, die Qualität ist mindestens gleich. Das bedeutet, dass Sie auf sehr bekannte Stock-Bilder verzichten sollten, solange die Alternative genauso hochwertig und passend ist. Absolut einzigartig zu sein ist jedoch nicht so wichtig wie ein tolles, angemessenes Image.

Geben Sie hier die Bildbeschreibung ein


Verwenden Sie ein Bild von realen Dingen

Es gibt etwas an einem echten Bild (selbst einer stark bearbeiteten Version), das einen großen Einfluss auf uns Menschen hat. Wir sehen gerne echte Dinge. Entscheiden Sie sich nach Möglichkeit für ein echtes Bild gegenüber einem computergenerierten, es sei denn, es passt nicht ganz zu dem Inhalt oder Stil, den Sie anstreben.

Geben Sie hier die Bildbeschreibung ein

Menschen zu zeigen hat eine noch größere Wirkung, die sowohl gut als auch schlecht sein kann. Wenn es richtig gemacht wird, kann es den Benutzern das Gefühl geben, dass die Erfahrung realer und persönlicher ist. Wenn es schlecht gemacht ist, kann es unpersönlich und billig erscheinen. Mehr dazu hier .

Gesichter ziehen besonders Aufmerksamkeit auf sich, stellen Sie also sicher, dass es sich um ein angemessenes Gesicht handelt, und platzieren Sie sie nur dort, wo es wirklich wichtig ist. Manchmal kann es hilfreich sein, sie in einen anderen Kontext wie ein Buch, ein iPad, einen Computer usw. zu stellen. In anderen Fällen ist es angemessener, die Gesichter auszuschneiden (denken Sie an eine Bekleidungs-Website oder eine Schaufensterpuppe). Das Gesicht einer Marke/eines Sprechers zu zeigen ist sehr effektiv, wenn es richtig gemacht wird, ich empfehle es sehr, wenn Sie können.

Geben Sie hier die Bildbeschreibung ein


Stellen Sie sicher, dass das Bild mit Ihrem Layout funktioniert

Ihr Benutzerfluss und Ihr Website-Layout sind wichtiger als jedes Bild, das Sie auswählen. Erstellen Sie sie zuerst. Wenn das beste Layout und der beste Fluss oben etwas Freiraum haben, sollten Sie ein Bild hinzufügen.

Stellen Sie sicher, dass keine wichtigen Teile des Bildes von Ihren Inhalten verdeckt werden. Verwenden Sie visuelle Richtlinien, um Benutzer zu den Inhalten zu führen, die sie sehen sollen (mehr dazu im nächsten Abschnitt).

Geben Sie hier die Bildbeschreibung ein


Stellen Sie sicher, dass das Bild guten Fotografie- und Designregeln entspricht

Die Bilder sollten den Grundregeln der Fotografie folgen, einschließlich der Drittel-Regel , visuelle Linien verwenden, sich gut auf den Hauptinhalt konzentrieren, das Motiv richtig einrahmen, einen guten Hintergrund haben und unter anderem Symmetrie und Muster aufweisen. Weitere Informationen dazu finden Sie hier oder suchen Sie online nach weiteren Ressourcen.

Diese Prinzipien verleihen dem Bild mehr Zweck, indem sie helfen, die Aufmerksamkeit auf die wichtigen Teile des Bildes und den umgebenden Kontext zu lenken.

gute Bildregeln


Stellen Sie sicher, dass das Bild Ihrem Farbschema entspricht

Alle Websites sollten sich einheitlich anfühlen, einschließlich eines Farbschemas. Unabhängig davon, ob Sie zuerst das Farbschema und dann das Bild oder das Bild und dann das Farbschema auswählen ( Tools wie dieses können bei letzterem helfen), stellen Sie sicher, dass die Bildfarben zu Ihrem Gesamtfarbschema passen. Manchmal kann es gut funktionieren, ein Bild auszuwaschen und dann einen Farbfilter anzuwenden.

Beschr


Begrenzen Sie die Varianz innerhalb des Bildes

Machen Sie das visuelle Erscheinungsbild nicht überladen. Wenn ein Bild viele Farben und Objekte enthält, ist es schwierig, Text darüber zu platzieren und es an das Layout anzupassen. Wie bereits erwähnt, erstellen Sie zuerst den Inhalt und wählen Sie dann das Bild aus.

Das Hinzufügen teilweise transparenter Überlagerungen, das Abdunkeln eines Bildes oder das Auswaschen zu Schwarzweiß vor dem Hinzufügen eines Farbfilters kann dazu beitragen, unnötiges Rauschen zu reduzieren. Außerdem können Hintergrundfarben hinter Text oder auf einem Element angewendet werden, um die Lesbarkeit zu verbessern.

Geben Sie hier die Bildbeschreibung ein

Das obige Bild verdunkelt das Originalbild und verwendet einige Schatten an den Rändern, um das Rauschen zu reduzieren. Das folgende Bild scheint eine teilweise transparente dunkle Überlagerung zu verwenden, um dasselbe zu tun.

Geben Sie hier die Bildbeschreibung ein


Stellen Sie sicher, dass die Bildgröße groß genug ist

Es versteht sich von selbst, dass das verwendete Bild groß genug sein sollte, um jeden Bildschirm ohne Dehnung abzudecken. Das bedeutet, dass wir für Bildschirme in voller Größe Bilder mit einer Mindestauflösung von 1024 x 768 Pixeln haben müssen, aber es ist am besten, eine Breite von mindestens 1200 Pixeln anzustreben. Wir können auch das Laden großer Bilder für kleinere Bildschirme sparen, indem wir unterschiedliche Bildgrößen basierend auf der Auflösung bereitstellen, mehr dazu hier . Versuchen Sie, die Bildladezeit so weit wie möglich zu optimieren, ohne auf die Bildqualität zu verzichten.


Stellen Sie sicher, dass Sie die Rechte zur Verwendung des Bildes haben

Wenn Sie es nicht verwenden dürfen, verwenden Sie es nicht . Wenn Sie nicht wissen, was das Urheberrecht für das Bild ist , suchen Sie danach, aber verwenden Sie es nicht, bis Sie es wissen! Das Letzte, was Sie tun möchten, ist, wegen Verletzung verklagt zu werden.


Stellen Sie sicher, dass die Fotoqualität hoch ist

Verwenden Sie keine körnigen oder verschwommenen Bilder. Verwenden Sie kein Foto mit fragwürdigem oder nicht relevantem Inhalt. Halten Sie es einfach, aber (meistens) echt. Denken Sie gründlich über die guten und schlechten Teile jedes Bildes nach, das Sie in Betracht ziehen, und akzeptieren Sie nichts, das mittelmäßig ist.

Zusätzliche Ressourcen:

Gute Antwort. Ich wäre wahrscheinlich zu prägnant gewesen: "Stellen Sie sicher, dass es ein gutes Foto ist und für die Bedürfnisse und Ziele Ihrer Website relevant ist" :)
@DA01 Ich stimme dieser Aussage zwar voll und ganz zu, aber manche Leute brauchen etwas mehr Hilfe :)