Hello! I’ve created an animation in AE with a sequence of chat bubble popups. The animation is embedded in a responsive webpage, and the text within the chat bubbles is blurry when resized. Upon inspection, all vector assets are displaying as png files.
Can someone help explain best practices for displaying “chatbot style” text in a Lottie animation, keeping it crisp and exporting as vector? Or is dynamic text the best option - and in that case, best practices for responsive design.
Within my AE file, every original asset is vector (.ai) with the exception of a single png. I created shape layers from all vector assets before using the Lottie extension to export from AE. I then used the Lottie Web Player to generate the JSON for our website.
Keep it simple: Avoid using complex animations or transitions for chat-style text. The focus should be on the text itself, not on the animation.Use the right font: Make sure the font you use is easy to read and doesn’t distract from the message. Stick to basic sans-serif or serif fonts.Pay attention to timing: Ensure that the animation timing matches the chat style. For example, the text should appear letter by letter or word by word, and there should be a slight delay between messages.Consider accessibility: Make sure the text is accessible to all users, including those with visual impairments. Provide alternatives such as audio descriptions or transcripts.Keep it consistent: Use the same animation and style throughout the chat interface. Consistency makes the experience more intuitive and easier to understand.Test and iterate: Test your animation with real users and iterate based on feedback. This will help you identify any usability issues and improve the user experience.