Designing the Icons for Flinto’s UI

What goes into creating a meticulous icon system

Peter Nowell
Mar 22, 2016 · 8 min read
Image for post
Image for post

The Flinto team recently interviewed me about the design process behind producing all of the icons for Flinto’s user interface:


How did you contribute to Flinto for Mac?


What is your strategy when designing elements like icons or menus inside of a bigger app?

Image for post
Image for post

My icon design process begins on paper. I’m a big believer in that. It begins with drawing every imaginable possibility for that icon — what the subject matter or metaphor will be and what variations they could take. While in this conceptual phase, I try to remind myself to put everything down on paper — even random ideas that seem unrelated. The next stage is evaluation; analyzing each concept based on how well it fits the goals, constraints, and context for this particular icon.

I find it essential to separate the drawing & conceptual process from the evaluation process. The former requires imagination, curiosity, and withholding of judgement. It is an additive process. It is spur of the moment. Evaluation — while equally important — requires criticism, pragmatism, and the time to consider a long list of implications. It is a subtractive process. If you try to do both at the same time you will end up with nothing. Your pen will never touch the paper.

I recently taught a class about Icon Design at CreativeLive, and outlined what I think are the most important design principles for icons. Those are what I use to evaluate my ideas and sketches.

Generally only a handful of concepts make their way onto the computer. When I fire up Sketch, it’s production time. There will still be some creative decisions along the way, but the predominant goal is to refine the form of an icon and make sure it is pixel-perfect. I’m really passionate about both of those, but I especially cause a racket when the latter is neglected!


Can you explain a little bit more about pixel perfection, and how to achieve it?

Image for post
Image for post

For example, we wanted to include some indication in the Layers List about when a layer is hidden or locked. We weren’t as concerned about them being easily-clickable buttons (although they are) as we were about having small indicators that took up minimal space — especially because two icons would have to be visible if a layer was both hidden and locked. To accomplish this, the icons had to be meticulously pixel-perfect. I’m incredibly proud of how clear those little 8x8 icons turned out.

Image for post
Image for post
“Half Size” bitmaps shown for readers using a retina display, to see the 1x icon in full pixels. “Double Size” shown for readers using a non-retina display, to see the 2x icon in full pixels. Best viewed on a landscape tablet or larger screen.

In an ideal world, a well-made vector icon can simply be exported at various pixel-densities and look great at all of those scales. But much of the time, the limitations of designing a 1x asset aren’t worth carrying over to higher pixel densities. You may be able to build an icon perfectly at 2x, but need to make adjustments to create a decent and crisp 1x asset. At least half of the icons in Flinto’s UI have unique 1x and 2x versions, such as the “Connect Layers” icon throughout the Transition Designer.

Image for post
Image for post

For anyone who is curious, here are some techniques I used for fine tuning the antialiasing of icons in Flinto:

  • Resize and reposition shapes for crisper results, even if that means the position or dimensions have decimals. It’s about appearance, not values.
  • Only use curves or rounded corners when there are at least 2px to render each 90° angle of that radius’s circle (see below), or 3px for 180°, as with a rounded ends of a line (below). Goodbye, rounded 1pt line caps — at least until we’re all using 3x screens.
Image for post
Image for post
Nobody wants fuzzy line caps! Only a 3x screen (or higher) can render a decipherable rounded line cap on a 1pt line.
  • Adjust border width/thickness to be slightly wider or thinner than 1pt on thin curved or diagonal lines, for a more consistent perceived thickness.
  • Mask out unwanted blurry pixels. This will even have an effect if a shape is masked out by a duplicate of itself (no change in shape).
  • Duplicate a shape or its border (same position) to be slightly bolder.
  • Determine when it’s ok to have a little antialiasing fuzziness because a more important part of the icon benefits. It’s going to be ok!

There are other ways of massaging antialiasing, but these are the techniques I get the most mileage from.


What makes a great icon?

One of them was about using familiar symbols and being obvious. When we started to make the icon for the home screen in Flinto’s Canvas, Nathan had the idea that we could design the icon to be reminiscent of an Eichler home. Eichler was a builder whose “Mid-Century modern” buildings can be seen in neighborhoods all over California.

Image for post
Image for post
Image for post
Image for post
Eichler’s mid-century modern homes inspired us to explore less conventional “home” icons.

I think they’re awesome and Nathan was actually in the market to buy one, so we enthusiastically explored the idea. I produced tons of concepts for the home icon, attempting to distill what was uniquely Eichler into a very small square-ish area (ideally 16x16) without relying on color or grayscale (transparency). And we found that these more clever icons didn’t perform their core task as well as the more obvious home icons. We settled on a version that was just slightly expressive and played off the asymmetry in Eichler’s architecture, while remaining obvious and recognizable to users.

Image for post
Image for post
Obvious trumped clever, and we selected the bottom-center home icon.

Another characteristic of a great icon is how well it harmonizes with its surroundings. That includes UI around the icon, size & weight of adjacent text, operating system conventions, and other icons in that collection.

So whereas the home icon basically exists on its own, the toolbar icons, Gesture icons, and Arrange icons exist in a set. And designing an icon set can be exponentially more challenging. You’ll get half-way through designing a collection of symbols and realize that the style or visual metaphor you’ve been using doesn’t hold up for every required icon, and now everything needs to change! 🙈

Image for post
Image for post

This happened with the Gesture icons (shown here at 200% scale). Their simplicity—which now seems obvious—was born from a long list of constraints and future considerations. Some of the icons shown above aren’t even in the app yet… but it was important to know that the icon set could expand to accommodate them if necessary.


Where can people learn more about all this?

The links and resources from the class are freely available on my website.

If you’re working on a similar project, be sure to check out Apple’s guidelines and specs for various icons in a Mac App.


Flinto

App Prototyping Tools for Designers

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