Titelgrafik für die Website
Logo-Design

DeveloperIT-ProjekteSoftwareWorkspaceZubehör

Logo und Kopfbereich einer Website fallen dem Nutzer als Erstes ins Auge. Grund genug, sich um das Design dieser sensiblen Bereiche besonders intensiv zu kümmern.

Erster Eindruck

Titelgrafik für die Website

Was sehen Sie zuerst, wenn Sie eine Webseite betreten? Die ehrliche Antwort lautet wohl: die am meisten blinkenden Banner und sonstige besonders akzentuierte Reize. Sind diese Aufmerksamkeitskiller aber nicht vorhanden, wird es meist der Kopfbereich der Webseite sein, der zuerst wahrgenommen wird (nicht zu verwechseln mit dem head-Bereich in HTML). Dazu trägt bei, dass der Browser die Seite von links oben nach rechts unten aufbaut und dies auch – zumindest in westlichen Gefilden, der Leserichtung entspricht. Vieles, was heute für den Kopfbereich als normal gilt und vom Nutzer erwartet wird, geht sicherlich auf diese grundlegenden Überlegungen zurück.


Jobbeschreibung

Titelgrafik für die Website

Wegen seiner exponierten Stellung hat der Kopfbereich mehrere Aufgaben: Er sollte dem Nutzer mitteilen, wo er sich befindet. Das Wo ist hier im Sinne von »auf welcher Website« zu verstehen. Eine Breadcrumb-Navigation ist zwar nützlich, aber bei weitem noch kein Standard. Außerdem wird sie meist unter dem normalen Kopfbereich eingefügt. Es geht hier also eher darum, die Firma oder die Website an sich wiederzuerkennen oder zu erkennen, dass die Site geeignete Informationen enthält.

Die zweite Aufgabe des Kopfbereichs ist es, den Nutzer in die Seite zu ziehen und für die Seite einzunehmen. Diese Teaser-Funktion kann auf sehr unterschiedlichen Wegen erreicht werden: beispielsweise mit ansprechenden Bildern oder mit aufgeräumter Gestaltung. Hier bildet der Kopfbereich auch oft eine optische Klammer für den Rest der Seite. Die dritte Aufgabe umfasst alle funktionalen Pflichten, die ein Kopfbereich haben kann: Die Spanne reicht hier von der ersten Navigationsebene im Header bis hin zur Suche oder der Sprachwahl.

Diese drei Aufgaben lassen sich meist auch bei außergewöhnlichem Design umsetzen. Allerdings ist natürlich nichts davon zementiert. Design befindet sich – gerade im Web – im stetigen Wandel. Interessant ist auch, ein wenig in den Web-Archiven zu surfen und sich das Design von Seitenköpfen im Wandel anzusehen. Vor allem in Sachen Funktionalität und Teaser-Wirkung hat sich hier viel getan. Aber der Reihe nach: Im Folgenden stehen die Einzelteile einer Kopfzeile auf dem Prüfstand. Sie erfahren, worauf Sie achten müssen.


Logo positionieren

Titelgrafik für die Website

Das Logo ist die wichtigste Orientierung für den Nutzer. Seine Hauptaufgabe ist, für Wiedererkennung und Identifikation mit der Firma oder Marke zu sorgen. Große Sorgfalt sollte bei der Umsetzung des Logos für das Web walten. Ein Problem sind sehr feine Logos mit filigranen Formen. Verkleinert man diese auf für das Web geeignete Formate, verschwimmen sie oft – gerade beim Einsatz von Antialiasing -, und feine Linien verschwinden. Bei solchen Logos bleibt nichts anderes übrig, als eine spezielle Webversion zu entwickeln und mit einem Pixelraster zu arbeiten.

Wie viel Arbeit hier auf einen zukommt, hängt auch davon ab, wie gut vorher im Corporate Design vorgearbeitet wurde: Ist ein Logo schon in kleinen Größen und Schwarz-Weiß druckbar, besteht die berechtigte Hoffnung, dass es sich gut für das Web verkleinern lässt.

Die nächste Frage gilt der Position des Logos. Hier wird in der Webdesigner-Gemeinde fleißig gestritten. Möglich und in der Diskussion sind die Alternativen links oben und rechts oben. Für rechts oben spricht, dass diese Position nicht absoluter Standard ist, also recht gut Aufmerksamkeit erzielt. Und vor allem wird damit die spannende Position links oben in der Leiste für Funktionalität frei. Audi (www.audi.de) hat diesen Weg beispielsweise gewählt, um seine Modellpalette links oben in der Kopfleiste zu platzieren.

