Erstelle das perfekte Heldenbild mit dem Kontrast
Willst du einen guten ersten Eindruck hinterlassen? Es beginnt mit der Kopfzeile Ihrer Website. Das Bild, das ein Nutzer sieht, hinterlässt einen Eindruck - gut oder schlecht - und bestimmt, ob dieser Nutzer klickt und fortfährt oder die Seite vollständig verlässt.
Das ist eine große Aufgabe für ein einzelnes Bild.
Das wichtigste Element für die Erstellung eines Heldenbildes, das die Benutzer anzieht und sie im Design bewegt, ist der Kontrast. (Ernsthaft! Alles geht zurück auf Design-Theorie 101.) Ein Kopf, der kontrastierende Elemente in Größe, Farbe und Maßstab bietet, bietet die richtige Mischung von visuellem Interesse und erzählt den Benutzern, wie man mit dem Design interagiert. Hier sind ein paar Möglichkeiten, den Kontrast auf dem Weg zum perfekten Heldenbild zu maximieren.
Ernte strategisch
Das Heldenbild muss nicht den "ersten" Bildschirm auf Geräten ausfüllen. Lass dich nicht in dieser Falle verfangen.
Beschneiden Sie das Bild basierend auf dem darin enthaltenen Inhalt auf Auswirkungen. Berücksichtigen Sie die anderen Elemente, die für Nutzer wichtig sind, wenn sie auf der Seite landen, und machen Sie auch für diese Nutzer eine Unterkunft. Abhängig von diesem Framework kann dies bedeuten, dass das Heldenbild so skaliert wird, dass es größer oder kleiner als das Browserfenster ist (lassen Sie uns einfach mehr Standardauflösungen für Argumente betrachten).
Bevor Sie sich auf die Idee stürzen, überlegen Sie es für einen Moment.
- Ein flaches Bild hilft bei der Vorschau anderer Inhalte.
- Ein ungewöhnlich tiefes Bild wird Benutzer dazu ermutigen, mehr zu scrollen.
- Jede ungewöhnliche Form wird Aufmerksamkeit erregen.
Betrachten Sie Animation
Sie müssen keine fulminante kinematografische Erfahrung erstellen, um bewegte Bilder zum Helden-Header hinzuzufügen. Die kleinsten Berührungen der Bewegung erzeugen gerade genug Kontrast, um das Auge zu ergreifen.
Subtile Bewegungen, wie das Flugzeug, das für Bar Z Winery über das Bild fliegt, bieten dieses Kontrastelement, ohne überwältigend zu sein. Es ist eine einfache Alternative zu einigen der auffälligeren Video-Header, die populär geworden sind. Das Element des Kontrasts ist zweigeteilt: Das Design unterscheidet sich von vielen anderen, denen Benutzer ausgesetzt sind, und die subtile Bewegung ist entzückend und eher unerwartet.
Auf der anderen Seite können Sie alles mit Animation oder Video für ein Heldenbild gehen. Bewegung kann besonders einnehmend sein und ist eine beliebte Option. Verwenden Sie es wie ein Standbild, wenn Sie Effekte wie Typografie und Handlungsaufforderungen hinzufügen.
Denken Sie mutige Typografie
Typografie im Heldenbild sollte den Benutzer begeistern. Es muss mutig, eindrucksvoll und einprägsam sein.
Sie können dies sowohl mit der Schriftauswahl als auch mit den Wörtern auf dem Bildschirm erstellen. (Keine Arial-Header, die hier "Hallo" sagen.)
Die Kombination aus Beschriftungsstil und Messaging muss direkten Einfluss auf den Benutzer haben. Du hast gehört, dass Menschen eine kürzere Aufmerksamkeitsspanne haben als Goldfische; Es ist Ihre Aufgabe, sie mit schönen Buchstaben und Sprache zu fangen.
Wenn es um Fettdruck geht, sind die Schlüsselelemente des Kontrasts Farbe und Größe.
- Der Typ muss eine Farbe sein, die sich vom Hintergrund abhebt. Licht bei Dunkelheit oder Dunkelheit bei Licht sind die besten Optionen, wenn es um Lesbarkeit geht.
- Fett ist eine Abweichung von der Norm. Berücksichtigen Sie eine zu große oder zu kleine Typografie auf dem Helden-Header für Auswirkungen.
- Wähle Wörter mit Bedeutung. Sofern dies nicht der Schlüssel zu Ihrer Nachricht ist, benötigen Sie keinen Absatz in der Kopfzeile. Entscheiden Sie sich für einige Schlüsselwörter, die Benutzer dazu bringen, mehr zu lernen. (Die Anzahl der Wörter beeinflusst, wie groß oder klein die Beschriftung sein kann.)
Wählen Sie Farbe sorgfältig
Ein Heldenbild ist möglicherweise kein Bild. Es könnte ein Farbblock oder eine coole Textur sein.
Wählen Sie eine Farbe sorgfältig, die die genaue Bedeutung darstellt, die Sie beabsichtigen. Ein fetter Farb-Helden-Header kann Benutzer beeindrucken, aber die falsche Farbe kann eine Abschaltung sein.
Helle, trendige Optionen sind eine gute Alternative. Das Schöne an dieser Option ist, dass Sie sie von Zeit zu Zeit mischen können, indem Sie einfach die Hintergrundfarbe ändern. Ein großer Farbhintergrund kann auch dazu beitragen, die Markenidentität zu stärken - insbesondere, wenn sie eine starke Farbassoziation aufweist - und sich aufgrund der Einfachheit des Designs für die Lesbarkeit eignet.
Die Farbe ist auch wichtig, wenn sie mit einem anderen Bild oder Video verwendet wird. Von farbiger Typografie bis hin zu farbigen Elementen der Benutzeroberfläche ist es wichtig, dass die Farbauswahl im Bild mit dem Rest des Designs übereinstimmt. Vieles davon geht zurück auf die Farbtheorie und ein Verständnis des Farbrads, so dass die Bild- und Farbauswahl im Design zusammenwirken.
Was aber, wenn die Heldenbild- und Markenfarben nicht ineinander greifen? Überlegen Sie kreativ, wie Sie die Teile im Heldenbild zusammen verwenden. Probieren Sie eine Farbüberlagerung auf dem Foto aus; Betrachten Sie Schwarz und Weiß für das Bild oder den Text. Verschieben Sie Elemente mit hoher Farbe in eine Navigationsleiste, die weiß oder schwarz ist, um sie vom eigentlichen Bild abzuhalten. Wenn das Bild und die vorgeschriebenen Farben nicht gut wiedergegeben werden, ist es am besten, die Farbe zu entfernen oder zu trennen.
Denken Sie über helle und dunkle Räume nach
Dunkle und helle Räume in einem Bild zu berücksichtigen, kann die schwierigste Aufgabe sein, wenn Elemente in einem Heldenbild hinzugefügt werden, um Kontrast zu erzeugen. Insbesondere bei reaktiven Formaten und Haltepunkten kann sich die Platzierung von Text oder Schaltflächen auf einem Bild ändern und Sie können nicht immer einen großartigen Speicherort finden.
Was muss ein Designer tun?
- Wähle ein anderes Bild.
- entscheiden Sie sich für eine andere Art von Familie, Größe oder Farbe;
- füge eine Farbüberlagerung hinzu;
- mach das Beste draus.
Jedes der oben genannten ist eine praktikable Option. Die beste Option kann je nach Projekt variieren.
Die Gesellschaft Inc. Die Lösung im Helden-Bild-Schieberegler - mit einer großen Varianz zwischen hellen und dunklen Räumen - sollte ein Logo-Overlay mit weißem Text in schwarzer Form enthalten. Es beeinträchtigt die Bilder nicht und ist weniger aufdringlich, als Sie vielleicht denken würden, wenn Sie die Idee hören. Das Logo in der Mitte hilft auch, Marke und visuelle Identität zu etablieren.
Fügen Sie einen eindeutigen Aufruf zur Aktion hinzu
Vergiss das CTA nicht!
Was möchtest du tun, nachdem du dein cooles Heldenbild angeschaut hast? Erzähl es ihnen.
Der Call to Action sollte klar sein, ob es darum geht, ein Formular auszufüllen, nach weiteren Inhalten zu scrollen oder auf einen Link zu einer anderen Seite zu klicken. Es sollte genug Definition und Kontrast enthalten, damit es gegen den Bildhintergrund leicht gesehen wird. (Was ist der Sinn in einem CTA, wenn niemand es sieht?)
Farbe und Größe sind hier von besonderer Bedeutung. Die Farbe des Buttons (ein gewöhnlicher CTA-Cue) sollte sich vom Rest des Bildes abheben. Die Wörter, die den Benutzern sagen, was zu tun ist, müssen außergewöhnlich gut lesbar, einfach und klar sein.
Fazit
Kontrast ist eine der Schlüsseltechniken für jedes gute Design. Es erzeugt eine Trennung zwischen Elementen und hilft Benutzern, die gewünschte Aktion auszuführen.
Achten Sie besonders darauf, genügend Kontrast zu erstellen, wenn Sie ein Heldenbild entwerfen, damit die Benutzer genau wissen, welche Aktionen auf der Seite auszuführen sind. Werfen Sie einen Blick auf Ihre Messwerte und wenn diese Konvertierungen nicht stattfinden, überdenken Sie den Kontrast im Design. Es könnte Zeit sein, es noch mehr aufzustocken.