These were the first ideas that included elements of the Sketch UI in the icon. “We knew we needed to find a way for them to compliment each other, rather than fight for the viewers’ attention.” “Something we found out very quickly was that there was often a visual struggle between the rounded rectangle backdrop and the diamond,” he says. Getting the balance right between the foreground shapes and the background was particularly tough. By taking an old alternative top-down icon he’d worked on and tweaking it to fit into the squircle shape. He started moving onto ideas that used the diamond, but in different ways.
“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. “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. Prekesh had a great time making extra tools like pencils, but these ideas were too monochrome. 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.Īfter 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 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.”Īs 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. “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. “I just started sketching a bunch of ideas that came to my mind, no matter how outlandish,” he explains. The process started with almost 50 concepts on an iPad, drawn using an Apple Pencil.
“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. “I think I called the first document I created ‘definitely not a diamond on a white box‘,” he says, with a wry smile. For Prekesh, the goal was to try and do something new, while maintaining the essence of Sketch. Reimagining an icon that’s so well-known across the industry is no easy challenge.
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. 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.
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. Last month we released version 70 of our Mac app with a major UI refresh for macOS Big Sur.