Es war im Trend, große Hintergrundbilder mit relativ wenig Text für Überschriften und Intros auf Webseiten zu haben, einschließlich des Starts von Blog-Posts. Ich könnte unzählige Beispiele dafür nennen, aber ich glaube, Sie wissen genau, wovon ich spreche.
Was macht ein effektives Cover- / Hintergrundfoto aus? Was muss ich beachten, wenn ich nach Bildern suche oder beabsichtige, Bilder für meine Website aufzunehmen und zu bearbeiten?
website-design
images
background
design-principles
Zach Saucier
quelle
quelle
Antworten:
Müssen Sie dem Trend wirklich 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 gründlich über die Auswirkungen nach, die das Hinzufügen eines großen Bildes zu Ihrer Site 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 .
In Anbetracht dessen gibt es eine Menge Dinge zu beachten, wenn Sie ein Hintergrundbild für Ihre Website auswählen. Da diese Antwort so lang ist, finden Sie hier eine kurze Liste. Ich gebe detailliertere Informationen zu den einzelnen Beispielen.
Stellen Sie sicher, dass das Bild mit dem Inhalt zusammenhängt
Ein Foto, das nichts damit zu tun hat, kann nur schaden. Genau wie alles in Ihrem Design, wenn es nicht direkt zum Zweck Ihrer Website passt, werden Sie es los. Stellen Sie sicher, dass es in direktem Zusammenhang mit dem Inhalt steht , nicht später. Das Bild muss durch Text oder Layout einen zusätzlichen Kontext erhalten, damit Benutzer verstehen, dass es sich um eine Website und nicht nur um ein statisches Bild handelt.
Stellen Sie sicher, dass das Bild sagt, was Sie wollen
Alle Bilder haben eine Konnotation, die auf dem Inhalt des Bildes und dessen Stil basiert. Stellen Sie sicher, dass das Bild dem Gefühl entspricht, das Sie vermitteln möchten, sowie der Marke. Das Bild sollte über den Text hinaus zusätzliches Verständnis vermitteln. Stellen Sie außerdem sicher, dass Ihre Marke so aufgebaut wird, wie Sie es möchten.
Es versteht sich von selbst, dass das Bild optisch ansprechend sein sollte. Weitere Details zu den Merkmalen für ein attraktives Bild finden Sie weiter 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 bekannte Bilder meiden sollten, solange die Alternative genauso hochwertig und angemessen ist. Absolut einzigartig zu sein, ist jedoch nicht so wichtig wie ein gutes und angemessenes Image.
Verwenden Sie ein Bild von realen Dingen
Es gibt etwas an einem echten Bild (sogar eine hochbearbeitete Version), das einen großen Einfluss auf uns Menschen hat. Wir sehen gerne echte Dinge. Wenn immer möglich, entscheiden Sie sich für ein reales Bild über etwas Computergeneriertes, es sei denn, es passt überhaupt nicht zum gewünschten Inhalt oder Stil.
Menschen zu zeigen hat eine noch größere Wirkung, die sowohl gut als auch schlecht sein kann. Wenn es richtig gemacht wird, kann es Benutzern das Gefühl geben, dass die Erfahrung realer und persönlicher ist. Wenn schlecht gemacht, kann es macht es scheint , im persönlichen und billig. Mehr dazu hier .
Insbesondere Gesichter ziehen die Aufmerksamkeit auf sich, stellen Sie also sicher, dass sie ein geeignetes Gesicht sind, und platzieren Sie sie nur dort, wo es wirklich darauf ankommt. Manchmal kann es hilfreich sein, sie in einen anderen Kontext wie ein Buch oder ein iPad, einen Computer usw. zu stellen. Manchmal ist es besser, die Gesichter herauszuschneiden (denken Sie an eine Kleidungswebsite oder ein Mannequin). Das Gesicht einer Marke / eines Sprechers zu zeigen ist sehr effektiv, wenn es richtig gemacht wird. Ich kann es nur empfehlen, wenn Sie können.
Stellen Sie sicher, dass das Bild mit Ihrem Layout funktioniert
Ihr Benutzerfluss und Ihr Site-Layout sind wichtiger als jedes Bild, das Sie auswählen. Erstellen Sie sie zuerst. Wenn das beste Layout und der beste Ablauf oben etwas Freiraum aufweisen, sollten Sie ein Bild hinzufügen.
Stellen Sie sicher, dass keine wichtigen Teile des Bildes von dem Inhalt abgedeckt werden, den Sie haben. Verwenden Sie visuelle Richtlinien, um Benutzer zu den Inhalten zu führen, die sie sehen möchten (mehr dazu im nächsten Abschnitt).
Stellen Sie sicher, dass das Bild guten Fotografie- und Designregeln entspricht
Die Bilder sollten den Grundregeln der Fotografie, einschließlich der Drittelregel , folgen , 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 geben dem Bild mehr Zweck, indem sie dazu beitragen, die Aufmerksamkeit auf die wichtigen Teile des Bildes und den umgebenden Kontext zu lenken.
Stellen Sie sicher, dass das Bild Ihrem Farbschema entspricht
Alle Websites sollten ein einheitliches Erscheinungsbild haben, 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 diese können bei letzterem hilfreich sein), stellen Sie sicher, dass die Bildfarben zu Ihrem Gesamtfarbschema passen. Manchmal können Sie ein Bild auswaschen und dann einen Farbfilter anwenden.
Begrenzen Sie die Varianz innerhalb des Bildes
Machen Sie das visuelle Erscheinungsbild nicht zu beschäftigt. Wenn das Bild eine Reihe von Farben und Objekten enthält, ist es schwierig, Text darüber zu platzieren und ihn an das Layout anzupassen. Wie bereits erwähnt, erst den Inhalt erstellen und dann das Bild auswählen.
Wenn Sie vor dem Hinzufügen eines Farbfilters teilweise transparente Überlagerungen hinzufügen, ein Bild abdunkeln oder in Schwarzweiß auswaschen, können Sie unnötiges Rauschen reduzieren. Hintergrundfarben können auch hinter Text oder auf ein Element angewendet werden, um die Lesbarkeit zu verbessern.
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.
Stellen Sie sicher, dass das Bild 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 Pixel benötigen. Am besten ist es jedoch, eine Breite von mindestens 1200 Pixel anzustreben. Wir können auch das Laden großer Bilder für kleinere Bildschirme einsparen, indem wir unterschiedliche Bildgrößen basierend auf der Auflösung bereitstellen, mehr dazu hier . Versuchen Sie, die Ladezeit des Bildes zu optimieren, ohne die Bildqualität zu beeinträchtigen.
Stellen Sie sicher, dass Sie Rechte zur Verwendung des Bildes haben
Wenn du es nicht benutzen darfst, benutze es nicht . Wenn Sie nicht wissen, was das Copyright für das Bild ist , suchen Sie danach, aber verwenden Sie es erst, wenn Sie es wissen! Das Letzte, was Sie tun möchten, ist, wegen Verstoßes angeklagt 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 verwandtem Inhalt. Halte es einfach, aber (meistens) real. Denken Sie über die guten und schlechten Teile jedes Bildes nach, das Sie betrachten, und akzeptieren Sie nicht etwas, das mittelmäßig ist.
Zusätzliche Ressourcen:
quelle