These days, app icon design has become a whole discipline of its own — heck, there’s even books about it. But it’s not just about crafting something shiny. As app stores and desktops become more and more crowded, it’s more important than ever to have an eye-catching and memorable app icon. 

A good app icon stands out, looks trustworthy, and gives an indication of what the app is for. No matter how big or small your product is, the app icon is an integral part of the branding and when done right can help more users find, download and use your app. A good icon won’t fix a bad app, but a great app can do even better with a good icon.

Getting your app icon right usually means more than popping your logo on a squircle. There are guidelines to consider and your app needs to look at home wherever it shows up (in our case macOS). So, for Detail, we started from scratch by figuring out which company values the icon should reflect. We wrote a quick brief to help us get started:

“Detail gives creators superpowers to produce better video. Our users can harness their creativity and self-expression to create amazing content. Because we are a video company, the icon should display a sense of motion and depth.”

Next we sketched out A LOT of different concepts. The first ideas are usually not the best but it’s good to get them on paper nonetheless. When I’m designing icons, I often strive to keep my designs simple, but unique. You can achieve a strong symbol by combining two different ideas — a bit like the first page of sketches below. In hindsight it’s easy for us to feel embarrassed about some of these concepts but this is an essential part of the creative process — working through these drafts helped us discover what we did and didn’t like, and they gave us some interesting directions to explore in the next round of sketches.

At this stage, we didn’t create any digital sketches — pen and paper is the fastest way to explore a  variety of different concepts without getting stuck on small details or high-fidelity designs. In the next round of sketches, the ideas got a lot more specific and they allowed us to experiment with different variations of the same concept. 

We then settled on creating digital versions of the sketches marked above. It’s always great to see roughly sketched ideas come to life when they’re recreated digitally. At first it can take some time to experiment with styles and colors. Just as with the sketches we took our time to explore different directions and simply just try things to see what we liked. We were conscious to not focus on the small details just yet, but instead create different options to spark discussion.

We were quite happy with these concepts, but felt something was missing. The shapes were great but the colors felt boring and even with the gradients the shapes felt quite flat. As mentioned in the briefing, we really want the icon to have motion, depth, and give a sense of creativity. So it was time to dive deep, polish the icon and, also look for some colors that really inspired us.

We found that the saturated colors, bright gradients, shading effects, and added depth really inspired us and got us excited. We knew we were getting closer. But which of the three concepts was the best one? After this iterative process, working together and exploring all these ideas we landed on the design on the right.

This icon had the perfect combination of subtle metaphors; combining the letter "D" with a camera aperture. We even shaped the aperture like a star as a nod to how Detail puts users at the center of the experience — with Detail you can be the star of your very own show!

As all designers know, design is never done so, as part of our major Detail 3.0 release, we revisited the icon — adding some more energy and upping the color contrast to really “make it pop". 😉 Like any design, there’s always room to iterate and the Detail app icon will continue to change as the brand grows and evolves. 

As a little bonus, we thought we’d share some of our internal app icons too. We created this alternate black version for the Detail staging builds and our engineers requested their own blueprint themed icon for their development builds.

You can read more about how we redesigned the Detail interface in our 3.0 launch post.