Logos im Web

Irgendwie wird das hier immer mehr zu einem Webdesign-Blog, einfach weil ich mich momentan hauptsächlich damit beschäftige, meine Webseiten gründlich zu überholen.

Heute im Angebot: Logodesign fürs Internet.

Anlass dazu ist der Ausbau der Logoisierung (verlogoung? Logoausstattung?) von sporle.de und spilmkritiken.de.

Es gibt genau drei Typen von Logo, die eine Webseite haben sollte:
Das eigentliche Logo odr banner im Kopf der Webseite, ein Banner zum verlinken (dürfen auch mehrere sein) und ein Favicon.

Ich nehm jetzt einfach mal meine beiden größten Websites als beispiele heran, wie so etwas aussehen kann, was daran gut ist und was nicht (soweit ich das selbst sehen kann):

1. spilmkritiken.de
Die Seite orientiert sich in der Gestaltung an einem aufgeschlagenen Buch, das Logo an einem Buchregal (Darstellung verkleinert):

Dieses Logo findet sich auf der Seite selber ganz oben über der Navigation und allen Inhalten. Farblich unterstreicht der braune Ton die eher ruhige Farbwahl der Seite, die sich an einem aufgeschlagenen Buch und somit farblich an leicht angegrautem Papier orientiert.

Der Linkbutton übernimmt in diesem Fall das Farbmuster weiss auf braun mit einem einfachen Text. Von der Form her ist es ein klassischer Blogbutton, die Ähnlichkeit zum Logo ist groß. Dass der weise Bereich (für Blogbuttons untypisch) rechts liegt erhöht die Auffälligkeit.
Leider lässt das Logo für sich keine Rückschlüsse auf die Inhalte der Seite zu: .
Der Button ist nicht einmal 1KB groß und eignet sich daher auch dazu, auf Seiten eingebunden zu werden, auf denen er häufiger gezeigt wird.

Dazu kommt das Favicon. Favicons sind eine der wenigen guten Erfindungen von Microsoft. Sie erscheinen bei allen Browsern in den Favoriten/Lesezeichen/Bookmarks/whatever links vom Namen der Seite und helfen, bei hunderten Lesezeichen nicht den Überblick zu verlieren. In den meisten Browsern sieht man es auch am linken Rand der Adressleiste sowie oben im Tab neben dem Namen der Seite, wenn man sie besucht. Es hilft dabei, Leser an die eigene Seite zu erinnern, wenn sie die Lesezeichenliste durchschauen und bringt daher etwas mehr Leser auf die Seite. Viellleicht einen bis zwei pro Monat, aber schließlich ist jeder Leser wichtig ;-) .
Das Favicon von spilmkritiken.de übernimmt das braune Farbmuster, arbeitet aber mit dem Videospielethema, indem es die Form eines Joysticks hat. Die Verbindung zur Seite ist gerin, man muss das favicon kennen, um es richtig zuordnen zu können. Wenigstens die eher selten verwendete braune Farbe gibt einen Hinweis:
Dazu kommen die Buchstaben "SK" als Abkürzung des Seitennamens. Die gefallen mir nicht so, aber ich denke, die Vebrindung zur Seite ist sonst zu gering. Ausserdem bin ich mir nicht sicher, ob man das als Joystick erkennen kann.

Favicons sind nicht grade einfach zu gestalten, da sie nur 16x16 Pixel groß sind. Auf dieser Fläche muss man ein einmaliges Symbol gestalten, welches die eigene Seite angemessen repräsentiert.

2. sporle.de
Andere Seite, anderes Thema, völlig anderer Auftritt.
Die beherrschende Farbgebung auf sporle.de liegt im Bereich blau bis türkis, das Logo ist heller und verfügt über mehr Freiraum. Trotz der recht nüchternen Schrift wirkt es nicht streng:

(auch hier eine verkleinerte Version)

Der Bezug zu Videospielen ist sehr viel stärker, helle Farben (weiss, blau, etwas magenta) prägen das Bild. Die Seite selbst liegt farblich größtenteils im blauen Spektrum.

Hier war das Favicon die erste Idee. Nach drei Tagen Überlegen, wie denn ein Favicon für die Seite aussehen könne kam ich schließlich auf eine Hantel, bildlich mit einem Joypad kombiniert.
Ehrlich gesagt kam die Idee genau dann, als ich eine Hantel in der Hand hielt - soviel zu der Frage, wo eigentlich Ideen herkommen.
Ich nahm also Paint (wiel man darin Pixel für Pixel zeichnen kann), zeichnete die Stange als Strich in der Mitte und setzte dann die Gewichte dran. Eine Hantel ohne 3D ist extrem einfac zu zeichnen, sie besteht aus einem Strich (der Stange) und ein paar senkrecht dazu stehenden Rechtecken (den Gewichten). Um die Knöpfe des Controllers einsetzen zu können musste die Hantel relativ dick werden: .
Das ist schade, da so die Ähnlichkeit zu einer Hantel mE nicht mehr wirlich gegeben ist. Vielmehr sieht es aus wie ein eckiger Controller.

Eine Verbindung mit dem Logo der Site bestand irgendwie auch so gar nicht.

Abhilfe verschaffte der Blogbutton, der ja noch gebraucht wurde: Da der Schriftzug kürzer war und somit komplett im farbigen Bereich Platz fand setzte ich das Favicon daneben. Jetzt war die Verbindung hergestellt und im Kontext eines Blogbuttons sah es auch nicht ganz so primitiv aus wie alleinstehend:
Der Unterschied zwischen dem eigentlichen Favicon und der Version im Button kommt übrigens daher, dass ich das Favicon inzwischen durch zwei zusätzliche Buttons ergänzt , das aber noch nicht ins Blugbutton übernommen habe.

3. Schluss: Logos im Web
Es gibt also drei Arten von Weblogos: Solche für den Auftritt im Internet, solche für die Verlinkung auf die eigenen Seiten und Favicons.
Das eigene Logo soll vor allem nach was aussehen und sich in den Webauftritt einfügen. Im Zwiefelsfall legt es wichtige Designelemente der restlichen Seite wie die Farbgebung fest. Eine zu große Abweichung von der Logofarbe lässt das Logo unpassend wirken. Die Größe ist relativ beliebig.
Das Linklogo sollte klein sein, damit es schnell lädt und von anderen problemlos eingebunden werden kann. Durch die kleine Größe ist eine Beschränkung auf zwei farben sinnvoll. Wenn möglich sollte das Favicon in das Design einbezogen werden, da es eine passende Größe hat und bei beiden Elementen Einfachheit nützlich ist. Der Schriftzug sollte kurz sein, sonst wird der Button zu lang. Blogbuttons haben in der Regel eine Größe von 80x15 Pixeln.
Favicons sind 16x16 Pixel groß und sind daher schwer zu gestalten. Ihre Farbe sollte um auf jeden Fall zur farbgebung der Seite passen - ich hatte früher ein graues Favicon für spilmkritiken.de, das einfach nicht passte. Ein Motiv, das sich in nur zwei Farben darstellen lässt oder ein Logo, das auch erkennbar bleibt, wenn nur ein Ausschnitt zu sehen ist (Pepsi hat so eins) sind dafür ideal. Mehr als drei, vier Buchstaben passen an Schrift eh nicht rein, daher sollte Schrift nur benutzt werden, wenn es nicht anders geht.