Logos vs. Icons: Wie man sie erstellt und verwendet

Viele Softwarehersteller unterscheiden nicht wirklich zwischen ihrem Logo und seinem Icon. Dabei dienen diese beiden Designs ganz unterschiedlichen Zwecken und unterliegen unterschiedlichen Gestaltungsregeln. Icons, im Sinne der Darstellung eines Computerkonzepts, werden erst seit den Jahren 2005-2010 wirklich systematisch verwendet, während ihre Rolle zuvor relativ anekdotisch war. Wir werden in diesem Tutorial zur Grafikgestaltung sehen, wie der Unterschied zwischen diesen beiden grafischen Darstellungen relevante Kommunikationsachsen schaffen kann.

Alle Graphic Design Software ansehen

Das Logo

Das Logo wurde entwickelt, um ein Unternehmen oder eine Organisation zu repräsentieren. Es vermittelt das öffentliche Bild des Unternehmens durch seine Farben, Formen und manchmal auch durch seine Baseline, die die Botschaft verdeutlicht. Diese Botschaft wird übrigens von den Unternehmen sehr stark kontrolliert, da sie sich auf die eigentliche Tätigkeit des Unternehmens auswirkt. Das Logo hat also eine wichtige strategische Dimension. Schließlich leiten sich die meisten grafischen Entwürfe vom Logo ab: Grafikcharta, Ikonen, Dokumentvorlagen oder Design der Unternehmenswebsite zum Beispiel.

Technische Einschränkungen bei der Gestaltung eines Logos

Bei der Gestaltung eines Logos müssen bestimmte Regeln eingehalten werden, damit es zeitlos, vielseitig, einfach und professionell wirken kann. Hier sind die wichtigsten Regeln, die es zu beachten gilt:
Maße: Ein Logo hat keine Standardmaße. Es wird häufig ab einer Mindestgröße von 128px bis hin zu sehr großen Größen (z. B. Drucke auf Kakemonos) verwendet.

• Form: Logos haben in 80 % der Fälle eine horizontale Form, aber es gibt keinen Standard dafür. Sie können auch vertikal oder quadratisch sein. Das horizontale Format hat grafische Vorteile und ermöglicht es, eine Baseline leicht zu platzieren.
• Umrandung: Umrandungen sollten nicht verwendet werden, da sie die Botschaft verfälschen.
• Baseline: Sie haben die Möglichkeit, eine Botschaft in maximal 5 Wörtern anzubringen, die es jedem ermöglicht, sofort zu erfassen, was Sie tun.
• Komprimierung: Die Qualität des Logos ist wichtiger als seine Komprimierung. Das Original-Logo sollte daher z. B. mit Photoshop oder Illustrator vektorisiert und dann als hochwertiges JPG- oder PNG-Format exportiert werden.
• Hintergründe: Das Logo sollte auf undurchsichtigen Hintergründen veröffentlicht werden, um die Integrität der Botschaft zu gewährleisten. Meistens ist der Hintergrund weiß.
• Farben: Ein zeitloses Logo sollte auf maximal 3 harmonisch gewählten Farben aufgebaut sein.
• Schriftart: Wenn Sie eine Schriftart verwenden müssen, sollte diese frei von Rechten Dritter sein. Verwenden Sie die folgenden Websites, um eine qualitativ hochwertige Schriftart auszuwählen, die Ihren rechtlichen Anforderungen entspricht:
  • Font Squirrel : Kostenlose Schriftarten für den kommerziellen Gebrauch.
  • DaFont: Die Referenz für kostenlose Schriftarten für den persönlichen und kommerziellen Gebrauch.
  • 1001 Free Fonts : kostenlose Schriften
  • FontPark: Kostenlose Schriften

Fälle, in denen ein Logo verwendet wird

Logos werden hauptsächlich in den folgenden Fällen verwendet:

• Corporate-Website
• Kopf- und Fußzeilen von offiziellen Dokumenten.
• Unterschrift von E-Mails
• Alle gedruckten Materialien oder PDFs.

Das Icon

