Lottie is an animation file format. that allows users to use animations on any platform. They are small files that work on any device and can be scaled up and down without any pixelisation. Lottie files will allow you to create, edit, and test animation in the easiest ways. Lottie animations can be manipulated to be interactive and respond to different interactions, like scrolling and clicking, and also hovering.

Lottie is used by companies like:

• Adobe

• Microsoft

• Samsung

• Amazon

• Canva

• Google

• Disney

• Duolingo

• Uber

• Netflix

• tiktok

• apple

During the lecture, Ronan taught us how to use Lottielabs, which was very helpful and interesting. Firstly, we created a simple loading icon. I found this quite hard due to the timings of the animation, but after you get the hang of it, it is easier. We had to make the loading button spin, and it was all about the timing when we revealed the path. I think that mine was successful, and I thought that this was cool to learn, as it is in nearly every digital product. The second animation that we completed was a send application icon where we used rectangles, circles, text and icons to create this. I actually found this one easier as we completed the loading button before I learned skills making it. We had to time the design elements to come in from a 0% opacity and make it turn 100%, which was hard, but after I completed one element, it helped me do the rest. Overall, I think that Lottielabs has a lot of features to learn, but it could be an important part of design, especially when designing for the future, as of the interactions.

<aside> 💡

In this week’s lecture, we explored Lottie animations using Lottielabs, which was both challenging and rewarding. I learned how to animate common UI elements like loading and send icons by adjusting timing and opacity transitions, which helped me understand the importance of micro-interactions in digital products and how much work goes into the feature that you normally would look at. While tricky at first, I now see how Lottie can be used for creating responsive animations across platforms, which I think is a great function, as I can import them into Figma, and I’d like to explore it further for future projects.

</aside>

Week 10 - Ethical and Social Implications of Emerging Technologies