Style development and system for 200+ icons.

Ravelry is an independently run community website and resource for knitters, weavers, crocheters, etc. They average about 1,000,000 active users every month with a user base of almost 10 million and exponentially growing. All of this achieved by a small team of only 6!

These impressive statistics are mentioned to demonstrate how important nailing their recent redesign was. Ravelry commissioned me to develop an icon style that was scalable and unique to the site’s character and execute ~200 icons.

Challenge

These icons are made to work at a very small scale (sometimes 16px) and up to a decently large (~500px) so I needed to develop a style that can sort of work with and without detail. I wanted to make sure the set felt unique even at its smallest and simplest. Hand drawn shapes in every situation was a great solution. No perfect circles or shape based lines – everything drawn manually.

Style Construction

Key words to describe the wonderful world of Ravelry may be handmade, heartfelt, caring, imperfect, mighty, and expressive. We began the process with a deep dive on where the icons would predominantly live. What color backgrounds? What sizes? Are they accompanied with text? Hover/alt titles?

Next, I took some inspiration from their new illustrations to create 4 icons to discover some visual motifs, color palettes, and shape language. We ended up with 4 style tests that all felt like the fit in the world we’re aiming for with some minor stylistic differences:

And now that we trust things are working correctly and feel unified, it’s time to start establishing some rules so all 200+ icons feel consistent. Setting up some basic simple rules go a long way.

Implementation

Instagram • Twitter • bone.haus