Die größte Kritik kassiert das Logo auf der rechten Seite dafür, dass es bei kleineren Monitorauflösungen abgeschnitten wird. Um das zu vermeiden, beschränkt sich Audi auf knapp 800 Pixel Breite. Damit die Site auf großen Monitoren nicht verloren aussieht, werden im Gegenzug die rechte Navigationsleiste und das Logo mit der Größe des Browserfensters nach rechts verschoben. Das wirkt zwar bei sehr großen Monitorauflösungen etwas gestreckt, ist dafür aber auf jeden Fall ein Blickfang und eine flexible Lösung.


Wort- und Bildmarke

Titelgrafik für die Website

Die Größe des Logos im Kopfbereich lässt sich schwerlich mit Regeln oder Erfahrungswerten erfassen. Ein Logo mit dünnen und feinen Anteilen benötigt beispielsweise mehr Größe. Interessant ist hier auch die Kombination aus Wort- und Bildmarke beziehungsweise auch Logos, die nur aus einer Wortmarke bestehen. Beispielsweise verwendet BMW (www.bmw.de) den Claim »Freude am Fahren« unter seinem Logo. Um ihn noch lesbar zu halten, steht er auf weißem Grund und in gerade noch akzeptabler Größe. Besser lesbar wäre er natürlich als HTML-Text oder in einer Bildschirm-optimierten Pixelschrift. Bei einem strengen Corporate Design sind solche Anpassungen für das Web allerdings kaum möglich und aus Gründen der Wiedererkennung und Identifikation auch nicht unbedingt zu empfehlen. Bei sehr langen Wortmarken oder Logos mit zugehörigen Unterzeilen lohnt es sich allerdings unter Umständen, für das Web zumindest die Größenverhältnisse zu variieren.

Insgesamt richtet sich die Gestaltung des Kopfbereichs sehr stark nach den Größenverhältnissen des Logos. Im Vordergrund sollte bei jeder Wortmarke die Lesbarkeit stehen, denn ansonsten sorgt sie beim Nutzer nur für Verwirrung. Als zweite wichtige Eigenschaft sollte das Logo mit der Startseite verlinkt sein. Zwar ist dieser Brauch im Web nicht mehr ganz so verbreitet wie zu Anfangszeiten, aber viele langjährige Surfer suchen doch gewohnheitsmäßig über das Logo den Home-Link.


Farbwelten

Titelgrafik für die Website

Im Gegensatz zum Druck sind Farben im Web kostenlos. Deswegen wird gerne und häufig in den Farbkasten gegriffen und das Logo mit Effekten, Verläufen und Ähnlichem versehen. Das muss nicht unbedingt schlecht sein, es gibt allerdings einige grundlegende Dinge zu beachten. Zum Einen leidet manchmal der Wiedererkennungswert, wenn ein Logo zu bunt und verspielt ist. Klare Formen und prägnante Farben sind oft wesentlich besser zu merken. Außerdem sollte das Logo natürlich nicht nur im Web zu realisieren sein. Viele Effekte, die im Web recht gut aussehen, lassen sich so nicht eins zu eins auf Papier bringen oder scheitern am Budget.

Neben den Logo-Farben ist natürlich auch die Farbe des Kopfbereichs von Bedeutung. Die Farben müssen eindeutig zur Website selbst passen. Ein sehr gutes Beispiel in Sachen guter Farbwelt ist TV.com. Dort definiert der Kopfbereich konsequent Blau und Schwarz als Symbolfarben für Fernsehen und Multimedia. Und wenn man genau hinsieht, wird klar, dass die Farben zwar überall aufgegriffen werden, das bei weitem dominanteste Vorkommen ist aber der Kopfbereich. Er gibt sozusagen das Farbkonzept für die übrige Website vor.

Die Farbe im Kopfbereich kann allerdings auch je nach Themengebiet wechseln und so den User beim Surfen unterstützen. Beispielsweise lassen sich unterschiedliche Produktlinien mit verschiedenen Farben versehen, wie bei der Paricon AG (www.paricon-group.de). Die Hintergrundfarbe und das Logo bleiben dann gleich und nur die Farbe des übrigen Kopfbereichs ändert sich.


Bildkonzept

Titelgrafik für die Website

Neben dem Einsatz der passenden Farbe sind im Kopfbereich auch Hintergrundbilder vorstellbar. Sehr verbreitet ist diese Art von Optik bei Weblogs (beispielsweise vernissage.tv/blog oder blog.codefront.net). Dort bildet ein Foto oder eine Grafik den Kopfbereich. Meist kommt kein Logo dazu, sondern nur eine Wortmarke, und darunter dann die Navigation.

