Designing Attractive Animated Banner Ads in 2018

Banner ads are still an important part of a marketing strategy in 2018. It has been like this for more than two decades and there’s no indication that the trend will suffer significant changes in the future.

What’s important here is that banners convert. They can help you increase awareness, generate more leads or convert leads into actual customers.

You will need a budget, inspiration and design skills or budget for a design agency but if you want to really commit to banner advertising, you will not regret it. In fact, we are talking about a huge industry that has been growing for several years now and it is expected to grow by at least 7% every year.

In this article, we will take a look together at the most popular trends in banner design for this year and learn how to make our animated banners attractive, appealing to our audience.

What Type of File Format Should I Choose?

There are several file formats available when it comes to banner advertising. However, if you want to create animated banners, there are only 3 types of banners available: GIF banners, Flash banners, and HTML5 banners.

There will always be a debate on which of these file types are better and the conclusion is most of the time based on a personal decision. At the same time, if you want to make sure you’ve done everything possible in order to be successful, you need to consider creating cross-platform animated banners.

Why is HTML5 Better than Flash and GIF?

Well, let’s take a look at some of the most important reasons to take into consideration when choosing to create an HTML5 banner instead of other types of file formats.

First, consider the fact that HTML5 is natively supported by all browsers. Nobody has to install any third party plugin or software in order to be able to view HTML5 files. All browsers support this code regardless of the operating system or the type of the device the audience uses.

Html5 supports multimedia elements. When people hear “HTML” they automatically think about the older versions of the Hypertext Markup Language. The 5th version, however, allows you to integrate multimedia elements into your banners and create interactive, animated or video banners without using anything else than HTML5 code.

HTML5 is lightweight. Since it’s based on HTML scripts, HTML5 does not consume extra resources. Well, at least it does not consume more than a basic web page. Also, it is small in size, unlike GIFs, which sometimes can get up to several megabytes. As you probably already know, the smaller in size the banner is, the better it is for mobile devices.

Popular Trends in Animated Banner Ads for 2018

Now that we know which file format is better for an animated banner, let’s move on to the most important two questions you may have: “How do I create animated banners?” and “What are this year’s trends in animated banner advertising?”

The creation is the easy part. While in the past this kind of work was performed mostly by a professional designer, now, everybody has access to online tools that make our lives better by dealing with most of the technical issues directly.

For instance, most of the times, I use Bannersnack as my main design tool for banners.

Animated HTML5 banners are easy to design and create with Bannersnack. You don’t need to know how to write HTML scripts and, if you feel like you need some inspiration, the tool gives you access to templates and examples upon which you can get started.

Now, let’s move on to the popular trends of the year. What should you pay attention to?

Thorough Research

While this is a no-brainer, many advertisers and agency forget how important this part is, especially when it comes to targeting a specific keyword. So, besides studying the target audience, it’s a good idea to also perform a specific research on the competition, their targeted keywords and which of them rank better organically.

It’s good to know how competitive your chosen keywords are, who ranks better for them and, of course, the average costs.

There are many tools available that may help you with this task. However, I would recommend Ubersuggest, the tool that I use on a daily basis.

While all other tools may deliver similar results, this one can also show you your competitors’ ad copies and thus, give you more insights on how they perform on this aspect of their marketing strategy.

Customizable Interactive Banner Ads

Rich media banners are a great choice because they usually deliver better click-through rate than static banners.

What about making your banner interactive and customizable? I am not sure how popular this option was a few years ago, but since HTML5 was launched, it became a real thing within the advertising industry.

Take, for example, this beautiful ad created and designed for Nissan Juke (to see the fully interactive ad, click here):

It has everything it needs in order to convert into leads. It’s designed in HTML5, it looks and feels great and most of all, it gives the audience the power to customize the featured car in a modern 360 degrees view.

Responsive Interactive Banner Ads

Another great option would be to create a responsive banner and allow your audience to interact with it while receiving more information on your products as well. The example, in this case, comes from H&M, a Swedish multinational clothing-retail company.

Their last banner is a video interactive ad which showcases some items from their clothing collection (again, to see the interactive ad, click here).

As you click with the mouse anywhere on the banner, a new banner emerges, which presents some specific items of the collection and of course, a link to their shop.

The idea is great not only because it gives some interaction the audience, but because the banner showcases the products in two ways: a video ad and a selection of catalog photos as well.

Split Screen Animated Banner Ads

Animated banners can also include YouTube videos and here’s a great example from Jean Paul Gaultier (to watch the video in the ad, click here).

What’s interesting about this banner, however, is not that it features a YouTube video but instead, its split screen design, an out of the box concept. I expect to see more similar ideas in 2018.

Expandable Banner Ads

Another interesting concept that I expect to see more of during this year is the expandable banner. For the purpose of this article, I have chosen an example that comes from Thomas, a North American based bakery that sells muffins and bagels. Their HTML5 animated banners looks like just a simple Skyscraper.

When you click on the “Expand” call to action, the banner takes over your screen and expands in order to present its viewers with a more accurate image of what the advertised products are about.

What’s great about this idea is that it does not intrude. The expansion is not automatic and therefore, the user has to choose whether or not to see the content.

3D Animated Banner Ads

If you think about how movies were advertised since the golden age of Hollywood, they were always ahead of their times. However, the last installment of the Transformers franchise really takes the cake with one of the most creative banners ever (for the full experience, click here).

You can really see one of the movie characters appearing on your screen, in 3D form, walking and taking out his sword. Then, if you roll over the ad, you get more content and a direct link to the movie’s website.

Out-of-the-Box Banner Ads

One of the biggest trends of the past few years and of today as well is using machine learning algorithms and A.I. in almost everything. It was only a matter of time to see it make its entrance into the advertising industry as well.

And the winner is…Fiat Chrysler, with their interactive “Body Controlled Banner”. In order to promote their last car model, the company released an HTML5 video game that simulates the sensation of driving an Abarth 124 Spider.

What’s great about this banner? Well, you can consider it one of the most innovative banners, one that demonstrates the full power of HTML5. The car is controlled by the user with head movements through the webcam. The game detects the head movements and translates them into game controls. Impressive, isn’t it?

Conclusion

Banner design is very challenging especially these days when people have access to virtually anything from anywhere due to the widespread of broadband Internet and 3G/4G mobile connections. You need to be constantly inspired but at the same time, to always consider the trends of the moment and act accordingly.

With this article, I have tried to pinpoint some of the major trends in animated banner design that I expect to see this year. The examples will also help you understand better the different choices and get inspired by some of the most interesting banners that exist out there.

Do you know other trends that could complete this list? Leave your thoughts in the comments!