When Roger puts in his earplugs, he gets ready to party!
Francesco de Lange
Digital Product Designer
Bananaz
Banner Ads
A case study about recreating a material's properties through animation
About the project
Back in July 2018, famous Dutch hearing protection brand Bananaz commissioned me to make a set of responsive banner ads in different sizes and resolutions.
The banners were to be used in their upcoming advert campaign which would relaunch the brand after its recent identity redesign. Bananaz wanted something new which fit their brand's juvenile style.
About Bananaz
Bananaz, formerly known as Thunderplugs, is a Dutch brand which sells reusable rubber earplugs to prevent hearing damage because of high volumes at concerts and shows. They've been founded in 2012 and their products can be found in vending machines in clubs and venues all over The Netherlands.
The requirements for the banner set were the following:
Markup in HTML/CSS
Responsive
Google Ads-compliant
Flashy and energetic in order to appeal to the target audience: young people going to clubs and festivals
This would not be the first set I had to make, but for this one I wanted to do something a bit more special because of the request to make it flashy. The result is a stylish advert that conveys the brand's energy through clever use of animation.
I won't be talking about the more technical stuff like how I made one single banner responsive for multiple sizes and formats or about Google-Ads compliance. Also, unfortunately I am not allowed to show the full set.
Instead I'd like to talk about a small design part and what constitutes good animation.
Let's get started then, shall we?
Roger, the company's mascot
The briefing for this project was to make an animated advert in which the company's rubber earplugs would enter Roger's ears so he'd be ready to party. After that, a short text and product image would follow, along with a call to action button.
I was given the assets and granted complete creative freedom as to how I would handle the animations and layout of the banner.
And that's where the fun (and the challenge) began.
Animating the earplug
For the initial animation, I made the earplug enter Roger's ear with an ease-in/ease-out animation. However, there was something unnatural that felt off when the earplug hit the his ear, but I couldn't tell exactly what.
Have a look at the video on the right to see what I mean.
Of course we're just looking at what essentially is a half-second excerpt from a ten-second advert, but in my opinion these are exactly the kind of details that make the difference between an okay product and a professional-looking one.
Rubber as a material
I soon realized that what the animation was missing was a rubbery feeling to the earplug. What happens when rubber hits something? It squeezes and bounces!
And that's exactly what I wanted to mimick with the animation. Next thing I know I spent a good part of the day trying to come up with an animation that not only looked cool, but also felt good.
To do this, I took the existing animation as a base and added some cubic bezier magic to simulate acceleration. I also added a bit of rotation and modified translateX and scale3d values to compress and enlarge the plug, which is what contributes to the rubbery feeling.
Rubber as a material,
part 2
The animation looks a bit off when viewed in slow motion, but let's speed it up to its original speed and you'll notice it looks a lot better, really nailing that bounciness we're going for.
The full banner
Our hard work comes together in one smoothly animated advert. I'll spare you the details as the rest is just CSS animation basics where I played with easing, scaling and fading in order to make the staggered animation you can see in the video.
In conclusion
This was a briefer and more focused case study compared to my other ones, but by no means any less informative.
Getting the animation just right was a challenge I had to solve all on my own.
It took me quite some time, but I'm extremely happy with the result because it really gives the feeling you're watching a piece of rubber bounce into a surface at high speed.
Needless to say, the people at Bananaz were quite happy with the result and appreciated my willingness to go the extra mile to deliver a better product.