Richtiges Header-Layout - ein Blick auf 6 verschiedene Websites

Wenn du an einen Website-Header denkst, denkst du dann an die Leiste oben, in der sich das Logo und das Menü befinden? Damit liegst du nicht falsch, aber in letzter Zeit denken manche, dass der Header alles ist, was sich oberhalb der Falz befindet. Das heißt, wenn du eine Website besuchst und nicht nach unten scrollst, ist der gesamte Bereich, der angezeigt wird, die Kopfzeile.

Werfen wir einen Blick auf verschiedene Websites, die unterschiedliche Kopfzeilen haben, und diskutieren wir, worauf jede Website mit ihrem Design abzielt.

Box.com

Die Kopfzeile von Box.com besteht nicht nur aus einem Logo und einem Menü, sondern aus einer vollständigen Produktvorschau und einer Aufforderung zum Handeln, die im Mittelpunkt steht. Wenn du ein besonderes oder neues Produkt anbietest, ist diese Art von Kopfzeile eine gute Möglichkeit für deine Besucher, mehr zu erfahren. Bei neuen Produkten musst du die Aufforderung zum Handeln (Call to Action, CTA) nicht unbedingt in der Mitte platzieren, sondern kannst diese Stelle vorübergehend nutzen und dann zu einer anderen Kopfzeile wechseln.

Box hat es geschafft, dass ihre Aktionsschaltflächen leicht zu finden sind. Der einfache, saubere Stil ist gut für die Augen. In dieser Kopfzeile geht es darum, dass der Besucher Informationen über ein kostenloses Test- oder Kontaktformular erhält.

 Apple.com

Apples Header-Stil ist auf das Produkt ausgerichtet. Anstatt alle Funktionen des neuen iPhones in der Kopfzeile zu zeigen, wird nur das Produkt vorgestellt. Das weckt die Neugierde. Der Header konzentriert sich auf ein Sonderangebot, das zu den Feiertagen stattfindet. Sie ist einfach und übersichtlich und verleitet den Nutzer zum Klicken, um mehr zu erfahren. Diese Kopfzeile soll die Besucher dazu bringen, sich über die neueste und beste Technologie zu informieren (und sie zu kaufen).

BearsBeans.com

Bear's Beans hat einen super einfachen Header. Er vermittelt ganz klar, worum es bei der Marke geht, und weckt gleichzeitig die Neugierde. Das Logo, die kleine Speisekarte und die klare Aufforderung zum Handeln machen von Anfang an Lust auf einen Schluck Kaffee. In diesem Fall werden insgesamt nur vier Elemente verwendet: ein Logo, eine Überschrift, eine Schaltfläche und ein Menü. Die Größe des Textes macht die Website zu einem echten Hingucker. Wie du sehen kannst, gibt es keinen definierten Bereich zwischen der Menüleiste und dem unteren CTA. Deshalb würden wir den gesamten Bereich als Kopfzeile bezeichnen. Der Header verfolgt einen einfachen, entspannten Ansatz, um den Kunden zu informieren.

BestBuy.de

Best Buy nutzt den ersten Header, um Besuchern Informationen über Geschenkkarten, lokale Geschäfte, Warenkörbe, Produkte, Konten, Bestellstatus und eine Suchleiste zu geben. In diesem Fall würde man den gesamten Bereich oberhalb des Falzes nicht als Kopfzeile bezeichnen, da er eindeutig zu einem Scrollbereich abgetrennt ist, in dem Verkäufe und Produkte hervorgehoben werden. Diese Kopfzeile bietet den Besuchern eine einfache Möglichkeit, einen Kauf abzuschließen. Best Buy schafft es hervorragend, viele Informationen auf kleinem Raum unterzubringen, ohne dass es zu überladen wirkt.

GettyMusic.com

Die Kopfzeile von Getty Music ist auf ihre eigene Art und Weise einfach. Nicht nur, dass die Menüpunkte den größten Teil der Leiste einnehmen, sie haben auch ein einfaches Foto mit etwas Text darunter verwendet. Dieses Bild fordert nicht zum Handeln auf, sondern dient der Wiedererkennung der Marke. Obwohl Getty Music einen Shop hat, gibt es in seinem Menü kein Einkaufswagen-Symbol. Damit wird die E-Commerce-Seite der Website ein Stück weit entschärft und informativer gestaltet. Diese Kopfzeile bietet Fans und Besuchern die Möglichkeit, sich mit der Musik und den Veranstaltungen zu beschäftigen.

WissmannFamilie.de

Der Header der Wissmann-Familie ist ein moderner Weg, um den Wiedererkennungswert der Marke zu steigern und den Verkauf ihrer Musik zu fördern. Das Farbschema in Kombination mit den CD- und Logofarben vermittelt ein entspanntes Gefühl. Die Menüsymbole und die Platzierung machen deutlich, dass es auf der Website um den Verkauf und die Verbindung mit den Besuchern über soziale Medien geht.

Was haben wir gelernt?

Was haben wir bei der Durchsicht dieser sechs Websites über die richtige Gestaltung von Kopfzeilen gelernt? Ist es so, dass eine Kopfzeile für alle Arten von Websites geeignet ist? Offensichtlich nicht. Hier ist, was ich gelernt habe:

• Der Header der Website kann bis zum Falz der Website reichen.
• Die Arten von Icons, die in einer Kopfzeile verwendet werden, können den allgemeinen Zweck der Website ausdrücken
• Alle Header-Bilder müssen nicht für Handlungsaufrufe verwendet werden, sondern können auch für die Markenerkennung genutzt werden.
• Wenn du einen Shop auf deiner Website hast, ist ein Warenkorb-Symbol in der Kopfzeile nicht zwingend erforderlich.
• Alle sechs Beispiele haben eines gemeinsam: Sie haben alle saubere und einfache Überschriften. Die Farben passen zum Rest der Website und der Inhalt fließt reibungslos.

Was hast du gelernt? Unabhängig davon, wie gut du dich im Design auskennst, kannst du durch die Betrachtung erfolgreicher Websites dein Wissen über die richtige Gestaltung von Kopfzeilen für Websites erweitern.