Designing Duik 16 icons: “My” theory
The My word in this title might sound a bit arrogant, but it’s actually quite the opposite. Read next…
Working with icons is new for me – the icons of the previous versions of Duik were designed by a friend, Zeg, and not even by myself – and I discovered how hard it can be to design icons which are: intuitive, clearly “readable” – even when they’re as tiny as only 14 pixels wide – and beautiful. Yes, I’m trying to make Duik16 at least a bit less ugly than Duik15, but this is a bonus, I’m actually working really hard to make it intuitive and quick and easy-to-use.
My theory
Icons are meant to replace text, allowing to differenciate buttons of the application quickly, quickier than text, while helping to understand what the button will do. In my opinion, good icons are icons which are understandable without text.
Achieving this can sometimes be easy, and fun, when what you need to show is very concrete, but other times, as the concept represented by the icons can be very abstract, this can just be impossible.
In this case, I try to use the same symbols for tools of the same category, for tools doing similar things, and I try to choose a symbol which I’ll use for each concept. Here, using a mechanical arm for all stuff related to actual rigging, and I tend to represent objects and pivots (a.k.a layers) with circles.
And some other times, I just struggle finding a way to represent the tool, and I end up with really bad (and ugly) icons which nobody will really undertand what they do.
In this case, I noticed that the icons I’m not statisfied with are for the tools I’m still struggling to explain with only a few words. If you need to design icons, first try to explain what they represent in less than two or three key words – ideally, only one! If you can’t, you’re not ready to design the icon.
So… This is what I learnt by myself. I thought that while I was using applications with icons each and every day, it would be easy to manipulate those concepts and create my own icons for my own applications. Now, that was arrogant. As a matter of fact, I actually did not think about this at all, I just get into work without thinking at all. This may be a bit less arrogant, but it was at least very stupid. I know I don’t have time to just design icons, “I have a lot more work on developping the actual features of the software, so I don’t have time to learn how icons work“. What a mistake. I think trying to figure all this out by myself was a complete waste of time, and I should have searched for help and resources. But what’s done is done, I know I still have to do that before designing the icons still left to do. If you have any suggestions and know good resources about icons, let me know in the comments!
Then, I will be able to update this post and change the title of this section from My Theory, to The Theory. And show you better icons.
The actual design
What do you do when you don’t have time (and the ability) to design each and every icon of your website/application, and you don’t want to reinvent the wheel?
You find some nice icon set!
For the applications I develop, I now use the awesome Font Awesome, by Dave Gandy, which is a set of very nice icons embedded in a font. This is a very easy way to use vector icons: install the font (available as *.otf or *.ttf), and just copy and paste text from the cheatsheet into your favorite software for designing (I use Adobe Illustrator for icons). And you can also use it as a webfont on your website!
Please some day remind me that I have to post something about fonts too ;).
This font is available under a free license (like the softwares I develop), and I’ve just discovered there is even a free license equivalent dedicated to fonts (SIL open font license – OFL)!
As these icons are really great, they were a very good source of inspiration, and learning how to draw an icon which will be nice at different size, tiny or big. I used them a lot in Duik16 too, but they are not enough for very specific tools like Duik, this is the reason why I had to design new icons.
Thinking of what must be displayed is a thing, but you’ll also have to learn how to actually display it, especially when you need distinct sizes, with very tiny ones. It can be very tricky to draw good looking, and detailed, icons wich must be displayed in a 14 pixels wide square. Anyway, I think it’s a good habit to always look at your icons from a long distance, see if they’re still understandable. You’ll learn how stylization works 😉 Work the silhouettes!
I’m going to design a lot more icons, and improve the ones I’m not satisfied with, and I’ll update this post as soon as it’s done! I’m also giving away all my source files (Illustrator and vectors as SVG) to my supporters on Patreon.
And here are some of these icons in context within Duik 16 😉
Pingback: Duik 16 sneak peek – Rainbox