It provides rhythm and character. Urgency or stability. Elegance or explosive dynamism. Sometimes it’s a key pillar of the identity itself - for example DIA studios work for Squarespace.
We’re always hyped to do motion for our projects and sometimes even if it’s out of scope, it’s a crime not to give a bit more life to a great new identity or website. In the case of TalentLyft, it’s balloon mark lends itself to an inflating animation.
We use a couple of tools when fleshing out ideas or final animations
When it comes to Figma and web transitions, it’s really a matter of getting a little bit creative with the prototype options. There are limitations, but it cool results can still be achieved. Here’s an example of an exploration we did internally to explore prototyping in Figma. Masking type layers in frames and setting automatic transitions after a 1ms delay can do wonders.
After Effects come in handy when trying to create something more elaborate and fancy. In this case the website for Granular Group had plenty of potential for animations, stemming from it’s visual identity that was the only part of the website and identity the client decided to keep.
Here’s how a logo can be animated and transformed to reinforce a header claim.
And here’s how we expanded the illustration system for marketing purposes.
Motion design is still that untapped area when it comes to product design and branding, which brands can use to stand out from their competitors. A little bit used in moderation throughout online experiences can go a really long way. If you want your product or identity to stand out next to competitors, motion is definitely still one of the avenues brands can easily go down. A little bit used in moderation really goes a long way.
