Designing icons for Gridicons

Gridicons is our open source icon set for WordPress.com. No one works on it full-time, but it’s a passion project for a handful of designers at Automattic. Icon design is a nice break from regular work, and it’s something you can start and finish in less than a day.

Collaboration

Screen Shot 2017-06-30 at 12.34.46 PM.png
Coupon icon

A core tenet of Gridicons is to encourage collaboration between designers.Β Gridicons is completely version controlled on GitHub, and every icon submission receives critical feedback. This process deserves its own blog post, but in short, we’ll brainstorm ideas for metaphors and iterate until we reach a solution. One great example of this process is from the coupon icon. The iteration process can be followed in the coupon icon pull requestΒ on GitHub.

Drawing the icon

Screen Shot 2017-06-30 at 4.15.21 PM.png
Previous bug icon

For this example, I’ll pick the most recent addition to Gridicons β€” the bug. This icon is used for reporting software bugs on WordPress.com. The previous icon was not a part of Gridicons, and it didn’t quite follow the Gridicon guidelines.

Fortunately, when you’re contributing to an existing icon set, the hard part of defining the style of the icon set is already done. The icons in Gridicons are solid and geometric, but soft edges make the them more approachable.

Search icon sites

Once we have a firm idea on what metaphor to use for the icon, I’ll search a few icon sites and get ideas for the icon drawing. If applicable, I’ll search Google for photos of the real object to refer to. This can be useful for tangible objects like bugs, homes, trucks, cameras, etc. During this step, I’ll loosely sketch ideas that I think will work. I try to generate as many ideas as I can in a small time period, and I don’t get very detailed. Pencil and paper work best for me because it’s most efficient.

bugs
Bug icon sketches

Move to the computer

Next, I’ll move to the computer and refine the icon. Because the icons are geometric, it’s faster for me to build the icons in Illustrator than it is to draw perfect shapes with a pencil. Even if the pencil drawing is really good, something gets lost in translation when you transfer your work to the computer.

Just like the sketching step, I try to make as many icons in Illustrator as I can. These aren’t done loosely, so there are fewer ideas, but they are closer to the eventual solution.

bug ideas
Bug icon ideas

I also think about other icons in Gridicons and how the new icon relates. Does it follow the guidelines? Does it share the same characteristics? I continuously reshape and remix ideas until I decide on a good direction.

Sweat the details

Once I like an icon direction, I start making tweaks and several variations. These details are hard to notice but overall make the icon look more polished. For the bug icon, I adjusted the scale of the head and torso, rounded the “elbows” of the legs, and connected the two halves of its body.

bug-tweaks
Bug icon iterations. Final icon on right.

As a final step, I view the icon at 100% scale and check the pixel preview. It’s important the vector shapes are made cleanly, with no stray points. Then, I address any last feedback on GitHub, and the icon is ready to ship!

bug-small
Final bug icon and pixel preview

Like I mentioned, Gridicons is open source! If you want to contribute, head over to the GitHub repo.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s