![]() “And there are some subtle details that I love. “Not really - that’s kind of what felt right to go with after all of our explorations,” he explains. “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? It’s all in the detailsįor Prekesh, it’s the small details that make our new icon special. This would be our final icon:īy stripping back the icon’s background to its basics and adding a subtle transparency to the sidebar, we think it achieves a nice balance. In the end, after several weeks of internal testing and a lot of input from teams across the company, the decision was clear. He then used Blender to create rough 3D renders for lighting reference. You’ll see this slightly tilted variant used throughout the other mockups on this page. Since we were refreshing the icon, Prekesh also worked on a new, 3D version of the diamond. Balancing the background and diamond proved a challenge, which resulted in Prekesh simplifying the background slightly.Īs 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. Prekesh tried working some transparency into it - both in the diamond and the sidebar.Īs concept work continued, the window and diamond metaphor stuck. ![]() 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. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |