Greetings All, does anyone have a good idea where to start learning about the basic theories of digital advertising? i am familiar with typography for web, color, basic animation principles, etc.. but want to learn to properly create banner / display ads etc. not just throw something together without any thought. I need a good foundation first. any relevant sources i should start from? Hubspot courses? Google Digital Garage course?
The other question is, would Hype be the ideal tool to use? I use it now and absolutely love it, but so far only for basic presentations for work, and my work is not advertising.
I’ve searched for banner resources over the years and never really found anything appreciable. Animation courses, yes, but nothing specific to producing banner ads. Sometimes there’s a message board with a related digital advertising topic being discussed, but I have yet to find a place dedicated to the subject. My start in digital advertising came while working at ad agencies and basic knowledge was passed on by co-workers. After that it’s been trial by fire.
Each ad serving platform provides their own specs, outlining their ad limitations. Commonly, animations can’t run beyond 15s and the packaged files can’t exceed 200KB. File size is probably the biggest hurdle we come up against.
About 5 years ago I was deciding which animation tool would be my go-to. I created an identical banner ad in both Adobe Animate and Hype. Hype’s files came in a bit smaller and I liked the interface a bit better. I’ve been using Hype almost exclusively since. Also, the Tumult forums have unbeatable support. I haven’t seen a similar resource for Animate.
To answer your question, I think you need to get a good grasp at knowing how to use Hype and its UI not so much about its Javascript side of things. If you are comfortable enough and know your way around the app, do what I did, try to recreate something that stood out for you. Luckily the forum is your best friend. A while back @Daniel and myself created a thread and in it we have archived a slew of ads to help inspire "Hypeists" users to make great ads. Bookmark this thread Animated Advertisement Inspiration speaking of ads I should get to updating the thread with more ads, its been a while since I updated it.
Hello there! I've been doing thousands of banner ads over the last 20 years. I've learnt with experience and after trial and error as they said. There are many things you can try, but the basics are very simple, if you like I can share my experience:
When you work in advertising, in general, people are against you. They're reading their blog, or website and don't want to be bothered by ads. So you would like to keep it simple and not overload the banner with information. Short texts, simple messages, clean images.
Avoid using flashy things to catch your audience attention, if they are interested and you can explain your reasons, they'll probably click! Play nice
Always check with the network or publisher the requirements. In my case, 90% banners are GIF format, only repeat 3 times and last less than 10 seconds. A border is required. Acceptable weight is around 100 kb. Banners will stop and be fixed in the last step, so that's where you want the most important information to be.
Always try to include a button or 'call to action' to encourage people to click and know more.
Hype is a wonderful tool to build more attractive html5 ads. Other than that you'll have to use Google Web Designer. To be fair that app has improved a lot during the last years but Hype is much more easy and reliable to use. You can develop smooth animations and improve image quality a lot. Also, weight limitations increase for html5. Check with the publishers.
All other rules you already know about graphic design or advertising apply. Just keep it simple as when you are designing a billboard in a highway and people do not have much time to pay attention to it.
In general, the elements that I use in any banner will be: a claim and perhaps a subclaim, around 5-10 words each. An offer (discount, or price). Product or brand logo. A CTA (call to action) button. One, two or three background pictures in two or three different frames that will repeat. This may change a lot depending on the industry you are working with, I'm mostly working travel and hospitality stuff. If you work retail you may want to present the products again a clean background, no pictures.
Hype is my to go tool for creating display. Not only simple banners, but also rich media such video banners, Interscrollers, Homepage takeovers etc. It’s capable to build basically anything as you can always enrich it with additional scripts. Besides that, the community is the most helpful one I’ve seen compared to others. Especially extension projects from @MaxZieb keeping Hype more relevant and useful compared other tools out there.
I’ve never really followed a course into developing/building display ads. So I’m not really aware if there’s a good course to follow.
And I doubt there is, as unlike social advertising, display has way way way more variables in the way its build and used/displayed. However through the years I’ve been stacking up best practices from campaigns. And there are a few key principles that need to be used.
Design using the basic (web) design principles, such as consistency in colors, margins and amount of font types.
Always A/B test. (Colors, copy, shorter vs longer etc.)
Build as if people don’t watch your ads. On average the ad is only a few seconds (~9/10 on desktop and ~7-8 on mobile) in viewport. And the time that people actually is even shorter. Hence you should try to keep the ad animation short, don’t try to tell too much in those few seconds. Basically less is more. A clean short animation. The main focus should be on creating a strong endcard.
One size doesn’t fit all. Tailor the message and the content to the size of the banner. As a desktop 970x250 is capable of telling/showing way more than a mobile 320x50. So don’t make 1 design/copy setup. Use the banner size to the best as its ability. Use the larger format for richer ads and keep the smaller ones for short fast paced messages.
In addition, try to browse to ad heavy websites and keep refreshing the page. This way you’ll find a lot of cool ads and get to look under the hood how their build. The best way to learn is to find an ad you like and try to re-create it.
I was not expecting this level of responses. It further underlines that the Hype community is filled with knowledgeable folks who do not hesitate to share their expertise to newbies like me. I cannot imagine finding this in an Adobe Animate forum as @CheeseDeluxe also mentioned.
As I go over this information, I ponder how crucial it is to learn about things like SEO, SEM, PPC, content marketing... etc?
I am mainly interested in the creative and technical aspect of creating ads, but of course i do realize that these graphics should translate into measurable KPIs... however to me its just mumbo jumbo that takes away from the fun of working in Hype..
So would you say that banner ad designers expected to also be digital marketing experts?
I was hoping to take your advice and come up with a few mock ads which I would like to share here for your critique. Would that be okay to do?
Bear in mind this is not my profession, but it is of great interest at least as a hobby – for now.
My perspective is as a digital ad producer. In most scenarios, I’m contracted by ad agencies to take their ideas and bring them to life. They take care of strategy, messaging and design. I bring motion graphics expertise. I often refine their designs since banner ads don’t get as much love as they deserve, but I don’t typically design from scratch. Sometimes they want A/B versions to test, sometimes not.
They give me PSDs of the layout (typically showing 3 frames of the ad progression) and we hold a kick-off meeting to discuss their vision. I deliver zipped HTML5 packages to them. Their media people are the ones who upload to the ad serving platform. The actual link and tracking tags get added at that point.
I’ve never been asked to create ads that are animated gifs because the designers at agencies usually know how to do that. I come from a web development background, but none of that SEO/SEM experience plays into what I do now. Nor does PPC or content marketing.
thank you @CheeseDeluxe! i'm glad to hear that what I asked about is not necessarily a requirement for this field.
having the artwork / assets is probably an easier start for someone like me. i do have a decent handle in vector illustration, but it doesn't sound like this is a very useful thing in animated banner ads.
how about coding? i understand that javascript animation is a thing, but i'm not a programmer by any means. it seems like deep knowledge js can extend the types of animations one can do. is it sufficient to use the animation tools built into Hype?
and in terms of keeping the file sizes very small, are pngs the best file format to use? for example, if one wanted to turn a 3d animated sequence into individual frames to animate in Hype, is that a normal / acceptable process? Or the file size might be too big?
@furmieCamelCase You don't need to know how to code in JavaScript, but you will want a basic understanding of it. At least enough to be able to integrate pieces of JS within Hype.
Every ad requires a JS click tag, which is pretty standard code 95% of the time. The other 5% of the time an ad platform will have special click tag requirements with only vague instructions, so some JS knowledge will be helpful.
Sometimes you'll want to use a Hype extension in order to pull off something that Hype can't do natively. This isn't at all common (for me), but a recent example is when I needed to include color shapes that used a multiply blend-mode. There's a JS extension for that purpose, available within the forum.
Even though you mostly won't be CSS hand-coding, it's valuable to know it. It's not uncommon for mobile banners in the 320×50 size to be limited to 50KB. If you want to pack enough retina images in there, animating with CSS instead of Hype will save you from the file weight of Hype's JS file.
The most common file size limit for most digital ads is 200KB. Unless you resort to visual trickery, you can assume 3D is off the table for any digital ads. As to images and file size, the general rule is that JPGs are best for photographic images, PNGs are best for vector graphics. It's not uncommon to be forced to use PNG for silhouetted photographic images. Larger image size, but unavoidable since it needs to be silo-ed.
You'll also become very familiar with overcoming browser quirks. The biggest one (to me) is that Firefox renders subtle movement in a choppy manner. Lucky for all of us now, Internet Explorer is a thing of the past. For the most part.
Imo, the best way for vector graphics is not png's, but keeping it vector by using svg's or just the svg code out of illustrator in a hype rectangle. This way the graphic will always be looking crisp and sharp, and the file size and https requests will also be minimal. Additionally, it's easy to animate and morph svg's if you're doing it this way by using GSAP animations for svg: MorphSVGPlugin - Plugins - GreenSock
@furmieCamelCase
3D is very much possible to do in display, if you're using DV360 or other rich media hosts/platforms.
On Google web designer its easy to make a swirl ad: 3D Swirl creatives - Display & Video 360 Help Although working on Google web designer is a pain in the ass. Its possible to use the same JS library Google uses within Hype. I've seen some rich media ads made in Hype that implemented Google's model viewing JS for 3d rotation and even AR placement through the front camera of the phone.
Additionally it's always possible to load in a rendered spritesheet of a 3D model rotation so you can load it in as an image. Eventhough this can be quite large too (KB wise), it generally doesn't matter if your using DV360 or other Rich media platforms.
Thanks again for the detailed guidance! @CheeseDeluxe I have only a very basic understanding of JS, but I am a proud owner of the A Book About Hype. Unfortunately I haven't dug into it yet, despite having it for a long time. Now that I'm messing around with ads I imagine there is a wealth of knowledge contained therein. i can see how its a struggle to create a nice ad but still remain within the acceptable kb.
@BannerMan thanks for the great advice! i usually use Affinity Designer for all vector work (used to use freehand back in the day before it was buried by an unnamed conglomerate). would you say GSAP is easy to use? the link you shared shows a single line of code to morph so i'm going to say yes... ? also re using a spritesheet, is there an optimal number of frames that should be used to make it look like a smooth (rotation for example) but stay within the kb?
Are SVGs sharp looking no matter what size they’re at? Yes. Are SVGs any sharper than PNGs that are sized 2x the dimension they’re used at? No. So yes, if you’re not closing in on the required file size limits, or if you’re scaling or morphing the images inside your digital ad, I'd choose SVG.
The smaller-sized PNGs will typically be my go-to. I don’t think I’ve seen an SVG come in at a smaller file size than an optimized 2x PNG. I'm sure there are exceptions.
@BannerMan Do you have any 3D banners that you'd be happy to share? I haven't delved into any of that and would love to see the possbilities!
