Logodesign für Websites folgen ganz anderen Regeln, als es für Print oder für die sonstige Kommunikation der Fall ist. Die Anforderungen an Logos und Signets sind gewachsen. Wir zeigen dir Richtlinien und Tools zur Erstellung deines Web Logos.

Logodesign für Print und Web

Zwischen Webdesign und Grafikdesign gibt es eine sehr durchlässige Grenze. Grafikdesign hat oft den Schwerpunkt Print, es werden Geschäftsausstattungen, Plakate, Anzeigen und Logos entworfen. Im Webdesign dagegen werden Websites, Newsletter, Banner und natürlich Logos gestaltet.

Manche vermischen beide Geschäftsbereiche, sie bieten Design für Print und Web an. Wobei für den Endkunden nicht zu erkennen ist, wer was kann und vielleicht auch nicht machen sollte. Dann entwerfen Grafikdesigner:innen, die eher im Print zu Hause sind, Designs für Websites – und bringen Print Logos ins Netz. Umgekehrt dagegen ist es eher die Ausnahme, dass Webdesigner:innen ganze Geschäftsausstattungen entwickeln.

Es sollte eigentlich jedem Menschen mit einem „grafischen Auge“ oder einem grafischen Beruf einleuchten, dass ein Logo auf einer Website andere Anforderungen hat, als eines auf Briefpapier oder an einem Firmengebäude.

Durch das Aufkommen der Smartphones und des mobilen Internets haben sich die Anforderungen an Logos und Signets (das sind kleine Grafiken, die man für Logos verwenden kann) im Web noch einmal verändert und konkretisiert – aber auch verschärft. So kompliziert ist es am Ende gar nicht. Und dennoch braucht es einiges an Erfahrung und Souveränität, um ein gutes Logo für eine Website zu entwickeln.

3 Richtlinien zur Erstellung eines Logos

Es gibt drei übergeordnete Punkte, die du beim Logodesign berücksichtigen kannst:

• Querformat: Das Logo erscheint oben links, so erwarten es die User. Manchmal ist es auch in der Mitte der Website erlaubt. Aber um wertvollen Platz zu sparen und die Aufmerksamkeit der User auf das Wesentliche zu lenken, ist es sinnvoll, die allgemeinen Sehgewohnheiten der Menschen zu berücksichtigen – mit einem Logo im Querformat oben auf der linken Seite.
• Klare Strukturen: Es ist essenziell, die Logogröße auf einem Smartphone oder einem Tablet zu berücksichtigen. Aber auch viele Desktops und Laptops haben entweder eine sehr hohe Auflösung, also viel Platz, oder eine eher geringe Bilddiagonale. In beiden Fällen kann das Logo recht klein erscheinen. Es muss aber auch in geringen Größen noch gut funktionieren.
• Keine Claims: Viele verspüren die manchmal unwiderstehliche Neigung, unter dem Logo einen Claim zu platzieren. Text im Bild also. Das ergibt wenig Sinn. Es ist nicht nur eine Platzfrage, sondern zudem auf Smartphones kaum noch zu lesen. Ganz abgesehen davon, dass damit wertvoller Text von der Google Indexierung (SEO) ausgeschlossen wird.

Mir ist klar, dass sich über diese drei einfachen „Regeln“ zur Erstellung eines guten Logos diskutieren lässt. Denn natürlich findet man einige Gegenbeispiele oder Marken, die mehr oder weniger ihre eigenen Regeln haben (wollen). Aber das sind dann sehr besondere, erfolgreiche Marken – und Ausnahmen bestätigen auch hier die Regel.

Doch was macht coole Logos aus? Dazu schaut man sich am besten die Logos und/oder die Signets erfolgreicher und großer Unternehmen an. Die genialsten Logos, die ich kenne, sind die von Daimler (der Mercedes Stern), Apple (mit dem Apfel), VW, BBC oder das M von McDonalds. Selbstverständlich gibt noch viele mehr Beispiele. Und die meisten davon stammen aus einer Zeit, in der es kein Internet gab. Logos entwickeln sich jedoch im Laufe der Zeit, wie Marken und Unternehmen auch.

Idealerweise gibt es Logos, die für die verschiedenen Ausgabeformate angepasst werden. Auch dafür sind die eben genannten Lieblingslogos leuchtende Beispiele. Sie funktionieren überall und werden an die jeweiligen Medien mit ihren spezifischen Anforderungen angepasst. Logisch: Ein Briefkopf braucht etwas anderes als eine Leuchtreklame an einem Haus, und eine Website hat andere Bedingungen als eine Visitenkarte.

Signet & Wortmarke im Netz

