![\"Before](\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/00-BeforeAfter.jpg\")
<\/p>\n<\/p>\n
Das App-Icon ist nur ein kleiner Teil der ganzen Anwendung, aber der erste, den Benutzer sehen \u2013 und<\/strong> dieser erste Eindruck kann lang wirken. Deshalb ist es sehr wichtig, dass eine App ein attraktives, klares und aussagekr\u00e4ftiges Icon<\/strong> hat. Aber wie kommt man zu diesem Icon? Ich m\u00f6chte hier meine Erfahrungen teilen, wie man die Herausforderung mit Stift, Papier und Illustrator meistert. Ich habe viele Jahre als Icon-Designerin gearbeitet und gestalte immer noch von Zeit zu Zeit selber Icons. Vielleicht hilft Ihnen meine Erfahrung, und einige meiner Tipps lassen sich vielleicht auch in ihren Projekten anwenden.<\/p>\n Als Beispiel m\u00f6chte ich ein Icon f\u00fcr \u201eWeatherEvent\u201c gestalten, eine hypothetische Versicherungs-App, die vor gef\u00e4hrlichen Wetterereignissen wie Gewittern oder Wirbelst\u00fcrmen warnt und passend zur Situation Versicherungen vorschl\u00e4gt. Ich werde Sie durch alle acht notwendigen Schritte f\u00fchren. Fangen wir an!<\/p>\n Bevor wir zum spannenden Teil kommen \u2013 zum Zeichnen, wenn Sie wie ich sind \u2013 sind einige vorbereitende Schritte notwendig. Wir m\u00fcssen ja wissen, was wir \u00fcberhaupt zeichnen, oder? Also m\u00fcssen wir zuerst verstehen,<\/p>\n Dieser erste Schritt ist sehr wichtig. Ohne dieses Verst\u00e4ndnis k\u00f6nnen Sie kein Icon gestalten, das f\u00fcr die Zielgruppe verst\u00e4ndlich ist und vermittelt, was es vermitteln soll. In unserem Beispiel wird die App von Menschen benutzt, die ihr Eigentum dann versichern wollen, wenn es n\u00f6tig ist \u2013 abh\u00e4ngig vom Wetter.<\/p>\n Die ideale Metapher spiegelt den Zweck der App wider.<\/strong> \u201eWeatherEvent\u201c klingt einfach. Es ist klar, dass das Icon eine Metapher f\u00fcr Wetter ben\u00f6tigt, eine Metapher f\u00fcr eine Warnung und vielleicht eine Metapher f\u00fcr Versicherung. Als erste Wettermetaphern fielen mir ein: Sonne, Wolken, Schirm und Wirbelsturm. F\u00fcr Warnung kam ich auf Sprechblase, Blitz, Warndreieck und f\u00fcr Versicherung auf sch\u00fctzende H\u00e4nde, ein von einem Schirm gesch\u00fctztes Haus, Rettungsring und Schild. Nach einem Brainstorming<\/strong> mit meinen Kollegen fanden wir abstraktere Beispiele: Windsack, Regenstiefel, Regenbogen f\u00fcr Wetter; Wecker, Glocke und Sprachrohr als Warnungen.<\/p>\n Jetzt k\u00f6nnen wir aus vielen Ideen w\u00e4hlen und viele m\u00f6gliche Kombinationen skizzieren, um danach zu entscheiden, welche am besten passt.<\/p>\n Es ist besser vor dem Skizzieren den Stil festzulegen, denn unsere Skizzen sollten so nah wie m\u00f6glich am Endresultat sein. So lassen sich sp\u00e4ter aufwendigere Iterationen einsparen.<\/p>\n Es gibt endlos viele Icon-Stile, allgemein unterteilen sich Icon-Stile aber nach Detailgrad, Farbigkeit, k\u00fcnstlerischen Effekten und der Perspektive, in der sie erstellt werden.<\/p>\n Da wir ein Icon f\u00fcr eine Handy-App entwickeln, bleiben wir am besten beim Stil von Google Material Design<\/a> und Apple iOS<\/a>: ein mittlerer Detailgrad und sparsam eingesetzte Effekte. Unser Icon soll zu beiden Betriebssystemen passen.<\/p>\n Es ist immer gut, mehrere Ideen zu skizzieren, da nie im Vorhinein klar ist, welche besser aussehen wird und welche den Zweck der App am besten erkl\u00e4rt. Detaillierte Skizzen helfen Kunden, sich das Ergebnis vorzustellen.<\/p>\n Ich habe mit einigen groben Skizzen begonnen und diese dann sp\u00e4ter kombiniert. Bevor ich anfing zu skizzieren, gefiel mir die Idee einen bunten Regenschirm dazustellen. Am Ende habe ich mich aber f\u00fcr einen Blitzschlag als treffende Metapher entschieden.<\/p>\n Nachdem unsere Skizzen fertig sind, m\u00fcssen wir unseren Arbeitsbereich einrichten, bevor wir das Icon reinzeichnen.<\/p>\n Wie Maler ihre Leinwand, Pinsel und Farben vorbereiten, bevor sie ein Werk erschaffen, m\u00fcssen wir unsere digitalen Werkzeuge ordnen. Um vorwiegend zweidimensionale Icons zu erstellen, verwende ich meistens Adobe Illustrator. Mein Arbeitsbereich sieht dann so aus: Neben den normalen Paletten und Einstellungen von Illustrator verwende ich im typischen Fall:<\/p>\n Das reicht, um ein App-Icon f\u00fcr Android oder iOS zu gestalten.<\/p>\n Der aufw\u00e4ndigste, aber auch spannendste Teil, den ich in drei Unterschritte teilen w\u00fcrde.<\/p>\n In diesem Schritt erstelle ich zuerst die Grundform mit dem Zeichenstift-Werkzeug. Die Formen m\u00fcssen nicht exakt der Skizze gleichen. Manchmal ist es besser, sie ans Raster anzupassen oder sie f\u00fcr einen besseren Bildaufbau zu \u00e4ndern. Das Ergebnis des Vektorisierens sieht in unserem Beispiel so aus:<\/p>\n Da ich nicht auf ein Betriebssystem eingeschr\u00e4nkt bin, verwende ich in diesem Beispiel die Material-Design-Farben: diese Palette bietet mehr Farben, um sch\u00f6ne Effekte, glatte Verl\u00e4ufe und ausreichend Kontrast f\u00fcr unser ziemlich detailliertes Icon zu schaffen. Es ist immer gut, mehrere Farbkombinationen auszuprobieren, um den richtigen Weg zu finden.<\/p>\n Mit einigen Effekten runde ich den Look des Icons ab: Schlagschatten und d\u00fcnne Kanten sorgen f\u00fcr eine Papier-Anmutung.<\/p>\n Auch f\u00fcr ein Vektor-Icon ohne gerasterte Teile ist es besser, die Gr\u00f6\u00dfen von Hand anzupassen. Wie Sie sehen, sind die Verkleinerungen von 1024\u00d71024 auf 512\u00d7512 Pixel, sogar auf 180\u00d7180 Pixel unproblematisch. Bei kleinen Gr\u00f6\u00dfen ist der Unterschied aber offensichtlich, besonders wenn wir die kleinen Icons vergr\u00f6\u00dfert betrachten.<\/p>\n Meine Checkliste f\u00fcr Verkleinerungen ist:<\/p>\n Und jetzt k\u00f6nnen wir endlich das Ergebnis bewundern. Wir k\u00f6nnen das Icon an den Kunden senden oder bei Dribbble zeigen. Wichtig ist aber, einen angemessenen Rahmen f\u00fcr unser Kunstwerk sicherzustellen. Man muss sein Ergebnis von der besten Seite zu zeigen, damit andere Menschen genauso viel Freude daran haben wie man selbst. Viel Spa\u00df!<\/p>\n Aus dem Englischen \u00fcbersetzt.<\/em><\/p>\n","protected":false},"author":47,"featured_media":0,"template":"","tags":[68],"class_list":["post-7377","blog","type-blog","status-publish","hentry","tag-icon-design-d"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/7377","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/users\/47"}],"version-history":[{"count":0,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/7377\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/media?parent=7377"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/tags?post=7377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Schritt 1: Die App verstehen<\/h3>\n
\n
Schritt 2: Metaphern finden<\/h3>\n
![\"Metaphors\"](\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/01-Metaphors.jpg\")
<\/p>\nSchritt 3: Stil festlegen<\/h3>\n
![\"Styles\"](\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/IconStyles.jpg\")
<\/p>\nSchritt 4: Skizzen<\/h3>\n
![\"Sketches\"](\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/03-Sketches01.jpg\")
<\/p>\n![\"Sketches\"](\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/03-Sketches.jpg\")
<\/p>\nSchritt 5: Arbeitsbereich einrichten<\/h3>\n
![\"Workspace\"](\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/04-Workspace.jpg\")
<\/a><\/p>\n\n
Schritt 6: Reinzeichnung<\/h3>\n
6.1 Vektorisieren<\/h5>\n
![\"Outlines\"](\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/05-Outlines.jpg\")
<\/p>\n6.2 Farbgebung<\/h5>\n
![\"06-Colors\"](\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/06-Colors.jpg\")
<\/p>\n6.3 Effekte anwenden<\/h5>\n
Schritt 7: Gr\u00f6\u00dfen anpassen<\/h3>\n
![\"Effects\"](\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/07-Effects.jpg\")
<\/p>\n![\"Sizes\"](\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/09-Sizes.jpg\")
<\/p>\n\n
![\"Sizes\"](\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/08-Sizes.jpg\")
<\/p>\nSchritt 8: Genie\u00dfen<\/h3>\n
![\"Final\"](\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/10-Final.jpg\")
<\/p>\n