The new Sketch icon: how we redesigned a classic for Big Sur
“We tried to explore as many ideas as possible to see what we could do with the new style”
Last month we released version 70 of our Mac app with a major UI refresh for macOS Big Sur. And while our design team spent a long time working out the best way to get Sketch looking great in the updated OS, they had another project to think about — a new icon for the Mac app.
The UI needed hundreds of hours of work to get pixel-perfect, but redesigning an icon that may sit in your Dock (and in front of your eyes) all day, every day is no small task either.
This week we sat down with the project’s Design Lead, Prekesh, to find out how he went about re-imagining the Sketch icon for a new era, and why it was never as simple as just recreating our famous diamond.
Experimentation
Reimagining an icon that’s so well-known across the industry is no easy challenge. For Prekesh, the goal was to try and do something new, while maintaining the essence of Sketch.
“I think I called the first document I created ‘definitely not a diamond on a white box‘,” he says, with a wry smile. “We tried to explore as many ideas and options as possible to see what we could do with Big Sur’s new style.” He isn’t kidding. The process started with almost 50 concepts on an iPad, drawn using an Apple Pencil.
“I just started sketching a bunch of ideas that came to my mind, no matter how outlandish,” he explains. “The goal was to throw ideas at the wall and see what stuck, what didn’t, and what we could move forward with.” Next, he took those drawings into Sketch and started exploring the different approaches in higher fidelity.
Prekesh had some fun exploring ideas in the initial sketching stage: “Not all of these were realistically going to actually become app icons, but I took the ones I liked the most to Sketch.”
As he posted updates in our internal Slack channels, excitement started to grow, and he got a ton of useful feedback from other designers on the team. Some of the more ‘out there’ designs really picked up some interest, as Prekesh thought about the pros and cons of reinventing the app’s icon entirely.
After exploring some ways to incorporate vector editing and the Pen too, Prekesh found that these ideas got messy as the icon scaled down — plus, Sketch is much more than a vector editor.
Prekesh had a great time making extra tools like pencils, but these ideas were too monochrome.
“We experimented with moving away from the diamond, but that seemed a little silly considering that it’s such a strong part of our brand,” he explains. “So we created a bunch of new diamond shapes — some with perspective, some without; some with more faces, some with less.” From there, it became of question of which ones worked best, and how to integrate these elements with different backdrops.
He started moving onto ideas that used the diamond, but in different ways. By taking an old alternative top-down icon he’d worked on and tweaking it to fit into the squircle shape.
Finding the balance
Getting the balance right between the foreground shapes and the background was particularly tough. “Something we found out very quickly was that there was often a visual struggle between the rounded rectangle backdrop and the diamond,” he says. “We knew we needed to find a way for them to compliment each other, rather than fight for the viewers’ attention.”
These were the first ideas that included elements of the Sketch UI in the icon. Prekesh tried working some transparency into it — both in the diamond and the sidebar.
As concept work continued, the window and diamond metaphor stuck. Balancing the background and diamond proved a challenge, which resulted in Prekesh simplifying the background slightly.
As work progressed, two frontrunners emerged, both on a similar background — one using something very close to our current diamond, and another that took a more 3D approach.
Since we were refreshing the icon, Prekesh also worked on a new, 3D version of the diamond. You’ll see this slightly tilted variant used throughout the other mockups on this page.
He then used Blender to create rough 3D renders for lighting reference.
In the end, after several weeks of internal testing and a lot of input from teams across the company, the decision was clear. This would be our final icon:
By stripping back the icon’s background to its basics and adding a subtle transparency to the sidebar, we think it achieves a nice balance.
It’s all in the details
For Prekesh, it’s the small details that make our new icon special. “I like its subtlety,” he says. “There are details and iterations that update the previous icon, but don’t necessarily move too far away from what makes the Sketch icon the Sketch icon.” But after all his outlandish sketches, is he disappointed that we ended up with a design that’ll feel familiar to people?
“Not really — that’s kind of what felt right to go with after all of our explorations,” he explains. “And there are some subtle details that I love. The rounded rectangle background is actually a simplified representation of Sketch’s Big Sur user interface, and the Sidebar on the left has transparency, which means it ever-so-slightly takes on the background color of your wallpaper.” The diamond itself got some love too — Prekesh redrew and re-colored it from scratch to improve the contrast and make it slightly more vibrant. Plus, a new, deeper shadow makes it feel like it’s really floating in front of the UI.
The subtle transparency in the sidebar means you get a hint of your wallpaper through the icon.
Prekesh says he took his inspiration from Big Sur’s new design, and Apple’s own icons — of which he’s a big fan. “I love the new direction,“ he says. “The restriction of the rounded rectangle for icons will no doubt encourage people to use that space more creatively.”
Reflecting on the process of reinventing such a well-known icon, Prekesh admits he felt the huge responsibility on his shoulders. “It was a little surreal at first, because I’ve looked up to the designers of the previous icons for basically my entire career,” he explains. “For Emanuel (Sá, our Chief Design Officer) and Marcelo (Marfil, our Design Director) to entrust me to explore and create the next iteration of the app icon felt pretty great. But the pressure was on!” he laughs.
The Sketch Cinematic Universe
As if redesigning the icon you’ll see in your Dock every day wasn’t enough of the challenge, that wasn’t the end of the journey. As well as the version of our Mac app that you use, we also maintain several test builds, each at a different stage of development. From the QA team’s Debug version and the early Experimental build, all the way through to our Private and Public Beta versions, we use different icons for each so it’s clear who’s testing what features, and when.
Before, each release build had a different colored diamond. In the top row: Release, Beta and Private. In the bottom row: Internal, Experimental and Debug.
Before, we simply used different colored diamonds to denote the different versions. But for Big Sur, Prekesh decided to have some fun. “I thought of ideas where there was literal visual progress from the ‘Xcode build’ icon all the way to public release icon, and they sort of told a story,” he explains. “But that would only make sense to us internally, and didn’t feel like the right approach for these.”
The result is six completely unique icons, each with its own color scheme and flavor. It was a chance for Prekesh to bring some of those early, more outlandish ideas to life.
This Matrix-inspired design very nearly became the icon for our Debug release. In the end, the team decided on a design that felt closer to Xcode’s blue macOS icon.
“Our Experimental build always includes the newest features that we’re working on, and Glenn [Hitchcock, another member of the design team] had the idea to try something that showed that it was really ‘out there’. So why not put the diamond in space?”
The Experimental build icon. In this case, the it really does to live up to its name.
And what about the icon hiding behind the curtain? “That one’s slightly funny. We wanted to tease the new icon on Twitter, so I spent most of a day drawing the cloth for what was just going to be used in a teaser image,” he laughs. “After all that work, I realized we could actually use it for our Private Beta icon. So that saved me some time!”
”Marcelo specifically told me not to spend too long on this because it was for Twitter and I still had more work to do on the icons,” smiles Prekesh.
For Prekesh, the challenge was to give each icon its own identity — and make sure it communicated something about what people should expect from that version. He’s pleased with the results. And it’s fair to say they’ve gone down well with the rest of the team internally, too.
The full team assembled. In the top row: Release, Beta and Private. In the bottom row: Internal, Experimental and Debug
“I suspect some people will see these and want to use them as their main Sketch icon,” he smiles. “Hey, all I can say is: we’re hiring — come join us!”
We love giving you behind-the-scenes peeks at the work we do on Sketch. What would you like to see? Let us know on social and we’ll consider your ideas for our next sneak peek. For now, we hope you enjoy using the latest Mac release.