Dieser Beitrag ist kein kompletter Workshop zur Erstellung eines perfekten Logos. Dazu gehört sicher mehr, als einen Blogpost zu lesen. Aber er soll dir dabei helfen, die Sache mit dem Logo auf deiner Website besser zu verstehen – und aufgrund dessen erfolgreichere Lösungen dafür zu finden.

Nur kurz zusammengefasst: Was ist ein Logo? Wikipedia sagt:

„Ein Logo ist ein grafisches Zeichen, das ein bestimmtes Subjekt repräsentiert. Dies kann ein Unternehmen, eine Organisation, eine Privatperson oder ein Produkt sein.“

So weit, so gut. Ein Logo kann eine Wortmarke sein, wie beispielsweise Coca Cola, Google oder Acer. Es kann ein Signet sein wie bei Playboy, Shell und Mercedes. Meist aber bestehen Logos aus einer Wortmarke und einem Signet. In den oben genannten Beispielen für Signets gibt es immer eine Variante mit und ohne die Wortmarke.

Dies gilt beispielsweise auch für McDonalds mit dem markanten M, das jeder kennt. Das McDonalds Logo gibt es mit der Namensschrift und mit dem Claim (I’m lovin‘ it), aber das M ist immer dabei. Auf der Website von McDonalds hat man es aus den oben genannten Gründen so gelöst, dass man links oben in der Navigation nur dieses M findet – und die Navigation beim Scrollen einfährt. Lediglich das M steht irgendwann noch da. Ich finde das geschickt und platzsparend, denn das Wichtigste ist immer sichtbar: das Signet, das „M“.

Schauen wir uns das Logo auf der Website des WWF an, um ein Beispiel aus dem eher politisch korrekten Bereich zu nehmen. Der berühmte Pandabär, der auch für sich allein stehen könnte, ist über den Buchstaben WWF platziert, der Abkürzung des World Wildlife Fund. Ich finde die Website recht gelungen (übrigens TYPO3), aber man verzichtet auf das Festnageln der Hauptnavigation. Diese ist geschickt gelöst. Sie braucht zwar etwas Platz, beinhaltet aber alles Wesentliche.

Durch die Mega Menü Technologie zeigt man auf der zweiten Ebene in der Navigation alles, was es auf der Website zu sehen gibt. Ruft man durch Mouseover das Megamenü auf, bleibt nur der Panda sichtbar. Es ist zwar ein Hochkant Logo, aber seine Umsetzung ist einwandfrei. Auch dieses Logo kommt aus einer Zeit, als es noch keine Websites gab. Ich bin mir sicher, dass der WWF heute ein anderes Logo erstellen lassen würde – eins im Querformat.

Beispiele von Websites mit WordPress

Eine weitere faszinierende Website, die für uns als Beispiel dient, ist VOGUE America. Ich finde die Umsetzung konsequent und der Marke angemessen. Aber eher schwach in der fixen Navigation nach dem Scrollen. Denn die große Logotype in der Mitte verschwindet und erscheint links oben in Klein, wo wir es erwarten. Das ist eine generelle Herausforderung bei Wortmarken, die auf der Website verkleinert werden müssen. Die Ränder „fransen“ aus und werden unscharf.

Bei SPIEGEL Online (SPON) lässt sich dasselbe Phänomen beobachten. Für beide darf als Ausrede gelten, dass die Logos noch vor dem Internetzeitalter entstanden sind. Dasselbe wie bei der VOGUE sehen wir auch beim amerikanischen TIME Magazin, das unter WordPress läuft.

Etwas anders sieht es bei open NASA aus, auch von WordPress angetrieben und ebenfalls mit einer Logotype. Allerdings von einem feinen grafischen Element umgeben. Dieses Logo – diesmal innerhalb einer fixen Navigation – ist groß genug, um das Element einer Umlaufbahn noch kenntlich darzustellen. Ich finde es gelungen, obgleich man auch hier das Ausfransen der Buchstaben erkennen kann. Daher bin ich kein Freund von reinen Wortmarken, ich bevorzuge Signets mit Abkürzungen.

BBC AMERICA ist ebenfalls eine WordPress Website. Sie hat das Design sowie das Logo brillant gelöst. Ja, ich bin BBC Fan. Aber ich finde zudem das Logo genial und einprägsam – als gelungenes Beispiele für Logodesign im Querformat. Übrigens verzichtet diese Website auch auf eine fixe Navigation nach dem Scrollen – hier steht der Content im Vordergrund.

Ein gutes Logo für das Web erstellen (lassen)

