How to develop motion design principles

A photo of a marathoner crossing the finish line may be inspiring and attention-grabbing, but a video is so much more powerful. 

Similarly, a logo that moves conveys more of a brand’s personality than one that’s static. Think of the Disney Pixar logo. Only the animated version – where a desk lamp hops onstage to replace the “i” – really tells you that you’re about to see something playful and imaginative.

If you want to level up your brand with motion, it helps to develop a set of guidelines that you can apply consistently across your entire site. Read on to learn what Misha Sundukovskiy, Webflow’s Video Creative Director, and Patrick Szot, Webflow’s Senior Brand Designer, have to share about this process and their tips for developing your own motion design principles. 

What is motion design?

Sundukovskiy defines motion design as “how you make non-live action pieces move in your videos.” That includes how a logo appears on-screen. Does it fade on? Appear with a swipe? Is it built up piece by piece? Other examples include how the “lower third” — the banner at the bottom of a video that identifies a speaker —  animates on and off, or explainer videos that zoom in on specific buttons to showcase how to use a product. But we’re just scratching the surface with these examples, because the reality is, motion graphics are virtually everywhere we look today — from website illustrations and social media posts to conference slideshows and big city billboards.

Why motion design matters

Once you stop and take a moment to think about it, you’ll quickly realize motion is practically everywhere when it comes to digital interfaces. Designing it thoughtfully, however, is what can lead to smooth, delightful user experiences that guide users toward important information.

Motion also helps build a brand. As with the Pixar logo example, movement conveys extra information that a static image can’t and it “helps bring personality and humanity to our message,” says Szot. Like motion design itself, the benefits come in many flavors: “We want motion design to be a supporting, non-verbal aid when folks are learning something new, a helpful visual cue when completing a task, or just a joyful detail when we’re celebrating the amazing things our community is building.”

Developing motion design principles for Webflow’s rebrand

“There’s been an appetite at Webflow to bring motion into our visuals,” says Sundukovskiy. So at the end of last year, when we launched our rebrand with a new logo, Misha and the greater creative team saw an opportunity to deliver on this request and build a full menu of motion design guidelines.

Their core objective? Get clear on the goal; audit everywhere Webflow shows up visually — from social media and the website to ads, event creative, and more; build a framework; and repeatedly iterate. 

Step 1: Align on a core objective

It wouldn’t make sense to start experimenting with designs without a clear objective. So the team’s first step was to document a clear vision for what they wanted their motion to communicate — and align with key stakeholders. 

Webflow’s motion guidelines needed to align with our brand’s larger visual and brand identity. As a result, the team agreed that their motion design principles needed to ensure that Webflow — as an organization and as a product — is always presented as aspirational, bold, unmistakably pro, and dimensional.

Step 2: Audit the entire site

With a set goal to work toward, the next step was to identify all of the places on our website (and other digital assets like YouTube videos and ads) where motion could further enhance the brand. 

Sundukovskiy recalls this audit as a big, “sprawling” undertaking. Auditing extended far beyond just identifying creative assets; it also involved collecting as much information as possible — including where assets lived — so the team could start to identify and document patterns. For example, every time an explainer video shifts between views of the interface or every position where a logo could appear in a video was identified and recorded. 

Step 3: Build a framework

Once the audit was complete, the team started building a framework to define and establish areas of the visual brand where they would need to create rules and guidelines for motion design. This would serve as the foundation that would govern how motion would show up in all of the brand assets they uncovered during the audit. 

For each category of assets – i.e., 2D graphics or 3D imagery – the team asked, “How does our brand step aside so we can really center and celebrate the beautiful work of our community, but still ensure we are presenting Webflow consistently?” says Szot. The framework started as a set of inspirational slides containing words like “professional” or “cinematic,” then grew into a specific set of repeatable actions – like a ripple or zoom.

Step 4: Iterate, iterate, iterate

Their work didn’t end with their framework. Szot, Sundukovskiy, and their teams sought out as much feedback as possible from colleagues and partners. 

Not every idea panned out. In fact, some ideas that seemed great at first did not survive the feedback stage. But going through that critical filter just made the remaining contenders stronger.

Delivering guardrails to evolve and scale the Webflow brand 

Our in-house team partnered with The Digital Panda, a creative agency that served as critical partners, to collaborate with us on the development and exploration around our motion design principles and guideline. “Our team invested a massive amount of energy and resources to ideate and create motion design ideas that the Webflow team could assess and explore,” explains Ilya Kroogman, founder at The Digital Panda. Many rounds of fine-tuning later, the two teams ended up with a menu of all of the possible motion states for each type of asset in Webflow’s repertoire. Our team’s final output includes guidelines that bring motion to life at scale.

