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
Here is one example of motion graphics guiding the user through registering a hardware security key to use with their device. There is abundant research showing that visual communication is far more efficient and effective at communicating concepts than text or images alone. They make an interface come alive, finesse micro-interactions, and serve strategic purposes such as brand expression and accessibility. Modern digital interfaces frequently contain motion graphics for good reason.
0 kommentar(er)
