11 Tipps für ansprechende Website-Header

Dein Team gestaltet jede Woche Dutzende, vielleicht sogar Hunderte von Websites? Dann weißt Du, dass jede dieser Websites einen Header – also einen sichtbaren Kopfbereich – hat. Er ist meist das, was Besuchern Deiner Website als Erstes ins Auge springt. Um Dir bei der Gestaltung eines tollen Headers zu helfen, geben wir Dir deswegen 11 nützliche Tipps.

1. Betone die wichtigsten Elemente

Überlege dir, wozu Du Besucher deiner Website motivieren willst. Sorge anschließend dafür, dass dieses Element in Deinem Header klar hervorsticht. Bei einer Non-Profit-Seite wäre das z. B. ein „Jetzt spenden“-Icon, bei einer Restaurant-Seite wäre es „Tisch reservieren“. Grundsätzlich enthalten Header Informationen, die Nutzern die Interaktion mit der Website erleichtern. Hierzu gehören:

• Navigations-Links
• Firmenlogo
• Call-To-Action (Tisch reservieren, Spenden, Kontakt aufnehmen)
• Kontaktinformationen
• Social-Media-Icons
• Slogan
• Sprachauswahl
• Einkaufswagen

Entscheide, welche dieser Aspekte im jeweiligen Fall am wichtigsten sind, und hebe diesen deutlich hervor.

2. Wende klare, gut lesbare Schriftarten an

Der Header-Text muss auf den ersten Blick deutlich und leserlich sein. Verwende, soweit möglich, kurze Wörter und klare, relativ große Schriftarten. In der Regel ist der Header nicht der beste Platz, um sich mit verschnörkelten Schriftarten auszutoben - diese könnten nämlich schwerer zu entziffern sein.

3. Nutze transparente Header bei Websites mit eindrucks­vollen Bildern

Bei Sites mit imposanten Bildern solltest Du es mit einem transparenten Header versuchen. Dieser verleiht den Bildern maximale Geltungskraft - wichtige Links werden dabei aber auch angezeigt. Falls du einen Sticky Header (einen feststehenden Header) verwendet hast, könnte die Transparenz störend wirken. Beim Scrollen laufen nämlich nicht nur die Bilder des Headers mit, sondern ebenfalls der Hintergrund. Füge in diesem Fall eine Hintergrundfarbe hinzu, damit die Bilder beim Scrollen nicht von den Links ablenken.

4. Verkleinere den Header beim Scrollen, damit nützliche Infos sichtbar bleiben

Ein “schrumpfender” Header eignet sich hervorragend um den Platz, den er beim Scrollen einnimmt, zu verringern. Gleichzeitig behalten Nutzer beim Scrollen den Überblick über die wichtigsten Infos. Dies lohnt sich vor allem bei einem sehr großen, imposanten Header. Ein verkleinerter Header kann beispielsweise alle wichtigen Navigationselemente sowie das Logo anzeigen und beim Scrollen die Farbe verändern.

5. Du hast einen Shop? Pack ihn ganz nach oben!

Auf eCommerce-Websites platzierst Du Dein Einkaufswagen-Icon im Header. So können Besucher ihren Einkauf bequem und mit nur einem Klick abschließen – ganz egal, auf welcher Seite sie gelandet sind.

6. Zeige Besuchern anhand von Effekten, wo sie sind – und wo es langgeht

Hover-Effekte sind äußerst praktisch, um Nutzer bei der Navigation deiner Seite zu unterstützen. Wähle Effekte aus, die sichtbar genug sind, um vom Besucher wahrgenommen zu werden – aber nicht so auffällig, dass sie ablenken oder stören. Denk daran, dass einige Effekte nur auf einem Desktop-Computer sichtbar sind und du gezielt nach Effekten suchen solltest, die auch auf mobilen Geräten funktionieren (wie etwa Farbwechsel oder Unterstrich). Header können die Persönlichkeit eines Unternehmens mithilfe von Farben und Effekten hervorheben. Bei lockeren Firmen eignet sich beispielsweise ein Schwebe-Effekt, der beim Stöbern das unbeschwerte Image der Firma widerspiegelt. Im Gegensatz dazu wäre ein Schwebe-Effekt bei Unternehmen, die professionelle Dienste anbieten - wie etwa Anwälten oder Immobilienmaklern - eher fehl am Platz.

7. Wähle ein Layout, das dem Logo schmeichelt

Der Header ist oft das Erste, was ein Besucher deiner Seite wahrnimmt - deswegen sollte das Firmenlogo auf jeden Fall dazugehören. Wähle ein Layout, das zur Form und dem Design des Logos passt. Grundsätzlich kommen runde und quadratische Logos in der Mitte am besten zur Geltung; rechteckige Logos sollten derweil nach rechts oder links.

8. Verwende Design-Elemente, die die Persönlichkeit der Firma hervorheben

Mit Farben und Effekten kannst Du die Persönlichkeit eines Unternehmens unterstreichen. Bei lockeren Firmen eignet sich beispielsweise ein Schwebe-Effekt, der beim Stöbern das unbeschwerte Image der Firma widerspiegelt. Im Gegensatz dazu wäre ein Schwebe-Effekt bei Unternehmen, die professionelle Dienste anbieten - wie etwa Anwälten oder Immobilienmaklern - eher fehl am Platz.

9. Nutze aufklappbare Menüs, damit deine Bilder ins Auge stechen

Aufklappbare Menüs sind ideal für bilderreiche Websites wie Portfolios, da sie den Bildern ausreichend Platz zur Verfügung stellen, um richtig zur Geltung zu kommen. Während sie sich auf mobilen Websites schon länger großer Beliebtheit erfreuen, sind sie mittlerweile auch immer öfter auf Desktop-Websites anzutreffen.

Wenn wichtige Icons und Links notwendig sind (z. B. auf einer eCommerce-Website) gibt ein aufklappbarer Header Dir die Möglichkeit, Icons wie einen Einkaufswagen anzuzeigen. Dieser fällt Nutzern augenblicklich auf und gibt ihnen gleichzeitig zu erkennen, dass zusätzliche Infos nur einen Klick entfernt sind (beispielsweise eine Navigationsleiste).

10. Zeit für die Sidebar – ist sie richtig für dich?

Sidebar-Header erlauben es dir, die wichtigsten Informationen einer Seite anzuzeigen, ohne den Nutzer beim Scrollen abzulenken. Dies eignet sich vor allem bei Seiten mit wichtigen Anker-Links, die innerhalb derselben Seite verlinken. Sie können auf diese Art jederzeit am Bildschirmrand angezeigt werden.