formativ.net Internetagentur Frankfurt

 

Webdesign in der Praxis: Responsive Design und seine Auswirkungen auf das Logo-Design

Veröffentlicht: 22.11.2016

Das Internet ist flexibel geworden. Es verändert sich in seiner Form und wird mit unterschiedlichen Endgeräten und in ganz unterschiedlicher Bildschirmauflösung aufgerufen. Damit ändern sich nicht nur die Anforderungen an die Gestaltung von Internetseiten, auch die gestalterischen Hürden zum Beispiel bei der Entwicklung eines Logos sind gestiegen.

Denn die Zeiten, als es nur eine Handvoll Anwendungsbereiche gab, sind vorbei. Ebenso wie das Webdesign selbst sollte ein Logo auf unterschiedlichen Bildschirmen und in unterschiedlichen Auflösungsstufen funktionieren. Dies ist nicht nur bei der Gestaltung neuer Logos zu beachten. Auch ein vorhandenes Corporate Design sollte den neuen Anforderungen Rechnung tragen und gegebenenfalls angepasst werden.

Logo-Gestaltung und Responsive Webdesign

Ein Logo repräsentiert das eigene Unternehmen und wurde früher vor allem im Print-Bereich z.B. für die Geschäftsausstattung und Werbematerialien eingesetzt. Im Falle der Internetnutzung per Desktop funktionierten die meisten Logos auch hier. Wie in vielen anderen Bereichen haben sich aber auch beim Logo-Design mit der Einführung von Smartphones und Tablets die Spielregeln geändert. Die verschiedenen Bildschirmgrößen, Auflösungen und Pixeldichten stellen heute neue Anforderungen an ein gutes Logo.

In einem Beitrag des „Smashing Magazine“ zeigt Jon Tarr eindrucksvoll, wie sich der Wandel der Zeit auf die Logo-Gestaltung ausgewirkt hat und wie bekannte Unternehmen sich diesen Veränderungen gestellt haben.  Wesentliche Aspekte aus seinem Beitrag haben wir euch im Folgenden zusammengefasst. Beispiele zur Logo-Evolution großer Marken wie Google, Skype, twitter und Co. zeigen euch zudem, wie bestehende Logos sich verändert haben und für Responsive Webdesign optimiert wurden.

Keep it simple

Wenn ihr euch einmal die nicht mehr ganz aktuelle Liste der wertvollsten Marken 2013  anschaut und euren Focus auf die Logos legt, was fällt euch dabei auf?

Richtig, die meisten Logos sind sehr einfach gehalten. Ein gutes Beispiel ist der uns allen bekannte angebissene Apfel von Apple. Das erste Apple-Logo so jedoch ganz anders aus. Es stammt aus dem Jahr 1976 und wurde von Ron Wayne entwickelt. Im Falle von Apple wurde es wurde jedoch bereits schnell vom neuen und fast noch aktuellen Logo abgelöst.

Entwicklung Apple Logo

Das menschliche Gehirn kann sich simple Formen besser einprägen als komplexe Formen. Deswegen haltet euer Logo immer so einfach und schlicht wie möglich. Das hat Apple frühzeitig erkannt.  Das Apple-Logo von 1977 hielt sich mehr als 30 Jahre. Bis heute wurden nur farbliche Änderungen vorgenommen.

Um den Vorteil eines einfachen Logos in Zeiten des Responsive Webs zu veranschaulichen, hier das aktuelle Skype-Logo einem komplexen Logo gegenüber gestellt:

Design: Simple vs Komlpex

Das komplexe Logo zeigt seine Schwächen, wenn die Darstellung auf dem Bildschirm kleiner wird. Das kann man sehr gut auf der linken Seite beobachten. In der 50%-Variante sind die meisten Details noch zu erkennen. In den beiden kleineren Varianten leidet aber sowohl die Lesbarkeit als auch die Detaildarstellung.  Das Skype-Logo hingegen bietet eine hohe Lesbarkeit in allen Größen und dank des mobilen Icons auch in der kleinsten Ansicht.

Die Technik-Welt reagiert

