From Icon Design to Iconic Masterpiece (+ Free PSD)

In this article I'm going to be looking at what it takes to move from icon designer to icon pro. I'll be looking at how icon design began, where it's at today, and where it's going to be in the future, as well as sharing some handy hints and tips.

Introduction

A little over six months ago I started my new job where I was asked to extend an existing set of icons. Great I thought, I can do icons, after all I have created them 100s of times before. Then when I saw the existing set of icons, it came as quite a shock to me. They were the simplest of designs and I actually found it quite a challenge to do something so simple. I was used to spending many hours on the icons that I usually created that it seemed strange that I had only spent ten minutes on these icon to get them finished.

This then lead me to think about a whole host of questions relating to icons such as 'what makes a good icon' and 'how much time should be spent on an icon?'. I will share some of the answers with you below. I've spoken with some other top icon designers to get their take on the process. We'll also be looking at how icon design began, where it's at today, and (more importantly) where it's going to be in the future. So stick with me, make yourself a cup of tea and happy designing peeps!

The First Icons

So where did these little graphic masterpieces come from? It all started back in 1973 when computers were little more than DOS based systems where users navigated their way around using commands. This was a time when graphical design in computers didn't exist. There was certainly no flick of your finger or swipe gestures to operate it.

As you can imagine, this wasn't the easiest of ways to get round your machine, and a relatively well known company in the USA called Xerox were busy working hard to try and overcome this problem. That same year they released 'The Xerox Alto' which became the first computer in history to operate using a graphical user interface (GUI for short). It wasn't until a couple of years later when a certain Mr Steve Jobs and his partner in crime Steve Wozniak took the ideas developed by Xerox and worked them into the world's first commercially available operating system to use a GUI . It was called the Macintosh. Ladies and gentlemen the icon was born!

The first icons to appear were courtesy of Apple on the Macintosh.

It certainly was a revolution for computing. Directories now had a graphical representation that appeared as folders, files looked like notepads, clocks and calculators also made an appearance.

A computer icon is a pictogram displayed on a computer screen and used to navigate a computer system or mobile device.

Icon Design Guidelines

Here are some of the most important design principles when creating icons

Keep Them Simple and Concise

This is arguably one of the most important aspects in icon design. Above all else icons need to be simple, clear and concise. In most cases you need to create an icon within a limited amount of space. You need to be able to portray your product, your service or action clearly and to the point.

Icons often work best when they work well in just black and white. Once you have this nailed then you can move onto adding color and render to your icons.

In some scenarios it may be a good idea to use a single object, or a single character for instance. This method usually works although sometimes another object might be needed. Any more than two objects and I'd approach with caution as this can sometimes appear unclear and can deter focus from the icon. If you do find yourself in this situation then try stripping objects away until your message is still evident.

An icon represents an action a user will take

Consistency

If you're given the task of creating a set of icons then they'll need to have some form of consistency throughout. This can come in the form of specific color palettes, shapes and objects. Consistency should also be present throughout the overall application. What happens when your user clicks on the icon? Is the screen that they are taken to styled in a similar way to your icon? If the answer to that is "no" then you may need to readdress some of your decisions - users often make a link between the two events of clicking an icon and the next screen they land on. If you break this convention then there's a much higher risk of breaking your users' trust.

Understand Your Target Demographic

What kind of person will be most likely clicking the icon? Is the icon targeted at five year olds or sixty-five years olds? Is it for users in China or users in England? If you're creating a food related icon then there would be no use in using chopsticks as your cutlery if it's targeted at the English market. You'll need to think about this and make sure that your target demographic will be able to relate well to your design.

Make Them Pop, Make Them Shout

Now more than ever do your icons need to stand out from the crowd. With app stores popping up all the time across a variety of devices from smart phones to smart tv's.

These icons by Ramotion and George Gliddon show the qualities of good icons that pop.

If your icon is for an app it will often be the first point of contact for it. It's your storefront to the world. People are ultimately influenced by design. You may have the best app in the world but people will be turned off if they aren't first engaged by your icon. Think about it, would you really walk into a store that looked as shabby as hell from the outside? It's the same principle; not many people will take that next step to find out more about your app or take that next call to action.

Sketching is Your Friend - Conceptualize!

Ok I'll admit it. Digital art was my first contact with the art world. Photoshop was my sketchpad and the mouse was my pencil. I'd never even considered sketching things before; after all I had always been rubbish at freehand drawing during in school. It wasn't until my uni years when I explained this to one of my lecturers that she turned around to me and said "Aaron sketching is your friend". She then proceeded to explain to me how you don't need to be the worlds best illustrator to sketch.

Sketching your icons first can often serve as a decent starting point for your final design.

Sketching is not about creating a realistic representation of what you can actually see but is more a method for creating the basis of an idea, inspiration, concept or vision. From that day I always carry a sketch pad around with me and more often that not I'll sketch out my designs for icons. This really can be invaluable and can save a heap load of time. It helps you get the basis of your icon and can often serve as a decent starting point for your final design.

Case Study

I managed to grab a few minutes with the talented icon designer Alex Volkov and asked him a couple of questions regarding icon design.

