Ein Website-Header, der auf jeder einzelnen Seite der Website angezeigt wird, ist das erste, was die Nutzer beim Besuch einer Website wahrnehmen. Ein ausgezeichneter Website-Header hat ein sauberes Design und ein einfach zu navigierendes Menü, das zu den inneren Landing Pages der Website führt.
Webdesigner verwenden immer viel Zeit und Mühe auf die kreative und produktive Gestaltung dieses Abschnitts einer Website. Laut Google dauert es nur 50 Millisekunden, bis sich ein Besucher einen ersten Eindruck von einer Website. Die Verbraucher werden auf Ihre Marke aufmerksam, wenn sie den Header Ihrer Website sehen.
Aus diesem Grund ist es wichtig, sich auf Leitprinzipien zu konzentrieren, um einen Website-Header zu erstellen, der Kunden effektiv dabei hilft, die benötigten Informationen im Handumdrehen zu finden. Hier sind 10 bewährte Tipps und Strategien, die Ihnen dabei helfen, beeindruckende Header für Ihre Websites zu erstellen.
Die wichtigsten Elemente hervorheben
Als Erstes sollten Sie sich überlegen, was der Benutzer tun soll, wenn er auf Ihrer Website ankommt. Wohin soll die Aufmerksamkeit des Nutzers gelenkt werden, wenn er auf Ihrer Website ankommt? Wenn dieses Element in Ihrem Header nicht vollständig sichtbar ist, sollten Sie es hervorheben. Fügen Sie z. B. bei gemeinnützigen Websites ein Symbol für "Jetzt spenden" und bei Restaurant-Websites eine Schaltfläche "Tisch reservieren" hinzu.
Um den Besuchern den Einstieg in die Website zu erleichtern, enthalten Header in der Regel Informationen wie:
- Navigationsmenü
– Firmenlogo
– Tagline
– Aufforderung zum Handeln (Tisch reservieren, spenden, anrufen)
– Kontaktinformationen
– Icons für soziale Netzwerke
– Mehrsprachiger Kippschalter
– Einkaufswagen
Kopfzeilentexte sollten klar und lesbar sein
Der Text im Header muss leicht zu lesen und auf einen Blick zu verstehen sein, damit er nützlich ist. Verwenden Sie, wenn möglich, kurze Wörter und Schriftarten mit einer angemessen großen Schriftgröße, um die Lesbarkeit zu erhöhen. In der Regel werden in Überschriften keine dekorativen Schriftarten verwendet, da sie schwer zu lesen sind.
Heben Sie die Header-Texte hervor, indem Sie sich kreative Möglichkeiten einfallen lassen, um die Aufmerksamkeit der Besucher zu erregen, oder indem Sie verschiedene Schriftgrößen verwenden, um bestimmte Abschnitte hervorzuheben. Wählen Sie zunächst Schriftarten, die zum Branding Ihres Unternehmens passen, und arbeiten Sie sich dann von dort aus nach oben vor.
Transparenz für die Kopfzeile verwenden
Wenn Ihre Website viele beeindruckende Banner enthält, sollten Sie einen transparenten Header verwenden. So wird die Sichtbarkeit Ihrer Banner-Bilder maximiert, während wichtige Links weiterhin entsprechend angezeigt werden.
Transparenz beim Scrollen kann irritierend sein, wenn Sie einen Sticky Header verwenden, denn wenn die Bilder scrollen, scrollt auch der Hintergrund des Headers. Damit die scrollenden Grafiken nicht von den Links ablenken, geben Sie der Kopfzeile stattdessen eine leicht transparente Hintergrundfarbe.
Kopfzeile beim Scrollen verkleinern
Um den Platz, den die Kopfzeile beim Scrollen einnimmt, zu minimieren, ist eine verkleinerte Kopfzeile eine hervorragende Lösung. Sie sind besonders nützlich bei der Gestaltung großer, überzeugender Header. Primäre Navigationselemente und ein Logo können in einem immer kleiner werdenden Header angezeigt werden, die ihre Farbe ändert, wenn der Benutzer nach unten scrollt.
Einkaufsschaltfläche oben platzieren
Kunden sollten es einfach finden, in Ihrem Online-Shop einzukaufen. Ihr Header sollte einen Shop-Button enthalten, der jederzeit zugänglich sein sollte. Verwenden Sie dazu einen Sticky Header.
Bei der Gestaltung von E‑Commerce-Websites sollten Sie ein Einkaufswagen-Symbol in den Header der Website einfügen. Unabhängig davon, wo sie sich auf der Website befinden, können die Website-Besucher so ihren Einkauf mit einem Mausklick tätigen.
Hover- und Auswahl-Effekte für die Menü-Links
Es ist wichtig, dass die Benutzer bei der Navigation durch Hover- und Auswahleffekte geführt werden. Stellen Sie sicher, dass Ihre Effekte auffällig genug sind, um ins Auge zu fallen, aber nicht so offensichtlich, dass sie ablenken. Denken Sie daran, dass einige Effekte nur auf Desktop-Computern zu sehen sind. Verwenden Sie daher Standardeffekte wie eine Farbverschiebung oder Unterstreichung, um sicherzustellen, dass sie auch auf mobilen Geräten gesehen werden.
Wählen Sie eine Header-Vorlage, die das Logo ergänzt
Logos in Headern sind wichtig, da sie in der Regel das erste Element sind, das Besucher sehen, wenn sie auf eine Website kommen. Entscheiden Sie sich für eine Kopfzeilenanordnung, die das Design des Logos ergänzt. In der Regel sehen runde und quadratische Logos am besten aus, wenn sie zentriert sind; rechteckige Logos sehen gut aus, wenn sie am rechten oder linken Rand positioniert sind.
Zeigen Sie die Persönlichkeit Ihrer Marke
Die Persönlichkeit eines Unternehmens wird durch die Verwendung von Farben und Effekten zum Ausdruck gebracht. Dies kann durch die Verwendung eines Schwebeeffekts in der Navigation erreicht werden, wenn der Benutzer mit dem Mauszeiger darüber fährt, um eine freundliche Unternehmenspersönlichkeit zu vermitteln. Ein schwebender Effekt ist hingegen nicht unbedingt ideal für Kunden, die eine seriöse, professionelle Beratung anbieten, wie z. B. Rechtsanwälte und Immobilienmakler.
Verwenden Sie Fly-in-Nav Menüs für bildreiche Websites
Bei Portfolio-Websites mit vielen Fotos sind ausklappbare Menüs oder Fly-in-Menüs die Rettung, da sie die Bilder am besten in den Vordergrund rücken. Sie werden schon seit langem auf mobilen Websites verwendet und tauchen jetzt auch immer häufiger auf Desktop-Websites auf.
Ein erweiterbarer Header ermöglicht es Ihnen außerdem, wichtige Links zu präsentieren, wie z. B. ein Einkaufswagen-Symbol, das wirklich hervorsticht, und gleichzeitig den Besuchern mitzuteilen, dass weitere Informationen, wie z. B. die Website-Navigation, durch Klicken auf das Kippsymbol angezeigt werden können.
Die Ladezeit sollte schnell sein
Nicht weniger als 53 % der Kunden verlassen Ihre Seite, wenn Ihre Kopfzeile mehr als 3 Sekunden zum Laden braucht. Sie können adaptive Grafiken nutzen, Ihre Plug-ins aktualisieren und Ihre Medien komprimieren, um die Ladezeit auf Ihrer Website zu verkürzen oder hier im Blog sich durch meine Artikel lesen.
Wenn Ihr Header nicht schnell geladen wird, besteht die Gefahr, dass der Betrachter Ihre Website verlässt und sich woanders umsieht. Eine Verbesserung der Ladegeschwindigkeit kann auch Ihre Sichtbarkeit und Ihr SEO-Ranking verbessern.
Schlussfolgerung
Der Header der Website bietet einen kurzen Überblick über die Website und Ihrer Marke. Es ist wie ein speziell zusammengefasstes Unternehmensprofil. Aus diesem Grund sollte der Header der wichtigste Teil eines jeden Webdesigns sein.
Abgesehen von den oben genannten Tipps ist es die beste Praxis, Ihre Website regelmäßig zu aktualisieren, um sie relevant zu halten.