One example is a light pass with a 63-degree angle that can be used across the system to dramatically highlight information and imply dimension. The 63-degree angle is a nod to the angle of the final stroke of the “W” in our logo mark, and this level of subtlety and depth of thinking is visible and present in how we bring motion into our world of design at Webflow. 

8 pieces of advice for developing your own motion design principles

Having gone through this comprehensive design process recently, Szot and Sundukovskiy have a few tips to share for fellow marketers and creatives embarking on their own exploration of motion design.

1. Invest in figuring out your core message 

Developing a clear message makes up most of the motion design work. Szot estimates that this “informs 80% of the decisions we make and then everything from there is just fine-tuning.” 

To get there, ask yourself questions like:

• What story do you want your motion to tell? 
• What’s the purpose of the motion?
• What emotions do you want to evoke? What do you want to highlight about the brand?

2. Explore and learn from what others are doing 

During the design process, Sundukovskiy says that the team looked to the wider world of digital design: “What are other companies doing? What are other people I admire in the space doing?” 

Mood boards serve as a great way to collect elements that you’d like to draw inspiration from. Eventually you’ll iterate and play around enough to hit on something new or something that feels true to who you are as a brand.

3. Lean on your team

Motion design is one part of the larger creative work at Webflow. As a result, this design work was a group effort that involved many different internal creative team members – as well The Digital Panda — and that was important. Szot says, “Motion takes a village. It’s really helpful to be able to ask, ‘How is this landing? Is this feeling right?’” 

Working with The Digital Panda unlocked a new level of creativity and potential for our team and our motion design efforts. Their team served as external experts and worked alongside our in-house designers to translate the concept of the new Webflow brand into motion. Additionally, they owned entire portions of our design efforts, such as the concept for our 3D logo reveal. Collaborating with a strong creative partner like The Digital Panda was the difference-maker that allowed us to bring our best ideas to life.‍

4. Design for the whole system, not one project at a time 

If you design for each project in isolation, the brand won’t be consistent. Sundukovskiy says that Webflow’s motion design work “didn’t start with just one element.” It was an effort that challenged his team to look at the brand holistically and figure out where the most important touch points were and what was going to be used over and over again. 

He explains, “We had to ask ourselves, ‘How does every individual element make sense when they come together and ladder up to our brand principles?’” This is why a thorough audit is so integral to the longevity of our team’s motion principles.

5. Tailor the motion to the context 

Webflow’s motion guidelines match the scale of the motion to the scale of the asset. For example, Szot said, a bigger event like a new feature reveal “might deserve a more dramatic or cinematic logo reveal.”

6. Make sure your motion can be produced at scale

For instance, a more art-forward motion style might take longer for a designer to implement. Ask yourself, “Is that worth the extra effort?” and assess your team and company’s near- and long-term roadmap to assess how to make motion decisions that can be executed at scale without compromising quality.

7. Don’t overdo it 

Too much motion, or motion that is ostentatious, can feel distracting. Avoid this by returning to your guiding questions: What’s the underlying goal? What story do you want to tell? “Just like any craft, motion requires a lot of discipline,” says Sundukovskiy. The goal is “creating things of meaning as opposed to creating digital clutter.” Szot agrees: “subtle, controlled motion is key.”

Additionally, accessibility is critical to design — and to Webflow — and going overboard or lacking clear intention with motion can be detrimental or harmful to those with disabilities. 

8. Document your guidelines

Clear, widely-shared documentation makes it easier to onboard new team members who will need to implement motion in their work. Ensuring your guidelines are clear and properly built are critical, as well. Check to make sure all relevant templates and working files — templates, fonts, pre-rendered assets, and more — are available and packaged in an easy-to-digest way for anyone who may need them or build with them. 

A successful first iteration

After all of this effort, how have Webflow’s motion guidelines been working? All signs point to success: not only have the designs themselves been well-received by the community, but internally, the rubric is making our team happier and more productive. “There are hundreds of ways to use a paperclip,” explained Szot, “and having a set of criteria makes life so much easier because it gives you the creative focus to just try five different ways of using it” before choosing the best one.

But, true to Step 4 of our approach to building motion principles — “iterate, iterate, iterate” — we’re never really done. Our team keeps refining, filling in situations that haven’t come up yet, and evolving our motion principles with the brand — and that’s central to building a brand that can stand the test of time.

[embedded content]