How did I design the UI icon for Mac application Flinto?

The article was organized by Flinto design team designer Peter Nowell, who interviewed Peter about how he designed the Flinto icon and some experience.

The Flinto team recently interviewed me about the design process behind the Flinto user interface icon.

　　How did you contribute your design to the Mac version of Flinto?

I participated in the design of the user interface section and user experience section of Flinto's new Mac version, just a few months before his release. But because Flinto is a special tool, the more we think deeply about each part of the user experience, the more we feel that Flinto needs a lot of custom icons. For example, a list of Flinto applications, a toolbar (Toolbar), an animated design panel (Transition Designer), and a drop-down gesture (gestures dropdown) all require their own set of icons. So, how quickly the design icon became my main job.

　　What design strategies do you use when designing icons and menus for large applications?

Design is always situational driven. I was surprised to find that a professional Mac application scenario design is one of the most complex tasks, even if you're just designing icons. The icon size of the toolbar (Toolbar) must be the same, and it is best to know the purpose by icon. This differs from the design principles for icons seen in sidebar icons and Pull-down menus. Some icons are repeated in different places in different sizes and different styles. Instead of adjusting the icon size or style to fit every user interface, I need to consider whether the icon is universal and does not break the overall consistency of the user interface when I design the icon.

I've been designing icons on paper, and I've always believed in this principle. I would draw on paper all the possibilities of this icon that I imagined, such as what metaphors are included in this icon and what changes the icon may need/produce. So at this stage of conceptual design, I try to get myself to write all the content on my paper, even some irrelevant ideas. The next step is to analyze how conceptual design content can better meet our design goals, existing limitations, and contextual links to this icon.

I find it very important to separate the drawing concept from the evaluation of the two processes. The work of the former needs imagination, curiosity, and holds his own subjective judgment, is an addition of the process, is a whim of creation. Evaluation needs to be critical, practical, and need to consider the series of metaphor behind the icon, is a process of subtraction. If you try to do both of these things at the same time, you will not be able to get any results.

I've also been lecturing online about what I think is the most important principle in designing icons. It also contains how I evaluated my ideas and drafts.

Usually, only part of the design idea will be saved to the computer. Using sketch can improve my productivity and make some creative decisions in the process of production. But the main goal is to refine and refine the form of icons to ensure that each icon is pixel perfect. I am quite enthusiastic about this and I am annoyed by other people who ignore this detail.

　　Can you explain to us a little bit about what is "pixel perfect" and how to implement it?

Pixel perfection actually means a lot of things, and it's more like an idea than a feature that can be specifically described. Like "attention to detail", we can feel it easily when neglected. The perfect pixel has a huge effect on the degree of discernment of small icons. Trying to achieve pixel perfection is not just aligning the pixel grids of the design elements (pictured below). This is basically the fight against the sawtooth. Using anti-aliasing is a good thing, but it can blur some parts of the image, especially in diagonal lines and curves.

For example, we want to add some comments to the list of layers to indicate which layers are hidden or locked. Of course, to add hidden and locked layer is very simple things, just click on the button to operate a little bit better. We consider that we have a small note that he will take up a small amount of space to annotate the two already hidden and locked icons. In order to achieve this goal, our icons must be pixel perfect. I am very proud of the 8x8 size icon I designed.

For readers using the Retina display, we display a "half size" bitmap, such as the full pixel icon for figure 1x. For readers who are not retina displays, use the "double size" bitmap, such as the full pixel icon in Figure 2x. Display the above image in landscape mode to get the best display effect. In an ideal world, a sophisticated vector icon can be easily adapted to the output of various pixel densities and is well displayed in all corresponding dimensions. But most of the time, using an icon of one size does not work to get a higher-dimensional icon. You may need to make a perfect twice size icon and then resize it again to create a new visually satisfying icon. At least half of the icons in Flinto have their corresponding 1 time-and twice-fold dimensions, such as the "concept layer" icon throughout the transition animation design panel.

For this interested reader, here are the technical details of how I tuned the anti-aliasing of the Flinto icon.

Reposition and reposition the graphic to get the visually comfortable shape, although there will be a small number of points in the position or pixel, but at this stage the vision is the focus.

When using only curves or rounded corners, use at least 2px to render the radius of the 90° angle, or use 3px to render the radius circle of the 180° angle as the end of the segment of the circle (pictured below). The rounded caps on the segments of the 1pt size line are very bad, at least the screens we use will magnify them three times times.

No one wants a blurry line cap! Only three times times the size (or greater) of a display can render a clearly visible rounded cap on a 1pt-sized line.

To make the line thickness more consistent, it is better to resize the border width/thickness to slightly wider or slightly thicker than to use a 1pt thin curve or slash.

Eliminates unnecessary blur pixels. This can be very effective when you need to use the graphics themselves to mark yourself.

Slightly adjusts the thickness of the graphic by copying the shape or the border (in the same direction).

This can also be true if the icon can have a small blur sawtooth that can provide some help for the rest of the icon.

Of course there are other tips on how to smooth anti-aliasing, but what I've just said is what I've benefited most from.