Ein Icon ist eine grafische Darstellung einer Dienstleistung. Es befindet sich meist in einer Umgebung, die Sie nicht grafisch beherrschen. Es kann sich um die Registerkarte des Browsers handeln, deren Farbe oder Größe sich nicht ändert. Es kann sich auch um einen Marktplatz, ein Vergleichsportal, einen YouTube-Kanal oder ein Mobiltelefon handeln. In jedem Fall ist es der Gestalter der Umgebung, der über die Nutzererfahrung entscheidet. Diese Erfahrung wird maximiert, wenn die Icons aller Softwarelösungen (SaaS, Dienste, Anwendungen) standardisiert sind, weshalb Icons so wichtig sind.
Der massive Einsatz von Icons entspricht den Bemühungen der Entwickler von Betriebssystemen und Marktplätzen, eine einheitliche Umgebung anzubieten. Der starke Wettbewerb zwischen den Lösungen veranlasst die Hersteller auch dazu, ihre Kommunikationscodes extrem zu vereinfachen, um eingängiger zu sein.
Das Symbol ermöglicht es, die Markenbotschaft beiseite zu lassen. Es zeigt auf einem Bild, dass es sich um Sie handelt, lässt aber gleichzeitig Raum für eine gezieltere Botschaft. Aus diesem Grund können wir es auf einem Werbebanner verwenden, um die Botschaften zu priorisieren.

Technische Einschränkungen

Icons werden mit stärkeren Einschränkungen als Logos gestaltet:

• Größe: Die Größe liegt zwischen 16px und 256px: 256x256, 128x128, 64x64, 32x32, 24,24,16x16.
• Form: Das quadratische Format ist ein Standard.
• Umrandung: Die Umrandung ist eine Option. Es ist jedoch besser, die Umgebung (Browser, Marktplatz usw.) über die Umrandung des Symbols entscheiden zu lassen.
• Baseline: Keine. Ein Icon enthält keinen Text.
• Komprimierung: Die Größe sollte auf das Maximum reduziert werden. Denken Sie daran, in Photoshop die Funktion Datei > Für das Web speichern zu verwenden, die bei starker Komprimierung Dateien in guter Qualität erzeugt. Wenn Sie nicht über Photoshop verfügen, verwenden Sie einen Bildoptimierer wie ImageOptim (MAC) oder RIOT (PC).
• Hintergründe: Lassen Sie den Hintergrund transparent. Dafür können Sie sich für das PNG-Format entscheiden, das perfekte Farbverläufe bietet, oder für das GIF-Format, das über weniger Farben verfügt, aber sehr leichte Dateien erzeugt.
• Farben: Icons können fantasievoller sein als Logos, aber Einfachheit ist grundlegend.

Anwendungsfälle für ein Icon

Alle Graphic Design Software ansehen

• Das Favicon. Dies ist das Symbol, das in der Registerkarte des Webbrowsers verfügbar ist. Es gibt verschiedene Websites, auf denen Sie ein solches Icon entwerfen können :
  • Logaster
  • FaviconGenerator
• Marketplace, Comparator. In diesem Fall wird ein großes Icon verlangt, um die visuelle Qualität zu optimieren: 256px x 256px zum Beispiel.
• Mobiltelefon: Symbol für die Anwendung.
• Computer-Desktop: Anwendungsstarter für MAC, Windows oder Linux.

Hier sind auch andere Werkzeuge in Bezug auf Icons, die Ihnen nützlich sein können:

• Iconfinder: Suchmaschine für kostenlose und kostenpflichtige Icons.
• IM Creator : Erstellen von Icons
• Fontello: Generator für Icon-Schriftarten.
• Flat Icon: Suchmaschine für Vektor-Icons.
• Material Design Icons: 750 kostenlose und Open-Source-Glyphen, die von Google angeboten werden.
• Font Awesome: Iconic Toolbox für Schriftarten und CSS.
• Glyphsearch: Meta-Motor für Icons.
• MakeAppIcon: Erzeugt Anwendungssymbole in allen Größen mit einem Klick.
• Endless Icons: fasst kostenlose Flat-Icons und andere Gestaltungselemente zusammen.
• Ico Moon: Dieser Icon-Generator umfasst mehr als 4000 Vektor-Icons.
• The Noun Project: Bietet Ihnen Tausende von Glyphen-Icons von verschiedenen Künstlern.
• Perfect Icons: Soziales Tool zur Erstellung von Icons.
• Doodle Set, Flat Set, Vector Line Set : Kostenlose Icons.
• Icon Sweets: 60 kostenlose Vektorikonen für Photoshop.

Zögern Sie nicht, diesen Artikel zu teilen und zu kommentieren, wenn er Ihnen geholfen hat oder Sie ihn ergänzen möchten. Viel Spaß beim Erstellen!