(All banner ads shown in this post serve an illustrative purpose only, and are not to be taken as an endorsement.)
Now that you know how to create and track UTM links for your Facebook campaign, you may be looking into the dark abyss of creative incompetence. If you’re anything like me, creating appealing banner ads can be a torturous experience.
Today’s article aims to be exactly the kind of resource I never managed to find when I was starting off in Marketing. The kind of resource which plainly describes the basics of graphic design, and provides a step-by-step methodology to creating passable banner ads.
It took me ages to figure this out, and as a result, the images I used in blog posts and paid campaigns at the beginning of my career were quite frankly abominable.
This was one of my first attempts, which didn’t make the cut for obvious reasons:
With literally hundreds of hours of practice behind me however, I’ve finally managed to get my head around how to create banner ads, which appeal to the eyes and the wallet. It is the aim of this blog post therefore, to share with you the insights I have gained and show you how to quickly create images which don’t completely suck. I am not a professional graphic designer, but know enough to help new Marketers and small business owners get started.
So without further ado, let’s test that hypothesis.
(It’s the Playoffs people. Go Wizards!!)
What tools do you need to create banner ads?
MS Paint isn’t going to cut it for this one I’m afraid. Instead, we’re going to look at the three Marketing tools I regularly use to make creatives.
Canva – Your starting point for versatile banner ads
Your first port of call should be Canva. Canva is a free, drag and drop design tool which will help you create visually appealing images faster than any other tool. It’s perfect for beginners, but can easily be used for more professional-looking banner ads.
The banner ad I created for the weekly Marketing Q & A I used to do, was done completely in Canva for example.
Sure, I’m not going to win any design awards, but this banner ad did its job admirably.
Canva is built for beginners, which makes a detailed walk-through a little redundant here. For a great overview of its capabilities however, check out this video tutorial.
Photoshop – The premium solution for professional banner ads
Once your creative ambitions have outgrown Canva, the next tool to try is Photoshop. It has to be said, that the learning curve here is quite steep, but well worth it. Whether you want to create professional shadow effects, buttons with a gradient, use elaborate fonts, include lighting, utilise 3D, create special shapes, cut out people or cover up blemishes, Photoshop is the tool to use.
Google Webdesigner – Create animated banner ads for free
Google Webdesigner is a free tool designed to help Marketers create animated html 5 banner ads. We’ll go into a little more detail below, but suffice to say here that this tool is well worth checking out. By adding animation, your banner ads will become more noticeable and the Click-Through-Rate will subsequently increase.
The tool was conceptualised for beginners, but there is still a significant learning curve. Start off by creating assets in Photoshop and importing them into Google Webdesigner. Then you can add many different types of animation.
My design principles for creating ad banners
I want to say this as loudly as possible before we continue: I am not a graphic design professional. The only thing legitimising this blog post is 4 years of experience creating banner ads and the two books I’ve read about graphic design:
Above The Fold by Brian Miller and The Elements of Graphic Design by Alex White. Both are great books and I highly recommend you check them out. However, two swallows do not make a summer and I still have a ton to learn about this topic.
That being said, I have managed to pick up a few good ideas that can help you create banner ads, quickly and effectively:
1. “It’s is better to be good than to be original” (Ludwig Mies von der Rohe)
Keep this quote in mind as much as possible. In a nutshell, it describes an approach to design which is far more efficient than any alternative. When faced with an empty canvas, head over to Google and search for adverts related to your product (or similar).
Chances are, large companies have spent thousands of dollars optimising their banner ads for similar products. Look at their designs, pick up on those aspects you find particularly appealing and try to emulate them.
This approach will stop you from spending hours on a design that is inherently ill-suited to your products. I’ve wasted a lot of time trying to be original with the end result always landing in the trash. By getting inspiration from the internet, your setting yourself up for success.
Once you’ve distilled your favourite aspects into a design you like, add your colour palette, branding and UVP (unique value proposition) to make it your own.
2. Make your message as clear as possible!
More important than any other aspect of your design is that prospects can read your message.
In fact, everything the designer does should be calculated to help a reluctant reader become effortlessly involved with the text. There are a couple of things to keep in mind here:
- Optimise the size, style, and colour of your font. The text on your image should be easily readable. To achieve this, make sure you pick colours for your font and background which contrast each other; black and white being the obvious example. To start, try going for a darker background and lighter font colours. If you’re having trouble picking the right colours, check out the handy colour picker tool. Additionally, insure that your font is large enough for your UVP to be readable at a glance. While designing, try to bold those words you most want your audience to see. Finally, be consistent with your font choice throughout the ad. Ideally, it will be identical to the one on your website.
- Keep your background plain. As you explore Canva or Photoshop, the temptation to use a “fresh” background may become overpowering. Resist this urge. Instead, opt for a soft gradient, which starts lighter at the top but gets darker towards the bottom. This background will “pop” while making your text standout.
- Keep the text to a minimum. New advertisers will often try to load as much information as possible into an advert. The following is a banner ad which falls foul of our rule. As a result, it’s almost impossible to tell what this banner is advertising. You can most likely see that it is offering savings, but the extraneous text scatters your attention, and it is unclear what the savings are referring to. Potential customers will only spend a fraction of a second looking at your banner ad, so your message needs to be clear at a glance.
3. Key features to include in every banner ad
Now that we know how to use fonts and backgrounds in banners ads, let’s look at the other key components of your creatives. These are:
- Your logo
- Your products unique value proposition
- Call to action button
- Added hook (bonus or benefit of product)
To begin with, try to set your banner ad up in the following order:
In my case, the result would look something like this:
Is it perfect? No. But it’s clear and to the point. There is no doubt about the product in question and a well targeted audience should respond well to it. It provides an excellent point from which to start, so let’s now look at ways of improving on this design:
- Use your product in the background. If you are promoting a physical product, you may well want to include it in the banner ad. This makes it easier for your audience to understand your product, and makes it more desirable. You may not want a burger now, but how about now?
- Include a smiling person in your advert. Human beings are group animals. As a result, we feel deep empathy towards others, giving rise to the phenomenon of emotional contagion. This is why a smiling face has the power to make you and your audience feel better. Triggering a positive emotional response to your ad will increase the chances of your audience making a purchase and will subsequently improve your ROI.
Including a product or smiling person in a banner ad, will take slightly more advanced design skills. Specifically, you will need Photoshop and access to a stock photo service like Adobe Stock. To get started, watch this excellent video on how to create professional product images for banner ads in Photoshop.
Creating animated banner ads in Google Webdesigner
You should now have a clear idea of how to create static banner ads quickly and effectively. As a next step, you may want to try your hand at animated banners. These have the added benefit of movement, which draw the eye and typically receive a higher Click-Through-Rate as a result.
Luckily, Google has provided a free tool for the creation of html5 animated banners, called Google Webdesigner. There are two excellent Youtube channels dedicated to this tool. One is Google’s own and the other is the more advanced Swift-banners. Both go into great detail and are worth checking out.
Here, I want to go into a few details I wish I’d known at the outset.
- Create all assets in Photoshop first. You might be tempted to create backgrounds, buttons and other assets in Google Webdesigner. Don’t do this. The software is designed specifically to add animation, and creating usable assets with it rarely works and takes far more time than in Photoshop or Canva.
- Google Adwords has a file size limit of 150kb. It’s tempting to add as much animation as possible once you’ve got the hang of the tool. This will cause your file size to balloon well in excess of the 150 kilobyte limit imposed on Adwords. Instead, limit each banner ad to two animations, and reduce the size of your images. This should keep the file size of your animated banner ad down.
- Opacity is king. If you’re starting out with Google Webdesigner, feel free to leave any questions you may have in the comments below. I’ll be happy to answer them if I can. For now, you should play around with the opacity of different keyframes. By setting the opacity of your first keyframe to 0 and 1 for the following keyframe, you can easily create a simple animation for any asset you choose.
- Implementing html 5 banners on WordPress is tricky. If you’d told me that implementing animation in WordPress would be tricky, I would have chuckled in your face. Surely the two behemoths of Google and WordPress would have found a slick way of integrating this key feature? Well, they didn’t. Instead you need to go through the following steps to integrate an animated html 5 banner ad on your WordPress page or post. Step #1: Publish your animation locally from Google Webdesigner. Step #2: Upload the downloaded zip file to WordPress (Media -> Add new) Step #3: Open the html file page in WordPress and copy the URL on which it is hosted. (Top right on mine) Step #4. Add the iframe tags. In my case, the result looks like this:
CODE = <iframe src=”http://cgrundy.com/wp-content/uploads/2017/04/index-2.html” width=”350″ height=”270″</iframe>
(If the animation doesn’t load, please pause your Ad blocker and refresh the browser window)
By following these steps you should be able to create and implement a passable animated html 5 banner ad on your website, or Ad network. If you’re having trouble with any of the steps outlined here, leave a comment below and I’ll try to answer as best I can.
Conclusion | How to create banner ads
In this blog post we covered the principles I abide by, and the tools I use, to create banner ads. I’ve also linked to some excellent resources which explain the process of creating appealing visual ads far better than I ever could.
I particularly recommend Mir Rom’s Youtube channel and Blue Lightning TV for Photoshop tutorials and Swift-banners for Google Webdesigner walkthroughs.
That being said, I hope this blog post has made some key design principles clear and has pointed you towards some useful tools. If you have any follow up questions, leave a comment below or email me at firstname.lastname@example.org
Thanks for reading 🙂