Getting Started with Icon Design – Tips, Resources, Tutorials and Icon Marketplaces
No matter whether you are a newbie or an experienced designer, you are likely to be aware of the power of a single icon, a symbol or a pictogram.
You probably heard the popular saying “A picture is worth a thousand words” which is true for the icons as well. Dating back to 1970s, icons has evolved from simple black and white symbols to a complex full colour illustrations.
A little bit of history
For the interested readers, I must say that it was actually the first Xerox Alto computer in 1973 that used the symbol metaphor and graphic user interface.
In 1981, the Xerox Star took some of the design features of the Alto and was developed with broad user research and used icons that was based on traditional grid based design.
Some of the icon designs used more than thirty years ago hasn’t changed much and are still used in GUI in modern OS.
Computer/App icons are now an invariable part of any design and in many cases icons are used instead of long descriptions and titles. Especially now, in the time of mobile devices, the icons are creating their own visual language which is vivid and full of live.
If you are curious, you can learn a bit more about the history of icons in a wonderful website created by Futuramo, where you can enjoy an interactive and brief visual history of different GUI in different operating systems.
Tips for creating icons
When I started writing this article, I was wondering how I can be useful for anyone who is interested in creating icons. Actually, I do like creating icons myself and I really try to create a simple and understandable icons. I did a little digging what other fellow designers share that can be useful for anyone who is starting with icon design.
#1 – As little design as possible
Dieter Rams’s principle can be applied to icon design as well. Let’s think about what makes a simple symbol great. The metaphor? Ivan Boyko from Icons8, suggests that before creating an icon there are some questions to ask yourself.
- What object or group of objects will represent the icon better?
- Is there a standard representation of the desired action or entity?
- Does any of the chosen metaphors conflict with other icons in the given application or website?
These three questions can help you our when you start creating icons. And from personal experience, I would suggest to start by doing. Get a sketchbook and draw some ideas for any icon you are willing to create.
If you want to create 10-20 icons, then think about 2-3 ideas for every icon. After you are done, take a look at the whole set and figure out whether there are any conflicts in the representation or is the representation clear enough..
I would also like to suggest, that you should think about stylized representations of the icons you are creating. Of course, if you want to create complex icons that are resembling small illustrations, you can add colour and details, but again do not add too many elements as the icon will be too complex to understand.
#2 – Learn the Tools
Most designers prefer to create icons by putting ideas on paper. This way is particularly helpful when it comes to transferring ideas into Adobe Illustrator, Inscape or Sketch. Having a visual reference on paper is great, especially if you are not that good in good at any software tool.
I would suggest watching some tutorials online to help you out in getting the knack of creating icons.
#3 – Put the icons into context
There is no better way to see how your icons perform than putting them in a relevant context. For instance, imagine you are creating icons for a shopping app and you created some shopping cart, shopping bag, add product, remove product or whatever icons you wanted to.
To be able to see how the icons look like on the actual app, I would suggest to implement icons in such app. There are a few ways to do that. If you cannot create the app layout yourself, look for shopping UI kits [the web is full with them] and edit them in Photoshop by adding your icons and adjusting the layout the way you imagine it.
Or you can just find an app that is similar to your taste and take screenshots on your phone. Transfer them to your computer and edit them in Photoshop with your icons to see how they look.
It really doesn’t matter how you can do that, but the most important thing is to see if the icons are not too thick or too thin. Figure out if they are looking sharp enough, or how they perform in a large or really small scale.
Tutorials & Resourses
As almost everything on the web, there are people who are creating tutorials for anyone who is eager to learn. Listed are some of the most useful sources for learning how to create icons.
- Icon Design: Creating Pictograms with Purpose – SkillShare Free Course by the co-founder of Noun Project – Edward Boatman
- Tutsplus Icon Design Tutorials
- Icon Design Youtube Playlist [updated regularly]
- How to design a top-quality icon by Eugeniu Clim
- How to Create an Icon Design Workflow in Sketch App 3
Do you want to share any tips, tutorials or a new marketplace? Please, leave comment below…
Featured image by Paul Circle