Motion is one of my favourite things to work with in design. When my design work started to move away from static graphic design and into more interactive digital design, I dove into adding both hints of movement to draw attention and larger pieces of fully interactive media.
My first dabble was with Adobe Edge Animate (now Adobe Animate CC), successor to Flash and which offered a lighter way to create vector based animations which were mobile web friendly. I had a lot of fun with this, especially when it came to interactive infographics.
In recent years I’ve been working almost exclusively in After Effects, which is such an incredible piece of software. Clunky and pixelated GIFs just weren’t cutting it any more for web based projects however, and in researching alternatives I discovered Lottie Files.
After playing around with the platform for a little, I dsicovered they offer a few certifcation courses so I went and became an expert in Lottie for Figma and Webflow.
It not only generates gorgeous smooth animations that are light in kbs, it has plugins so I can create them straight from Figma or After Effects. I’ve been working with SCEAP.co.uk since 2020 and we’re working together continually to develop their brand identity and web presence. Lottie presented a great new way for me to bring some extra delight to their website, and we selected the hero illustrations featured across the site to level up with some movement.
I wanted these animations to be subtle enough that they didn’t distract from the main page content, but still enrich the overall experience on each page. I decided on short cycles of movement with long pauses in between so as not to add to the cognitive load of the content.
Lottie integrates pretty seamlessly with web platforms like Webflow, Wix and Framer (SCEAP’s website is built in Wix Studio), and offers a variety of different formats for export so I can package these up for the team at SCEAP to use on other platforms like their social media. As for now, I’m already gathering ideas for where I can use Lottie in future projects!
