Ob Wetter-App, Produkt-Labels oder Kategorien-Filter: Icons sind leicht verständlich, unkompliziert und werten das Design auf. Ein Plädoyer, warum sie einen festen Platz im Markenhandbuch von Unternehmen brauchen :-)
Definition & Bedeutung:
Icons sind stark vereinfachte Bilder und Botschaften, die universell und unabhängig von der Sprache oder Lese-Vermögen verstanden werden. Diese grafischen Symbole dienen dazu, komplexe Informationen, Objekte, Handlungen oder Funktionen visuell darzustellen.
Oft werden Icons, Piktogramme und Symbole synonym verwendet. Der Fokus dieses Beitrags liegt auf den ICONS als Teil der Markenwelt. Icons sind stilisierte und abstrahierte Darstellungen von realen Objekten oder Konzepten und spielen eine entscheidende Rolle im Corporate Design. Durch einen klaren Stil können Unternehmen und Branchen ihre Identität stärken, die Navigation (digital oder im Raum) erleichtern und Markenbotschaften effektiver kommunizieren.
Vorteile:
- Icons sind neben dem Logo / Signet ein weiteres starkes, visuelles Element
- durch den minimalistischen Stil können Botschaften kurz und einfach vermittelt werden
- ein eigenes Icon-Set kann vielfältig eingesetzt werden: von der Inhouse-Beschilderung, über die Navigation im User Interface bis hin zur Infografik und Merchandising-Artikeln
- eine stringente und einheitliche Umsetzung erhöht die Wiedererkennung der Marke
- Icons können als Stilelement neben Typografie, Logo, Farbe und Hintergrund-Mustern eingesetzt werden
- Die Einbindung in die (bewegte) Bildwelt ist möglich, e.g. Bild-Kompositionen, Image- und Erklär-Videos
Icon-Stile – Einblick:
Quelle: alle Icons stammen von Envato Elements, Komposition & Animation: Klickkomplizen GmbH
__
Machart & Komplexität:
Icons können super-simpel bis verspielt-illustriert sein – solange sie zur Marke passen.
Dennoch gilt: weniger ist mehr!
__
Konturstärke
innerhalb des Ions-Sets sollte die Kontur einheitlich stark sein. Von elegant (thin) bis markant (bold) gibt es einen breiten Spielraum.
__
Farbigkeit:
Die Farbwelt der Marke kann und muss in die Icon-Welt einfließen. Hier können die Motive einfarbig sein, mehrere Farben kombinieren oder als Highlight fungieren. Auch die positive und negative Darstellung sollte bedacht werden.
__
Stil:
Filled, Lineart, Flat, Glyph, Shape: Icons können mit verschiedenen Konturen, Füllungen und (partiell) farblichen Hervorhebungen gestaltet werden:
__
Form:
Von rund, eckig, asymmetrisch oder ohne Umrandung: der Fantasie sind keine Grenzen gesetzt. Meist ist es sinnvoll, ein Icon-Set mit UND ohne Form anzulegen, um bei der Platzierung auf farbigen oder unruhigen Hintergründen (Fotos, Videos) eine gute Sichtbarkeit zu erreichen.
Tipps für die Erstellung & Verwendung von Icons:
– Achte auf Einfachheit, um eine klare Botschaft zu gewährleisten.
– Konsistenz in Größe und Stil ist entscheidend, um Verwirrung zu vermeiden.
– Passe Icons an die Unternehmensfarben an, um die Markenidentität zu stärken.
Fokus UI Design:
Das Non-Plus-Ultra im User Interface: eigene Icons für die Navigation in den verschiedenen “Stadien” hinterlegen:
- Normal // Inaktiver Zustand
- Active // Aktiver, geklickter Zustand
- Hover // bei Mouseover
- Focus // bei Bedienung via Tastatur, Tabulator
- Disabled // Sichtbar, aber nicht klickbar
Vorbei die Zeiten von transparenten PNGs: Piktogramme und Icons sollten als SVG angelegt werden. Vorteil: die Grafiken haben eine geringe Größe und damit Ladezeit, sind verlustfrei skalierbar und animiert (e.g. LottieFiles oder als Micro-Interactions) ein absolutes Highlight!
Quelle: Lottiefiles.com // Mohit Saini, Mridul Ishat Dip
// 
// 
// 
Fazit:
Insgesamt sind Icons und Piktogramme mehr als nur grafische Elemente.
Sie sind kraftvolle Werkzeuge, um Identität zu schaffen, Botschaften zu vereinfachen und die Benutzererfahrung zu verbessern – wesentliche Aspekte für erfolgreiche Markenbildung.
Sie verbessern die visuelle Kommunikation, steigern die Wiedererkennbarkeit und erleichtern die Orientierung auf Websites oder in Apps.
Sie sollten unbedingt Bestandteil des Corporate Designs sein: Ein konsistenter Grafikstil fördert die Einheitlichkeit des Markenauftritts.
Katja
Neueste Artikel von Katja (alle ansehen)
- Crossmedia-Kampagne für die ReMap im Landkreis Leipzig - 28. März 2024
- Icons als Teil der Marke & Corporate Design - 22. November 2023
- Mockups erstellen mit Adobe Illustrator Beta - 6. September 2023
