(If you want to download our HTML5 ad template zip file, then go here, tell us where to send it and we’ll send it instantly to your inbox.)
Yesterday I was going to post a new Monday Giveaway, but unfortunately I had more pressing things to attend.
I had to create an online ad for the Startup Iceland conference from scratch to publish later that day.
Here’s a video of the ad
(You can see the HTML5 version here)
Ok .. so it’s not the best looking ad in the market, but it does what I wanted it to do – communicate a message (something that 99% of ads I see fail to do)
I don’t really care if it isn’t in the golden ratio or it has a couple of design flaws – it passed my “Celery test”:
- It loads insanely fast in the browser
(99% of ads fail to do this, resulting in less conversions) - Clean design
- Visually pleasing
- Communicates the message beautifully
- Has visual elements that entice the user to click
Now, I guess that it won’t win Lúðurinn 2016 but it will hopefully do it’s job – drive traffic to the Startup Iceland conference sales page.
How was the ad designed?
As with all content, we must first start with the message, then how to communicate that message and finally get people to act on the message.
The problem is that there is so much information we need to put out there to hook people, and with only 310×400 pixels, that’s next to impossible to mix.
So, for an ad, I had a couple of options:
- Use a static image with a single hook
- Create a flowing ad using HTML5, Video or Flash
While it would take the least amount of time to create a static image with a single hook, it would be the least effective option (ad spaces are noisy so you have to stand out somehow).
So I decided to create a flowing ad
I don’t like Video or Flash since they take forever to load, they don’t obey browser rules and require massive resources from your browsing device.
I decided to go with HTML5
I’ve never created an HTML5 ad before, so I figured that I’d just google it..
Upon googling it, I find a lot of different tools to create HTML5 ads, but most of them aren’t that good (in my humble opinion) or they cost a lot of money.
I didn’t want to pay for a big tool, or use a tool that is bad so I tried a couple of promising tools.. nearly all turned out to be a bad option.
Here are the ones I think are worth mentioning:
- HTML5Maker – an online HTML5 banner creator, easy to use and simple, but wasn’t as intuitive as I wanted
- Google Web Designer [BETA] – an offline HTML5 animation studio, designed to make it easy to create HTML5 banner ads for their ad networks.
I tried to use the HTML5Maker, but it was a bit confusing so I downloaded Google Web Designer.
And man-oh-man, what a beauty
Ok .. so, there are a number of options and stuff, but this designer is intuitive and insanely easy to use. (and it works on Windows/Mac/Linux..)
In order to create an animation..
.. all you have to do is create a new project (there are templates out there) and you’ll be presented with a scene (like in the image above).
Then you add your assets (graphics), write some text and you have your first scene.
Do you notice the + button in the bottom of the screen?
Well, it’s the “New scene” button .. and this is where the Google magic happens.
In order to animate, you just create a new scene by clicking the + button, then you drag your images and text to where you want them to go .. Google Web Designer autoMAGICally knows what to do and animates this for you.
So simple .. just drag and drop, and GWD does everything for you.
But what if I have a problem and don’t know how to do it..?
You’re in luck .. there is a special Google Web Designer Youtube channel where you can learn how to use most of the features in the program.
And then there are of course thousands upon thousands of pages online that show you how to do everything from animation to custom font selection..
Want to play around with our ad in GWD?
To make things simple for you, I want to give you the whole ad template, ready to use in GWD.
It’s a .zip file and you can download it by going clicking the image below
Click here and tell us where to send the ad template and we’ll send it instantly to your inbox
