![\"Metapher](\"http:\/\/www.designenlassen.de\/blog\/wp-content\/uploads\/2016\/07\/metapher.jpg\")
#1\u00a0Die Metapher<\/h3>\nDaniel D\u00fcsentrieb hat sein Helferlein, um sich den Alltag angenehmer zu gestalten, und was haben wir? Klar: Icons (vom griechischen, eik\u00f3n \u00bbBild\u00ab), im nicht-digitalen Leben da drau\u00dfen Piktogramme genannt. Diese kleinen, manchmal sogar winzigen Bildchen sorgen daf\u00fcr, dass wir uns in unserem Leben zurechtfinden. Stimmt nicht? Sicher? Dann schaut mal auf eure Fernbedienung, die Waschetiketten eurer Kleidungsst\u00fccke, die Hinweistafeln am Bahnhof, das Armaturenbrett im Auto, die Paletten in Photoshop und nicht zuletzt auf den Bildschirm eures Smartphones. Ungef\u00e4hr 40 Jahre alt sind sie, unsere Icons, erfunden Anfang der 80er Jahre f\u00fcr das Interface eines Xerox-Druckers. Diese waren zun\u00e4chst recht simpel und in schwarz-wei\u00df gehalten, bis mit dem Fortschritt der Technik Spielereien wie Schlagschatten, Texturen, Verl\u00e4ufe und Spiegelungen hinzukamen. Gl\u00fccklicherweise ist das seit ein paar Jahren, seit das Flat Design sich sp\u00e4testens mit dem Erscheinen von Windows 8 durchsetzte, Geschichte.
\nWir verstehen Icons auf den ersten Blick, erkennen Ihren Zweck und nutzen sie intuitiv \u2013 denn genau f\u00fcr diese schnelle Informations\u00fcbermittlung werden sie entwickelt und optimiert. Aber was sind die wichtigsten Fakten heutzutage f\u00fcr gutes Icon-Design?<\/p>\n
#1\u00a0Die Metapher<\/h3>\nEs ist immer eine gro\u00dfe Herausforderung, f\u00fcr spezielle Aktionen oder Inhalte die richtige Metapher zu finden. Die Bedeutung muss intuitiv und unmittelbar erfasst werden, dabei kn\u00fcpfen die Icons an die Erfahrungswerte des Nutzers an. Klar, dass diese Bedeutung auch international, \u00fcber viele Kulturen \u00fcbergreifend, funktionieren muss. Daher ist es wichtig, auch kulturelle Unterschiede bei bestimmten Visualisierungen zu pr\u00fcfen. Ein funktionierendes Icon weist somit bei kurzer Beobachtungszeit einen hohen und eindeutigen Betrachtungsgehalt auf. Auf keinen Fall sollte man eine funktionierende und verbreitete Metapher, die fest in unseren K\u00f6pfen verankert ist, auf einmal \u00e4ndern und durch ein neues, aber unbekanntes Icon ersetzen. Ebenso sollte man keine bekannten Motive neu interpretieren, das k\u00f6nnte zum Bedeutungsverlust des Icons f\u00fchren. Man muss beim Icon-Design nicht immer das Rad neu erfinden. Manchmal reicht es auch, bestehende inhaltliche Metaphern mit ein bisschen kreativem Schwung in den Stil des eigenen Icon-Sets zu integrieren.<\/p>\n
![\"Stil](\"http:\/\/www.designenlassen.de\/blog\/wp-content\/uploads\/2016\/07\/stil.jpg\")
#2 Der Stil<\/h3>\nAlle Icons in einem Icon-Set sollten auch optisch harmonieren. Wenn sie zu einer Marke geh\u00f6ren oder in Zukunft noch mehr Icons dazukommen k\u00f6nnten, sollten die Richtlinien f\u00fcr das passende Icon-Design in einem Icon Styleguide vermerkt werden, um unsch\u00f6ne Neuzug\u00e4nge zu vermeiden. Perspektive, Farben, Gestaltungsstil, Raster und geometrische Grundformen sind Parameter, die man f\u00fcr sich und sein Icon-Design definieren sollte. Besonders auf die St\u00e4rke der verwendeten Linien ist zu achten, auf den Anteil von Farbe und ausgef\u00fcllten Fl\u00e4chen. Wenn das Ziel erreicht ist und alle Icons aus einem Guss sind, kann man noch daf\u00fcr sorgen, dass sie einzigartig sind. Ein kleines Detail schwei\u00dft die Icons eines Sets zusammen und sorgt daf\u00fcr, dass niemand diese f\u00fcr ein anderes Set zweckentfremdet. Das kann eine Winzigkeit wie eine kleine Kerbe sein, die das Icon dekorativ pr\u00e4gt und gleichzeitig der schnellen Aufnahme der Bedeutung nicht im Weg steht.<\/p>\n
![\"Design](\"http:\/\/www.designenlassen.de\/blog\/wp-content\/uploads\/2016\/07\/design.jpg\")
<\/h3>\nAls erstes gleich vorne weg: Keep it simple! Und das gilt in jeglicher Hinsicht. Vermeide verschiedene oder zu verwirrende Perspektiven und zeige das Motiv am besten einfach flach von vorne. Dreidimensionalit\u00e4t, Schlagschatten und sch\u00f6n-schaurige Texturen \u2013 wie in den guten alten Zeiten, bevor das Flat Design endg\u00fcltig seinen Durchbruch hatte \u2013\u00a0bleiben bitte da, wo sie hingeh\u00f6ren: Begraben. Icons sollten auch in winziger Gr\u00f6\u00dfe erkennbar sein, also nicht zu viele verschiedene Elemente und Details einbauen. Eine gr\u00f6\u00dftm\u00f6gliche Klarheit und Einfachheit erzielt die besten Ergebnisse, wenn der Nutzer einen Zusammenhang m\u00f6glichst schnell erkennen soll. Hierbei ist auch die Verwendung geometrischer Formen sehr hilfreich: Zum einen erkennen wir sie intuitiv und ordnen sie thematisch aufgrund unseres Vorwissens in eine bestimmte Richtung ein, zum anderen sorgen sie mit ihren klar definierten Formen f\u00fcr Ordnung und Pr\u00e4zision. Zu einem guten Icon geh\u00f6rt keinesfalls Text, das raubt die Internationalit\u00e4t und ist ein peinliches Bekenntnis daf\u00fcr, dass das Icon ohne Beschreibung nicht funktioniert. Wer kann, verwendet nur eine Farbe f\u00fcr sein Icon. Falls es aber n\u00f6tig ist, kann man nat\u00fcrlich noch eine Kontrastfarbe hinzuf\u00fcgen \u2013 ab drei Farben wird es aber kritisch bunt.<\/p>\n
![\"Technik](\"http:\/\/www.designenlassen.de\/blog\/wp-content\/uploads\/2016\/07\/technik.jpg\")
#4 Die Technik<\/h3>\nEs ist wichtig, dass die Icons gleich in einer Gr\u00f6\u00dfe angelegt werden, die sowohl f\u00fcr 8×8 px als auch f\u00fcr wesentlich gr\u00f6\u00dfere Darstellungen geeignet ist. Auch muss man besonders darauf achten, dass man f\u00fcr die Umrisse ganze Pixelwerte ohne Kommastellen benutzt, sonst werden die Kanten unscharf und das Icon wird schwammig. Sehr hilfreich ist hier im Illustrator die Pixelvorschau (ctrl+alt+y), die trotz Vektorprogramm schon mal aufzeigt, wie die Grafik sp\u00e4ter mit Pixeln aussehen w\u00fcrde. Wenn\u2019s mal schnell gehen muss, kann man die Vektoren auch fix \u201eam Pixelraster ausrichten\u201c. Das Icon sollte au\u00dferdem aus so wenig Pfaden wie m\u00f6glich bestehen, sich \u00fcberlappende Elementen f\u00fcgt man am besten mit dem Pathfinder zu einer Form zusammen. Man kann am fertigen Icon die Ankerpunkte reduzieren, um die Dateigr\u00f6\u00dfe gering zu halten. Ebenso sinnvoll ist es, die Zeichenfl\u00e4che an das Motiv anzupassen \u2013 sonst speichert man wom\u00f6glich unn\u00f6tigen Wei\u00dfraum um das Icon mit.<\/p>\n
![\"speichern](\"http:\/\/www.designenlassen.de\/blog\/wp-content\/uploads\/2016\/07\/speichern.jpg\")
<\/h3>\nDer Klassiker unter den Icon-Formaten ist sicherlich das PNG. Wer ein Icon mit mehreren Farben m\u00f6chte und die genaue sp\u00e4tere Darstellungsgr\u00f6\u00dfe wei\u00df, der kann gut und gerne ein PNG erstellen. Wenn das Icon allerdings im responsiven Design die Gr\u00f6\u00dfe \u00e4ndern soll und dennoch immer scharf und hochaufgel\u00f6st sein soll, kommt man um Vektoren nicht herum. Eine nette M\u00f6glichkeit ist eine Iconfont, bei der man sein Icon-Set als Schrift speichert. So kann man die Icons immer praktisch und skalierbar einsetzen. Ein Nachteil ist hier allerdings, dass das Icon immer nur in einer Farbe angezeigt werden kann. Wer die Vorteile von Vektoren nutzen will, aber dennoch auf Farben nicht verzichten m\u00f6chte, setzt sich am besten mit dem SVG-Format auseinander. Die SVG-Datei basiert auf der XML-Dateistruktur, sprich HTML, und wird via Code auf der Website eingebunden. Hier werden die Koordinaten des Icons definiert, so ist es sogar m\u00f6glich, in verschiedenen responsiven Stadien einer Website verschiedene Komplexit\u00e4ten ein und desselben Icons anzuzeigen. Und: Farben sind auch m\u00f6glich!<\/p>\n
Wie man sieht: Icon Design ist weit mehr, als sich auf irgendwelchen Seiten kostenlose Icons zusammenzusuchen und ein bisschen abzu\u00e4ndern. Es kommt auf ein gutes Gesp\u00fcr f\u00fcr die richtige Metapher an, auf eine kreative Ader, um diese stilistisch gut umzusetzen und auf das technische Know-How, das Icon sauber zu erstellen und einzubinden. Viel Spa\u00df dabei!<\/p>\n","protected":false},"excerpt":{"rendered":"
Flat Design ist wieder auf dem Vormarsch Daniel D\u00fcsentrieb hat sein Helferlein, um sich den Alltag…<\/p>\n","protected":false},"author":4,"featured_media":6997,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-6993","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-know-how"],"yoast_head":"\n