In der Vergangenheit bezog sich ein „Header“ im Webdesign in der Regel auf den allgegenwärtigen Streifen am oberen Rand von Websites, der das Logo, die Navigationsleiste und vielleicht einige Kontaktdaten und eine Suchleiste enthielt. Heutzutage bezieht sich ein „Header“ eher auf den gesamten Bereich oberhalb der Falz auf der Startseite.
Wenn jemand Ihre Website nicht durch einen Blogbeitrag in sozialen Medien oder durch eine Empfehlung auf einer anderen Website gefunden hat, stehen die Chancen gut, dass er sie über die Startseite betritt. Und das erste, was sie sehen werden, ist der nackte Platz ganz oben.
Ich habe bereits darüber geschrieben, dass Besucher besser auf die vorhersehbare Platzierung bestimmter Elemente auf Ihrer Website (wie das Logo und die CTA) reagieren. Wenn Sie eine Website mit dem Ziel gestalten, ihre Erwartungen zu erfüllen und ihren Komfort zu erhöhen, indem Sie die Erfahrung etwas vorhersehbarer machen, können Sie die Klick- und Konversionsraten effektiv verbessern.
Denken Sie jetzt an den Kopfbereich auf der Startseite.
Die meisten Menschen verlassen sich auf Homepages, um sich einen Überblick über das Unternehmen oder die Website zu verschaffen, was bedeutet, dass Sie es sich nicht leisten können, diese Gelegenheit zu verpassen, diese Erwartung zu erfüllen. Natürlich kann das Design der Kopfzeile Ihrer Homepage einzigartig für Ihre Marke sein, aber die Elemente, die sich darin befinden, sollten es nicht sein. Besucher erwarten, dass sie nicht scrollen müssen, um herauszufinden, was eine Website für sie tun wird. Im Wesentlichen sollte Ihr Header eine 10-Sekunden-Geschichte sein, die Ihren Besuchern beweist, welchen Wert die Website für sie haben wird.
Was machen Sie also mit diesem Platz, um das Interesse Ihrer Besucher zu wecken?
Lassen Sie uns über einige der Trends im Header-Design im Jahr 2017 sprechen, was Sie tun können, um diesen gut sichtbaren Bereich zu nutzen, und werfen Sie einen Blick auf einige interessante Beispiele für Header auf dem Weg.
14 Trends im Header-Webdesign 2017
Es ist nicht so, dass Ihre Besucher nicht wissen, dass sie eine Seite nach unten scrollen oder sich durch eine Navigation klicken müssen, um mehr über die Marke hinter einer Website zu erfahren. Aber warum sollten sie das tun müssen? In der Kopfzeile ist genug Platz für eine knappe Botschaft, die den Besuchern alles sagt, was sie wissen müssen. Und wenn 50 Wörter oder weniger nicht ausreichen, vermitteln das Hintergrundbild oder das Design den Rest der Geschichte.
Vor allem die Kopfzeile der Homepage kann den ersten Eindruck Ihrer Besucher prägen, weshalb es so wichtig ist, diesen Abschnitt zu gestalten.
Wenn Sie nicht wissen, wie Sie Ihre Website mit einem Paukenschlag einleiten können, finden Sie vielleicht Inspiration in den folgenden Header-Design-Trends des Jahres 2017:
Übergroßes Hero Image
Dank des modularen Stils der Gestaltung von Websites, um reaktionsfähig zu sein, sind die meisten Designs jetzt in verschiedene Blöcke und Abschnitte aufgeteilt. Dieser Designstil eignet sich besonders gut für die Heldenbilder in voller Breite, die so viele Websites bevölkern.
Die Website von Cleverbird Creative zum Beispiel. Sie nutzt ein einzelnes, markantes Bild, das mit einem einfachen Text überlagert ist, um die Besucher zu begrüßen. Es ist nicht zu übersehen, was hier angestrebt wird: vereinfachte Schönheit.
Schiebebilder
Ich glaube, es gab eine nicht allzu weit zurückliegende Zeit, in der viele von uns den Schieberegler als praktikables Designelement in Frage gestellt haben. Viele Designer haben ihn jedoch hervorragend in Kopfzeilen eingesetzt. Es gibt Schiebebilder, die automatisch von einem schönen hochauflösenden Bild zum nächsten scrollen, und es gibt solche wie die von Pierre, die die Besucher auffordern, die Kontrolle über dieses Erlebnis selbst zu übernehmen.
Transformative Parallaxe-Bilder
Parallaxe-Scrolling ist nach wie vor auf dem Vormarsch, und die Kopfzeile hat sich als perfekter Ort erwiesen, um diese Art von visueller „Täuschung“ in Web-Designs anzuwenden. In letzter Zeit sieht man jedoch immer häufiger Designer, die ihren Parallaxen-Scrolls eine transformative Note verleihen, wahrscheinlich um die Besucher mit dem unerwarteten Ergebnis des Scrollens zu überraschen. Die australische UX-Design-Agentur August hat genau das mit ihrem Header getan.
Videohintergründe
Der Videohintergrund ist ein weiterer Trend der letzten Zeit, der am besten funktioniert, wenn er auf den Header der Homepage angewendet wird. Dieser Header von Le 28 stimmt auf die Website des Restaurants ein und zeigt Videos von der Vorder- und Rückseite des Lokals.
Versteckte Navigation
Obwohl man argumentieren könnte, dass das Hamburger-Menü auf Websites gehört, die auf mobilen Geräten angezeigt werden (wie ursprünglich beabsichtigt), gibt es etwas darüber zu sagen, was diese Art von Navigationsminimalismus für den Header bedeutet. Die Website +rehabstudio ist ein schönes Beispiel dafür. Durch das Verstecken der Navigation wird der Fokus sofort auf die aufregenden Bilder innerhalb des Plus-Symbols gelenkt… und dann erkennt man, dass es von kleinen Animationen umgeben ist.
Markenmaskottchen
Wenn der Header der Ort ist, an dem die Besucher auf Ihre Website aufmerksam gemacht werden sollen, gibt es keinen besseren Weg, als ihnen die „Charaktere“ vorzustellen, die sie auf dem Weg dorthin treffen werden. Wenn Ihre Website Markenmaskottchen verwendet – wie die WPMU DEV-Website – ist dies der richtige Zeitpunkt und Ort, um sie zu zeigen.
Auffällige Typografie
Es gibt eine Menge, was man tun kann, um der Typografie Ihrer Website ein neues Gesicht zu verleihen. Allerdings geht es manchmal nicht darum, die ausgefallenste kursive Schriftart zu wählen, um sie den Leuten vor die Nase zu setzen. Wenn du dir das obige Beispiel von Slack ansiehst, wirst du sehen, dass es nur um die Größe der Schrift geht. Es gibt nichts Besonderes an der gewählten Typografie, aber sie ist so sauber und klar. Das, gepaart mit der Größe der Hauptbotschaft, macht sie so auffällig.
Inhalt zuerst
Für Websites, die sich in erster Linie darauf konzentrieren, ihren Besuchern eine Fülle von Inhalten zu liefern (man denke an jede größere Nachrichtenseite oder jeden Blog), ist eine inhaltsorientierte Strategie für die Kopfzeile am sinnvollsten. Es hat wirklich keinen Sinn, hier ein Blatt vor den Mund zu nehmen. Die Besucher sind auf Ihre Website gekommen, um Ihre Inhalte zu lesen, sie müssen nicht durch zusätzliche Lektüre auf der Startseite aufgehalten werden, also können Sie gleich zur Sache kommen, wie es Glamour tut.
Produkte zuerst
In diesem Sinne brauchen E-Commerce-Websites die Kopfzeile nicht zu nutzen, um eine einprägsame Überschrift zu schreiben oder ein Erklärvideo über das Unternehmen zu zeigen. Die Besucher wissen, warum sie auf die Website gekommen sind, also können Sie gleich zur Sache kommen. Im Gegensatz zu Inhaltsanbietern können Produkthändler diese erstklassige Fläche nutzen, um ihre meistverkauften Produkte oder ihre neuesten Veröffentlichungen zu präsentieren und Besucher anzulocken, wie es Apple tut.
CTA Front-and-Center
Es kann der Zeitpunkt kommen, an dem Ihre Website etwas wirklich Besonderes zu bieten hat, etwas, das Sie Ihren Besuchern zum Herunterladen oder Kaufen anbieten möchten. Auch wenn dies nicht die Hauptattraktion Ihrer Website ist, können Sie die Kopfzeile entweder vorübergehend oder dauerhaft nutzen, um diese besondere Aufforderung zum Handeln hervorzuheben, wie es die Bloggerin Everywhereist mit ihrem Buch tut.
Leuchtende Farben und Texturen
Vielleicht eines der schönsten Dinge, die Google Material Design hervorgebracht hat, ist unsere Bereitschaft, lebendigere Farben, Ebenen und Farbverläufe im Webdesign zu verwenden. Sie müssen nicht mehr nur für Call-to-Action-Buttons verwendet werden, sondern können für ganze Blöcke auf der Website eingesetzt werden, wie es Stripe mit seinem farbenfrohen und texturierten Header tut.
Animation
Es ist absolut nichts falsch daran, einen statischen Homepage-Header zu haben, vor allem, wenn der Fokus auf einen CTA oder ein Video gelenkt werden soll. Halten Sie es einfach, damit keine Ablenkungen die Besucher davon abhalten, die von Ihnen beabsichtigte Aktion durchzuführen. Für Websites, die ihre Botschaft auf interessante Weise mit den Lesern teilen möchten, können Animationen eine kluge Wahl sein. Das Baianat verwendet eine kleine Animation, um eine Reihe von Botschaften auf der gleichen Fläche zu vermitteln, wodurch es nicht überladen oder mit Informationen überfüllt wirkt.
Geometrische Designs
Geometrisches Webdesign ist im Moment sehr angesagt, da es sich gut für die logischen und sauberen Linien eignet, die für Responsive Design benötigt werden. Daher ist es nicht verwunderlich, dass immer mehr Websites, wie die von Perspective API, geometrische Elemente in das Design der Kopfzeile integrieren. Andere, wie Stripe und WPMU DEV, verwenden diagonale Linien, um eine einzigartige und unerwartete visuelle Landschaft für Besucher zu schaffen.
Experimentell
Schließlich kommen wir zu den experimentellen Header-Designs. Der Schlüssel zu diesen ist normalerweise nicht, dass der Header seltsam und ungewöhnlich ist. Das würde die Besucher zu sehr ablenken. Stattdessen sollten Sie sich darauf konzentrieren, einen unerwarteten Effekt zu erzeugen, der durch die einfache Bewegung über die Kopfzeile hervorgerufen wird.
Nehmen Sie zum Beispiel das Design von Teamgeek. Sie können sehen, dass das Logo und die Botschaft in der Mitte der Seite etwas „Ungewöhnliches“ haben, aber erst, wenn Sie sich damit beschäftigen, erkennen Sie, dass ein besonderer Effekt eingebaut ist.
Abschluss
Wie Sie sehen können, gibt es eine Vielzahl von Möglichkeiten, wie Sie eine Kopfzeile für eine WordPress-Website gestalten können. Wenn Sie sich die obigen Beispiele genau ansehen, werden Sie feststellen, dass die Designer sehr strategisch vorgegangen sind, was den Stil des Headers und die darin enthaltenen Elemente angeht. Wenn es an der Zeit ist, einen Header für Ihr nächstes Website-Projekt zu entwerfen, überlegen Sie, ob Sie Folgendes benötigen:
- Logo
- Traditionell vs. versteckt
- Helden-Header-Bereich vs. direkt zum Inhalt Direkt zum Inhalt
- Tagline oder Leitbild
- Kontaktinformationen
- Links zu sozialen Medien
- Suchleiste
- Mehrsprachiger Toggle
- Einkaufswagen
- Markenmaskottchen
- Stockfotos vs. Tatsächliche Fotografie des Unternehmens, der Menschen oder des Produkts
- Statisches Bild vs. gleitende Bilder vs. Hintergrundvideo
- Eingebettetes Werbevideo
- Aufruf zum Handeln
- Kontaktformular
- Hallo-Leiste
Sie können auch andere Elemente finden, die in diesen oberen Kopfbereich Ihrer Homepage gehören. Es kommt wirklich nur darauf an, was für Ihre Website am sinnvollsten ist. Mit anderen Worten, welche Elemente erzählen die Geschichte Ihrer Marke, informieren und fesseln Ihr Publikum auf Anhieb und wecken genug Vertrauen, um es auf Ihrer Website voranzutreiben?
Tags:
- Design
- Kopfzeilen