Über den Tellerrand geschaut

Acht Schritte zum App-Icon

Olga Poliakova
Olga Poliakova
22. Dezember 2016

Before and After

Das App-Icon ist nur ein kleiner Teil der ganzen Anwendung, aber der erste, den Benutzer sehen – und dieser erste Eindruck kann lang wirken. Deshalb ist es sehr wichtig, dass eine App ein attraktives, klares und aussagekräftiges Icon hat. Aber wie kommt man zu diesem Icon? Ich möchte 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.

Als Beispiel möchte ich ein Icon für „WeatherEvent“ gestalten, eine hypothetische Versicherungs-App, die vor gefährlichen Wetterereignissen wie Gewittern oder Wirbelstürmen warnt und passend zur Situation Versicherungen vorschlägt. Ich werde Sie durch alle acht notwendigen Schritte führen. Fangen wir an!

Schritt 1: Die App verstehen

Bevor wir zum spannenden Teil kommen – zum Zeichnen, wenn Sie wie ich sind – sind einige vorbereitende Schritte notwendig. Wir müssen ja wissen, was wir überhaupt zeichnen, oder? Also müssen wir zuerst verstehen,

  • was die App macht,
  • wer sie benutzt, und zwar …
  • in welchem Kontext.

Dieser erste Schritt ist sehr wichtig. Ohne dieses Verständnis können Sie kein Icon gestalten, das für die Zielgruppe verständlich 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ötig ist – abhängig vom Wetter.

Schritt 2: Metaphern finden

Die ideale Metapher spiegelt den Zweck der App wider. „WeatherEvent“ klingt einfach. Es ist klar, dass das Icon eine Metapher für Wetter benötigt, eine Metapher für eine Warnung und vielleicht eine Metapher für Versicherung. Als erste Wettermetaphern fielen mir ein: Sonne, Wolken, Schirm und Wirbelsturm. Für Warnung kam ich auf Sprechblase, Blitz, Warndreieck und für Versicherung auf schützende Hände, ein von einem Schirm geschütztes Haus, Rettungsring und Schild. Nach einem Brainstorming mit meinen Kollegen fanden wir abstraktere Beispiele: Windsack, Regenstiefel, Regenbogen für Wetter; Wecker, Glocke und Sprachrohr als Warnungen.

Jetzt können wir aus vielen Ideen wählen und viele mögliche Kombinationen skizzieren, um danach zu entscheiden, welche am besten passt.

Metaphors

Schritt 3: Stil festlegen

Es ist besser vor dem Skizzieren den Stil festzulegen, denn unsere Skizzen sollten so nah wie möglich am Endresultat sein. So lassen sich später aufwendigere Iterationen einsparen.

Es gibt endlos viele Icon-Stile, allgemein unterteilen sich Icon-Stile aber nach Detailgrad, Farbigkeit, künstlerischen Effekten und der Perspektive, in der sie erstellt werden.

Styles

Da wir ein Icon für eine Handy-App entwickeln, bleiben wir am besten beim Stil von Google Material Design und Apple iOS: ein mittlerer Detailgrad und sparsam eingesetzte Effekte. Unser Icon soll zu beiden Betriebssystemen passen.

Schritt 4: Skizzen

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ärt. Detaillierte Skizzen helfen Kunden, sich das Ergebnis vorzustellen.

Sketches

Ich habe mit einigen groben Skizzen begonnen und diese dann später kombiniert. Bevor ich anfing zu skizzieren, gefiel mir die Idee einen bunten Regenschirm dazustellen. Am Ende habe ich mich aber für einen Blitzschlag als treffende Metapher entschieden.

Sketches

Nachdem unsere Skizzen fertig sind, müssen wir unseren Arbeitsbereich einrichten, bevor wir das Icon reinzeichnen.

Schritt 5: Arbeitsbereich einrichten

Wie Maler ihre Leinwand, Pinsel und Farben vorbereiten, bevor sie ein Werk erschaffen, müssen wir unsere digitalen Werkzeuge ordnen. Um vorwiegend zweidimensionale Icons zu erstellen, verwende ich meistens Adobe Illustrator. Mein Arbeitsbereich sieht dann so aus:Workspace

