Free Press

Der Header spielt eine Schlüsselrolle im Design einer Website und gibt den Ton für alle anderen Aspekte an. Vor allem in der Ära des triumphalen Minimalismus, in der diverse Augenweiden oft rücksichtslos, aber fair vertrieben werden. Manchmal bleibt dem Auge nichts anderes übrig, so dass die Bedeutung der Kopfzeile einer Website erheblich zugenommen hat.

Webdesigner geben sich viel Mühe, diesen Teil einer Website mit Blick auf Kreativität und Produktivität zu gestalten. Nach Angaben von Google dauert es nur 50 ms, um sich eine Meinung über eine Website zu bilden, und manche Meinungen entstehen innerhalb von unglaublichen 17 ms. Die Bekanntschaft der Verbraucher mit einer Marke beginnt hier.

Um zu erfahren, wie man einen Website-Header gestaltet, der funktioniert, und welche Elemente er enthalten sollte, lesen Sie weiter, es wird Beispiele geben.

„Das Leben ist ein erster Eindruck. Man hat nur eine Chance.

Machen Sie ihn unvergänglich.“

– J.R. Rim

Ein Website-Header ist der obere Teil der Webseite. Früher verstand man unter einem Header einen schmalen Streifen im oberen Bereich der Website, der ein Logo, eine Handlungsaufforderung und Kontaktinformationen enthielt. Im modernen Design wird jedoch der gesamte Bereich oberhalb der Falz der Homepage als Kopfzeile betrachtet.

Als strategischer Teil der Seite, den die Besucher in den ersten Sekunden des Ladens einer Website sehen, fungiert eine Kopfzeile als eine Art Einladung. Sie sollte grundlegende Informationen über eine Website liefern, damit die Nutzer in Sekundenschnelle verstehen können, was sie bietet.

Manche Designer erstellen separate Kopfzeilen für verschiedene Bereiche der Website. Sie können zum Beispiel eine große Kopfzeile für eine Homepage machen und einen kleinen Streifen für andere Seiten lassen. Aber halten Sie es einheitlich. Die Kopfzeile auf der Innenseite sollte eine verkürzte Version der Kopfzeile auf der Hauptseite sein. Dies ist eine gute Website-Design-Praxis.

Was beinhaltet ein Website-Header?

Die Aufgabe des Headers ist es, den Nutzern Antworten auf die grundlegenden Fragen zu geben: welche Marke wird vertreten, welche Waren und Dienstleistungen werden angeboten, wie kann man mit den Mitarbeitern des Unternehmens in Kontakt treten, gibt es aktuelle Angebote usw.

Außerdem repräsentiert er auch die Qualität und sogar die Identität einer Website. Wenn der Header eine gute emotionale Reaktion hervorruft und der Betrachter das Gefühl hat, dass er etwas Wertvolles hat, dann hat man den ersten Test bestanden.

Die Hauptelemente eines Website-Headers sind in der Regel:

• Logo oder Markenkennzeichnung
• Aufforderung zum Handeln
• Text oder Überschrift
• Navigations-Elemente
• Suche.

Sie müssen nicht alle auf einmal hinzufügen. Es ist notwendig, ein Gleichgewicht zwischen der Fülle der Informationen und ihrer harmonischen Anordnung zu finden. Verwenden Sie nur die Daten, die Sie benötigen. Eine Überfrachtung der Kopfzeile wäre nicht vorteilhaft, auch wenn alle Links noch so wichtig erscheinen.

Eine zu leere Kopfzeile ist auch keine gute Idee. Ein Benutzer, der sich nicht innerhalb weniger Sekunden auf Ihrer Website zurechtfindet, wird sie höchstwahrscheinlich verlassen und nicht wiederkommen. Eine schlechte Kopfzeile kann Besucher auf eine andere Website mit minderwertigem Inhalt verweisen.

In minimalistisch gestalteten Kopfzeilen werden nur die Links zu den wichtigsten Abschnitten der Website und das Firmenlogo dargestellt. Diese Technik ist besonders nützlich bei der Gestaltung von Landing Pages.

Best website header design practices

Der Kreativität sind bei der Gestaltung des Header-Bereichs keine Grenzen gesetzt. Die Überschrift der Website ist ein Bereich, der für ein weites Feld kreativer Designentscheidungen offen ist, die einprägsam, prägnant und nützlich sein sollten.

Lassen Sie uns die wichtigsten Punkte durchgehen.

Kopfzeilengröße

Es gibt keine eindeutige Antwort auf die Frage, welche Größe ein Website-Header-Bild haben sollte. Einige Quellen versuchen, genaue Zahlenangaben zu machen, aber einer der schwierigsten Aspekte bei der Erstellung von Websites ist heutzutage die Gewährleistung der Wirksamkeit für jede Bildschirmgröße. Und selbst wenn zwei Bildschirme die gleiche Größe haben, kann die Auflösung unterschiedlich sein, so dass die Nutzer nicht das Gleiche sehen.

Daher sollte man sich nicht auf das exakte Pixelkonzept fixieren, sondern besser einfache Regeln des gesunden Menschenverstands befolgen.

