EST 1980
Designing Animated GIFs

Jul 14, 2022

Watermark Water Cooler | Designing Animated GIFs

Jordan Headshot 00
by Jordan Jeffery
Jordan - welcome to the watermark water cooler. Jordan is on our design team. Jordan, tell us a little bit about yourself. Well, I'm born and raised in St. Louis, Missouri. Really good barbecue there, by the way. Went to school in Southern Illinois, good ol' Southern Illinois University Edwardsville, and have been out here in the Denver Metro every for about 11 years now.
And 11. Boulder. Yes. Boulder. Yes. It's Boulder specifically. The weather is nice. So are the views, and the food Denver has better food in my opinion. Okay. Okay. All right. The Missouri people are coming to Colorado. Like I know halfway neighbors are from Missouri. Mm-hmm so yeah, the best ones always leave, so I'm happy to be here.
awesome. So we're here gonna talk about. GIF or better pronounced JIF so say I just, I just really, I, you know, I was just thinking about it when we, I was reading about this content and the founder of GIFs passed away this year. That was, that was kind of sad. He, he was, he was a died of COVID.
Yeah, it was kind of crazy. Yeah. Yeah. It's Yeah, it's very, I didn't know that now. I just also was like, Hey, you won a lifetime achievement award this year, too for creating which is really cool. Yeah. It is amazing. It is amazing. It has always actually been low-key. One of my favorite image-type formats.
Yeah. I mean, and it's been around since like, 80 47, I dude, around for a long time, which I didn't, I didn't realize until again, I was reading this. I was like, Hey, I should probably look a little bit about like, when did this start and where did it come from in, in the roots? And yeah, it was like, this has been, you know, this file format has been around a lot longer than I thought it actually has been.
We're not here for a history lesson on this, but we're here for like a conversation on how we use it. Shifts. How, like, why are they used, and what is a good way to captivate our audience with them? Mm-hmm so that being said, you know, tell us a little bit about, you know, why format and, you know, kind of, why do they serve our audience?
Well, yeah, certainly, certainly. Just as I call them you know, Something to say about moving pictures is something just appealing about just the idea that something is taking place. So GIFs, I tend to gravitate towards GIFs whenever a client wants some sort of animated ad. Of course, video is great and all, but GIFs kind of give the edge of video as far as marketing goes and makes it significantly cheaper.
A lot of times with clients, we're doing tons of like banner ads already. Mm-hmm and so a GIF is nice because it's easy to turn an approved banner ad into a simple animated GIFs. And it saves time and resources for the client, keeps everybody a little happier and you get something, you get collateral.
That's a little more potent than just something that just hits still outta time. Totally it's a small file format. It allows for You know, instead of it just being, again, like we said, the static thing mm-hmm, where, you know, you can have video mm-hmm okay. Well then let's add some animation mm-hmm with a, with a GIF mm-hmm
So it's, it's really important piece of. Advertisement digital advertising nowadays. It is, it is, it is. And, and in my experience in making, just for clients, they actually go on to use the GIFs way longer than I ever imagined. They end up just refreshing it, picking it up, but basically the same animation.
The one thing I discovered about GIFs usually there is a file weight limitation that does. Make it a little trickier than the average design, just because you are simply, you know, instead of putting up one picture, I'm putting up 20 pictures or so so the biggest struggle is the file size limitation.
Mm-hmm but it just forces you to be a little savvier with your solutions. And I think that's why clients are able to use that collateral for longer, just because you become savvier with your problem solving as far as, you know, some. Areas to help our viewers understand, like, what do I do with a gym to make it work?
Mm-hmm, mm-hmm like, what are, what are some design things that we, we should keep an eye out for? Yeah. So, so personally, like my approach, you know, you always want to steer people towards the CTA. So I try to not animate the CTA mm-hmm and our call to action. CTA stands for the call to action button. Mm-hmm typical.
Yeah. Then, the call to action. I want that too. Very visible, very present. So I will almost never animate mm-hmm the call to action. Mm-hmm, I also stay away from animated backgrounds. Mm-hmm, I tend to avoid it as well unless it's so mm-hmm so I stay away from flashing colors. Just, I feel it's very aggressive.
Mm-hmm, it is a little bit too of a low-hanger fruit by just saying, Hey, look at me. Mm-hmm, you know, I like to add a little bit more. Grace, I guess if you will. And I feel like the users, thank you for that. Mm-hmm, I rely heavily on type actually, when it comes down to it, I use my type to really carry like the messaging mm-hmm, and just finding a way to bring in the type that's not confusing often will give me a solution for another.
Yeah, that keeps file format low. Cause you're animating big colorful images. Yep. That's got a lot of different colors, which makes for a big file form, you know, file size. So we wanna avoid some of those things. Images could be your enemy for GIFs actually, just because you know, the more colors you have, the higher the file size mm-hmm
So limiting your colors as much as possible will be very effective for controlling your file size. And you can limit your colors greatly by avoiding images. Yeah. What about logo usage? In this, this situation. Yes. Logo use is very important. Always make that logo as big as possible. And I, the logo actually typically as a designer, find myself annoyed when clients just say, Hey, can we make the logo bigger?
Mm-hmm, but in a GIF, it actually is your friend because that's real estate that's already decided on it's a problem. You don't even have to. It's basically when the logo comes in or usually, I just leave it in there the whole time. Mm-hmm but logo also is one of those things that I never animate and we're dealing with a small space typically, like you, you know, you've got different sizes that your skyscraper and your horizontal, and you got all these different sizes, but usually.
We're dealing with a small amount of space. Mm-hmm to get a message out as quickly as possible. Mm-hmm and with some animation that's, you know, that's, that's the point of some of these things that are talking about, help us to kind of get your primary, secondary tertiary. Clear in that little bit of space.
Mm-hmm yes. And the time that you have to, for a viewer to see it. Yes. Entirely hierarchy definitely plays a big role in these animations. When you brought up a logo, for instance, that has a fixed place in the hierarchy, that's why I don't animate it. The thing that I've come to learn about making animations, it is a lot like making bread.
You, want to mix it up and have some motion, but it is equally as important to allow the time for rest so that the user. Has time to let that message soak in, you know you just don't wanna rush it really at the end of the day. Yeah. I like myself some bread, so I like that, like that one and, and, and rush bread is definitely not that good.
So nobody wants rush bread than that flatbread is not, you know, if it doesn't rise, it's not good that, so I like that blood breast. Yes, no breast. Cool. One thing that we haven't talked about is you know, The mean mm-hmm I mean, mm-hmm mm-hmm oh, yes. The J is the king. Yeah. It's the mean, you know, in, in many ways, and as a graphic designer, I remember in school, everyone was saying 2d is dead.
3d is the thing you all need to be learning 3rd because 2nd is out the window. Yeah. And I feel like in many ways the smartphone and tablet really reinvigorated the 2d. Same. It kept it around. And those same mediums actually reinvigorated the GIFs scene in my opinion. Yeah. Yeah. It's as a person who makes gyps now I actually respect the fact that there's this massive library available to people at all times, you know?
Yes. It's, it's, it's new, it's kind of an expanded keyboard, actually know. Yeah. I mean may not be in the marketing sense, the well, Hey, maybe that's the next thing. Maybe we should be making marketing JS and like putting a logo inside of these things that just become free and, and is. Like around the web all over the place and people are using it, as a joke.
And you like, yeah, I got my branding out for free. That's we're talking about something that I haven't seen done yet. So maybe, maybe, maybe that's the next thing, Jordan. Yeah. Maybe something yeah, you may wanna pitch there Cameron. Cause yeah. It's, it's very useful. We're seeing them a lot. It's crazy.
They're not dead yet. No. Yeah, but not at all. Yeah. So any key takeaways here that, that we wanna leave with our audience? No, certainly. Yes. When it comes to GIFs less is definitely more you don't wanna be too flashy. Keep it classy. Let it rest. Jordan, thank you so much for being on the watermark water cooler.
Thanks for having love to have our teammates on giving their advice and, and their wealth of knowledge that they have as always like, and subscribe to our channel. Any content that you would like us to do agency life, anything on marketing, anything any content that you'd like us to produce?
Just shoot us a comment. We'd love to help you. And on that note, we'll see you next time.