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.

Designing icons can be a lot of fun, when you clearly know what you need to represent.

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.

Sometimes, you’ll have to find symbols to display the concepts.

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.

And sometimes, you just don’t really know what you’re doing, but it still may work…
… Or may not do the job at all.

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!

These are all the icons I’ve already designed for my applications. Of course I use a lot more icons, thanks to fontawesome.

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 😉

I could not do and share what I do for free without your support. Help me on Patreon! Thanks.

One thought on “Designing Duik 16 icons: “My” theory

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.