logo design

Was du beim Logo-Design für Websites beachten solltest

Logos für Webseiten 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.

Zwischen Webdesign und Grafikdesign gibt es eine sehr durchlässige Grenze. Grafik-Designer haben oft den Schwerpunkt Print, entwerfen Geschäftsausstattungen, Plakate, Anzeigen und Logos. Webdesigner dagegen gestalten Websites, Newsletter, Banner und natürlich Logos. 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, die eher im Print zuhause sind, Designs für Webseiten – und bringen Print-Logos ins Netz. Umgekehrt dagegen ist es eher die Ausnahme, dass Webdesigner 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.

Drei Richtlinien zur Erstellung eines Web-Logos

Es gibt drei übergeordnete Punkte, die du beim Logo-Design berücksichtigen kannst:

  1. Querformat: Das Logo erscheint oben links, so erwarten es die Nutzer. 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.
  2. Klare Strukturen: Es ist sehr wichtig, die Logo-Größ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.
  3. Keine Claims: Viele Kunden aber auch Designer verspüren die manchmal unwiderstehliche Neigung, unter dem Logo einen Claim zu platzieren. Text im Bild also. Das macht 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 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 gelungene 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.

weblogos

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 Webseite 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“.

Du möchtest alle 2 Wochen die neusten Blog-Artikel und News rund um WordPress erhalten?

Dann abonniere jetzt unsere kostenlosen WP-News!

Ja, ich bin mit der Datenverarbeitung einverstanden.

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 Panda-Bär, der auch für sich alleine 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 Seite 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 sehr gut. Auch dieses Logo kommt aus einer Zeit, als es noch keine Webseiten gab. Ich bin mir sicher, dass der WWF heute ein anderes Logo erstellen lassen würde – eins im Querformat.

Beispiele mit dem Logo im Querformat auf der Webseite

RAIDBOXES ist natürlich ein Beispiel. Eine Wortmarke, natürlich im Querformat – sonst kannst du es ja nicht lesen. Dieses Logo bezeichne ich als gelungen. Denn es hat einen hohen Wiedererkennungswert, was das Wesen eines guten Logos ausmacht. Zudem funktioniert es auch in Klein auf mobilen Endgeräten. Dies gilt für sehr viele Seiten des modernen Internets, wie Google, Facebook, Amazon, Microsoft, YouTube und viele andere mehr.

RAIDBOXES logo
Das Logo von RAIDBOXES

Dasselbe können wir über die Seite WordPress.org sagen. Es gibt für jeden einsehbare Vorgaben für die Darstellung des WordPress-Logos: Einen Styleguide. Das Logo hat das W als Signet und die Wortmarke im Querformat, aber auch hochkant. Auf der Website wird auf das Hochkant-Logo selbstverständlich verzichtet. Aus guten Gründen ist das Logo mit Signet nicht nur quer, sondern auch relativ groß oberhalb der Navigation abgebildet. Auch hier ist das Menü nicht fix, was der Usability der Website keinen Abbruch tut.

Beispiele von Seiten mit WordPress

Eine weitere faszinierende Webseite, 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-Seite. 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 Logos 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 für dich und deine Kunden erstellen. Natürlich: Der einfachste Weg wäre es, einen Grafikdesigner 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:

Online Logo Beispiel
Das Logo von PUBLIZIEREN IM NETZ

Tools zur Recherche

Genau so gehe ich auch für meine Kunden vor. Wenn Logo-Design 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 zeige ich diese dem Kunden, suche ein oder zwei zusammen mit ihm aus und baue ein Logo im Querformat.

Wichtig: 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 Webseite, 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

Ein gutes Logo zu erstellen ist relativ einfach. Du brauchst ein klares Konzept und eine sehr gute Idee. Inspirationen liefern dir andere erfolgreiche Marken und Websites. Auch Gespräche mit deinen Kollegen und mit Freunden können dir helfen, auf die 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.

Du hast Fragen zum Logo-Design für Websites? Nutze gerne die Kommentarfunktion. Du willst über neue Beiträge zu Webdesign und Onlinemarketing informiert werden? Dann folge uns auf Twitter, Facebook oder über unseren Newsletter.

Bilder: Jeff Sheldon, Rohan Vijay