Neben den normalen Paletten und Einstellungen von Illustrator verwende ich im typischen Fall:

  1. Zeichenflächen für alle Icongrößen (Android und iOS) (siehe oben)
  2. Separate Ebenen für Raster, gescannte Skizze und eine leere Ebene für das Icon
  3. Eine Farbgruppe mit iOS-Farben
  4. Eine separate Farbfeldgruppe mit Material-Design-Farben

Das reicht, um ein App-Icon für Android oder iOS zu gestalten.

Schritt 6: Reinzeichnung

Der aufwändigste, aber auch spannendste Teil, den ich in drei Unterschritte teilen würde.

6.1 Vektorisieren

In diesem Schritt erstelle ich zuerst die Grundform mit dem Zeichenstift-Werkzeug. Die Formen müssen nicht exakt der Skizze gleichen. Manchmal ist es besser, sie ans Raster anzupassen oder sie für einen besseren Bildaufbau zu ändern. Das Ergebnis des Vektorisierens sieht in unserem Beispiel so aus:

Outlines

6.2 Farbgebung

Da ich nicht auf ein Betriebssystem eingeschränkt bin, verwende ich in diesem Beispiel die Material-Design-Farben: diese Palette bietet mehr Farben, um schöne Effekte, glatte Verläufe und ausreichend Kontrast für unser ziemlich detailliertes Icon zu schaffen. Es ist immer gut, mehrere Farbkombinationen auszuprobieren, um den richtigen Weg zu finden.

06-Colors

6.3 Effekte anwenden

Mit einigen Effekten runde ich den Look des Icons ab: Schlagschatten und dünne Kanten sorgen für eine Papier-Anmutung.

Schritt 7: Größen anpassen

Auch für ein Vektor-Icon ohne gerasterte Teile ist es besser, die Größen von Hand anzupassen. Wie Sie sehen, sind die Verkleinerungen von 1024×1024 auf 512×512 Pixel, sogar auf 180×180 Pixel unproblematisch. Bei kleinen Größen ist der Unterschied aber offensichtlich, besonders wenn wir die kleinen Icons vergrößert betrachten.

Effects

Sizes

Meine Checkliste für Verkleinerungen ist:

  1. Kleine Elemente für kleine Icongrößen reduzieren. Andernfalls wirken sie verschwommen.
  2. Konturen skalieren oder entfernen.
  3. Effekte wie Schlagschatten skalieren, wenn das Icon zunächst groß angelegt wurde.
  4. Stärkerer Kontrast für Farben.
  5. Prüfen, ob alle Kanten im Pixelraster liegen, um sie gegebenenfalls anzupassen.

Sizes

Schritt 8: Genießen

Und jetzt können wir endlich das Ergebnis bewundern. Wir können das Icon an den Kunden senden oder bei Dribbble zeigen. Wichtig ist aber, einen angemessenen Rahmen für 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ß!

Final

Aus dem Englischen übersetzt.

Möchten Sie mehr zu unseren Leistungen, Produkten oder zu unserem UX-Prozess erfahren?
Wir sind gespannt auf Ihre Anfrage.

Luzie Seeliger

Projektkoordination und Kommunikation

+49 681 959 3110

Kontaktformular

  • Saarbrücken

    Science Park Saar, Saarbrücken

    Standort Südwest

    Hauptsitz Saarbrücken
    Centigrade GmbH
    Science Park 2
    66123 Saarbrücken
    Deutschland
    Saarland
    Auf der Karte

    +49 681 959 3110

    +49 681 959 3119

  • Mülheim an der Ruhr

    Games Factory Mühlheim an der Ruhr

    Standort Nordwest

    Geschäftsstelle Mülheim
    Centigrade GmbH
    Kreuzstraße 1-3
    45468 Mülheim an der Ruhr
    Deutschland
    Nordrhein-Westfalen
    Auf der Karte

    +49 208 883 672 89

    +49 681 959 3119

  • Haar · München

    Haar / München

    Standort Süd

    Geschäftsstelle München
    Centigrade GmbH
    Bahnhofstraße 18
    85540 Haar · München
    Deutschland
    Bayern
    Auf der Karte

    +49 89 20 96 95 94

    +49 681 959 3119

  • Frankfurt am Main

    Frankfurt am Main

    Standort Mitte

    Geschäftsstelle Frankfurt
    Centigrade GmbH
    Kaiserstraße 61
    60329 Frankfurt am Main
    Deutschland
    Hessen
    Auf der Karte

    +49 69 241 827 91

    +49 681 959 3119