Auf‘s Detail kommt‘s (auch) an
In den letzten Jahren hat das Surfen im Internet durch mobile Endgeräte deutlich zugenommen – so gehen immer mehr Nutzer häufiger über das Smartphone online. Was auf der einen Seite natürlich praktisch ist, soll aber auf der anderen Seite bestenfalls auch optisch etwas her machen. So ist mit dem Anstieg der Online-Nutzung durch mobile Endgeräte also auch der Anspruch an das Design gewachsen, denn dies soll auch auf kleinstem Raum immer noch gut aussehen.
Worauf muss geachtet werden?
Neben einer Vielzahl von Aspekten, die für Designer und Entwickler dabei eine Rolle spielen, gilt es nun diverse Kompromisse zu treffen, um auf wenig Platz groß raus zu kommen. Alles soll erkenn- und lesbar bleiben – auch das Logo! Denn das sollte nicht einfach immer nur kleiner werden, bis es nur noch daran erinnert, was es einmal war, wenn soviel Fläche wie möglich für Inhalte reserviert ist. Was also in der Großansicht beeindruckt, muss nun auch in kleinster Darstellung noch top aussehen.
Das optimale responsive Logo
Das optimale Logo nimmt daher wenig Platz ein, ist erkennbar und hat eine gute Qualität. Wie funktioniert das? Anstatt das Logo zu skalieren, werden an verschiedenen Breakpoints einzelne Elemente eliminiert. Im ersten Schritt fliegt zuerst der Claim weg, bis letztendlich nur noch die Bildmarke steht.
Es gibt verschiedene tolle Anschauungsbeispiele dafür im Netz, an denen man sieht, wie das Logo Schritt für Schritt auf das Minimalste reduziert wird, aber dennoch stark aussieht und zugeordnet werden kann. Eine tolle Lösung dazu bieten hier zum Beispiel die Logo-Designs von Nike, Walt Disney, Warner Brothers oder GUINNESS.
Welche Kriterien müssen erfüllt werden?
Diese responsiven Logos erfüllen die Kriterien, die ein Logo heute mitbringen muss: klein, ansehbar und eine gute Qualität obendrein. Denn da die meisten Unternehmen erkannt haben, wie wichtig mittlerweile die sozialen Medien sind, muss das Logo eben nicht nur auf dem Desktop, sondern auch als Icon in den sozialen Kanälen untergebracht werden und funktionieren können.
Die Umsetzung
Das responsive Logo kann entweder als Image oder als verlustfreie Vektordatei eingebunden werden. Dies ist letztendlich jedem selbst überlassen. Wer etwas mehr Arbeit investieren möchte, der kann anhand von CSS-Sprites auch verschiedene Logos für jedes Endgerät einbinden. Anhand dieser Technik werden alle verschiedenen Versionen des Logos in ein background-image gepackt und je nach Auflösung in der entsprechenden Größe ausgespuckt.
Fazit:
Es ist also einiges möglich in diesem Bereich. Natürlich bleibt einerseits die Erkennbarkeit nur bei bekannten Marken erhalten und viele Unternehmen möchten ihr Logo grundsätzlich überall absolut unverändert darstellen, aber vielleicht ist es andererseits sinnvoll hier Kompromisse zu treffen, denn ein prefekt dargestelltes Logo auf kleinster Fläche, schafft sicherlich mehr Eindruck als eines, das im schlimmsten Fall gar nicht mehr zu erkennen ist.
