Today, we have the opportunity to interview two motion designers from the Midwest digital agency Measure. They have been involved in digital branding and interactive design for a wide variety of start-up projects and high-profile clients from all over the continental United States. Meet Lottie Designers, Kaden and Cristian from Measure
Hello guys! Tell us about your role and what you do? What kind of design work are you involved in at Measure?
Kaden: Hello! My name is Kaden Jones. I received my BFA in Graphic Design from Iowa State University in 2020 and immediately started working as a Designer for Measure, Inc. My work focuses on audience empathy and accessibility in motion, wayfinding, interactive, and identity design. Most of the projects I work on involve brand identity, web design, and animation.
Cristian: I work as an Art Director, and I do various types of design work, including branding, editorial, illustration, web design, but I mainly focus on 2D animation.
Cristian, during your process, what kind of software and design tools do you end up using? Do you have a particular favorite, and why that one?
Cristian: I use a combination of Adobe Illustrator and After Effects. I work on storyboards, design style, and final frames in Illustrator. Once the vectors are set up, I export all the files and import them into After Effects to animate.
We would love to learn more about your Dasera animations we found on LottieFiles. They are pretty complex and also came out great on the final website! Kaden, can you tell us a little about how these motion graphics would be used for your client? What was its purpose, like what effect were you hoping it would have on people who saw it?
Kaden: This animation was for the hero header on Dasera’s homepage. It was meant to show visitors how Dasera’s software works. I find it fun and challenging to create visuals for something that is invisible and has no form. The process and final result can end up being very conceptual.
The artwork for this project was created in Adobe Illustrator, and the animation was created using Adobe After Effects. I tend to favor Adobe After Effects just because it was the first animation software I learned how to use, so I know more tips and tricks to help me achieve what I’m trying to create.
What is your primary source of inspiration, and what is your creative process in creating these awesome, fun animations?
Kaden: My main source of inspiration for design comes from observing things in real life. For this project, I looked at a bunch of different radars and movements radars typically make. To get the radar effect, I worked a lot with the design principles of radiation and anomaly. Radiation helps to show the transfer of data and messages over the software, while anomalies occur for users and hackers to visualize data breaches.
Cristian: My source of inspiration is anything that catches my eye on my daily routine. If I see something interesting, my mind is already finding ways to translate those ideas and apply them to future animation projects.
We noticed graphics you created for the Dasera website use a lot of gradient effects which is hard to achieve usually in the Lottie engine. How did you do that, and how did you come up with each concept? How long did it take you on average to create one?
Cristian: Although linear and radial gradients are easy to create, I had to find alternative ways to create complex gradients. For example, to achieve a gradual radial gradient, I broke a circle into lots of segments, overlaid them, and reduced the opacity after each piece to create the illusion of a gradient. The concept came from the context each animation had to represent and project. It took me about 2-3 hrs average from illustrating to fully ani mating each piece.
Kaden: The most considerable concern I had for this project was dealing with the gradients. Since Lottie Files need to be created using shape layers, I needed to remake all of my gradients within After Effects. What I ended up doing was converting the gradient AI layer into a shape layer. Once the shape layer is created, you’ll notice that the gradient fill is now a gray color. Open up that shape layer and delete the fill layer altogether. Then you will have to add a “Gradient Fill” layer to the shape. After adding the gradient fill layer, you can start adding the colors you need and the angle you need the gradient to fall.
Can you share any fun tips/tricks you have learned? Or have you discovered any hacks to create effects in AE that aren't typically supported by Lottie?
Cristian: Since Gaussian Blur is a built-in effect in After Effects, it can't be applied and used for Lottiefiles. My tip to achieve blurred vectors/shapes is to create a solid color layer, add a mask depending on the shape you need and then adjust the feather settings in the mask.
Kaden: Starting this project, I knew it would be challenging simply because there was no way for me to bypass all of the tedious design changes between all of the different programs. It took many trials and errors to get all of the gradients and illustrations to look how they originally were. So when working with Lottie, I think that patience and persistence are crucial to making something this complex.
Cristian, how do you break down your complex animation by keyframes? Do you like animating from the start or from the end of the timeline?
Cristian: It depends on the animation needs. If I want the animation to loop, I start by working on the last few frames before the loop. I then move to the following frames, which will occur at the begging and eventually connect the frames in-between.
Kaden, is there any custom code you wrote to make this effect happen?
Kaden: I'm a sucker for expressions in After Effects and will use them whenever possible; however, I had to do everything by hand for this project (because Lottie doesn't support this). Since this is an animation of radar, it was mostly accounting for how many revolutions each object had to make. I typically start from the beginning and the end for this type of animation just so I know the timing will be accurate.
If you were to suggest an improvement for LottieFiles.com platform, what would it be?
Kaden: If I had to suggest an improvement for LottieFiles, I would recommend adding effects like masks, gradient strokes, expressions, and the ability to work with pre-comps. I think these things would help speed up LottieFile creation, saving creators a lot of time.
How can people find you and get connected?
Kaden: If people want to connect with me, they can add me as a connection on LinkedIn.
https://www.linkedin.com/in/kadenjerryjones/
Check out the LottieFiles profile link with a couple of public animations for Dasera we used for some testing here
And final result here
