Yes Sur: Behind the scenes of Sketch’s macOS makeover
“We always want to put your designs front and center so they can shine — the last thing we want is for the interface to get in the way.”
Today, we’re excited to share some details of our Big Sur update. Refreshing our UI for Apple’s latest OS has taken countless hours of hard work, tough decisions and careful revisions from dozens of people across the Sketch team. We want to say a big thank you to them all — we’re incredibly proud of the work they’ve done.
To get the lowdown on how the team created Sketch’s beautiful new interface — and to show off some of our favorite details — we sat down to chat with our Design Director Marcelo Marfil.
So what’s new?
“Early on, we had a single goal in mind. We wanted to make sure Sketch on Big Sur still put your designs front and center so they could shine,” Marcelo explains. “The last thing we wanted was for the interface to get in the way.” With that in mind, the team focused on tweaking and refining the existing interface rather than a complete overhaul. They wanted the app to feel familiar after your Big Sur upgrade, so you could instantly get back into your designs. “In essence, it continues to be the same Sketch people know and love,” he says. This is an evolution, not a revolution.
That said, the team did take the opportunity to push things a little further in a few key areas. “Adopting new OS standards like a full-height sidebar and toolbar already make a huge difference, but we couldn’t stop there,” says Marcelo.
Yes Sur
“As with anything new, there’s an inevitable learning curve you have to work through,” he continues. After taking some time to use the betas and understand the new paradigms, the team started exploring how they could make sure our native app still felt ‘at home’ on Mac — while continuing to support people that want to stick with macOS Catalina (or even earlier OSs).
It started with the toolbar. While aligning with Apple’s new design, which adds the document title inline with other toolbar items, they reorganized the default toolbar with the tools they think you’ll use the most. There’s even a new Notifications icon in the top-right corner of the window which gathers your notifications together, making them easy to manage. Don’t worry — you can still customize it with your own favorite tools with a Ctrl-click. You’ll also notice the toolbar (and the rest of the app) features some gorgeous new icons. More on them later.
With Big Sur moving the document title into the toolbar, it was the perfect opportunity for the team to redesign it — with all new icons.
Next, the team turned their attention to the Inspector. “Even though our app’s user interface feels at home on macOS, we rely a lot on custom controls and materials,” Marcelo explains. “It always comes down to whether we think we can give our customers a better experience.” Like the rest of the Mac app, the new Inspector will feel familiar, but every element has been painstakingly reworked to be as beautiful as it is functional.
The Inspector has been given a makeover, too — with the new orange highlight color taking centre stage.
You’ll also notice that the accent color across the app has changed — it’s now orange, to match our brand colors across the Sketch platform. Of course, if orange isn’t your thing, you can choose a color you like in System Preferences. “And we modernized our Documents Window,” Marcelo points out. “It now has a much more familiar look.”
Evolution, not revolution
“When Apple rolled out the first few betas, we took our time and went deep into OS changes and paradigms.” he explains. “We wanted to better understand what would work for us, and where we could do better.”
As a result of that thinking, you‘ll find that some tools, such as Scale, have changed from Sheets to become modes in the Inspector. Big Sur’s new, larger design for Sheets would have covered the Canvas while you made adjustments. By shifting them to the Inspector, you can carry on working uninterrupted.
Moving certain tools, such as Scale, to the Inspector means fewer interruptions and a smoother workflow.
“As we always try to do at Sketch, I believe we found a good balance between what the system has to offer and where we want to take it to going forward,” says Marcelo. And never was this balance more apparent than in the team’s approach to new icons.
Iconic design
The introduction of SF Symbols in Big Sur brings together iOS and Mac iconography to make it consistent for the first time. Unfortunately, Apple Symbols simply didn’t offer the design team enough control when it came to implementing icons across the interface.
“At Sketch we care deeply about our iconography and pixel precision,” says Marcelo. “Even though Apple Symbols is a great concept, sadly it didn’t quite live up to our standards.” Because Apple designed SF Symbols to support multiple weights and sizes, their edges can sometimes appear slightly blurred. After a lot of discussion, the team decided that Apple’s Symbols weren’t right for the first Sketch release on Big Sur. Instead, they reworked every icon as a vector.
”We wanted to make sure our new icons had a good balance of crispness and smoothness, but still fit nicely within the Big Sur theme and our brand,” he explains. “After all, we make a design app for designers.” We know we’re biased, but we hope you’ll agree that the results are quite beautiful.
These are the new default icons in the toolbar, but don’t worry — you can still customize it to your liking with a Ctrl+click.
This isn’t the end for icon design in our Mac app, though. As with all aspects of our Big Sur design, the team are keeping an eye on developments for future releases. “I honestly hope we can eventually convert our own icons to Apple’s Symbols too, with all their sizes and suitable weight variants.”
This is just the start
This might be a new design for Sketch, but as Marcelo explains, our philosophy remains the same. “Even with a fresh new look, this update is a continuation of everything we learned over the last decade,” he says. “Our focus has always been on giving you the tools you need to create amazing designs in a native Mac application. We couldn’t be more excited to be part of this important milestone for the Mac ecosystem.” And as Marcelo is keen to stress, this is just the start. Sketch will continue to evolve, just like Apple’s new design language.
“I’d like to take this moment to thank everyone involved internally in this redesign,” he concludes, reflecting on the process. “It was quite a challenge but I couldn’t be more proud of what our team achieved in such a short time.”
Sketch 70 is available now. You can get the update, read our release notes, check out our documentation, or just spend the next few hours gazing lovingly at those icons, which is what we’ve been doing for the last month or so. Let us know what you think of our redesign on social — we’d love to hear your thoughts.