Overview
Motion is a largely underutilised part of branding. In day to day life, everything we do moves and makes a sound. You close a door, and wait for the sound of it closing. We pay more for soft-close kitchen cupboards because the slow, softness of the movement feels more premium. And it’s the same for brands. Motion communicates things words can’t.
It’s a way of expressing your values, your vision, your key message. A spa brand could give off the feeling of a relaxing day of being pampered through fluid, calm movements across all brand assets. Whether that’s social posts, TV adverts or digital screens at the venue, every touchpoint can be brought together seamlessly, creating consistency and continuity of the brand wherever it exists.
Motion has always been somewhat of an afterthought in the branding world. It’s been a case of “let’s make this into a moving social post” or “let’s add some music to this video”, not fully thought through as it would be if it was a physical asset like a full-page advert or billboard. Because every single asset is a reflection of the brand itself, motion should never be an afterthought, but built into the fabric of the brand identity, with a motion system that runs through the entire brand. Just as you would decide on brand colours before building out any applications, motion systems should be created before motion assets are built, so it can apply across all formats.
Motion systems, or motion guidelines, should be built based on the brand core, as we call it. The main drivers of the brand. What makes it different, unique, and what shapes the brand into what it is. Just like the brand strategy is used to shape the visual brand identity, things like a brand’s vision, values, mission, purpose and points of difference should be used to create a motion system. Questions such as “should this move quickly or slowly” are determined based on the emotions you’re trying to evoke. The emotions you want your audiences to feel when interacting with the company.
Determining how a brand moves
Positioning, values and personality
Motion reinforces a brand’s personality. To do that, you have to be very clear on just what that personality is. We start by asking questions about what emotions we want to evoke, how movement might be able to communicate certain feelings and messages.
Sliding scales are used here, pinning the brand on a scale of cheap to expensive, traditional to modern, simple to complex, accessible to exclusive, playful to serious. This will determine the kind of movements you’ll choose. Playful brand = playful movement.
Simple
Definition Minimalist movements that are straightforward and unobtrusive.
Examples: Smooth transitions, gentle fades, and uncomplicated animations that do not distract from the content.
Serious
Definition: Sharp, exact movements that convey professionalism and accuracy.
Examples: Basic transitions, clean cuts, and well-timed animations that reflect attention to detail. Nothing more than absolutely necessary.
Playful
Definition Energetic and fun motions that add a sense of delight.
Examples: Bouncy animations, playful transitions, and movements that may be out of the ordinary.
Focus on consistency
Good motion within a brand is consistent across all platforms, so everything is instantly recognisable and associated with a particular brand.
That said, there must be an element of adaptability in order to apply the motion guidelines and principles to various formats.
Something made for Instagram Reels may look very different to something made for a showcase video on the website, but the feeling you get when interacting with them both should be similar. If you’re aiming for a calm serenity, this should be felt across all mediums.
Looking to create a motion identity?
Easing and duration
In real life, things don’t move in a linear fashion. The speed varies throughout the movement. Think back to the cupboard door example, it takes a few extra milliseconds to open it compared to the speed of the door swinging open. Then there’s the slow-close mechanism that people consciously choose because it has a nicer feel to it.
Getting the right type of ease in and out is crucial. They can give off different feelings, and some work best with things appearing on the screen, and others work better with things going off the screen. The easing type is considered alongside the easing speed, depending on where the animation is, the brand personality, and how frequently it occurs. For animations that occur frequently, it’s important to ensure that the transition is no longer than absolutely needed. For one-off animations, this can be adjusted.
Linear
Constant speed from start to finish with no easing. This can be useful for simple movements but can feel mechanical.
Ease-in
Starts slowly and accelerates. Good for entering elements, creating a sense of build-up.
Ease-out
Starts quickly and decelerates. Effective for exiting elements, creating a sense of completion.
Ease-in-out
Combines both ease-in and ease-out, starting and ending slowly with a faster middle. Ideal for most animations, offering a natural feel.
Which easing speed to choose?
On average, it takes a person about 230 milliseconds to visually perceive something, though this can range from 70 to 700 milliseconds depending on the individual (to find out how long it takes you personally, this test is pretty fun to do).
This means that some people are quicker at detecting motion than others—for example, what one person might notice in 100 milliseconds could take another 600 milliseconds to perceive. Like many human traits, perception time tends to follow a normal distribution.
Although easing speeds on websites and apps tend to be similar no matter the brand, this could be worth noticing. In the elderly, reaction speeds tend to slow down, so it could be worth slowing certain things down slightly. This applies more so in video content. Attention spans in younger generations are shorter, at about 8 seconds, whilst millennials have a span of 12 seconds on average (source).
This is something to consider when creating social content, as you only have a very short period of time to get your key point across and hook the viewer, keeping them watching your video.
Looking to create a motion identity?
Contact UsUX motion
UX motion elements are integrated into websites, apps, and other digital products, and it’s crucial to ensure they align with your brand identity. For example, Google, a tech leader known for its innovative and fast-paced approach with a focus on simplicity, might use UX motion in a sleek, subtle way that blends seamlessly with the rest of the page.
In contrast, a charity focused on assisting the elderly might use motion elements to draw attention to specific sections or clearly indicate when something changes on-screen. Below are examples of UX elements that should be standardised within a motion design system, as consistency is key. For instance, you wouldn’t want to have four or five different hover effects or countless variations in how a button clicks. It’s essential to define these elements across your brand and maintain that consistency throughout your websites and digital products.
Frequency is important too. If an animation is used often, like in a navigation bar, a slower 600ms animation can quickly become tedious for users. On the other hand, micro-animations around 250ms are just noticeable enough without making users feel like they’re waiting.
Types of UX motion
Button Clicks
In the context of UX motion, button clicks refer to the animations and visual feedback that occur when a user interacts with a button. This could include any of the following:
Click Animation: A brief animation that plays when a button is pressed, such as the button “pressing down” slightly to simulate a physical button being clicked.
Feedback Effects: Visual cues like a colour change, a ripple effect, or a glow around the button to indicate that the click has been registered.
Transition or State Change: The button might change its state to reflect that an action is being processed, such as a loading spinner appearing or the button changing colour to indicate that the action is in progress.
Sound Effects: Sometimes, there might be an accompanying sound when a button is clicked, though this is less common in web and app design compared to visual effects.
These motion elements make the interface feel more responsive and give users clear feedback that their actions are being recognised. Keeping these effects consistent across the product helps maintain a smooth and intuitive experience.
Hover animations
Hover animations are essentially what happens on-screen when you hover over something, before clicking it. They can enhance interactivity, indicating that elements are clickable. Examples include underlining text, changing button colours, or growing/shrinking elements. They can make the experience on a website feel more intuitive, gently guiding a user towards an action, e.g. a click. Hover states can also include video plays or an image appearing, alongside other things that the user can interact with.
Form field feedback
Animations can guide users through form completion and provide feedback on errors or successes. Examples include shaking for errors, smooth highlighting for selected fields, and checkmarks for successful entries. Within a motion design system, you should determine how this will work every time a form is filled in, how it will indicate a successful form field entry, how it will redirect the user to try again, and what happens when they submit the form.
Toggle Switches
Toggle switches are those often pill-shaped switches you see when turning certain things on and off, like when you’re selecting your cookie preferences. This is an example where there’s a standard way of doing things, and it wouldn’t usually change no matter your brand personality.
Accessibility
The benefits of using motion is that it can help guide users. But it’s also important to note that there shouldn’t be too much animation going on.
As a rule of thumb, only 1/3 of a page should have animation and be treated more as a focal point so it’s not too overwhelming for users. Excessive animation is not only annoying for people, but can trigger users with photosensitive epilepsy.
Limiting the frequency of flashes to a maximum of 3 per second can reduce the risk of triggering seizures, and providing a ‘reduce motion’ option can allow users to opt-out.
Typography
Consistency with Brand Identity
Typography animations should reflect and enhance the brand’s personality and be consistent with other motion guidelines. They should be consistent, and make sense for the brand in question. Back to the spa brand example, you’d imagine text to float in with a calm, slower effect. Whereas a brand like JCB would animate text onto the screen with more of a thud. Again, consider frequency of use. Bigger gestures would be used for the start of a promo video perhaps, but body copy on the website would likely have no animation. Less is always more.
Enhancing Brand Positioning
In the same way a brand uses a lot of white space and fewer words if it’s more premium, the same goes for reflecting brand positioning in type animations. Slower, more subtle animations lend themselves to more premium brands, whilst there may be more exaggerated, fun movements in a value brand.
Remember Legibility
Ensure all type animations maintain legibility. Avoid overly complex animations that make text hard to read. Less is more, and choose situations to animate text, and times to leave it static.
Different Ways to Animate Type
- Slide in/Slide out: Text moves horizontally or vertically into or out of view.
- Fade in/Fade out: Text gradually appears or disappears.
- Scale in/Scale out: Text grows or shrinks in size.
- Rotate in/Rotate out: Text rotates into or out of position.
- Letter by Letter: Each letter animates individually, adding a unique dynamic to the text.
Logo
Your brand is likely to have more than one logo. Disney, Coca Cola, Netflix and more all have different versions of their logo for different purposes. Brands need to be recognisable when displaying any of these logos, so motion can be used to transition between them.
Logo animation is also helpful for presentations and video content – a subtle nod to the brand behind the content that feels like more of an extension of the video than a static logo would be. Logo animations are often paired with sound to create a memorable introduction – think of the Netflix logo when you open up the app, or the Pixar or 21st Century Fox logo when you start watching a movie.
Looking to animate your logo?
Intro and end cards
There’s an opportunity to create intro and end cards to be used in video content, to introduce people to the topic of the video, and end cards to add in a CTA for your viewers. This can also create consistency across your videos content, and be an easy identifier for people to know what each video is about, and give them a next step at the end of the video.
Get in touch today to bring motion to your brand
Transitions
Transitions between scenes and sections need to be thought through. If you have a part-way point where you change topic or scene, how do you make that clear to the viewer? Create transition movements, and use them consistently, to make content more digestible and easy to follow. They can also be a reflection of other parts of your motion identity. In the one for Dawn, the same components are used as in the logo, providing more consistency and recognition.
Lower thirds
Another thing to consider is how post-production text will appear onto the screen. This should be decided at the beginning of the motion design system process and be written into the guidelines, and not deviated from.
Explainer animations
Animations can be used within the video to visually communicate a process, idea, or emphasise certain points within it. Animation is powerful in that it can take a standard piece of video content to the next level, with creativity throughout, communicating things in a way that’s more powerful than just words.
Bring more movement to your brand today
Social media
Motion-based social posts grab attention a lot more than static posts. In a world where people scroll past content in seconds, anything that moves, whether that’s videos, animations, or GIFs – stands out.
Motion tells a story, makes messages easier to understand, and has a better way of communicating your brand values and reinforcing your brand positioning, and the overall energy of the brand. If you’re applying motion to your brand in all other places, it makes sense to add it to socials, too.
Hopefully this has helped you understand the importance of motion within a brand. If you’re interested in bringing more motion to the brand you manage, get in touch today and we’ll help you get some guidelines together!
Building a motion identity
From Uber through to Great Ormond Street Hospital, motion identities are becoming more and more prevalent. But why is it important? Dave tells all in this video.
How we made the Adapt and Live Identity
Adapt and Live is a part of Disabled Living, and until recently had no brand identity of its own. Through the use of motion, we created an identity that stands out and represents the company perfectly.
