How to Make an Online Display Advertisement – Step by Step Guide

How to Make an Online Display Advertisement - Step by Step Guide

From Instagram to Google Analytics to Big Cartel, there exists a plethora of easy-to-use apps that can transform your everyday ideas and business needs into professional content without having to hire or outsource. Making online display advertisements has always been a big struggle for website or business owners. Usually you have great ideas and want to start directly going online, but then you end up in Adobe Flash or Photoshop trying to make simple transition effects and realize that you require a textbook or a 10-hour tutorial to get started. Then you would have to find websites to publish your advertisements on and get a tracking app running that will tell you if your campaign was successful or not.

So, if you know how to create a website with a help of one of the best free website builders and now have a need for online ads – this guide is what you need. Step by step I will show you how you make the online advertisement with simple drag & drop apps and how and where to publish your ads. There are plenty of ways how to do that, but I will focus on the most effective ones by quality-price ratio.

1. Choosing online display ad builders

During the last 3 years there is a strong shift towards cloud-based applications. Online ad builders made a huge step forward in improving and streamlining the production of advertisements with the help of online drag and drop editors. These apps give you the same creative freedom as the professional tools, but the difference is the fraction of time you will need to understand on how to use them. They let you choose and start from awesome looking templates, easily add animations and transitions effects and publish your advertisements without any coding or design skills.

From many online advertisement builders the following three seem to be the best:

Fotor Banner Maker [ visit site ]

Fotor Banner Maker

Fotor is a very simple free ad maker and lets you customize from existing banner templates or start ads making from scratch. You start by entering the measurements of your advertisement. Change color, text and background and upload pictures and more to create your own unique ad. What you get is a simple, not animated, yet easy-to-make ad in PNG or JPEG that can be shared across the web. If you want a new size, you just start again. They also add new ads created by their artists constantly to the website for you to customize from.


BannerFlow HTML5 Ad Builder [ visit site ]

BannerFlow HTML5 Ad Builder

It’s the most popular and famous HTML5 ad builder. BannerFlow lets you build, optimize and streamline your entire display ad production with minimal design help. Just by simple drag and drop you create awesome animated ads that run on all devices and screens (even mobile). What I like most about BannerFlow is that everything works very automated. You just create the first size of the advertisement and then just add new sizes; variations or languages to your ad and that only took 1 minute in the test. This way you can have a campaign with 10 different sizes done within 20 minutes. And if you need to make changes on your banner, all your different sizes and variations get automatically updated in real-time – remotely on the fly. You can even integrate videos or dynamic data like football scores or product prices. It looks by far like the most convenient application for online ads, currently.


Corpgenie Banner Builder

Corpgenie Banner Builder

Corpgenies is an ad builder for Flash banners. You can create your own flash banners with various sizes and promote your business to the next level. You can select from 100s of professionally created templates in various categories and standard ad sizes. They offer a free and a paid plan giving you the possibility to download your ads without the watermark.


2. Choosing the ad sizes

Alright! Now we have gone through three online ad builder. Before you start creating you banners, you will have to decide in how many different sizes you want to have your ad campaign in. It usually works pretty well to start with one of the standard sizes.

According to Google Adsense the most successful sizes are the:

Medium Rectangle

medium rectangle ad size


leaderboard ad size

Wide Skyscraper

wide skyscraper ad size


3. Choose your ad placement

Ideally, your client will have bought a spot on a website where your advertisement will be placed above the fold and close to the main content of a webpage.

bannerblindness stats

In Infolinks usability study, it turned out that as much as 156 % more people recognized the top area of a page. Also eye tracking maps have shown that consumers tend look straight on to the upper left side. That is why many stick to leaderboards or skyscraper sizes. Medium rectangle ads work very well combined with content as they are usually placed within an article.


4. Publish your ads

Great. Now when you have designed your ads you are ready to publish them.

Ad Hosting

When you advertisement gets shown to the people on the web it will cause a heavy traffic load. Most ad builders want you to outsource that to hosting services like Amazon or AdButler. At Fotor and Corpgenie you would need to find an external ad hosting company that saves and delivers your advertisement. BannerFlow is hosting your ads for free.




Ad Networks

Make sure that you know in which size you want to have your ads in and when you have to deliver them. If you book it on a very well-know website you might need to wait a few weeks until you get a spot. Sometimes you will have to have your ads send one week before your campaign should go online so that they can book it into their system and run a pre-flight test.

If you don’t know yet where to find websites to advertise in, then I can recommend the ad network BuySellAds. It is very easy to go through their categories of pages that belong to their large network and to book an ad placement for a certain amount of time.


You would want to find a website that fits to your target-group. Let’s say that you work within healthcare. Then you would probably look into the category “Beauty and Fashion”.

If you select one of their pages you can see in which format you can advertise there and how much it will cost you for a certain amount of time. In this example I selected “” – a lifestyle and wedding blog.

lifestyle and wedding blog

Since allows animated ads I would recommend sending in an animated version since it will give you much more attention and will increase the clicks on your banner. BannerFlow’s drag & drop banner builder lets you easily add animations and transition effects using HTML5.

BannerFlow animated ads

We created this very simple version within 4 minutes:

If you are happy with static ads then you can create them in PNG, JPEG or GIF at Fotor. GIF is an image format that also supports easier animations, but since most publishers have a file-size limit around 80-10 KB you might experience problems with that. Flash also is still very common, but global digital consumer trends show a strong shift in device usage towards mobile and tablets letting the technology behind digital media increasingly move from Flash to HTML5 due to its rich set of features and mobile support over the last several years.

Last thoughts

You will need to test if your ad design works well or not. Test some different variations and try to find out if a different background picture, a different color for your buttons or a different text copy is improving your clickrate on your ads.

Thanks for joining us in the article. If you have any requests or feedback, please contact us or leave a comment on this page. Good luck with your campaigns.

1 comment
  1. Hi I am soo thrilled I found your site, I really found you by accident, while I was looking on Yahoo for something else,
    Anyhow I aam here now annd would just like
    tto say thanks for a marvcelous pist and a all round entertaining blog (I
    also love the theme/design), I don’t have time to brfowse it all at the minute but I have book-marked itt and also added your RSS feeds, so when I have time I will bbe back to read
    more, Please do keep up thhe fantastic jo.

Leave a Reply

Your email address will not be published. Required fields are marked *

Comment added and awaiting moderation.
Some problems with sending a message.
The name field is required.
The email field is required.

You May Also Like