Thanks to our friends at Webflow for sponsoring this blog! (Author: Leah Retta)
The digital world is rich with images– we see website banners, product photos, icons, diagrams, and maps on a daily basis. But motion can truly bring these images to life.
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. Below, learn what motion design is, how it can supercharge your brand identity, and tips from leading creatives for developing motion design principles.
What is motion design?
Misha Sundukovskiy, Video Creative Director at Webflow, 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. Movement conveys extra information that a static image can’t and it “helps bring personality and humanity to our message,” says Patrick Szot, Senior Brand Designer at Webflow. Like motion design itself, the benefits come in many flavors: “At Webflow, 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.”
8 tips for developing your own motion design principles
Having gone through the comprehensive process of developing motion design principles for the Webflow brand 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 Webflow 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 creative agency 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?’”
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 the 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. Is that worth the extra effort? 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.
Start building with motion today
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. “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.
Evolving is central to building a brand that can stand the test of time, and putting design in motion is an iterative process that’s never really done. So remember: as you build motion guidelines and begin creating with motion, remember to continue to refine, iterate, and fill in situations and use cases that come up in a scalable, consistent way.
If you’re interested in reading more about designing for the web at scale and the best practices experts lean on to uplevel their design systems, check out our latest ebook, Evolving Design Systems. And if you’re interested in keeping up with all things web design and development-related, sign up for our newsletter.
About Webflow
Webflow is the leading visual development platform for building powerful websites without writing code. By combining modern web development technologies into one platform, Webflow enables people to build websites visually, saving engineering time, while clean code seamlessly generates in the background. From independent designers and creative agencies to Fortune 500 companies, millions worldwide use Webflow to be more nimble, creative, and collaborative. It’s the web, made better. Learn more at webflow.com.
Find more Community stories on our blog Courtside. Have a suggestion? Contact stories@dribbble.com.