Icons created by Alex Volkov. These demonstrate the progress that has been made over the years in terms of icon design.

The most important factor is to find the most expressive style for portraying the icon, that will correspond to the task most obviously and how effectively it will perform its function. Above all else the icon should be beautiful.

It depends upon the task of the icon, idea and selected style of it. It can take from two to sixteen hours. That's the time it would take me to create the icon, whereas the time to search ideas and approval with the client varies and sometimes can take much longer than the implementation.

Icon Hints & Tips

Here are a few hints and tips that should help your icon designs move from level one to level expert. Of course, as with all design, the more you try, the more errors you will make. But the more errors you make, the better you will become.

Get the Light Right

If you want to add realism to your icons then it's really important to understand from which direction the light is shining on it. You need to be able to visualize (in your head) an imaginary light is shining on the icon. The image below demonstrates this.

This exaggerated image demonstrates our light source and how it would fall on the icon. From this we are able to determine where the highlights and shadows should be.

By visualizing this we are able to add highlights and shadows to the icon as they would fall in the real world.

The Beauty is in the Detail

When creating icons the attention to detail is very important: glares, shadows, reflexes, reflections, properties of materials. Look at the world around you and think how it would look in real life. The interaction and behavior with light and surrounding materials is important. Light can often fall differently in diverse weather conditions. For example light will not travel the same through an empty room as it would in a smoke filled room. When we take into consideration these factors we can create not simply a form of icon, we can create icons with certain moods and feels.

The Bad Icon Checklist

• Use little to no text
• Is the icon universally recognizable? For example, a police car in the USA will not be the same as a police car in Australia.
• Do you have too many objects within a limited amount of space?
• Have you designed the icon at the size that it's eventually going to be? If not then perhaps you should have.

App Icons

With the introductions of smart phones (most notably the iPhone), tablets and apps onto the scene, icons have gone through a bit of a revolution. Never have icons looked so polished, so real, so full of depth, color and intensity.

This image shows the different sizes of different app icons

The iPhone set limitations and guidelines for how app icons can be displayed on their touch screen. Most evidently they have to fit within a 57 x 57px box (114 x 114px high res). These limitations set the design communities imaginations alight and as a result of this we now have all kinds of weird and wonderful icons that have been based around the limitation of the iPhone's square icon placeholder.

Some icon limitations have created a whole new style of icon design such as these by Livie Leontidis, Ramotion and Jackie Tran Anh.

The Future of Icon Design

By looking at the road that icons have previously taken we can try and predict how icons will be in the future and what form they may take. Of course the future of icons relies heavily on, not just the basic principles of good icon design, but also on the tools that are used to create those icons. For example, for every new feature that is added to software such as Photoshop this could potentially help shape the future of icons. However the basic principles of good icon design remain the same. One person who knows perhaps more so than others about good iconic design is Rob Janoff. Rob designed the apple logo back in the 70's. I managed to grab a quick Skype chat with Rob who told me what he thought made a good icon.

What I usually look for is simplicity and elegance. With the advent of technology there are more and more complicated renderings of icons. Which are nice to look at but sometimes the technique is substituted for concept. When things are very simple they are easier to remember. - Rob Janoff

To also understand the future of icons we should look at the platforms on which they are utilized. In a recent interview Bill Gates was asked what he was most looking forward to, regarding the future of the internet. He replied:

Super fast internet connections and improvements in hardware will make possible a world wide web that gives us information in 3D Bill Gates

This could give some insight into the future of icons. Perhaps they could move away from flat 2d objects and become part of the world around us. Icons could potentially become handles that we pull, dials that we turn and objects that we press.

Icons of the future will become better, more professional and interesting. Designers are already trying to make beautiful eye-catching designs and it is hoped that this trend will continue.

The Lens Icon.PSD

Accompanying this article is a .PSD for you to download and use in your projects, tweak or just to have a look through. The reason for including this design is to introduce you to some techniques that are used in the third part of icon design; rendering.

The first step should be to collate all your ideas, have a look around the internet and at objects that you see around you, try and get some inspiration (this always helps). The second is to sketch out some ideas and make sure that the call to action or message that you're trying to portray is clear, concise and evident. The third part is the render. This is the part where you start adding color, shading and lighting. In my opinion it's the most exciting part as this is when our icons really start to come to life.

Have a look through the PSD and you should be able to see how the icon is constructed.

Conclusion

There's no doubt about it that icons have been totally regenerated over recent years, and who'd have thought that designers would be putting so much time and effort into something that can be as small as 16x16px!

It's these icons though that are helping us navigate around our devices more easily and ultimately enriching our lives day in, day out. Can you imagine just how frustrating life would be if we were back in the 70's and having to navigate around using command prompts? It would be a nightmare. Fortunately things have progressed since then and it's our job as designers to push the boundaries when it comes to icons; we should embrace the technologies that we have around us today so that we are able to produce icons like they've never been produced before. If you're just getting started with icon design or you're still an icon virgin then now's a good time to jump in knowing that you're now armed with the fundamental knowledge, from this article, that will set you on the right tracks to creating your own icon masterpieces.

Until next time, happy designing peeps!