Thinking Out of the Box

Eight steps to create an app icon

Olga Poliakova
Olga Poliakova
December 22nd, 2016

BeforeAfter

The Icon – it is a small element, yet it is the first thing that users see when meeting an application – and a first impression can last for a long time. So, it is very important for a product to have an attractive, clear and explanative icon. But how to reach that? I would like to share my knowledge in passing through these steps using pen and paper as well as Adobe Illustrator. I worked as an Icon Designer for many years, and I still create icons from time to time, so maybe you will find my experience useful and can use some of my tips for your work.

Just as an example, I will create an Icon for a hypothetical insurance oriented application “Weather Event”, which warns about dangerous weather conditions (such as storm or hurricane) and suggests to insure a property depending on a situation. I will take you through the necessary steps. So, let’s start!

Step 1: Studying the application

Before getting to the most exciting part – which is drawing, if you are like me – we need to pass some other necessary steps. Because we need to know what to draw, right? So first of all, we have to understand:

  • what the application does,
  • who uses it for what reason
  • and in what context.

This step is very important. Without this information, you won’t be able to create an icon which is recognizable by a target audience and which communicates what it is supposed to communicate. In our case, the application will be used by people, who are interested in insuring their property just in the time when it’s necessary, depending on weather event.

Step 2: Finding metaphors

In the best case, the metaphor should reflect the purpose of the application. “Weather Event” sounds very simple. It is clear that the icon should contain something to represent some kind of weather condition and something to represent a danger notification and maybe something to represent insurance. My initial ideas were: sun, clouds, umbrella, hurricane (for weather); message/speech bubble, lightning, warning triangle (for event) and protecting hands, a house, protected by umbrella, lifebuoy, shield (for insurance). After brainstorming with my colleagues, we went to a deeper level of abstraction and got more metaphors: windsock, rubber boots, rainbow (for weather); alarm clock, bell, bullhorn (for event).

Now we have a big pool of ideas to choose from. We can go through many possible combinations by sketching, after which we can decide what fits the best.

Metaphors

Step 3: Defining the style

But before sketching it’s better to decide what style to use. The reason being that it allows us to show sketches to the client, which are closer to the final result, hence reducing iterations later on.

There are too many icon styles to describe them all, but in a very general case icon styles can be divided in groups by amount of details, amount of colors, artistic techniques, effect and perspectives which has been used to create an icon.

Styles

As we are going to create an icon for the mobile app, let’s to stick to material design or iOS style, which means middle amount of details and limited usage of effects. Let’s try to create something what would fit for both OS.

Step 4: Sketching

It’s always good to make sketches for several different ideas, because at the beginning it is never clear which one will look better from a visual point of view and which explains purposes of the application the best. It also helps a customer to understand what to expect at the end, so it’s better when sketches describe the idea in details.

Sketches

You can see that I had some rough concepts at the start and then combined them. I really liked the idea of a colorful umbrella before sketching, but finally decided to go with the lightning strike, as it is a much more fitting metaphor.

Sketches

Now sketches are ready, but before proceeding to rendering we need setup a surrounding.

Step 5: Setting up the workspace.

Like artists prepare canvas, brushes and pains before starting to create a piece of art, we need to setup our digital tools properly. I usually create flat and almost flat icons in Adobe Illustrator and my workspace looks like that:

Workspace

Apart from standard Illustrators pallets and setups, in a general case I have:

  1. Artboards for all icon sizes (Android and iOS) (see the image above)
  2. Separate layers with grids, scanned sketch and empty layer for the icon.
  3. Swatches folder for iOS colors.
  4. Separate pallet for Material colors.

That’s enough for creation an application icon either for Android or for iOS.

Step 6: Rendering

That’s the most labor-intensive, but also very emotive part. And I would divide it in several sub-steps.

6.1 Vectorising.

At this step, I just create basic shapes with a pen tool. Shapes don’t have to repeat a sketch exactly. Sometimes it’s better to adjust them according to the grid or better composition. At the end, I have something like this:

Outlines

6.2 Coloring.

As I’m not limited with only one OS, this time I would like to use Material colors for the icon, because the Material palette contains more colors and we can apply them to create nice effects, smooth gradients and sufficient contrasts for our quite detailed icon. Also, it is always good to try several color combinations to be sure that you are on a right way.

Colors

6.3 Applying effects.

And now I apply some more effects to give the icon a completed look: shadows and some strokes to reproduce paper thickness.

Effects

Step 7: Resizing

Even if you have a vector icon without any raster elements, it’s better to resize it manually. When scaling down from 1024×1024 to 512×512 pixels, or even 180×180, it’s not so critical as you can see. But when it’s about small sizes, the difference is obvious. Especially if we zoom our drawings:

Sizes

So, my checklist for resizing is:

  1. Reduce small elements for smaller sizes, otherwise they will look messy and not crisp .
  2. Scale/remove strokes.
  3. Scale effects (like drop shadows for example )down, if you have created an icon in a big size first.
  4. Give more contrast to colors.
  5. Check whether all key points of all paths lay in a pixel grid, if not adjust them.

Sizes

Step 8: Enjoying.

And now, finally, we can enjoy the result. We can show the icon to a customer, or even post it on dribbble. But please make sure that you present your piece of art in a nice frame. Because it’s very important to reveal the best sides of your product and make other people like it as much as you do. Have fun!

Final

Want to know more about our services, products or our UX process?
We are looking forward to hearing from you.

Luzie Seeliger

Project Coordination and Communication

+49 681 959 3110

Contact form

  • Saarbrücken

    Science Park Saar, Saarbrücken

    South West Location

    Headquarter Saarbrücken
    Centigrade GmbH
    Science Park 2
    66123 Saarbrücken
    Germany
    Saarland
    On the map

    +49 681 959 3110

    +49 681 959 3119

  • Mülheim an der Ruhr

    Games Factory Mühlheim an der Ruhr

    North West Location

    Office Mülheim
    Centigrade GmbH
    Kreuzstraße 1-3
    45468 Mülheim an der Ruhr
    Germany
    North Rhine-Westphalia
    On the map

    +49 208 883 672 89

    +49 681 959 3119

  • Haar · Munich

    Haar / München

    South Location

    Office Munich
    Centigrade GmbH
    Bahnhofstraße 18
    85540 Haar · Munich
    Germany
    Bavaria
    On the map

    +49 89 20 96 95 94

    +49 681 959 3119

  • Frankfurt am Main

    Frankfurt am Main

    Central Location

    Office Frankfurt
    Centigrade GmbH
    Kaiserstraße 61
    60329 Frankfurt am Main
    Germany
    Hesse
    On the map

    +49 69 241 827 91

    +49 681 959 3119