How easy is it to build a BannerFlow banner ad?

June 20, 2016 Francis Dignan

We've already written about how easy it is to replicate your Flash banners in HTML5, if that's what you want to do. Now we thought we'd show you how easy it is to design brand new HTML5 banners from scratch, using BannerFlow.

Above, you can see a full length video of one of our newest team members, Ludwig, designing an entire campaign, scaling it, and translating it. He hadn't had much experience with the platform itself prior to making the video, so this demonstrates how easy it is to make HTML5 banners using BannerFlow, and below we've broken it down into individual steps. Enjoy!


Step 1 - Size Select

As you can see, there's almost every size imaginable, and all you need to do is click the banner size of your choice. Or, if you prefer, you can always make a custom size. Either way, it's simply a case of selecting it, and getting taken through to the canvas itself.


Step 2 - Drag and Drop

Here you can see just how easy it is to place elements onto the banner. Just choose a text box, image or widget and drag it to where you want it to appear on the banner. 


Stage 3 - Text Alignment

Here you can see that after the text was written, our designer wanted to change the size and alignment of the box. Again, it's plain to see how to do this without any need to alter anything other than the text box itself. The same goes for images and widgets too. 


Step 4 - Animate

Now things are getting a little more in depth with animations, although actually doing them is no more complex. Like our designer, you just need to go to the timeline at the bottom of the page and select the animation you want. Of course, you can test them all first, to see which suits your banner best. If you ever need help, you can always check out our support pages.


Step 5 - Call to Action

This is one of the most important elements you'll put on your banner, and given that it has to be clickable, if you were doing all this manually you would have to actually code the functionality. Thankfully, there's no need with BannerFlow. Once again, you just drag and drop, and type the destination URL in where asked. There are endless options in terms of both design and colour too, so you can be sure that your call to action will suit the rest of your banner.


Step 6 - Second size

At this point, you really start to see just how much time you can save with BannerFlow. Usually, making another size would involve a lot of copying, pasting, and rearranging. Here, as you can see, you can just use the original design as the basis for another size, and everything pulls through automatically. Then if you're not happy with how it looks, you can just take a couple of minutes to adjust the elements so that they suit the banner better.


Step 7 - Translations

Again, with this step you're potentially saving hours. Just select the languages you need, and the translate facility does the rest. Of course, it's always better to check that the translations are appropriate, and the best way to do this is to use actual translators, but you can assign them quickly and easily too. This is done for every single banner size as well, so you've massively scaled up your campaign for an international audience in a matter of minutes.


Step 8 - All the banners!

Here they are in all their glory. All of these banners, made by someone new to the platform, in less than 20 minutes. Impressive! Try it for yourself with a free 14 day trial, or book a demo below!



Previous Article
Flash is Dead - Keep Your Ads Alive With HTML5
Flash is Dead - Keep Your Ads Alive With HTML5

Next Article
Mobile Advertising Trends 2016
Mobile Advertising Trends 2016