Der Kopf der Seite

Header

Der Header-Bereich hilft mit seinen Komponenten der Orientierung.

Die Navigation, meist die Main-Navigation ist dort zu finden sowie auch das Logo des Unternehmens.

Grössere Webseiten haben oftmals eine Meta-Navigation über der Main-Navigation um weitere spezifischere Inhaltlinks anzubieten.

Wireframe eines Browser mit dem Standard Header Setting.
© Webdesign Essentials

Header Komponenten

Logo

Standardmässig mit der Homepage verlinkt. Standardmässig oben Links.

Navigation

Main Navigation

Die Hauptnavigation um sich in der Seite zurechtzufinden. Meist Horizontal.

Sub Navigation

Die zweite Navigationsstufe nach der Hauptnavigation. Sub-Sub ist die Dritte. Meistens erst durch Hover oder Klick erreichbar.

Side Navigation

Für Webseiten mit vielen Inhalten lohnt sich eine vertikale Side-Navigation. Auch Sidebar genannt. Main- wie auch Sub-Navigation können in einer Side-Navigation sein.

Meta Navigation

Navigations-Elemente, die speziell sind. Meistens ist die Sprachwahl, Suche sowie übergeordnete Seiten da zu finden.

Dropdown

Ein Menu, welches aus dem Button herausfährt.

Fly-Out Navigation

Grossflächige Navigation, welche durch Hover oder Klick zum Vorschein kommt.

Sticky Navigation / Sticky Header

Eine Navigation oder ein Header, der am Browser-Rand kleben und somit immer sichtbar bleibt.

Zusätzliches

Breadcrumb

«Brotkrumen» Um wie Hänsel & Gretel den Weg zurück zur Startseite zu finden. Es hilft sich in all den Unterseiten zurechtzufinden.

Language Switch

Sprachwechsel. Die Sprachwahl wird zwar bei vielen grösseren Webseiten automatisch über die vom User vordefinierte Browser-Sprache eingestellt. Aber dennoch oft im Header-Bereich zu finden.

Searchfield

Für die Eingabe des Suchbegriffes. Neu ohne Button nur mit Icon, da man «Enter» drückt.

Die Suchergebnisse sind meistens auf einer neuen Seite.

Vertiefe dich ins ganze Kapitel

Anatomie einer Webseite