Heldenbilder werden von Web-Erstellern häufig verwendet, um Besucher ihrer Website in einem attraktiven Format zu begrüßen.
Wenn Sie sich jemals gefragt haben " Was ist ein Heldenbild? ", Sie sind hier richtig. In diesem Artikel werfen wir einen Blick auf das Thema und wie Sie schöne Heldenbilder mit starken visuellen Effekten erstellen können.
Ein Heldenbild ist der Begriff, der von Weberstellern verwendet wird, um den übergroßen Inhalt oben auf einer Webseite zu beschreiben.
Die Rolle eines Heldenbildes besteht darin, Ihren Besucher willkommen zu heißen, sobald er Ihr Unternehmen trifft oder Organisation. Die Fülle an Hero-Image-Typen im Web-Authoring-Toolkit bietet so viele Gründe, ein Hero-Image in Ihre Website aufzunehmen.
Lassen Sie uns die Hauptvorteile verstehen, und warum?
Was ist ein Heldenbild?
Heldenbilder haben die Tugend eines "guten ersten Eindrucks" und weisen in der Regel eines oder mehrere der folgenden Merkmale auf:
- Ein hochwertiges Bild
- Ein fesselndes Video
- Ein Bild-Slider oder ein Multimedia-Karussell
- Animierte oder statische Illustration
- Kopfzeilen und Beschreibungen neben oder vor visuellen Inhalten
In Bezug auf den Stil gehören zu den üblichen Designdetails, die Sie auf Heldenbilder angewendet sehen:
- Hintergrundbilder oder Videos mit Hintergrundüberlagerungen
- Feste oder klebrige Positionierung
- Das Zeigen beeinflusst die Änderung der Transparenz oder Überlagerung
- Kontrastelemente, die das Bild von der Kopfzeile darüber oder nachfolgenden Inhalten unterscheiden
Das Neue an Heldenbildern im Webdesign ist, dass man einerseits mit einem ganz bestimmten und definierten Platz auf der Webseite arbeitet. Auf der anderen Seite sind die Auswahlmöglichkeiten an Stil, Effekten und Techniken beim Gestalten dieses Teils Ihres Seiteninhalts absolut endlos.
Warum sollten Sie ein Heldenbild verwenden?
Wenn das Design und die Funktionalität Ihres Heldenbildes hochkarätig sind, erreichen Sie automatisch die Glaubwürdigkeit und das Vertrauen der Benutzer. Ihr Heldenbild und der umgebende Heldeninhalt stellen oft Ihre erste Gelegenheit dar, das Alleinstellungsmerkmal Ihres Unternehmens zu vermitteln Organisation und der Hauptansprechpartner für die Umstellung.
Wenn Sie ein bestimmtes Benutzerverhalten auslösen möchten, ist ein erstklassiges, starkes Heldenbild, das bei Ihren Besuchern einen starken ersten Eindruck hinterlässt, der beste Weg, um zu beginnen.
Sie können einen bleibenden ersten Eindruck hinterlassen
Der erste Eindruck zählt in vielen Lebensbereichen, vor allem aber, wenn es darum geht, wie Nutzer zur Website-Ästhetik stehen.
Die Ergebnisse von Experten für Mensch-Maschine-Interaktion (HCI) und Visualisierung bei Google-Recherche belegen den Einfluss von Heldenbildern auf den Erfolg einer Website:
Diese Studie, " Die Rolle von visueller Komplexität und Prototypität beim ersten Eindruck von Websites : daran arbeiten, ästhetische Urteile zu verstehen “ untersucht, wie sich visuelle Komplexität und Prototypizität auf das Design einer Website und die ersten Eindrücke ihrer Nutzer auswirken.
Die Autoren zeigten ihren Studienteilnehmern 119 tatsächliche Screenshots von der Website und stellten fest, dass visuelle Komplexität und Prototypizität die ästhetische Wahrnehmung des Benutzers in den ersten 50 Bildern des Exponats und manchmal sogar innerhalb von 17 ms beeinflussen.
Als Web-Ersteller ist unser Fazit ganz einfach: Das von uns gewählte Hero-Image und die Art und Weise, wie wir es auf unserer Seite präsentieren, beeinflusst die Stimmung und das Verhalten der Nutzer maßgeblich.
Sie werden das Beste aus Ihren Inhalten herausholen
Der „above the fold“-Bereich einer Webseite lässt sich in einfachen Worten definieren: Inhalte, die Ihren Bildschirm ausfüllen / über dem unteren Rand des Webbrowserfensters erscheinen, nachdem Ihre Seite geladen wurde. Wenn der Inhalt gescrollt werden muss, bedeutet dies, dass er sich "unter der Falte" befindet.
Der Begriff „above the fold“ hat seinen Ursprung im Printdesign und im Verlagswesen, lange vor der Ära der digitalen Medien. Wir alle wissen, wie es ist, sofort etwas in der oberen Hälfte einer ersten Seite zu bemerken, und man kann sogar mit Sicherheit sagen, dass der Inhalt auf der ersten Seite uns oft dazu bringt, zu entscheiden, ob wir eine Zeitung kaufen oder nicht an einem Kiosk.
Genau aus diesem Grund können Ihre Inhalte über dem Fold ein wichtiger Deal Breaker für den Erfolg Ihrer Website sein.
Was meinen wir?
Wenn ein Website-Besucher von Ihren Inhalten und Bildern über dem Falz verwirrt ist, wird er Ihre Website schnell verlassen. Wenn Ihr Heldenimage und seine Umgebung über dem Kopf klar und ansprechend sind und Ihr Wertversprechen gut repräsentieren, wird er eher dazu neigen, in der Nähe zu bleiben.
Letztendlich gilt: Je mehr Sie in das Bild und den Inhalt Ihres Heldenbereichs investieren, desto geringer ist die Wahrscheinlichkeit, dass Benutzer schnell aussteigen.
Vergessen Sie nicht das Responsive Design
Beachten Sie, dass die Position einer Bildschirmknicke von der Bildschirmgröße des Geräts abhängt. Dies ist eine wichtige Überlegung beim Responsive Design, da der oben beschriebene Faltinhalt so angepasst und konfiguriert werden sollte, dass er für mehrere Gerätegrößen geeignet ist.
Webdesigner und Entwickler verwenden häufig gerätespezifische Haltepunkte um diese Reaktionsfähigkeit zu gewährleisten. Dies gibt Ihnen die vollständige Kontrolle über die Anpassungsfähigkeit Ihres Website-Designs an relevante Bildschirmgrößen und vermeidet die Beeinträchtigung des Erscheinungsbilds oder der Auswirkungen Ihres Heldenimages.
Präsentieren Sie Ihr Wertversprechen ohne Informationsüberflutung
Vielleicht kennen Sie das Konzept von "InformationsüberlastungIm Website-Design und die Benutzererfahrung : Wir möchten vermeiden, zu viele Inhalte, insbesondere schriftliche Inhalte, zu verwenden, wenn wir unsere Marke und unseren Geschäftswert repräsentieren.
In diesem Sinne sagt die Verwendung eines Bildes, einer Illustration oder eines Videos 1 Worte. Durch die Feinabstimmung effektiver Branding-Bilder wird Ihre gesamte Geschichte in einem visuellen Medium festgehalten. Anstatt Ihre Geschichte und Ihr Branding-Angebot zu verbalisieren, können Sie die kognitive Belastung Ihres Benutzers auf einfache und benutzerfreundliche Weise verringern.
Der obige Screenshot stammt von Millbrook-Bau, ein in Perth ansässiges Bauunternehmen, das sich auf "Wohnbau mit High-End-Oberflächen und Liebe zum Detail" spezialisiert hat. Für ihre Elementor-Website nutzt das Heldenbild auf der Homepage perfekt die „above the fold“-Oberfläche. Das auffällige, gestochen scharfe Foto eines fröhlichen modernen Hauses und eines Außenpools setzt positive, entspannende Vibes aus.
Noch einen Schritt weiter gehend, zeigen die Stilwahlen des Hintergrundbildes in voller Höhe und die Größe einer „Decke“ das robuste Talent des Unternehmens, luxuriöse Wohnimmobilien zu schaffen. Das Wertversprechen ist klar wie Schwimmbadwasser und der Nutzer nimmt alle notwendigen Informationen bequem auf.
Ihre Heldenbilder können helfen, Leads zu konvertieren
Attraktive und sichtbare Touchpoints sind eine Grundzutat für einen Nutzerfluss von Conversion-Reproduktion. Aus diesem Grund kann die Beziehung zwischen der Handlungsaufforderung des Heldenbereichs und Ihrem Heldenbild selbst Ihre Website-Erstellungsziele bestimmen oder brechen.
Lassen Sie Ihre CTA-Texte sagen " jetzt registrieren "," Mehr erfahren "," Kontakt » usw., Ihr Heldenimage muss an allen Fronten transparent koordiniert werden: Sichtbarkeit, Botschaft, Farbgebung, Erscheinungsbild usw.
Glaubwürdige und effektive Gespräche mit potenziellen Kunden basieren auf einer angenehmen und natürlichen Atmosphäre; visuell ansprechende Bilder sind der beste Weg, dies zu erreichen.
Genau das sehen wir auf der Elementor-Website erstellt von STL-Karikatur, ein Team von Cartoon-Künstlern, die Unterhaltungsdienste für Veranstaltungen anbieten. Der animierte Titel (Heldentext) stellt die glücklichen Kunden in ihren Heldenbildern dar und zeigt, was die Cartoon-Künstler für jede Person bieten.
Wenn Sie also die Ärmel hochgekrempelt und mit den praktischen Dingen begonnen haben, Was fließt in den Entscheidungsprozess ein, welche Art von Heldenbild verwendet werden soll?
Lassen Sie uns die vier verschiedenen Arten von Heldenbildern untersuchen und feststellen, welche am besten zu Ihrer Website passen.
# 1 Produktheldenbild
Ein Produktheldenbild ist ein großes, hohes Bild Definition des Markenprodukts. Diese Bilder können statisch oder in Bewegung/in Aktion präsentiert werden, solange sie es ermöglichen, das Wertversprechen des Produkts zu visualisieren.
Beliebte Möglichkeiten unter Webdesignern, ihre Produktheldenbilder zu präsentieren und zu personalisieren, können sein:
- Ein detailliertes / Schnappschuss-Beispiel eines einzelnen Produkts, wie wir oben auf der Website des Unternehmens sehen Australisches Avo Lover-Abo.
- Screenshot einer digitalen Produktschnittstelle, z. B. eines Dashboards.
Bilder von Produkthelden sind normalerweise auf den Websites von zu findene-Commerce (aber nicht ausschließlich). Potenzielle Käufer erwarten Beispiele echter Produkte, die eine fundierte Entscheidungsfindung über die Eignung des Geschäfts für ihre Einkaufsbedürfnisse unterstützen.
Avo Lover nutzte Elementor, um seine E-Commerce-Website zu erstellen, auf der seine Kunden wöchentliche Abonnements frischer Avocados kaufen, die an ihre Haustür geliefert werden.
Der Kundenstamm von Avo lover ist ein Nischenmarkt in einem eng definierten Interessengebiet, daher ist die Wahl des Produkthelden-Images durchaus sinnvoll. Potenzielle Abonnenten sind Avocado-Enthusiasten; Ein detailliertes Foto der Produkte aus nächster Nähe zu sehen, ist genau das, was sie sehen möchten.
Empfohlene Vorgehensweise:
- Investieren Sie in die Qualität von Hintergrundbildern
Unabhängig davon, ob Ihr Hintergrundbild ein Foto, ein Video, eine Illustration usw. ist, sollte die Bilddatei so hell wie möglich und mit kristallklarer Auflösung sein.
- Achten Sie auf Kontraststufen
Wenn Sie Text vor Ihrem Heldenabschnittsbild (oder einer beliebigen Komponente) hinzufügen, stellen Sie sicher, dass der Kontrast zwischen den Website-Elementen stark und leicht zu erkennen ist. Hier können Hintergrundüberlagerungen und Filtereffekte äußerst nützlich sein.
#2 Bild des Kundenhelden
Die folgende Art von Heldenbild, die von Online-Unternehmen verwendet wird, verfolgt einen alternativen Ansatz, um ihren Mehrwert zu zeigen: Sie zeigen ihren Kunden, wie sie das Produkt verwenden. Diese Perspektive ist ein strategischer Weg, um sich in Ihre Besucher einzufühlen, und zeigt prägnant, dass Sie ihre Schwachstellen verstehen und ihre Bedürfnisse erfüllen können.
Der obige Videoclip stammt von der Elementor-Site, die von . erstellt wurde Alexander Fischer, ein Personal Trainer mit Sitz in Stuggart, der eine Reihe von Gesundheits- und Fitnessdienstleistungen anbietet.
Das Kundenhelden-Image von Alexander zeigt mehr als einen zufriedenen Kunden mit einem gesunden und fitten Lebensstil. Das Heldenbild geht noch einen Schritt weiter, indem es ein Video zeigt, das seine Kundenbindung und die Verbindung mit seinen Lieben zeigt.
Empfohlene Vorgehensweise:
- Teilen Sie Ihre Anwendungsfälle und Kundenerfahrungen
Unterscheiden Sie Ihr Produkt, indem Sie seinen dominantesten Anwendungsfall zeigen. Ein Bild, das Ihre Geschäftsziele und Ihren Wert vermittelt, zeigt, wie der Besucher von Ihrem einzigartigen Angebot profitiert.
- Beziehen Sie sich auf Ihre Zielgruppe
Stellen Sie sicher, dass Ihre Zielgruppe berücksichtigt wird, wenn Sie die Art der Person auswählen, die in Ihrem Bild dargestellt werden soll. Wählen Sie ein Bild, das Ihr Verständnis des Feldes und Ihre Fähigkeit, Ihre Kunden zu begeistern, vermittelt.
#3 Bild des Gründungshelden
Ein Gründungsheldenbild ist ein großes Bild des Gründers des Geschäftsinhabers, das im Heldenbereich platziert wird, um den Website-Besucher zu begrüßen.
Bilder von Gründungshelden werden oft auf Portfolio-Websites für Freiberufler, Geschäftsinhaber wie Psychologen, Maskenbildner oder Musiker verwendet, wie auf der Elementor-Website von Jasmine Cain oben.
Die größte Tugend eines Gründungsheldenbildes besteht darin, dass es einem Namen ein Gesicht gibt; es verbindet den Website-Besucher mit dem Dienstanbieter und schafft eine angenehme Dynamik zwischen den beiden Personen.
Die Auswahl der Bilder für Ihr Gründungshelden-Image sollte mit Sorgfalt behandelt werden. Mit vielen Optionen zur Auswahl, die auf Folgendes hinauslaufen:
Was wird die Botschaft Ihrer Marke am stärksten transportieren?
Ist das ein Foto des Gründers, der direkt in die Kamera schaut und lächelt, oder vielleicht in eine andere Richtung schaut?
Oder wäre ein unverstelltes Foto des fleißigen Geschäftsinhabers besser geeignet?
Empfohlene Vorgehensweise:
- Achten Sie auf Größe und Abmessungen
Verwenden Sie ein klares, gut dimensioniertes Bild (oder Video), das den Besuchern genau die Details zeigt, die sie sehen müssen. Bei Bedarf können Sie sich auf größere Bereiche Ihrer Bilder konzentrieren, indem Sie sie zuschneiden und weniger wichtige Inhalte entfernen.
- Konzentrieren Sie sich auf das, was Ihr Bild vermitteln soll
Die Rolle des Hintergrunds sollte darin bestehen, sich auf die Person vor ihm zu konzentrieren und nicht umgekehrt. Die eindrucksvollsten Bilder von Gründungshelden zeigen den lächelnden Geschäftsinhaber und zeigen seine Leidenschaft, Kunden glücklich zu machen.
# 4 Nicht kontextbezogenes Heldenbild
Nicht kontextbezogene Heldenbilder sind, wie der Name schon sagt, Sequenzen, die etwas zeigen, das scheinbar nichts mit dem Eigentümer des Produkts oder Unternehmens zu tun hat. Der Zweck eines nicht kontextuellen Heldenbildes besteht darin, durch visuelle Assoziation oder eine unterschwellige Botschaft Eindruck auf den Besucher zu machen. Das Betrachten des nicht kontextbezogenen Bildes zeigt dem Benutzer, was das Produkt oder die Marke ist, jedoch auf indirekte Weise.
Diese Technik wird zum Beispiel im obigen Beispiel von der Website von Elementor verwendet, die von der Firma für digitales Marketing erstellt wurde AP-Technologie, mit Sitz in Oklahoma. Die Website des Unternehmens verwendet ein breites, klares Hintergrundbild, das einen einzigartigen Blickwinkel der Wolkenkratzer von Oklahoma City zeigt.
Dieses Foto stellt das Wertversprechen des Unternehmens dar, wie es im Heldentext der Website heißt: Bauen Sie Ihr Unternehmen auf und sehen Sie zu, wie es wächst, so hoch wie die höchsten Bürotürme der Stadt.
Sobald das menschliche Auge die den Himmel dominierenden physischen Strukturen sieht, versteht es, dass diese Marketingprofis daran arbeiten, Unternehmen auf die Beine zu stellen.
Empfohlene Vorgehensweise:
- Stellen Sie sicher, dass Besucher verstehen, warum das Bild relevant ist
Auch wenn Sie kein direktes Bild Ihres Produkts selbst anzeigen, stellen Sie sicher, dass die Verbindung des Werts Ihres Produkts mit Ihrem nicht kontextbezogenen Heldenbild dennoch leicht zu erkennen ist. Benutzer sollten keine Zeit damit verbringen müssen, über die Relevanz nachzudenken.
- Stellen Sie eine klare Verbindung zwischen dem Heldenbild und dem Heldentext her
Der Heldentext, den Sie in Verbindung mit Ihrem Bild platzieren, sollte sich direkt auf dessen visuellen Inhalt beziehen. Es ist eine Notwendigkeit, auch wenn es mehrere Iterationen Ihres Textes und die Wahl des Wortlauts erfordert.
- Erstellen Sie ein zusammenhängendes Designschema
Die Farben, die Sie für Schaltflächentexte und -hintergründe, Kopfzeilen oder Beschreibungen auswählen, sollten mit dem Heldenbild oder der Grafik übereinstimmen. Dies gilt auch für klickbare Akzente auf Ihrer Website:
die Elemente des Navigationsmenüs, das Logo usw. ...
Wir alle wissen, wie wichtig eine einheitliche Bildsprache für das Prestige unserer Website, den Markenauftritt und die professionelle Glaubwürdigkeit ist. Hier können Design-Styleguides wirklich hilfreich sein, insbesondere um sicherzustellen, dass Ihre Heldenbilder mit Ihrem Website-Design übereinstimmen.
So testen Sie Ihr Heldenimage: die Methoden, die wir mögen
Sobald Sie mit mehreren Optionen für Ihr Heldenimage experimentieren, können Sie sofort beurteilen, welche Option das meiste Engagement erzeugt, und einen Einblick in das effektivste Design gewinnen – und letztendlich bei diesem bleiben.
Hier sind einige unverzichtbare Testmethoden, die einfach einzurichten sind und eine Fülle von Wissen bieten, um sicherzustellen, dass Sie das bestmögliche Heldenbild verwenden.
A/B Teste dein Heldenimage
A / B-Tests erfordern, dass der Designer zwei oder mehr Optionen für den Heldenbereich erstellt (sei es zwei Versionen der Titel und deren Kopie, das Heldenbild selbst, der Layoutbereich, die Schriftgröße oder was Ihnen sonst noch einfällt) - es liegt ganz bei Ihnen.
Stellen Sie sich vor, Sie haben sich entschieden, einen Mischmodus zu verwenden, wenn Benutzer mit der Maus über Ihr Heldenbild fahren, wissen aber nicht, welcher Modus die Benutzererfahrung am meisten verbessert.
Führen Sie a A/B-Test zwischen zwei verschiedenen Modusoptionen (es gibt immerhin 13 Mischmodusoptionen), können Sie mehr als einen Modus ausprobieren, um zu sehen, welcher die meisten Hovers, Klicks und letztendlich mehr Engagement erzielt.
Einer der häufigsten und wichtigsten Schritte beim A/B-Testen Ihres Heldenbereichs besteht darin, auch mindestens zwei CTA-Button-Optionen zu testen – um zu ermitteln, welcher Button die meisten Conversions erzielt.
Insbesondere das Testen der Farbe einer CTA-Schaltfläche ist immer eine nützliche Erfahrung, die es Ihnen ermöglicht, zu verstehen, welche Schaltflächenfarbe Benutzer am meisten anzieht und anspricht. Das A/B-Testen von Schaltflächenfarben ist bei Webdesignern sehr beliebt, da es schnell und einfach durchzuführen ist und kaum zusätzliche Designressourcen erfordert.
Verwenden Sie Heatmap-Tools, um das Nutzerverhalten zu entdecken
Heatmap-Tools identifizieren und analysieren die Stellen, an denen Benutzer auf eine Webseite klicken. Mit diesen Tools können Website- und Zielseitenbesitzer genau sehen, wie Benutzer aktiv durch Inhalte navigieren. Dies wird erreicht, sobald das Tool erkennt, ob Benutzer mit Schlüsselelementen (und wie) interagieren, wie z. B. Links, Schaltflächen, Optionen und natürlich CTAs.
Hier sind einige Informationen, die Website-Besitzer aus der Verwendung von Heatmap-Tools abrufen können:
- Nicht anklickbare Elemente lenken die Benutzer ab.
- Buttongrößen sind zu groß oder zu klein.
- Die Farben der Schaltflächen sind nicht sichtbar.
Seien Sie der Held Ihrer Website
Website-Trends entwickeln sich ständig weiter und fügen den Webdesign-Möglichkeiten neue Funktionen hinzu. Es ist immer wichtig, dass Ihr Hero-Bereich bei Ihren Designüberlegungen im Vordergrund steht – um sicherzustellen, dass er immer sein Potenzial bei der Präsentation Ihrer Website vor der Masse ausschöpft.
Holen Sie sich jetzt Elementor Pro!
Zusammenfassung
Hier ! Das war's für diesen Artikel, der Ihnen zeigt, wie Sie ein Heldenbild erstellen. Wenn Sie Bedenken haben, wie Sie dorthin gelangen, flass es uns wissen im commentaires.
Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
