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.
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.
“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.
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.”
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.
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:
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.
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, 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.
“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?”
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!”
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.
“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.