Before I became a motion designer here at Envisionit, I was a developer. It may seem like there’s not much of a connection between development and motion design, but my background in coding enables me to take a more efficient approach to coding animation, while still allowing me to keep an eye on design.
Starting from scratch
These days, motion design is very accessible. Programs like Google Web Designer or Adobe Animate make it easy to simply load elements, and drag and drop them into the right places at the right time. But those programs don’t help you optimize file size, and end up sacrificing quality for convenience. For example, in the days of limited data and screen size for display ads, file size and quality are a huge deal. Putting out a slow, pixelated ad could kill any momentum it has, so a minimalist approach is a very good idea.
I’m pretty comfortable coding ads without the help of a fancy GUI. Moreover, it allows me to start with nothing, keep my code light, and gives me more room for higher fidelity images.
My minimalist approach to motion design
A maximalist approach to image quality
When you zoom in, a PNG shows pixels. The SVG retains its shape and clarity because it’s coded as a shape, rather than a bunch of static pixels stuck together. Plus, manipulating an SVG only requires a little bit of code, meaning you can do more with less.
All the graphics are SVGs, and I used the morph and draw GSAP plug-ins for writing the text and the logo-to-button transition. It’s a simple, fluid banner ad with attractive motion and crisp graphics.
Minimalism vs. practicality
While I prefer the minimalist approach, it doesn’t mean animation programs shouldn’t be used. Google Web Designer and Adobe Animate are great to get things started quickly, and excellent for very short animations. But things quickly get overwhelming when any complexity is introduced, outweighing the benefits. And then if you want to make changes later on, that only makes the file larger, and you risk downgrading your images.
I prefer a minimalist approach to animation because my background in development showed me how much of an impact code has on the final product. Just remember this: keeping it minimal behind the scenes gives you maximum impact on the front end.