Joen Asmussen on The Making of a Gridicon

screen_shot_2016-03-11_at_10-39-03_am

Great iconography taps into a universal language we all understand. Like the dove of peace or the red cross on hospitals, the very best of icons communicate thousands of words in a single graphic form.

In much the same way, icons can augment a user interface. If the icon speaks enough on its own, it can free up always-welcome whitespace. Alternately, it can sit next to a label to give it a unique silhouette that’s more easy to recognize at a glance.

What you see above are the Gridicons for WordPress.com. Here’s a brief overview of how we created them.

What year did Gridicons get started, and what was the motivation?

Discussions on starting a new icon set for WordPress.com started in earnest in August 2014. Until that point we had been using an icon font which was increasingly becoming unwieldy. With the tools at the time it was also very hard to contribute to, or make corrections to the set.

In addition to this, past icon efforts had been a wonderful mixture of GIFs, PNGs, and a mix of icon fonts. We had a great opportunity to create a new set from scratch, to replace multiple old ones.

Around that time, what other companies were sharing their icon sets openly on GitHub the way that you did?

Github’s wonderful Octicons set was a great source of inspiration. Not only did we use the same arduous build process for when we used an icon font, but it was so clear that the designers at Github shared our love for open source, and for pixel-perfect icons.

Can you describe the technical workflow?

From the outset, one of the biggest priorities for Gridicons was to lower the barrier to contributions to the point that anyone following the “recipe” could contribute an icon. So in a way, the process was the starting point for the experiment.

We chose to work with SVG files, as it’s an open and standardized format which almost any good vector editor can export to. We run that through a grunt script which minifies and cleans up each SVG. The minified SVGs are then combined or converted into a variety of formats, including a single SVG sprite, and a React JS component. We use Node for the install process, which makes it easy to get the required dependencies. In the end all you have to do is draw an SVG file, then type grunt on the command line, and the magic happens.

The minified SVG files themselves have turned out to be incredibly useful in their own right. You can drag them right into your Sketch mockups, just like that.

Why are new icons needed, given that there are so many out there that are freely available (and for purchase)?

In the same way as a carefully chosen font can make or break a visual identity, so can the visual style and expression of an icon set augment and complement a brand. As websites and apps increasingly utilize the same patterns — vertical rivers of content, navigation bars at the top — icons can provide a great means of standing out and being unique.

What makes these icons unique and different from what else is available?

Having to work for a wide range of projects at Automattic, Gridicons are very minimalist, simple geometric shapes. One could say the set was unique, however, in that it was created as a collaboration across continents and timezones — like most other open source projects, in other words.

What makes creating an icon a difficult task, and what makes it easier?

The answer to both questions, probably, is the grid. Here’s Susan Kare’s 32x32px depiction of Steve Jobs, drawn in 2 colors in MacPaint:

HZfEksJm2M.jpg

In this case, it’s so impressive to see how much expression Kare was able to put into such a tiny canvas. This speaks to an amazing artistry, knowing exactly where to place a pixel in order to convey detail. This is no easy task.

On the other hand, the grid itself, more than anything else, is what makes designing an icon a surmountable task. With vector graphics we aren’t limited to a grid, but it’s still important to choose one. Not only because the end result has to be rendered on a screen, so it has to become pixels at some point, but because it helps define the rules for how an icon should be built. Place and size shapes on the grid. Probably don’t draw strokes that are thinner than 1pt.

How do you ensure that when multiple designers and illustrators collaborate on icons that the overall unity can be achieved?

This was the experiment. We weren’t quite sure it would work, and half of it was making sure the build process was solid. The other half was ensuring we had a good “recipe” in place, for what an icon should be. In many ways it’s like cooking; if you follow the directions and use only the suggested ingredients, you’ll end up with something nice.

The recipe for Gridicons is to draw icons on the 24pt base grid. We have an Illustrator template that you can start with, which suggests the size a primarily circular, square, or rectangular icon should have so that they are optically weighted.

QqkLEiGnZg.png

Angles should mostly be 45 degrees, the icon itself should be flat and bidimensional, with no faux 3D to indicate depth. Lines should have 2pt strokes, and rounded corners should have 2pt radii.

That can sound awfully specific, but within that framing we’ve found remarkably consistent results.

For someone who cannot see, I imagine icons present a hazard. What are your thoughts there?

An icon should never stand alone without any descriptive text that a screen-reader can pick up. Whether through a label that sits on the side, a popup label, or an alt attribute on the icon itself.

SVGs, thankfully, allow for more options here, including the addition of ARIA labels to the icons themselves.

Last question: When you think of accessibility concerns, where do icons sit in the hierarchy?

An icon is just another tool in the toolbox you use for making great designs and interfaces. Whether it’s used instead of a label, or in conjunction with, is a constant balance that has to be found, and not just for accessibility purposes, but for good usability too.

Especially for complex interfaces, sometimes the more chrome you can take away, the more you can visually reduce clutter, the more you can emphasize what’s most important. But it’s easy to take that too far, and you’ll end up with mystery meat navigation. So there’s no simple answer here; whether an icon can augment or replace a label is a value judgment a designer should probably make on a case by case basis. When used right, however, icons can help free up space, declutter, and augment.


❔ Whois

Joen Asmussen is a design wrangler at Automattic. He believes in gravity, the moon landing, and well-mixed white russians.

Twitter

❤️ Favorite Emoji

🎉


Enter your email address to follow this blog and receive notifications of new posts by email.


 

Published by Joen A.

Design wrangler at Automattic. I believe in gravity, the moon-landing and well-mixed white russians.