Alles, was Sie über das Design von Heldenbildern wissen müssen
Veröffentlicht: 2020-08-18Alles, was Sie über das Design von Heldenbildern wissen müssen
Hero-Bilder sind die großen Bilder oder eine Reihe von Bildern, die prominent auf einer Homepage angezeigt und manchmal in E-Mail-Designs verwendet werden. Sie spielen tatsächlich eine sehr wichtige Rolle für alle Unternehmen, daher ist es wichtig, ein oder zwei Dinge über das Design von Heldenbildern zu wissen.
Warum sollten Sie ein Heldenbild haben?
- Es kann Ihnen helfen, Ihre Marke aufzubauen und Ihre Markengeschichte zu erzählen. Sie können diese Bilder verwenden, um Informationen über die Geschichte hinter Ihrer Marke zu geben.
- Sie können damit auch die am häufigsten gestellten Fragen Ihrer Kunden beantworten oder ein zeitkritisches Problem ansprechen.
- Hero-Bilder können auch verwendet werden, um Ihre Kunden über das Wertversprechen Ihrer Marke zu informieren.
- Wenn Sie eine wichtige Ankündigung zu machen haben, wie zum Beispiel einen Verkauf, der bald stattfinden wird, kann dies hilfreich sein. Dies ist eine großartige Idee für die E-Mails, die Sie auch versenden werden.
- Hero-Bilder können verwendet werden, um ein Produkt oder eine komplette Produktlinie zu präsentieren.
Was sollte in einem Hero-Image-Design enthalten sein?
Es gibt drei Hauptelemente, die Sie in Ihrem Hero-Image-Design haben müssen, um es perfekt für Ihre Marke zu machen. Bei korrekter Ausführung fungiert es tatsächlich als Call-to-Action-Bild.
- Das Bild selbst sollte hochauflösende Fotografie, auffälliges Grafikdesign oder Bilder enthalten. Die Bildauflösung wird aufgelistet, damit Sie wissen, welche Größe die Bilder haben sollten.
- Sie sollten auch einen kurzen, prägnanten und aussagekräftigen Inhalt haben, der dem Bild hinzugefügt werden kann. Dies sollte die Nachricht sofort nach Hause treiben.
- Alle Heldenbilder müssen einen sehr aussagekräftigen Call-to-Action-Text oder -Button enthalten. Einige gute Beispiele wären „Jetzt einkaufen“, „Mehr erfahren“, „Unsere Geschichte lesen“ oder „Jetzt kaufen“.
Best Practices zum Erstellen von Hero-Images
Verwenden Sie qualitativ hochwertige Bilder
Es ist wirklich wichtig, dass Ihre Bilder von hoher Qualität sind, egal ob sie sich auf einer Website oder in einer E-Mail befinden. Aufgrund der Größe der heutigen Computer- und Smartphone-Bildschirme können Kunden leicht erkennen, ob Ihr Hero-Image-Design verschwommen oder verpixelt aussieht. Wenn Sie diese Probleme vermeiden möchten, können Sie die Größe Ihrer Bilder jederzeit ändern, indem Sie sie verkleinern. Aber niemals vergrößern. Sobald Sie dies tun, wird Ihr Bild verpixelt.
Die Höhe und Breite des Heldenbildes hängt von Ihrem jeweiligen Layout ab. Vielleicht möchten Sie, dass Ihr Hero-Bild die gesamte Breite der Seite einnimmt? Verwenden Sie in diesem Fall VW oder VH (was die volle Breite oder Höhe des Darstellungsbereichs bedeutet).
Sie sollten auch sicherstellen, dass Sie alle von Ihnen verwendeten Stock-Bilder anpassen und dass der Hintergrund nicht zu voll ist, insbesondere wenn Sie Text hinzufügen. Die Verwendung von Farbkontrasten durch Überlagerungen und Scrims ist auch eine großartige Möglichkeit, Text und Hintergrund klarer zu machen. Beachten Sie zum Beispiel den weißen Text in der Abbildung unten.
Ladezeiten für die Bilder
Wenn Sie qualitativ hochwertige Bilder verwenden, spielen die Ladezeiten eine entscheidende Rolle. Wenn die Ladezeit von 0,4 auf 0,9 Sekunden steigt, sinkt der Traffic um 20 %. Einige der bewährten Methoden, die Sie befolgen sollten, um dies zu vermeiden, sind:
- Ändern Sie die Bildgröße selbst und lassen Sie dies nicht automatisch vom Browser tun.
- Komprimieren des ausgewählten Bildes mit Photoshop. Sie können auch speziell dafür vorgesehene Komprimierungswerkzeuge verwenden.
- Versuchen Sie, sowohl mit PNG- als auch mit JPG-Bildern zu arbeiten, um zu sehen, welcher Typ am besten funktioniert, ohne die Ladezeit zu verlängern.
Demonstration, um die Attraktivität zu steigern
Ihr Hero-Image-Design sollte dem Publikum zeigen, was Sie genau so verkaufen, wie es ist. Wenn Sie beispielsweise maßgeschneiderte Regenschirme verkaufen möchten, können Sie ein Bild von Menschen im Regen präsentieren, die diese verwenden.
Wenn Ihr Bild auf einen Slogan hinweist oder Kunden über einen Verkauf informiert, stellen Sie sicher, dass nur eine kleine Menge an Text verwendet wird. Eine weitere wichtige Sache, die Sie beachten sollten, ist, dass Bildunterschriften unter Ihren Bildern 300 % häufiger gelesen werden als der Fließtext. Lassen Sie sich davon eine Vorstellung davon geben, wie genau, kompatibel und zielgerichtet Ihre Beschriftung für das Heldenbild sein sollte.
Eine andere Taktik, die Sie ausprobieren können, ist die Verwendung einer Reihe von Hero-Bannern anstelle eines einzelnen Bildes, das hochwertige Bilder mit einem starken und überzeugenden Aufruf zum Handeln kombiniert.
Relevanz bewahren
Ihr Heldenbild ist wie eine Einführung in Ihre Botschaft. Es hilft Ihren Kunden zu verstehen, was sie vom Rest Ihrer E-Mail oder Ihrer Website erwarten können. Wenn das Bild Ihre Botschaft nicht klar vermittelt, liefert es dem Kunden auch keinen Mehrwert.
Es wäre auch eine völlige Verschwendung des Platzes, den Sie für das Design verbraucht haben. Noch gefährlicher ist es, wenn das Image nicht der Vorstellung des Kunden von dem Produkt oder der Dienstleistung entspricht. Es wird dann nur verwirrend sein.
Um die Relevanz aufrechtzuerhalten, müssen Sie Folgendes berücksichtigen:
- Ist das verwendete Bild eine Visualisierung Ihres Ziel-Keywords?
- Verdeutlicht Ihr Bild den Zweck Ihrer Website oder E-Mail?
- Wird der Fluss der Seite oder der E-Mail bis hin zum Call-to-Action durch das verwendete Bild unterstützt?
- Wie viel Glaubwürdigkeit und Authentizität verleiht das Image Ihrer Marke?
- Wird der Nutzen und die Relevanz durch das Image gesteigert?
- Löst das Bild Emotionen aus, die Kunden dazu zwingen, diesen Aufruf zum Handeln zu befolgen?
- Kann Ihr Image den Kunden als Helden darstellen, nachdem er das Produkt oder die Dienstleistung erworben hat?
Betonung des Call-to-Action
Zuvor haben wir darauf hingewiesen, dass es wichtig ist, den Call-to-Action in Ihrem Hero-Image-Design zu haben. Schauen wir uns nun an, was Sie tun können, um sofort die Aufmerksamkeit darauf zu lenken. Beispielsweise sollte Ihr Aufruf zum Handeln nicht mit dem Bild konkurrieren. Allerdings sollte es wirklich auffallen. Das folgende Beispiel ist die perfekte Kombination aus einer relevanten und emotionalen Botschaft, während das Gewicht des Call-to-Action-Buttons im Verhältnis zum Gesamtbild erhalten bleibt. Auch hier ist der Einsatz von Farbe sehr wichtig.
Um sicherzustellen, dass der CTA auffällt, können Sie einen Unschärfetest auf dem Bild durchführen. Auf diese Weise können Sie erkennen, ob das Auge des Kunden dorthin gelenkt wird, wo Sie es benötigen. Sie müssen lediglich einen Screenshot der Website oder des E-Mail-Designs machen und dann mit Adobe XD einen Unschärfeeffekt darauf anwenden. Sobald das Bild verschwommen ist, sehen Sie, was Ihre Aufmerksamkeit auf sich zieht. Gefällt Ihnen nicht, was Sie sehen? Dann ist es Zeit für eine Überarbeitung.
Präsentieren Sie echte Menschen, keine „echten falschen“ Menschen
Wenn Sie Menschen in Ihr Hero-Image-Design einbeziehen, präsentieren Sie Bilder von echten Menschen, die Ihre Marke repräsentieren. Halten Sie sich von Stockfotos fern, die nur eine professionell aussehende Person zeigen, die mit einem breiten Lächeln auf den Bildschirm starrt. Diese Bilder sind wie Sand am Meer und wirken einfach bedeutungslos und gefälscht. Durchgeführte Usability-Tests zeigen, dass solche Bilder nur dekorativ sind und keinen wirklichen Mehrwert bieten. Es könnte auch positive Auswirkungen auf die Benutzererfahrung haben.
Erwägen Sie die Verwendung von Illustrationen, die eine persönliche Note haben
Illustrationen werden auch zu einer beliebten Wahl für die Gestaltung von Heldenbildern. Wenn Sie einer Illustration diese persönliche Note verleihen können, können sie Ihrem Bild tatsächlich viel Persönlichkeit verleihen. Die Verwendung von Illustrationen gibt Ihnen eine bessere Kontrolle über die technischen und inhaltlichen Aspekte des Bildes, da Sie sie beliebig anpassen können. Wenn Sie eine bessere Markenerinnerung erzielen möchten, sollten Sie benutzerdefinierte Illustrationen für Ihr Heldenbild in Betracht ziehen.
Damit eine Illustration funktional ist, sollte sie leicht erkennbar sein. Die Nachricht, die es aussendet, sollte ähnlich gesehen werden, egal wer der Benutzer ist. Wenn es mehr als eine Illustration gibt, sollten sie alle konsistent sein. Mit anderen Worten, es muss so aussehen, als hätte dieselbe Person alle Illustrationen erstellt.
Wenn Sie bei Ihren Heldenbilddesigns Hilfe benötigen, ist ein engagiertes Kimp-Team immer bereit zu helfen.
Fantastische Heldenbilder zur Inspiration
Nachdem Sie nun die Grundlagen kennen, finden Sie hier einige großartige Beispiele für Hero-Bilder, die wirklich gut funktionieren.
Dieses Bild verwendet ein 3D-Konzept. Es hat auch einen scharfen und attraktiven Hintergrund mit großartiger Funktionalität.
Apple ist, wie wir alle wissen, eine Marke, bei der sich alles um ihr Design dreht. Daher ist es für sie absolut sinnvoll, ihre Produkte auf ihren Heldenbildern zu präsentieren – mit Stil.
Spotify macht hier wirklich Eindruck durch die Verwendung von schönen Farbkontrasten, die gut dazu beitragen, dass dieses Angebot wirklich auffällt. Darüber hinaus können Benutzer auch durch mehrere Heldenbilder scrollen, anstatt nur durch das eine.
Dieses Heldenbilddesign der Marke Fivefootsix ist ein vollständig schwarzer Bildschirm mit einem hervorgehobenen Slogan, der genau in der Mitte platziert ist. Die Art dieses Designs und die Textplatzierung ziehen sofort Ihre Aufmerksamkeit auf sich.
Sei ein Held und gestalte dein Heldenbild richtig
Das Erstellen eines großartigen Heldenbilddesigns ist sehr wichtig. Es wird Ihnen nicht nur helfen, Ihre Markenpersönlichkeit zu projizieren und Bewusstsein zu schaffen, es wird Ihnen auch dabei helfen, den Umsatz zu steigern! Sie sollten auch darüber nachdenken, wie oft Sie Ihr Hero-Image-Design ändern möchten, damit Personen, die Ihre Website-Seite wiederholt besuchen, das Gefühl haben, dass es etwas Neues gibt, das sie sich ansehen können. Stellen Sie bei E-Mails sicher, dass Ihre Bilder einprägsam genug sind, damit der Leser sie durchblättert und nicht auf die Schaltfläche „Löschen“ drückt.
Wenn es um Ihr Design geht, machen Sie Ihr Image klar, kraftvoll, sorgfältig durchdacht und einzigartig. Das Hauptziel hier ist, dass sich Ihr Kunde von dem Bild angezogen fühlt und sich gezwungen fühlt, sich durchzulesen, was Sie zu sagen haben.