The new Sketch icon: how we redesigned a classic for Big Sur

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 making 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

Continue reading

This post was originally published on this site