Icon Set

The Starting Point

Software for tool automation is not known for its style and beauty. But the tool operators and engineers have to use this software every day. The software should be easy to unterstand and icons can make it easier to recognize functions behind buttons without reading the label on the button.

Unfortunately every developer has different style preferences and sources for icons. This leads to an inkonsistent set of icons. Let‘s have a look at the icons that we are using.

There are a few problems here.

• Inconsistent weight - different line thickness is used. There are also wireframe icons and icons with filled forms.
• Inconsistent positioning - the icons are not always optically centered.
• Inconsistent style - a mix of flat and 3D icons.
• Duplications - icons have not been reused but instead added again.
• Confusion - some icons are difficult to understand.

Ok, let us create some ideas to fix these problems. What can we do here.

• Define a style guide - The guide should contain basic rules to make sure that all icons look like they belong to the same set. But don't mak the guide too complicated and hard to follow. It will dicourge people from using ist.
• Use a grid to create icons - The lined in a grid make it easier to follow the style guide. All boxy shapes will have a similar width or height, all round shapes will have similar diameters.
• Create an inventory - Keep a list of all available icons and their possible usages. A seachable form like an online documentation is preferred. Users often have a specific word in mind when they look for an icon an can search in the document instead of reading everything and hope to find what they are looking for.

The Process

After the initial analysis I created a list of all icons that the software currently has including the function or meaning. The final list contained 96 icons. But I knew already that I have duplictes and some icons xould be merged because they represented the same idea. Functions like "Add Recipe" and "Add Folder" had different icons but they can use the same. The number of icons went from 96 down to 64 from the review.

In the next step I created a style guide and a grid for my new icons. There are a lot of helpful sources like Apple, Microsoft or Google. My style guide contains only a few points:

• use only horizontal and vertical lines, 45° diagonals and circles
• Sharp corners
• 1px lines
• only wireframe, no filled shapes
• single color
• leave a 2px border
• the overall shape of then icon (portrait, square, landscape) match the helper lines in the design grid

It is also helpful to illustrate the coordinates for diagonal line or the intersection of diagonal and horizontal or vertical lines because these do not fit the base grid of 1px.

Now I have a framework and I can begin to create all of the 64 icons that I need. Some of them like arrows, plus, minus, or cross will probably be very easy. Other, more abstract icons like initialize or automatic mode are difficult. But the the process is the same: create ideas, use Google to find inspirations, create my own sketches and then implement the final icon design.

The Result

Here is an example of the final icon set. The icons look much better than before. All issues from the original version are addressed.

There is still some room for improvements:

• Some of the lines, especially the diagonals, look blurred. The reason is probably the line width of one pixel. Some repositioning might help, maybe the diagonal lines have to be a bit thicker than 1 pixel.
• Some icons are still too complex and look busy. Especially the icons for keybard and table. Maybe they can be simplified in the next iteration.
• I did not always stick to my style guide. I used line angles of 30 and 60 degrees in three icons. The next version of the style guide may include this exception.
• Is a floppy disk still the best option for a save button? :-)