Earlier this year, we launched real-time collaboration in Sketch, along with a new homepage, and a new vision for our product. And as part of that, we created a beautiful video (which you can check out at the bottom of the page, if you haven’t seen it already). In the days and weeks after it appeared on our homepage, we had a lot of lovely comments — and plenty of questions about how we created it.
To tell that story properly, we sat down with some of the talented people here at Sketch who worked on the video. Read on to not only find out how it went from an idea to a finished video, but also to get a glimpse at some of the design directions that were left on the cutting room floor Sketch Canvas.
Crafting the story
“I had about a day to come up with some of the early routes for our voiceover script,” says Freddie Harrison, Head of Copy and Content. Beyond chatting with Carly Marsh, our Chief Marketing Officer, about her ideas for the film, Freddie had a fairly open brief — “we knew we were working from a blank canvas, and for me that’s very liberating.”
But that didn’t just give Freddie the freedom to write outside of our brand style. It meant he could tell our story however he wanted. “A lot of what inspired me with this creative approach was from seeing just how much we care about design and designers here,” he explains. “We agonize over details, have lively debates, and we’re very much a designer’s design tool.”
Exploring some concepts
Once the script was signed off, our Design Leads for the project, Glenn and Prekesh, took charge. They quickly decided that rather than featuring anything too literal, they’d tell the story through motion. The pair started by drawing different conceptual storyboards for the first small section of the video, trying to find a style they were both happy with.
“The ideas I was running with utilized lots of color,gradients, and noise textures to help create imagery,” says Prekesh. “One of my first concepts included a colorful gradient that remained constant as the rest of the shapes changed.”
Prekesh and Glenn storyboarded their ideas frame by frame to quickly see how the motion would work.
One of Glenn’s style ideas featured fun illustrations inspired by enamel pins. In the end, while we loved the style, it wasn’t a strong enough concept to support the wider campaign — we were looking for something with a more unique visual language.
“I also came up with a cool minimalist concept,” explains Glenn. “It was black and white, with lines and geometric shapes that put a heavy focus on the motion. We both really liked it, but in the end it was just too minimal — and we wanted way more color.”
Another route the pair explored used blurry blobs which could interact with each other to form interesting shapes and colors. “This one felt really nice — especially for the start of the video, but we quickly realized it was limiting,” says Prekesh. “We initially tried to combine this with the colors from my first concept, but the novelty soon wore off and we realized it wouldn’t work too well.”
In the end, Prekesh’s very first concept informed how the pair would use color throughout the final video. “I started with large shapes and blurred them,” he explains. “Then I set their blending modes to Difference, then grouped them and set the groups’ blending mode to Overlay.”
Once Prekesh was confident it would work as an animation, Glenn started work on wireframes. The goal was to create shapes that could feature consistently throughout the video, and help give the story visual continuity.
Color us excited
At this point, it was time to start experimenting with colors. “We wanted to move away from our orange tone. It can be a very loud color, and can steal attention,” explains Glenn. He considered what Sketch was about, and how people use its tools to create a huge range of things. He decided to embrace some variation — but his first selection was… a lot.
The original storyboard had color changes between every scene. In the end, this proved to be visually distracting, so Glenn reduced the transitions to just a few colors (oh, and check out the font we almost used).
“After testing out the first set of colors it just looked like too many changes from one scene to the next,” he laughs. “So we boiled it down to a few that took advantage of Prekesh’s wild gradient blending.”
Inspired by some classic Eames design, he also integrated beige — which he admits was one of a few strange choices (“who would pair orange and green?!”) — because it looked great as a background for the gradient shapes and offered a mid-century modern aesthetic.
The final storyboard used the same illustrations, but had a color progression that subtly switched after a few scenes.
With the storyboard complete, Prekesh started work on some simple animations that Emma Kingsnorth, our Motion Designer, could use for reference.
Adding motion — and emotion
Prekesh started working frame-by-frame in Procreate, then added some basic animation in After Effects, to give Emma a clear picture of how different elements would move and transform in the finished film. “My process here was figuring out all the transitions so we could tell a cohesive story using these minimal elements,” he explains.
From there, Emma took over and started to combine these references with the shapes and colors from the storyboards. “To start, I used a series of shape layers to produce the constantly moving white lines which form the shapes,” says Emma. “Then I added masking to create the seamless flow of color gradients behind these shapes.”
The look we were aiming for was quite complicated to create, because it used complex gradients. In the end, Emma built them up from a series of different color modes, layers and precomps to create gradients. “It meant I could move the different sections which make up each one around, scale them up or down, and change their colors as we needed,” she explains. “In places we had to use some quite complex masking to mask the gradient and morph from shape to shape.”
Once she’d built up the gradients, Emma topped them with noise layers to give texture and movement
As Emma worked, she brought Freddie’s early ideas to life. “There’s a subtle theme running throughout each of the ‘acts’ about journeys,” Freddie explains. “This was all about forward momentum and indicating change, which is something we wanted people to understand about where we are as a product.”
The start of something bigger
Along with the video, the team also produced a whole host of other materials — including social assets and the small matter of a redesigned homepage. “The original plan was for this to ‘just’ be a campaign. But we soon realised we were onto something special,” says Marcelo Marfil, our Design Director. “In the end, the bold design language turned out so well, we decided to take it a step further — and now we’re working on a whole new brand around it.”
As he reflects on the months of work that went into crafting this video, as well as the wider relaunch, he realizes just how big a task it was. “I can say this was definitely the most challenging campaign we have ever put out — the team effort was massive.”
Beyond the final video, though, this story represents much more. It’s a statement about where we are today as a design platform — and as a company. The final line, ”And it all starts here, with Sketch,” tells of how this is the start of a new journey for us. But it also represents how people use our tools. “While we focus on the UI design use case most often, so many incredible projects have come about as a result of using Sketch,” says Freddie. “So it felt important to leave things wide open, and full of possibility.”
