Motion Design Principles
Clarity and Purpose:
Our motion elements should have a clear purpose: to enhance understanding, guide the user, or add emotional value. Transitions between scenes are straightforward, ensuring they don’t distract from the content. We also make effective use of empty space to promote clarity and focus.
Playfulness and Energy:
Our motion is vibrant, engaging, and full of personality, capturing the witty, insightful, and genuine essence of Lumen5’s brand. It should create an experience that inspires fun and excitement, keeping us top of mind for our customers.
Intelligence and Efficiency:
Effective visual communication starts with clear objectives. What do you want to achieve with your content? Who is your audience? What action do you want them to take? Understanding where your audience is in their customer journey helps tailor your design for maximum impact.
Motion Style Guide
Speed
Motion should strike the right balance between allowing viewers to absorb information and keeping them engaged. The pace should be carefully considered—not too fast to overwhelm, and not too slow to lose interest. Each element should guide the viewer through the content in a way that feels natural and seamless.
Flow
All motion should be smooth and visually pleasing, with easing applied to keyframes for a natural flow. Avoid rigid linear paths; instead, craft motion paths that are dynamic and engaging, adding depth and interest to every movement.
Focus
Maintain a clear focal point in every scene, ensuring the viewer’s attention is always where it needs to be. Guide their focus through thoughtful composition, precise cropping, and well-placed interactive elements that enhance the overall experience.
Easing
Avoid stiff, linear motion by applying easing curves that create smooth and natural movement. Focus on refining your easing techniques to bring out dynamic, engaging animations that feel fluid, polished, and visually compelling throughout every sequence.
Typography
Consistent typography animations are key to building a cohesive brand identity, reinforcing the brand's personality and message with every interaction. They create a unified visual experience, ensuring that the brand feels polished and reliable across all platforms.
Word by word
Push by word
Push and scale by word
Caption/Lower Thirds
Captions
Lower Thirds
Kinetic Typography
UI Animations
Make sure the cursor behavior is smooth and intuitive, with animations that subtly support the user’s actions. Always provide clear visual feedback to confirm interactions and keep the experience seamless.
Mouse Movement
Click
Drag and Drop