Universal language: how Yannick Lung uses Sketch for his intricate icon designs

Designing great, easy-to-understand icons is a real skill. You need to pack a lot of key information into a small, sharp image — and it has to look appealing, of course. We sat down with icon designer Yannick Lung to walk us through the challenges he’s faced while designing many of his app icons and icon packs — and why he used Sketch to do it.

Can you tell us a little about how you started in icon design?

I remember it very well. When I was about 13 years old, I loved building websites with iWeb, which was part of Apple’s iLife bundle. I was working on a website redesign and I got the idea to use little pictograms for a sidebar. I really wanted to use icons I had designed myself, so I started drawing little rectangles on a 16 × 16 canvas.

Around the same time, I was fascinated by the artistic app icons of my iPod Touch’s home screen. This excitement drove me to design app icons myself.

When I opened Sketch for the first time, everything immediately seemed totally logical to me. I was in love from the first second.

At that time, there was no design tool that could really convince me. To use anything, you had to watch endless tutorials. As an interim solution — this may sound a little surprising now — I used Keynote. One day around mid-2011 I was browsing the Mac App Store, and Sketch caught my attention. When I opened it for the first time, everything immediately seemed logical to me. The interface was similar to Keynote, there was a separate column for layers, and best of all, I could apply inner shadows! I was in love from the first second.

What makes Sketch great for icon design?

The wonderful thing about Sketch is that it helps me with the entire icon design flow, so it’s really easy to work with. I love the speed at which I can work. And I don’t even mean technical performance, but rather how fast you can move and how easy it is to think in.

When it comes to beginning a project, I always start with the basic shapes, without color, light and shadow. Piece by piece — or rather Artboard by Artboard — I then work my way forward iteratively. From this, the final result crystallizes more and more, until it feels ‘right’.

Since all objects are vectors, I can easily scale them up, down, or distort them without becoming blurry. This feature, combined with the Scale function, allows for outstanding manipulation of the layers.

The manipulation here isn’t only deforming layers but also applying more complex layer effects. I’m often asked how I create these 3D-like effects. The truth is it’s mostly just a mash-up of various shadows, blend modes, and blur effects.

The wonderful thing about Sketch is that it helps me with the entire icon design flow, so it’s really easy to work with. I love the speed at which I can work.

I always test the icons in their real environment or look at them in their actual size. This is important to be able to assess whether the contrast of the final result is sufficient — which Sketch helps me with, too. With Symbols, I can edit the main object and see my changes in real-time across various mockups — such as the macOS Dock or the App Store product page. It allows me to fine-tune and make the icon shine.

Once the icon is ready, I can easily render it in the different sizes required by Xcode thanks to the Export Presets.

What are the challenges involved with developing these icons?

Icon design takes place on a very different level of communication compared to other design fields. As an icon designer, your aim is to depict something in a universal language, that everyone around the world can understand. Also, icons are the first touchpoint of an app and give off an initial impression.

One of the biggest challenges is understanding the size an icon will appear when it’s finished. What looks good in full screen on a 27” screen does not necessarily translate to 64 × 64 pixels. Even on Retina displays or 5K monitors, an icon can look blurry and simply ‘wrong’ at small sizes. To counteract this problem, I constantly test and view the icon at small sizes throughout the process.

As an icon designer, your aim is to depict something in a universal language, that everyone around the world can understand.

Likewise, it’s not always easy to hit the right color palette. In many cases, people place icons on colorful backgrounds, which is already a challenge. It‘s a good idea to simply test different color combinations against each other on different backgrounds. This way, you can evaluate quickly which colors are more suitable. The right color contrast also plays a major role here. If all objects in an icon are in the blue-scale range, there is a possibility that they will wash into each other in small sizes. Complementary colors are a good choice because they provide great contrast.

Another challenge is finding the right balance. If there are too few objects, there is a risk that the icon will look too empty or generic. If there are too many elements, it will look cluttered and restless. This happens faster than you think, especially when you try to give the layers a more plastic look. Suddenly, the design looks too much like a real photo.

So the art lies in finding exactly the right degree to make a good icon. Sometimes it’s more and sometimes it’s less, and often the difference lies in just a few pixels.

What else have you designed with Sketch?

I design pretty much everything I can design in Sketch. No matter how big the project gets, I consider it to be the most reliable tool to produce designs. From illustrations to component libraries, to extensive user interfaces, I‘ve created many projects in Sketch over the past few years.

For example, just a few days ago we released an entirely new version of Mileways — a flight tracker with a social component. I illustrated the entire interface on several pages with hundreds of Artboards in Sketch.

I design pretty much everything I can in Sketch. No matter how big the project gets, I consider it to be the most reliable tool to produce designs.

What does your creative process look like?

During the process of developing a new app icon, I usually start analog. That means I first think about potential motifs and do some research. As soon as an idea first pops up, I sketch it down very roughly in my notepad with a dot grid, just so I don’t accidentally forget.

Then I continue on the iPad, capturing the ideas on ‘digital paper‘. For this, I use the Apple Pencil and Linea Sketch — from the talented people at the Iconfactory. I can work out ideas much faster and in more detail to develop a more profound understanding of form and composition. Another helpful feature is the templates that include a pre-installed app icon grid.

If some objects prove particularly difficult to visualize, I sometimes use Cinema 4D to study the behavior of light on materials. Exposure and light scenes can make a huge difference to an image. It also helps me position objects quickly to get a better feel for the basic composition.

What‘s the one plugin, Library, or tip you would share with anyone who’s new to Sketch?

Gradients have become a popular stylistic device in every design field in recent years. But they sometimes feel a bit too monotonous, especially when only using two colors dots. You can prevent this with easing, which can create softer, more natural color effects.

This can be a bit complicated and tedious to do manually. At some point, I stumbled across the plugin Easing Gradient and now I use it almost daily. I highly recommend it to anyone who likes to work with gradients.

Finally — what advice would you give to aspiring icon designers?

I think the most important thing is to have a curiosity to try things out. If something excites you, then just attempt it. Many people (myself included) fail to try new ideas, especially in the beginning. To help me get started, I used to copy other icons, because I wanted to know how to create similar works of art.

It also helps to observe things in the real world and play around with them. Who remembers the feel of cassettes? Without knowing the details of a cassette, I probably wouldn’t have come up with the alternative version of the Nuage App Icon.

I think the most important thing is to have a curiosity to try things out. If something excites you, then just attempt it.

Finally, I recommend looking into the design guidelines of an operating system (e.g., Apple’s Human Interface Guidelines). They often explain the basic properties, which can help you understand what’s important. And you can find more help, such as templates or grids, which you can follow.