Icons

Introduction

We’re proposing here some guidelines to build icons based on our experience with software development and UI design, and most of all our comitment to make our software as intuitive and user-friendly as possible, as well as accessible to most people.

Hint

All of this document and these thoughts are evolutive. Also, we’re not omniscient, and you have your own thoughts and experience; we would be very happy if you would share them and contribute to this document, these guidelines, these list, and these icons. Together, we could make sure all our software is the best we can imagine.

media icons

User-friendliness

This is the most important aspect of our UI and icons. This means that after a short period of getting used to them, the user is as quick as possible using the software, which UI is unobtrusive.

  • The UI and the icons must let as much as possible room to the actual work of the user (text, image, media…)
  • The UI must be as discreet as possible, and let the user’s work area stand out.

That means the icons has to be as small as possible while keeping readiness, and not being too difficult to click-on.

They also must be constrasting enough, with other icons and with the rest of the application, to be recognizable as fast as possible.

Accessible

Not all users have the same way of seeing the icons. Some may be colorblind, some may have visual defficiencies. The default icons have to be as contrasted as possible, and use all tools available to help everyone differentiate them: colors, shapes, sizes.

This also means that the UI and the icons should be scalable, and it should also be possible to change the contrast (without having to manually define all colors)

Of course this may be a lot of work, especially for free software - we strongly believe it should be a priority of paid and proprietary software to build accessible UI for everyone - so the main focus may be to first build a working UI and icons following these guidelines, but it must be still easy enough for anyone to modify them and add the ability to edit them to make them more accessible. At least, the software should give access to its stylesheets and make it easy to change the one which is used, and also the source (SVG) of the icons and a way to change them too. Of course, help is always welcome for every free software!

Intuitiveness

To help the user get used to the software, its UI and icons, they must be as intuitive as possible. This means that there should be as little as possible things to learn, and the signification of as much as possible items should be easily deducible.

We propose to base the icons on a set of predefined symbols, used across applications and tools, so that the user do not have to re-learn everything. Specific icons should use a subset and variations of the base symbols and a combination of basic visual elements (colors, shapes, badges…) to make it easy to deduce what they’re symbolizing.

That being said, intuitiveness must come after user-friendliness as we believe it is more important that the software does not get in the way of the work of the user. Most of the time, it is preferrable to have software which takes a bit of time to learn but be quick to use it then, than a software which can be used as soon as it is installed but make the work slower.

Of course, this last thought has to be reconsidered for software not used very often, specific tools which are going to be used only once in a while; in which case these guidelines may not apply in their entirety and it may be interesting to write a variation of these for this specific case.

Do not reinvent the wheel!

We’re not the first to draw icons. Inspiration should be taken from other Free and Open Source project, and when applicable, it is both useful and recommended to re-use existing free and open source icons, and contribute back to the free project where they’re from.

We especially admire the work of fontawesome.

rigging icons

bones icons

anatomy icons