Modern Icon Design

source: kosai106@Deviant Art

Icons are one of the best ways to represent the different features of your app.

Modern day users would rather look at a small image than read about the services that your app/website offers them.

Icons speak to the child in all of us who loves to look at the pictures more than read the words in a book.

Therefore, these images have to represent in a clear, indisputable way the purpose that they serve.

Here are some of the things I learled from my experience in icon design and usage.

Icon design

There are a few guidelines that, in my opinion, have to be followed when creating an icon:

  1. Simple design

Icons shouldn’t distract the user from the general aesthetic of the application. Instead, they should be a simplified, “matchstick figure” of what they represent.

Start by sketching your idea on a piece of paper to have a better vision of what you want to do.

2. A general theme

An icon pack would give a more professional, visually pleasing feel if it followed a certain concept, whether it’s in the choice of a color scheme, the use of a common shape, or the drawing style.

3. Attention to detail

It is true that modern icons are more simple, but that doesn’t take away from the fact that they can incorporate certain details that would make them more interesting. An example would be a cast shadow or 3D padding…

4. Versatility

As a developer, I often look for packs that have more than the ususal app icons. A more versatile pack would include creative icons that the developer wouldn’t even think to look for! That would make your work even more appreciated.

source: flaticon.com

5. Different sizes

When creating an icon, think about making it in several sizes. You never know when you could need it in a different size.


Icon use

If you’re an app developer and want to incorporate icons into your application, keep these tips in mind:

  1. Not everything should be an icon!

This is a matter of personal taste, but you have to know when to replace a text with its representing icon. It also depends on whether you are developing a web or a mobile app because the latter tends to incorporate more icons.

One thing is certain, you should not overcrowd your app with unnecessary icons.

2. Include titles explaining the icon’s purpose

It is a good practice in web apps to give a title to your icon link that shows up when you hover over it even when the icon perfectly explains its purpose. This is to avoid any confusion and to improve the user experience.

3. Know how to size/position your icons

Again, this depends on your own taste and personal preference, but generally speaking, icons should be proportional to the text size and should be positioned in a visible place for the user.

Finally, you should have fun and experiment with icons because they make a huge difference on the user experience and lighten up the appearence of your interfaces.

Let me know in the comments what you think is important when working with icons.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.