Aus einem Hintergrundbild lässt sich mit recht wenig Aufwand ein komplettes Bildkonzept umsetzen. Dazu müssen Sie in Ihrem Layout das Hintergrundbild nur separat angelegt haben und beispielsweise beim Einsatz eines Content-Management-Systems wechselbar machen. Das Bildkonzept kann aus Fotos bestehen, aber auch aus passenden Grafiken. Denkbar ist es auch, das Logo dort wieder aufzunehmen. Die Bildsprache sollte jedoch durchgängig sein.

Entscheidend ist meist nicht das Bildkonzept an sich, sondern, wie gut es zur Umgebung passt und wie der Kopfbereich eingeteilt wird. Steht das Logo auf dem Hintergrundbild, wird es oftmals in der Wirkung beeinträchtigt. Zwar kann man versuchen, das Logo mit Effekten wie Schatten oder Glanz vom Hintergrund abzuheben, aber das führt meist zu einer ungewollten Verfremdung des Logos. Besser ist es meist, Logo und Bild voneinander zu trennen und dem Logo etwas Freiraum zu gönnen.


Navigation prominent platziert

Titelgrafik für die Website

Logo, Farbkonzept und Bildwelt sind für die Orientierung und das Wohlfühlgefühl der Webseite extrem wichtig. Sie bieten aber alle kaum Funktionales. Wenn Sie einen Kopfbereich konzipieren, möchten Sie aber dort vielleicht auch Navigationselemente unterbringen. Verbreitet sind hier zwei Ausprägungen: Die erste Ebene der Hauptnavigation wird dort hineingepackt, oder aber Sie positionieren dort übergeordnete Funktionen wie die Kontakt-Links, die Sitemap, das Impressum oder die Sprachwahl. Bei genügend großem Kopfbereich ist natürlich auch eine Verbindung von beidem möglich. Auch die Suche ist im Kopfbereich sehr günstig platziert. Vor allem aus Accessibility-Gesichtspunkten hat eine Suche, die im HTML-Fluss weit oben kommt, Vorteile, da sie beim Vorlesen einer Website per Screenreader als Erstes angeboten wird.

Eine interessante Lösung sind auch Auswahlmenüs, die den Direktzugriff auf ausgewählte Inhalte erlauben. Geschickt umgesetzt wird das beispielsweise auf dem US-TV-Serien-Portal Serienjunkies.de. Dort enthält das Auswahlmenü im Kopf alle Serien der Website.

Welche Funktionalitäten in den Kopfbereich gehören, lässt sich nicht in Regeln fassen. Hier hat sich auch bezüglich der Positionen noch keine Standardlösung herauskristallisiert. Prinzipiell gilt aber die Regel: je komplexer die Website, desto umfassender sollten Sie Funktionen in den Kopfbereich auslagern.


Licht und Schatten

Titelgrafik für die Website

Die Navigation im Kopfbereich einer Website ist auch ein Umsetzungsproblem. Die erste Frage gilt der Schrift: soll eine exotische Schriftart eingesetzt werden, so müssen die Navigationspunkte Grafiken sein – mit allen Nachteilen für Accessibility und Suchmaschinenposition. Reicht auch HTML-Text, kann immer noch eine Hintergrundgrafik eingesetzt werden. Diese sollte allerdings nach Möglichkeit vom Hintergrundbild unabhängig sein, damit dieses problemlos ausgetauscht und neue Navigationspunkte hinzugefügt werden können. Problematisch wird das bei weichen Übergängen, da hier Alphatransparenz erforderlich wäre, die das Bildformat PNG-24 zwar bietet, der Internet Explorer bis inklusive Version 6 aber nicht anzeigen kann – außer über einen Hack.

Verlockend sind außerdem Javascript-Effekte mit ausklappbaren Menüs. Der Vorteil ist klar: Man hat eine aufgeräumte Hauptnavigation, in der sich der Nutzer dann bequem und ohne Seitenwechsel durchklicken kann. Problematisch ist nur, was passiert, wenn der Nutzer Javascript deaktiviert hat. In diesem Fall muss unbedingt ein alternativer Navigationsweg angeboten werden.


Fazit

Titelgrafik für die Website

Natürlich stehen ein Logo und der Kopfbereich einer Webseite nicht separat. Dennoch kann eine separate Betrachtung, wie sie dieser Artikel vornimmt, zu neuen Erkenntnissen führen. Sieht man sich eine Website an, die man nicht gut findet, ist es nämlich oft schwer, festzustellen, woher das Gefühl kommt. Vielleicht gibt ein Blick auf den Kopfbereich und das Logo da schon erste Anregungen.