The Evolution of Influicons
I really like creating icons. It sometimes feels like a bit of a break from my usual day to day of meetings, user interviews, flow charts, wire framing, mocking up layouts, etc. I started out as a graphic designer who became a UI designer and then shifted more into the UX side of things, so I think digging into icons sparks some nostalgia for the old days when I would just toil away pushing pixels and making things look good.
I’ve made a few icon sets in the past and was fortunate enough to join Influitive right when they needed a revamp of all the icons used in the product. At the time the icons being used were a mishmash from various sets found on various sites like icomoon.io, flaticon.com, thenounproject.com, and who knows where else.
Choosing a Style
I’m sure we’re all aware (as seen in the image above) that there are many different styles of icons: flat/skeuomorphic, line/filled, single/multi-coloured, thick/thin, round/sharp, simple/detailed, the list goes on. These types also convey different visual and emotional meanings and can really help to bolster your brand and product’s look and feel when used correctly. After shopping around a few different icon styles to the rest of the team we landed on a flat outline icon style to keep things simple, airy, and modern.
Influicons v1
With the style chosen and a comprehensive audit of the icons being used currently I set off and put together a template to create the new set. My preferred software for creating icons is Adobe Illustrator, mostly because I’m already comfortable creating icons with it and I’m not a huge fan of working with vectors in Sketch. Before too long I had a set of about 50 SVG icons we were happy with and moved ahead with implementing them into the product. Immediately things began to look more consistent, everyone was happy, and things were good… at least for a while.
Time went on, I added some more icons and revised a few others. More designers joined the team and we continued adding and fixing features at a brisk pace. Eventually due to the speed at which we were designing and developing combined with my own lack of enforcement of our icon style, the consistency of the icons began to wane as the designers (including myself) added more and more icons to the set. We also began to notice that a few of the icons weren’t performing well at small sizes and were beginning to look muddled.
Influicons v2
Realizing we needed to do another audit of the current set in order to get things back on track, I set aside some time to completely revamp the icons for consistency and to fix the issues we were seeing at smaller sizes. I decided to thin out the lines a bit and to create some separation between the objects to help distinguish the basic shapes in the icons. I Scaled up some of the SVGs to fill out their containers more completely and tweaked our template to include some more guidelines for the future. We were on the right path again.
Conclusion
Like most projects I’m a part of I feel like our icons are ever evolving and could always be iterated on. They aren’t perfect, but they’re vastly better than the state they were in 2 years ago. We’ve currently created approximately 140 icons that all look consistent in style and are functional at different sizes. As this set continues to grow I’ll be sure to stay more vigilant in maintaining that consistency and push for the design team to adhere to the conventions set for creating them.
Now if I could only come up with a succinct visual way to communicate ‘Administrator’ without having to add a label to the icon…