Ihr könnt jetzt also sehr deutlich sehen, dass Logos kein Hexenwerk und manchmal sehr schlicht sind. Ihre Genialität beziehen sie aus der Einfachheit und der Konsequenz, eine eigenständige Marke widerzuspiegeln. Ein gutes Logo ist demnach sehr einfach herzustellen, aber nicht leicht auszudenken bzw. schwer zu (er)finden.

Grafikdesign hin oder her: Du kannst mit deinem grafisch geschulten Auge und ein paar einfachen Regeln ein gutes Logo erstellen. Natürlich: Der einfachste Weg wäre es, jemanden aus dem Grafikdesign zu beauftragen. Das ist zwar der sicherste und garantiert auch der qualitativ hochwertigste Weg – Ausnahmen bestätigen die Regel. Aber es ist eben auch die teuerste Variante.

Im Netz, wir ahnen es, gibt es Portale, die diese Dienste nach Übersee auslagern. So kannst du gutes Grafikdesign in Ländern mit einem geringeren Stundenlohn bei hoher Qualität einkaufen. Etwa aus der Ukraine, aus Indien, Indonesien, Südamerika, aber auch aus den USA etc. Die Nachteile sind die rechtliche Lage bei Streitigkeiten, die Kommunikation und daher zuweilen auch die Abstimmung.

Da ich selbst ein grafisches Auge besitze und so viel wie möglich selber machen will, habe ich mit meinem Logo auf PUBLIZIEREN IM NETZ einen anderen Weg beschritten. Ich suchte und fand ein Signet bei Envato. Ich dachte, es würde mir schon gelingen, eine Logotype dazu zu bauen. Denn das Signet, das mir gefiel, hatte den falschen Inhalt. Ein Logo muss unbedingt zum Gegenstand und zum Charakter deines Unternehmens passen.

Ich fand also ein @ Zeichen, das ich benutzen wollte, aber mit einem „P“ in dem @ Kreis. Zunächst versuchte ich mich selbst daran – ich habe aber zu wenig Erfahrung mit Vektoren in Illustrator. Also fragte ich kurzerhand den Entwickler des Signets über Envato an, ob er das für mich machen könne – und zu welchem Preis. Es war möglich und die Kosten absolut angemessen. Jetzt habe ich dieses „P“ mit der Wortmarke im Querformat:

Logodesign: Tools zur Recherche

Genau so gehe ich auch für meine Kund:innen vor. Wenn Logodesign gewünscht wird, schlage ich vor, zunächst ein Signet passend zur Geschäftsidee und zum Namen auszusuchen. Dabei nutze ich nicht nur Envato oder Envato Elements. Ich schaue auch bei Google nach Logos, oder bei Iconfinder, iStockPhoto und anderen Anbietern kleiner Grafiken. Dann präsentiere ich diese, wir suchen ein oder zwei gemeinsam aus und ich baue ein Logo im Querformat.

Achte dabei auf das Urheberrecht, dein Logo darf keinem existierenden zu nahe kommen. Auch wenn du Signets einkaufst, musst du die Lizenz prüfen (lassen): Gilt diese zeitlich und räumlich uneingeschränkt für deinen beruflichen Zweck? Und auch für die Verwendung als Logo?

Gute Logos sind einfach und drücken möglichst die Geschäftsidee aus. Sie funktionieren auf der Website, weil sie im Querformat sind. Sie können schwarz-weiß dargestellt werden. Und sie lassen sich auf einem Briefpapier oder einer Visitenkarte darstellen – etwas verändert und angepasst, vielleicht mit einem Claim darunter.

Zusammenfassung: Logodesign für Websites

Ein gutes Logo zu erstellen, ist relativ einfach. Du brauchst ein klares Konzept und eine ausgezeichnete Idee. Inspirationen liefern dir andere erfolgreiche Marken und Websites. Auch Gespräche mit anderen können dir helfen, auf eine einfache, brillante Idee zu kommen. Aber mal ehrlich: brillant braucht es nicht sein, angemessen kann ausreichen, gut wäre schon mehr als genug. Du kannst auf Grafikplattformen nach Logos bzw. Signets suchen.

Natürlich sollten die mehr oder weniger abstrakten Zeichen etwas mit dem Metier, für das sie stehen, zu tun haben. Wobei es hier auch witzige Kombinationen geben kann. Oder aber konsequente Herleitungen, etwa wenn wir an den berühmten Apfel von Apple denken. Wer wäre darauf gekommen, einen Apfel mit einem fehlenden Bissen zu nehmen. Aber dieser kleine witzige „Störer“ macht dieses Logo so genial.

Ich hoffe, du hast nun einige Anhaltspunkte, um ein tolles nächstes Logo für das World Wide Web zu erstellen. Ich wünsche dir viel Glück und viel Spaß dabei.