Pixel perfect

The interconnected world of design system icons

Ginny Wood
Aug 10 · 9 min read

From Kidpix to design systems

Did you ever create stamps in KidPix? Kidpix is bitmap drawing software that’s been around since the nineties, and I remember many happy — more like maddening — hours creating tiny pixelated images to reuse in my pictures. I was continually amazed to see how different the stamp looked at rendered size than in the zoomed-in view I was working on. Will these stark grey blocks really look like shadows? Magic.

Image for post
Image for post
Mackinstyle

Why I’m here

I’m passionate about providing quality icons to users. I know when I use a product frequently, I build a connection with the icons that influences my experience for better or worse.

Crafting practical icons

So what kind of icons am I talking about here? Icon design is a broad topic. Icons can be many things:

  • Pictograms for navigating the world
  • Anything on the broad spectrum in between
  1. Make content more scannable by differentiating items at a glance
  2. Simplify repeating or persistent actions
Image for post
Image for post

Consistent and standardized

Meeting strict style and quality guidelines

Utilitarian

Helping the user understand and take action

Modular

Ready to plug into any Zendesk interface

Reusable

Useful for multiple situations, though usually precipitated by a product’s specific need

Flexible and robust

Sized at 12px and 16px, allowing scaling to many multiples of 4 to fit our base grid. Styled in two ways: stroke style is the default; fill is used for greater visual weight. Each icon comes in 4 versions.

International

Using universal metaphors and avoiding words, which won’t be translated. Can be flipped for use with languages that are read right-to-left.

Image for post
Image for post

Love the pixels

Pixels matter

The first UI icon I ever designed was a cursor. I drew it as a vector, thought, “great,” and gave it to the design director. She asked me if I knew what a pixel was. I had placed the vector without consideration of pixels, so the aliasing was completely arbitrary.

Image for post
Image for post

Practical tips for drawing icons

Because icons’ limited number of pixels have such an impact on what I can draw, I move to digital quickly. I may sketch on paper as I think through metaphors, but once I know what I’m drawing, I work out the visual design in pixels. Only in the final medium do I know what will be possible.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Working with extreme size constraints

Twelve pixels, squared. I appreciate this icon size, since it allows clean scaling to 24px, 36px, and so on. It fills those crannies the 16px icons can’t. But, 12 × 12 is a challenging space to work in. I respond to this challenge in a couple of ways.

Image for post
Image for post

Make it memorable, not literal

How can I communicate “API” in a 12px ✕ 12px icon? I don’t; it is a trap. Size may feel like the problem, but even if there were space to include many complex elements, the icon would be too confusing to parse at a glance within a product interface. Not being able to fit everything into an icon is a red flag that something else may be wrong and clarity is needed through another method. I could try to depict everything about the concept, but I would end up with an illustration instead of a practical interface icon — valid, just not my goal.

Image for post
Image for post
API icons from the Noun Project by: Yu luck, Becris, Eucalyp, faisalovers
Image for post
Image for post
Image for post
Image for post

Define the problem first

Look at the big picture

Icon design may seem self-contained, but it takes some big-picture thinking to get it right. And because it is so detailed, the stakes are pretty high to make sure I am drawing the right thing before I start focusing on whether this anchor point should be one or two pixels from the edge.

Image for post
Image for post

Validate the concept

The designer working on the feature knows better than I do what metaphor is needed. They know where the icon will appear, and what the user and business needs are. So before I get into the nitty-gritty of drawing the icon precisely, I lean on them to figure out what is needed. With so many free icon libraries out there, the icon concept can easily be shown along with the rest of the feature, at design critique and in user testing.

Find the words

It’s important to work with the UX Content Strategy team right away to figure out the words that go along with an icon. What is it communicating? What is the associated description?

Image for post
Image for post
Image for post
Image for post

Enjoy

Now that I understand the goals and constraints for icons, I can talk and think about them objectively. I hope you can too.

Image for post
Image for post
Image for post
Image for post

Zendesk Creative

We're a blend of art, copy, video, and product design.

Thanks to Alexa Herasimchuk

Ginny Wood

Written by

Product Designer on the Garden Design System

Zendesk Creative

We're a blend of art, copy, video, and product design. We come from different backgrounds, but we share one passion as the Creative team—making compelling work for Zendesk.

Ginny Wood

Written by

Product Designer on the Garden Design System

Zendesk Creative

We're a blend of art, copy, video, and product design. We come from different backgrounds, but we share one passion as the Creative team—making compelling work for Zendesk.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store