Die Kopfzeile sollte so hoch sein, dass sie die Wahrnehmung des Inhalts nicht beeinträchtigt. Für Informationsressourcen wäre eine kleine Kopfzeile eine gute Wahl, während für Landungen die Kopfzeile größer sein kann.

Bei umfangreichen Kopfzeilen ist es besser, etwas Platz unter dem Falz zu lassen, so dass der Benutzer einen Blick auf das hat, was als Nächstes auf der Seite kommt und zu scrollen beginnt.

Visuelle Hierarchie

Die Nielsen Norman Group formulierte ihre Theorie zum F-förmigen Lesemuster im Web erstmals 2006, und sie hat bis heute nichts von ihrer Aktualität verloren.

Eine Person, die sich auf einer neuen, ihr unbekannten Website befindet, beginnt ihre visuelle Reise immer in der oberen linken Ecke des Bildschirms. Und wenn er dort nicht die erwarteten Informationen findet, wird die Seite automatisch als kompliziert und nicht standardisiert wahrgenommen und erfordert zu viel Aufwand, um sie zu verstehen.

Logo. Eine weitere Studie des NN/g hat ergeben, dass sich die Nutzer viel leichter an Marken erinnern, deren Logos links platziert sind, als wenn sie in der Mitte oder rechts platziert sind.

Wenn Sie ein rundes Logo haben, ist es akzeptabel, es in der Mitte des Bildschirms zu platzieren, obwohl seine Wirksamkeit im Vergleich zu den links platzierten Logos geringer ist.

Navigation. Achten Sie darauf, diesen Teil der Website nicht zu überladen. Zu viele Links überwältigen die Besucher. Manchmal ist eine komplette Überarbeitung der Struktur einer Website angebracht, um Platz für die wichtigsten Kategorien zu schaffen.

Machen Sie es den Besuchern leicht zu verstehen, wo sie sich befinden und wie sie ihren Weg weiter finden können. Verwenden Sie Hover-Effekte, um die Nutzer beim Navigieren zu leiten.

Aufforderung zum Handeln. Setzen Sie die Prinzipien der visuellen Hierarchie ein, um einen CTA auf natürliche Weise hervorzuheben.

Fester (klebriger) Header

Persistente Navigationsleisten, oder mit anderen Worten „klebrige Header“, bedeuten, dass die Navigation Ihnen auf der Seite folgt, während Sie scrollen. Dies ist heute ein Web-Design-Standard.

Machen Sie die Kopfzeile fest, wenn es nicht gegen Ihr Gesamtdesignkonzept verstößt. Das ist sowohl für Desktop- als auch für mobile Designs eine gute Idee:

• E-Commerce-Websites – der Einkaufswagen befindet sich immer vor dem Nutzer.
• Service-Websites – die Telefonnummer oder ein CTA werden ständig angezeigt.

Feste Kopfzeilen verbessern das Kundenerlebnis, indem sie dem Nutzer Orientierung und mehr Kontrolle geben.

Die Botschaft, die ein Header vermittelt

Bevor Sie einen Header entwerfen, sollten Sie den Gesamtstil der Website und ihren Hauptzweck berücksichtigen.

Wenn es sich um eine Werbe-Website handelt, auf der ein Produkt vorgestellt werden soll, kann das Design des Headers Links zu den wichtigsten Abschnitten enthalten, kombiniert mit einem großen Heldenbild auf dem ersten Bildschirm, da der Hauptzweck einer solchen Website darin besteht, das Produkt wirksam zu präsentieren. Bei Websites für den elektronischen Handel oder für Unternehmen kann die Situation anders sein. Der Nutzer muss sich leicht zurechtfinden, sich über die neuesten Angebote informieren, wissen, wie er schnell mit dem Geschäftsführer Kontakt aufnehmen kann und wo er die bereits getätigten Bestellungen sehen kann; in diesem Fall kann die Kopfzeile prägnanter sein und anderen Kategorien Platz machen.

Es gibt mehrere mögliche Botschaften, die eine Kopfzeile vermitteln kann:

• den Verbraucher dazu auffordern, etwas zu tun
• Vertrauensbildung betreiben
• den Besucher ermutigen, mehr zu erfahren
• unterhaltsam sein, usw.

Die Wahl hängt vom Ziel einer bestimmten Website ab.

Relevante Bilder

Das Bild im Header sollte direkt Informationen über das Geschäft vermitteln. Wenn es sich beispielsweise um einen Lebensmittellieferdienst handelt, könnte das Bild einen adretten Kurier mit ästhetisch ansprechendem Essen zeigen. Generell sollte der Besucher, nachdem er Ihre Website gesehen hat, etwas bei Ihnen kaufen wollen.

Hochwertige Fotos. Die Fotografie ist ein mächtiges Werkzeug für Webdesigner. Sie können eine Geschichte erzählen, Emotionen hervorrufen und Ihre Besucher zum Weiterblättern motivieren. Für Websites mit eindrucksvollen Bildern sollten Sie eine transparente Kopfzeile verwenden. So kommen die Bilder besser zur Geltung, während die wichtigsten Links erhalten bleiben.

