I found it’s more effective to manually simplify shapes beforehand than to use the “Flatten shapes” function included in the AEUX plugin since I prefer more control over layer naming and what’s getting flattened into what.Return to Sketch or Figma, select your shapes then click “Send selection to Ae”. This will not only help keep your After Effects composition more organized, but it will also make the motion graphic file size smaller.įinally, make sure the AEUX plugin is open in Sketch or Figma, and the AEUX extension is open in After Effects. As you polish your graphic assets, keep in mind which pieces need to be animated separately from one another.īefore proceeding to the next step, simplify your graphic assets into as few layers as possible by creating compound shapes from shapes of the same color. Next, create your graphic elements using vector-based software such as Sketch, Figma, Adobe Illustrator, or Adobe XD. Sometimes I’ll sketch on paper first or go directly to my design software to start putting a sequence together. Create your graphic assetsĭepending on the complexity of your animation, you may want to storyboard out your desired animation beforehand. In 2018, original, custom graphics drove 3.3X more engagement than stock photography.įor the most part, it’s better to create your own custom animations that are consistent with your company’s established illustration style and portrays fresh imagery in exactly the way you want. This is also backed up by research - according to a 2019 Venngage Marketing Survey: However, as anyone who’s looked for stock content before knows, stock content will rarely ever be as good as something custom created just for your specific brand, product, or feature. MP4, etc.Įach Lottie animation specifies the usage license at the bottom of the preview Comparatively, GIFs are way less performant than anything else you could use, with the exception of an actual video format. This is a chart comparing GIFs to other types of animation files. Since GIFs are not vector-based, you can expect GIFs to look pixellated on most screens. They don’t support semi-transparency, have bulky file sizes, and worst of all - they do not scale well at all. GIFs are extremely outdated, 8-bit files that are restricted to 256 colors. GIFs are great for Slack messages and memes, not so great for high-quality, crisp, vibrant, and performant UI animations. I’ll cut to the chase - do not use GIFs, unless you want your interface to look like a retro 90s site. In this article, I’ll walkthrough each step in creating a motion graphic that works for all platforms and tips learned along the way. I created motion graphics of varying complexity, from explaining abstract concepts such as the entire value proposition of an app, to simple and direct feedback such as confirming a transaction. When I joined a very small design team at Brave, I dove headfirst into the world of creating motion graphics for web, iOS, and Android. Now, product teams can use easily motion graphics created by designers - without the need for developers to recreate the motion graphic in code. In other words, explanations without motion graphics would require substantially more text.Įveryone wants to inject motion graphics into their app or web product these days. Without animated hand gestures portrayed by motion graphics, it would be much more difficult for the user to discern where to insert the security key into their device and where to touch it to complete the registration. Motion graphics illustrating each step of using a security key for web authentication
0 Comments
Leave a Reply. |