Immer mehr Marken, die das Internet prägen, passen ihre Logos an die Anforderungen von Mobile und Responsive Webdesign an. Ein gutes Beispiel hierfür ist auch das soziale Netzwerk Facebook. Facebook entfernte 2013 zuerst die schwach blaue Linie vom Buchstaben „f“. Im Juli 2015 wurde sogar der Schriftzug allgemein verändert. Er wurde deutlich vereinfacht und in einem klareren Schriftbild dargestellt. Die größte Veränderung erfuhr dabei das „a“, welches durch eine rundere und geschlossene Variante ersetzt wurde.

Facebook Logo im Wandel der Zeit

Beispiel Spotify

Vielen ist der Musik-Streaming-Dienst Spotify ein Begriff. Spotify änderte in den letzten 10 Jahren sein Logo ebenfalls mehrmals ab. Anfangs nutzte man ein verspieltes Logo mit kleinen Schallwellen über dem Buchstaben „o“.

Diese Details verschwanden jedoch sehr leicht bei kleineren Ansichten des Logos. Daher wurde das Logo 2013 deutlich vereinfacht. Die Schallwellen wurden vor dem Logo in einer Kugel platziert, die Schrift wurde weniger verspielt gestaltet. Das Logo von 2013 ähnelt sehr stark dem heutigen.

Lediglich die farbliche Gestaltung wurde in ein Flat-Design mit der Grundfarbe Grün umgesetzt. Es darf natürlich spekuliert werden, wieso Spotify sein Logo so deutlich geändert hat. Doch eins lässt sich klar erkennen: Die Flexibilität des Logos für eine Darstellung auf mobilen Endgeräten ist nun deutlich größer.

Spotify Logo und Anforderungen Responsive Webdesign

Beispiel Google

Google ist oft ein Vorreiter, wenn es um Veränderungen im Internet geht. Auch in Sache Logo-Optimierung hat Google in den letzten Jahren einen großen Wandel vollzogen.  Seid Google in den 90er Jahren sich einen festen Platz in unseren Browsern eroberte, hat sich das Logo stetig verändert.

Hier eine kurze Chronik der Veränderungen:

  1. Ausrufezeichen im Schriftzug entfernt.
  2. Schriftart verändert. Neue Schriftart deutlich schlanker.
  3. Schlagschatten und Schatten an der Schrift entfielen.
  4. Flat-Design des Logos.
  5. Schriftart ein weiteres Mal angepasst. Dieses Mal eine breite Schriftart.
  6. Zusätzlich ein einfaches G mit allen Farben als Icon

Google Logo und Anforderungen Responsive Webdesign

Google Logo Entwicklung 2

 

Logo ohne Worte

Eine entsprechende Markenbekanntheit vorausgesetzt müssen Logos nicht immer den Markenname beinhalten. Auch ein einfaches Icon kann als Logo(-ersatz) funktionieren. Als Vorreiter gilt hier der Musiker Prince mit einem eigens kreierten Zeichen. Seit dem haben viele Marken auf diese Art des Logo-Design gesetzt.

Im Folgenden ein paar Beispiele:

Logo als Icon - optimal für mobiles Internet

So hat Twitter das ursprüngliche Logo mit Markenname in seiner Außendarstellung inzwischen fast vollständig durch ein einfaches Icon ersetzt. Anfangs war das Twitter-Logo eine Kombination aus Markenname und Comic-Zeichnung eines Vogels. Ähnlich wie bei Google wurde auch bei Twitter das Logo Schritt für Schritt vereinfacht und leserlicher gestaltet bis sich schließlich das sehr flexible Twitter-Icon durchsetzte.

Twitter - vom Logo mit Markenname bis zum Icon-Logo

Ein solch stark vereinfachtes Icon als Logo setzt natürlich eine große Markenbekanntheit voraus. Daher solltet ihr immer abwägen, ob ein solches minimiertes Logo für eure Marke die richtige Wahl ist. Wollt Ihr euer Logo flexibel auch in kleiner Auflösung auf mobilen Endgeräten nutzen, ist eine Kombination eures Markennamens und eines Icons mit Alleinstellungsmerkmal aber ein guter Lösungsansatz.

Den etwas ausführlicheren Artikel des „Smashing Magazine“ in englischer Sprache findet ihr hier.

Veröffentlicht in:Allgemein, Webdesign und Internetseiten erstellen | Keine Kommentare

Kommentieren Sie

Spamschutz - bitte kurz noch ausrechnen: *

FacebookTwitterYoutubeRSS-Feed