Schiebebilder. Wenn Sie mehrere großartige Fotos haben, die das Geschäft der Website repräsentieren, nur zu! Die Benutzer können durch eine Reihe exquisiter hochauflösender Bilder blättern.

Illustrationen. Kopfzeilenbilder für Websites müssen den richtigen Ton treffen und eine persönliche Verbindung herstellen. Am besten ist es, wenn ein Bild eindeutig und leicht erkennbar ist, selbst wenn es aus der Kopfzeile der Website ausgeschnitten ist. Sie können dies erreichen, indem Sie den heutigen Trend zu Illustrationen nutzen.

Video oder Animation

Lenken Sie Ihre Aufmerksamkeit nicht nur auf statische Bilder.

Das Hinzufügen von Videos gehört zu den effizientesten Ideen für Website-Header. Versuchen Sie, wenn möglich, ein thematisches Videomaterial in einen Header einzubauen. Viele Websites nutzen es, um das Publikum zu fesseln und ihr Unternehmen oder Produkt bestmöglich zu präsentieren.

Eine weitere Möglichkeit, Ihr Design noch attraktiver, lebendiger und einprägsamer zu gestalten, ist das Hinzufügen von Animationen. Damit lassen sich wirklich coole Website-Header erstellen. Wenn du nach einer interaktiven Webseite suchst, die den Betrachter fesselt, ist die Animation eine gute Alternative.

Ein gut gestalteter Call to Action

Bei der Gestaltung eines Web-Headers fügt der Designer dort einige Call to Action-Elemente wie „Anmelden“, „Sign-in“, „Kontakt aufnehmen“ usw. ein. Um die Aufmerksamkeit des Nutzers auf sich zu ziehen, damit er die gewünschte Aktion ausführt, sollte die Schaltfläche eine für den Kunden verständliche Beschriftung enthalten und zwischen anderen Inhalten auffallen.

Eine Call-to-Action-Platzierung an einer strategisch bedeutsamen Stelle ist eine perfekte Gelegenheit, den Nutzer gleich zu Beginn zum Handeln aufzufordern und so die Konversionsrate zu erhöhen. Einige CTAs können für einen bestimmten Zeitraum verwendet werden, um für besondere Angebote zu werben, andere haben eine langfristige Präsenz.

Beste Schriftarten für Website-Header

Zuerst nimmt der Kunde die Namen der Abschnitte und die Informationen des Unternehmens wahr: Kontaktdaten, interessante Angebote. Daher sollten Sie klare, gut lesbare Schriftarten wählen, die die Wahrnehmung nicht beeinträchtigen und auf den ersten Blick verständlich sind.

Für große Homepage-Header können Sie etwas fette Typografie und fantasievolle Elemente verwenden, um die Aufmerksamkeit der Nutzer zu erregen, ansonsten ist es besser, keine ausgefallenen Schriftarten zu wählen, die sich als schwer lesbar erweisen können.

Schlichtes Header-Design

Indem Sie einen Header gut definiert und übersichtlich halten, haben Ihre Besucher das Gefühl, dass Sie sie nicht mit Ihren Angeboten belasten wollen. Ein kreativer Website-Header kann sehr einfach aussehen.

Versteckte Navigation (Hamburger-Menü)

Dies ist eine Lösung, die immer häufiger für das Website-Design verwendet wird. Das Hamburger-Menü ist ein kleines, dreistreifiges Symbol, das beim Anklicken das vollständige Menü anzeigt. Diese Technik wird von Designern verwendet, wenn sie sich auf den Hauptbildschirm konzentrieren müssen.

Aus Sicht der Benutzerfreundlichkeit der Website ist dies eine gute Option. Ein solches Menü stammt aus dem mobilen Design und ist den Nutzern bereits vertraut. Der Hamburger eignet sich für Werbeseiten, bei denen der Schwerpunkt auf der hochwertigen Präsentation des Produkts mit Fotos oder Videos liegt. Für Online-Shops ist diese Option möglicherweise weniger geeignet, da es für den Kunden wichtig ist, einen Warenkorb, ausgewählte Produkte und ein Suchfeld im schnellen Zugriff zu haben.

Mobiles Header-Design

Der Header sollte nicht nur auf der Desktop-Version der Website, sondern auch auf der mobilen korrekt angezeigt werden. Er muss also responsive sein und sich gut an jedes mobile Gerät anpassen können.

Die tägliche Nutzung mobiler Geräte führte zu Website-Designs, die auch in ihrer Desktop-Variante mobil-orientiert aussehen. Zum Beispiel hat die Implementierung von großen Hero-Bildern und Hamburger-Menüs ihren Ursprung im mobilen Design.

Zusammenfassend

Die Website wird durch ihren Header präsentiert. Er ist wie eine einzigartige Visitenkarte. Daher sollten Sie bei der Gestaltung einer Website dem Header maximale Aufmerksamkeit schenken.

Und noch eine letzte Best Practice für die Gestaltung eines Website-Headers: Nehmen Sie regelmäßig Änderungen vor, um Ihre Website frisch und aktuell zu halten. Nutzen Sie einige Erkenntnisse aus diesem Artikel.