Transcripts
1. Introduction: Hi, my name is Juliana Sauve, and I'm a graphic designer based in Vancouver, British Columbia. I've worked with digital design for many years, and in my career, I learned a lot about what makes an effective ad campaign. For this class, I'll borrow some concepts from UX design and communication design to teach you what are the main elements that make up an ad campaign, and how to design static display ads that catch people's attention and drive conversions. I'll also share some tips and tricks of Adobe Illustrator that I've collected over the years that'll help you quickly create the many necessary shapes and sizes of display ads you may need. Finally, I'll encourage you to create your own set of display ads along with me and share it with the class. Let`s do this. By the way, let's do this is what we call a call to action. In the upcoming videos, we'll become quite familiar with CTAs.
2. Elements of a killer ad campaign : Let's admit it, nobody likes web ads, at least not as a viewer. They can get in the way and be distracting when all you're trying to do is read your content. But when they're done right, ads can actually be very good and there's a reason why companies still invest in this kind of advertising. To begin with, display ads are inexpensive, especially compared to bigger campaigns, such as billboards and print, and television. The production cost of web ads is also a lot lower than these kinds of campaigns. All in all, it's a very inexpensive strategy. Secondly, display ads can be highly targeted. Because of things like cookies, ad providers actually have a lot of data about the viewers. They know the viewers demographics and browsing habits, and they might even know what company the viewer works for. It's also possible to choose what pages will display a certain ad. This is relevant because the advertiser can make sure that the viewership of the page that is displaying their ad aligns well with the audience that they're trying to reach. Since it's a digital medium, it's very easy to track the results that can be attributed to an ad using trackers and tools like Google Analytics. Now let's look at what are the elements that make up a digital ad campaign. The page where the ad will be found, the ad itself, and the landing page. First, we have the pages where the ad is going to be displayed. The way that these pages look is out of the hands of the designer, of course, but it still needs to be taken into consideration in general because it is the context that will surround the ad. The visual element of the ad, of course, is in the hands of the designer. The messaging however, might be provided by someone else. The landing page is basically the page where the viewer is taken once they click an ad, this might also be under the control of the creative team and should match the ad as closely as possible in visuals and in messaging so that the viewer has a seamless experience from ad to landing page. Let's go into the web now and look for some ads in the world. Here we have design taxi, which is the most ad dance page I could find for these examples. We can find here three basic types of ads; static image, GIFS and HTML5 ads. This first ad here for Shutter stock is an image ad, which is the most simple kind, just a static image file. These can actually take many shapes and forms depending on the platform. Here you see, here's another one for Shutterstock. There might be some other shapes that we'll see on this page later on. This ad for Vimeo here is interesting because it exemplifies very well what I was talking about targeting. You may notice that this ad is actually in Portuguese, which just happens to be my mother tongue and the only reason that they know that is because my browsing habits will show that I am a Portuguese-speaking person. So this ad was obviously certain to me due to targeting. This Vimeo ad has a very simple animation, so I can tell that it's an animated GIF. Animations can actually help grab people's attention and break up the messaging so that the ad can say more, that you can have a little bit more copy or a little bit more messaging on the ad. You can tell that this is a GIF just by looking at the source file, like you can see here. Now, both ads that you can see here are actually HTML5 files and you can tell because the animation on them is a lot more robust than just the simple animated GIF. HTML5 ads are becoming the new norm. They're actually done in code so they can look like normal ads but they have the possibility of having a more robust animation like I mentioned, and they can even be interactive. On this side for Home Depot, you can see that I can navigate products inside the ad itself, almost like it's a little mini page. This is obviously only possible through code. I'm showing you the types of ads just so that you can have a full understanding of what's out there. I haven't even mentioned social media ads and video ads because those are not necessarily display ads so they really fall outside of the scope of this class. But for the sake of simplicity, this class in particular, will focus on static image ads, which are just the image files that are a little bit more simple, a little bit more straight forward, so that we can walk before we run.
3. What makes good and bad campaigns: I've been telling you that I'm going to teach you how to design great ads. But what does a great ad look like anyway? Well, to me, great ads have a few traits in common, and those are, they are well targeted, they are attention grabbing, they are clear, they are simple, they are well-defined, they are legible, and they're consistent. I'm going to go through each one of those and give you some examples right now. The great thing about web ads is that they can be targeted very specifically to a certain audience according to their viewing habits, to the geolocation. Because the web knows where we are and what we're doing at all times of the day because they're creeps and cookies or things. There's a lot of information that these advertisers, especially Google, has about us, that allows ads to be very targeted towards a specific group of people. The targeting itself may not be the designers choice, but someone does have to make those choices. The designers should know what those are so that they know who they're designing for, what context they are going to be seeing their ads on and so on and so forth. Targeting can be great because you can be very specific or it can a little bit wrong sometimes. For example, on the left here, this is an ad that I saw myself and I was wondering why on earth I will sing an ad that was in Chinese because I cannot read Chinese. I later realized that I was seeing that ad because at the moment that I was seeing it on my phone, I was in the middle of the Vancouver Chinatown. The geolocation had tagged me there and they showed me that ad. It might have been great for the rest of the people who are around who lived in that area, who were hanging out over there, but it did not work for me. It might have missed the mark a little bit. On the right-hand side here, you might not be able to read it, but it says, make it with Creative Cloud, breakthrough with the world's best creative apps from 999 a month join now. Of course, this is targeted very well because I am a graphic designer, obviously use the Adobe products. I guess they're thinking I may not be using the Creative Cloud yet. I might be on an older version and they're trying to convert me into the Creative Cloud. Maybe if they had a little bit more information, they know that I am on the Creative Cloud, but knowing the pricing is interesting, it could be telling other people. That's targeting done right. Your ads should also be attention-grabbing because the web is full of information and everyone is trying to get the viewer's attention one way or another. If you can use motion, that's great, because humans love things that move. But if you don't and you don't have time or the budget for it, then you will have to make do with some other design solutions, like color and topography or other things that may catch users attention. Now for example, on the left here, I would have skipped right through this ad if I hadn't specifically been looking for ads for this class. But it's very bland. There's nothing going on here that catches my attention. There's some people in low res, maybe smiling at me. There's nothing here that's doing much for me. On the right-hand side here, there is very bold statement that says sell it. There is a very engaging image that colors are bold. Everything is saying, "Look at me". The problem with this ad though, is that the message isn't super clear. If you don't already know what Squarespace is, you might not understand what they're trying to tell you. Maybe with a call to action a little bit, start your free website trial today, but it's not the clearest ad in the world. That brings me to the next topic. Your ads should be clear. Your viewers should know what it is that you're doing, what it is that you're selling, what it is it that they what you do after you look at this ad. You have very limited time and space to do this. You need to be as direct and clear as possible. On the left-hand side here, we have an ad that says no greyhound, no problem and a logo. I have no idea what this product is. I have no idea what it's for. I'm assuming it's some sort of transportation. Maybe you're ride sharing, but there's no Uber in Vancouver's, so it can't be Uber. Greyhound is a bus service that takes you from city to city, which has recently left BC. If you know all that, maybe you have some idea of what this says. But really the ad doesn't give you enough information. On the right-hand side. This is very clear. It might not be the most beautiful ad in the world, but it gives you all the information you need, up to 60% Harry's final mark down sale shop now, Harry Rosen. This is what they want you to do. They want you to shop because there's some great deals. Because this ad is so clear and so to the point, I can assume that this was a very successful ad for Harry Rosen. Your ads should also be simple because you have oftentimes a very limited space. People are on their phone. The screens are not very big. Ads shouldn't be taking over your screen anyway, because that's not what people are on the websites for their one of the websites for the content and the ads are just something that are trying to distract you for a little bit to try to sell you something. On the left-hand side here, I have no idea what even that says, because I cannot look at one thing. The ad is so distracting, the background is really overwhelming. There's so much going on. There's different fonts and different colors, and it's just a lot. On the right-hand side here, this is another ad for Adobe and of course they know what they're doing. This is very simple, very clear. Make anything more creative with Creative Cloud, students save 60%. No overwhelming graphics. It's still eye-catching because of the use of bold colors and bold typography. In here they're using typography instead of a graphic element to convey some personality and some quirk, which works really well for them. Next up, we have well-defined and this is actually a guideline that a lot of the ad providers are going to give you. The ad should have a clear delimitation because it shouldn't be confused with the rest of the content on the website. On the left-hand side here we have an ad that doesn't have clear boundaries, so we don't necessarily know where the ad stops. Which makes it a bit confusing for the viewer because they may think that this is part of the content that they're consuming and not necessarily a third party ad. That's partly because the background is white. Now if you do need or want the background to be white, that's okay, as long as there is a bounding box around it. On the right-hand side here you see that [inaudible] has done that. I'm not saying that that is the perfect ad, but at least you can see that it's an ad because it has cleared the limitations. Next stop, your ads should be legible. Of course, you want people to read what your ad says, and I've already shown you a few ads here that are hard to read. But that's especially true with smaller ads. Some ads may be as short as 50 pixels high. You need to make sure that you trim that messaging and that nothing interferes with the text so that people can read it. On the left-hand side here where it says FLY ANA TO, it's very busy. There's a background image, everything is aligned at the bottom. It's simply a bit noisy and hard to read. It makes that bottom part a little bit convoluted. People might not actually stop to read that and they might just read Japan from Vancouver. Then the rest of the messaging, which might be the most important thing, gets lost within the graphics. On the right hand side here you see a very similar ad, but from another company. This one is ICELANDAIR and they've made sure that the graphics that are very simple, that the typography is against a background that has enough contrast and everything is readable. Everything is in a right size. This one is a breeze to read and you can tell what they're saying right away. Lastly, your ad needs to be consistent. Often times, you will make an ad campaign that will comprise of a whole bunch of different sizes and shapes of ads and maybe a few different versions like the one that you see here. You have to make sure that they all tied together as a group because the same user might see the ad in different websites, in different formats and in order to really drive the point home and raise your brand awareness, your campaign should be concise and look more or less the same independently of the size, so that your message is consistent across all devices and across all different websites so that even if the user is exposed to your ad more than ones, which happens a lot, they'll still be able to recognize your brand and know right away what it is that they're looking at.
4. Anatomy of a good ad : I've mentioned it a couple of times before, but not all aspects of a digital ad campaign are under the control of the designer, like the targeting and the copy. When design is all you can do, do it well. If we do a cross reference of all the examples of already shown in some more, we can see that four elements will keep showing up and those elements are image, message, CTA, and logo. The message and the logo are the most important, the message will drive the point of the ad and provide value to the viewer. While the logo will ensure that the viewer knows who is talking to them and it's also the main way that the ad will generate brand awareness. The graphic elements or images will aid in catching the attention of the viewer and help drive the point across. If the ad isn't visually compelling, it is less likely to succeed. The call to action usually appears in the form of a button and it invites the viewer to click the ad to perform a certain action, such as learn more or shop now, when designing the ad, keep in mind that display ads come in all shapes and sizes, from tiny horizontal banners to tall skyscraper vertical ads. Make sure your design is flexible enough to translate to all those different sizes.
5. Let's make something: Now that we've covered some of the basics, and before we dive any deeper, I'd like to invite you to create your own campaign along with me so we can practice the concepts we're discussing. For this, you can advertise whatever product or service you want. But I think it would be fun for you to design ads encouraging people to donate to your favorite charity. This kind of ad is a little hard to find out there and who knows? Maybe you can even donate your design for them to use. So what you need to do as a design campaign that includes at the very least five sizes, all of which are very standard on the web, but are very different from one another in shape. So the first one is 300 by 250, which is also called a medium rectangle. Next one is 728 by 90, which is called the leaderboard. The next one is 300 by 600, which is a half-page. The next one is 320 by 50, which is kind of tiny. It's a mobile leaderboard and a 120 by 600, which is a skyscraper. Before you start designing, Take a moment to think about who the audience for your ad would be. This can be a certain demographic or people who showed interest in a certain topic on social media, or people who live in a specific city, for example, for the text on the ad. Even if creative writing isn't your forte, try to come up with a strong short message that will resonate with the audience and encourage them to open their wallets for your cause. If all of this sounds like a little bit much to begin with, don't worry, we'll take this step-by-step in the upcoming videos.
6. A home and a destination for your ad: We've briefly discussed the elements of an ad campaign, but in the upcoming videos, we'll dive deeper into them. For this video, let's focus on the page where your ad will be displayed and the landing page that your ad will lead to. Starting with the page hosting your ad, I've mentioned that it's the context where your ad will be displayed. However, the specific pages that will display a certain ad are completely up to the ad provider. How can we take them into consideration? Well, we can make some assumptions from the design patterns that we find on the web. Most digital publications will display ads in between text or other blocks of images on a white or light gray background. This is a pattern that we'll see over and over again. We saw it earlier on DesignTAXI. And we can see it again on the homepage of Huffpost and on Forbes, and on BuzzFeed, and on all recipes. And even on Reddit. The content of all these sites is very different. But the basic page structure tends to be the same. By the way, promoted posts like this one are not display ads, so we're not covering them on this class. There are of course, some exceptions to this rule, like leaderboard ads that are displayed over YouTube videos, for example. In this case, we might as well give up trying to guess what the background of the ads will look like and just try to optimize our ads for the more basic pages with content on white background, like we saw before. We can only hope that they'll look okay on YouTube too. Now let's say, your ad was very efficient and catching the viewers attention and they clicked on it. Where do they land? You might think that they would just go to the company's homepage. But often digital ad campaigns include dedicated page to go with the ad in order to guide the viewer towards a certain action or conversion. The success of a campaign has as much to do with the landing page as it does with the ad itself. The topic of highly converting landing pages would be a subject of a class all on its own. So suffice say that as a general rule, ad and landing page should look, feel, and sound like they're part of the same campaign. The message really gets delivered. Let's look at some examples. Here's the ad that I found for Canadian Blood Services, and here is the website for it. Of course, the image has changed. It's not completely consistent, but the colors, the style, the message, everything is pretty much consistent. You know that you've clicked on the right ad, you're not lost. Everything makes sense as a story between these two. This is the ad for Squarespace that we've seen before, and this is the landing page for it. The imaging doesn't match. In the first message that you see doesn't match either. Although you do see the message sell it eventually. But the style is clearly consistent between the ad and the page. I do think that the ad and the landing page still match, in this case. The one page that I found that not matched the ad whatsoever was actually Adobe. Here's the landing page for it. As you can see, it's very, very simple. It's basically just their pricing page. It doesn't give the user any value props, why they should buy their product, what their products are, what's included? None of it is explicit in this page. It's just purely the pricing. Now maybe Adobe can get away with this because in the world of graphic design, they're so well known, maybe their brand speaks for itself, but that's probably not the case for your brand. Make sure that your ad and your landing page work together. If possible, make sure that your landing page is effective and drives conversions. For the sake of our exercise when designing your own ad campaign. Don't worry about the landing page, but do think about how your ad would look like in the world. Take some screenshots of websites where you think your ad might be found. So that you can later mock up the ads on the page in order to get the full effect of it in context.
7. Your audience and brand: Now, let's start thinking about the ad itself and considering two things. Who is this ad from and who it is for? In other words, let's think of your brand and your audience. Ads are one more cog in a much bigger machinery of a brand, and they need to look and feel like such. For that, keep in mind brand guidelines. For our exercise, look at the website of whatever charity you're making an ad for. What are their colors, their logo, their overall visual style. Do a little bit of research on the charity's other online presence such as social media. If they have a clear image that they are trying to follow, make sure you mimic that as closely as you can. Remember, one of the objectives of doing digital ad campaigns is to raise brand awareness and put the campaign in front of the audience's eyes. The ad needs to tell the same visual story as the rest of the brand. There's always room for creativity, but make sure the audience knows who's talking to them. I will be designing a campaign along with you, and for my charity, I chose the BC SPCA, which is my local animal rescue. Looking at their website and social media, I can tell that their brand is simple, but I can pick up some colors, logo, fonts, and photos to get me started. Next, let's talk about your audience. Who are you talking to? Who do you hope will buy your product or in this case, donate to your cause? Think about things like age, gender, income, profession, interests, whatever you feel might be relevant to you. For my animal rescue, I know that the people I'm trying to reach are animal lovers, regardless of gender. They will likely have some disposable income, enough to allow them to make a donation to a charity. Maybe they already support other charitable foundations. Maybe they've been browsing adoption websites. They definitely live in British Columbia, since this is a local charity. I will keep all of these things in mind to help me design an ad that will resonate with them.
8. An interesting ad: Let's now finally turn our focus to the ads themselves. They're an interesting piece of design since viewers are constantly trying to ignore ads, while companies are constantly trying to make their ads more engaging and more appealing so that viewers will click on them. On top of all that, the ads have very little screen real estate. They need to be a simple and direct as possible. This is a tall order, but we can use the elements of communication design to achieve what we're looking for, such as color, hierarchy, sizes and graphic elements. Humans tend to follow certain behavior patterns. Someone sent me this the other day and I tried looking for the source of this image, but I honestly couldn't find it. I'd love to give it proper credit, but the truth is, it came from Reddit. In any case, you tell me if it works with you. It worked perfectly for me and there are two main reasons for it. First of all, there is a clear visual hierarchy of the information, both in size and positioning. Also, above all, this is a pattern that we see all the time, in movie posters, in books and in ads. You can see that the structure holds even if there are some minor adjustments. Using a layout pattern such as this can help you design an ad that's very easy to understand. That's because humans understand certain symbologies is without thinking about them very much. This allows you to explore other things like icons, emojis, colors, images, and typography, in order to use them as shortcuts that will allow you to get your message across using minimal elements. Take a moment now to think what that means for your ad campaign. First, let's figure out what your message will be. We've already established that what we want to do is to get people to donate to our cause. Now is the time to figure out exactly what our written message will be so we can start building the ad around it. I did a little bit of brainstorming and I came up with a short and powerful message for my ad. You can try to find inspiration for a message in your charities website or do some brainstorming of your own. Or maybe even ask your friends for help. Once you have that figured out, you can start building your very first ad. Since it's the most common size. Let's start by designing the 300 by 250 ad and work on the other ones later. Remember to include the four main elements of the ad, message, logo, image and call-to-action. If we go back to that pattern we looked at before, we can see that each of our elements can easily fit in it. First and foremost will have the image. It'll be the thing that draws attention to your ad, the thing that captures people's eyes. Secondly, we want people to look and read the message. The CTA will be the third and lastly, the logo. Even though the logo is one of the most important elements of the ad, it's okay that it is seen last. You can think of it as being like a person's signature at the end of a letter. We can now talk about how your images are going to support your message and help make your ad that much more compelling. What are the images that you can use that pack a lot of punch? Should you use photographs or illustrations? What font should you use? These are all decisions that only you can make. Go ahead and do what you do best, design your first ad. I've touched on this before, but I'll remind you again, try to make your design flexible enough that we can adapt it to other shapes and sizes. You can use whatever tool you prefer for this, mine is Adobe Illustrator because it allows me to quickly make an export all the different ad sizes. I will share some of my Illustrator tips and tricks later, but use whatever you're most comfortable with. In the next video, we'll discuss the other formats you need.
9. Ad Formats and consistency : Hopefully by now you have your first ad. Here's mine. Let's go through some of the decisions that I made for this one. You can clearly see here that I use the pattern that we've discussed before. The first thing that you look at is the image of the dog. Look at those puppy dog eyes. How can you refuse them? Secondly, we have a very short and concise message that pulls at your heartstrings. The dog is actually looking at the message, so he invites you to read the message as well. The call-to-action is below the dog. You can see here that this design makes a triangle shape that helps guide your eyes down towards the "Donate Now" button. Of course, the logo of the BC SPCA is present and prominent, even if it's not taking up the whole image. I've used them in color of the charities brand, which is blue and also contrasts really well with the orange tones of the image of the dog. We've seen it on our examples and I'm sure you've seen it on the wild, that ads come in many sizes. Now is the time to start thinking of those. For this class, you only have to make five different sizes, but there are dozens of possible sizes that your ad can exist on. Just look at this list from Google AdSense and you know what I mean. Of course, Google AdSense is just one ad provider. There are many others out there. You don't usually need all of these sizes in any case. I for one when I'm making campaigns professionally, usually only make nine or ten of them and which specific ones they are is actually decided by my teammates in marketing. For now, let's take our design to the test and adapt it to one horizontal version and one vertical version. I like doing the worst-case scenario first, because if the design works in the worst-case scenario, it'll surely work for every size. So let's do the 320 by 50, which is the Mobile Leaderboard, and the 120 by 600, which is the skyscraper. Try to arrive at a layout that flows the same way as the main ad you've already created. If you look at other ads and these sizes, you'll see that they usually follow patterns as well. On the smallest size make sure you preserve the readability of the text. Trim the copy a bit if you have to, and if you have to sacrifice something, my advice is that you get rid of the image and keep everything else. That way you'll keep the most important information. Most importantly, make sure your design is consistent throughout every size. Your viewer might see your ad in many different pages and in different sizes and they should be able to realize that they're part of the same campaign. That doesn't mean that your ad needs to look exactly the same everywhere. But there should be an underlying sense of unity. In the real world once I have a design that works for sure for one square shed, one vertical ad, and one horizontal ad, I send them out for approval for whoever needs to approve them. Once I get the green light, I can work on other sizes. In the next video, I'll take you through my process and illustrator where I crank out all of those different sizes as efficiently as I can.
10. Building ads using Illustrator: Now let's start working on all of our sizes. I have just for reference here, all the sizes that we're going to need to make. Here, I'll just make five artboards and using my cheat sheet here, I'm going to change the sizing of each one to the corresponding ad sizes that we need. I'll just put the horizontal sizes together in the vertical sizes together as well. Once I have all my artboard set up, I'm going to go here into the Artboard tab. I'm going to change the name of each artboard to the corresponding size. We'll have five artboards and each one of them will be named the final size of the ad that is going to go in them. Now we can get rid of the cheat sheet because we don't need it anymore. I'll use this tool to rearrange all the artboards so that they snap into place. The reason why I do this is because there's a glitch on Illustrator that adds one pixel to the final exported image if the artboard is not in a precise spot on the grid. If on your x and y positioning of your artboard, maybe your artboard is at 7.5 pixels from the top and 6.8 pixels from the side, then it'll add a pixel to your exported file, which is really weird. I'm hoping that Adobe fixes these soon, but so far this is what I have to do to make sure that everything is right. Now we can start building our designs. I'll start by the smallest one, which is the 320 by 50. For now, I'm not going to worry about the fact that my image doesn't quite fit. I can go back into Photoshop and make the background of the image wider. I'm just going to arrange all my elements in my artboard, in a way that makes sense where the flow of all the information is effective. Off screen, I went and I made a wider version of this image. I just eyeballed it. I'm sure it will fit. Then I can perfect this with the image. Now because this is the smallest ad, I want to make sure that it's as legible as possible. I'm going to hit Shift option Command S, which is the same for web shortcut. I'm going to look at it in its final size. Now, the BCSPCA logo was not popping very much. The legibility isn't great yet. I'm going to make a couple of adjustments to make sure that this is a little bit more legible. I'm using the Save for Web tool just as a preview of what the ad is going to look like in its final size, but I'm not saving it just yet. I'm going to add a very, very subtle outer glow, a dark outer glow to the logo just so that it pops from the background a little bit more and gives it more contrast with the background so that you can see this in smaller sizes. I'm just going to be doing this for this one, not for the other ones. I'm also going to make the logo a little bit bigger because it's still not looking super good. I'll make the secondary text a little bit bigger as well. That's better, that's a little bit more legible. Now we can move on to the next one. Next, I'll make the skyscraper version. Same process here, but this one is more tall and skinny, so the line breaks will have to be a little bit different. Again, I'm going to have to make a different version of the background image that has a taller background. But that's something that I'll do off screen and Photoshop and then I'll come back and adjust everything. Now, once I'm happy with the final placement, now I have one horizontal version and one vertical version, so I can make those other horizontal and vertical versions according to the ones that I've already made. Now this is where it gets super fast. I can just make copies of our elements and make whatever adjustments I need for the different sizes. Even if you had 12 different sizes to make, once you have one vertical, one horizontal, one square, you can just crank them out super fast. Because basically it's the same structure, you're just making small adjustments. Once I have all my sizes, instead of using the Save for Web tool, I'm going to go to File, Export for Screens and this will allow me to export everything all at once. Now here, of course I don't need bleed this digital thing. I'm going to select the file where I want everything to be saved onto here on the Export too. I'll make sure that the file format is JPEG. JPEG 100 means that it saved at the highest quality possible, so no compression at all, which will ensure that our ad doesn't look pixelated or anything like that. I'll add a prefix to my filename. This is just the beginning of what I want my file name to be. I will unselect, create subfolders. I don't need that. Then I'm ready to go and export all artboards. I'll then look at the folder where everything is saved, as you can see here, my file names were automatically saved just as I wanted them to. The prefix that I set up was BCSPCA, which is the indicator of what this campaign is. Underscore the size of the file in pixels. I know just by looking at the file name, what size that ad is in. This was done automatically because I already set it up on my artboards. Which means that now I can take the same illustrator file and reuse it for other campaigns that I'll already have all the art boards named and set up. I can use that same file as a template for any other campaigns that I work on. Now just to make sure that everything was exported properly, I will go through each one of these files and look at each one of the ads to make sure that everything looks good. Let's go, take a look. I'm not loving the way the logo was rendered. Something fishy there, it looks pixelated. I think it's because this logo is actually in PNG and it might not have been the greatest quality PNG. I'm going to go back and make sure that I have a vector logo to work with. Then I'll export it once again. Now, I'll go through each file again. Once again make sure that everything looks good. I'll also keep an eye on the file size. A lot of the times the ad providers will ask that your files are not bigger than 150 kb each. They asked this just so that the ad loads as fast as possible once they're in the page. In this case in particular, this one file is a little bit too big. What I'm actually going to do is I'm going to go back into my Illustrator file. I'm going to hit Shift option Command S. I'm going to use the Save for Web tool instead of the Artboard Export. This tool is a legacy tool in Illustrator. Adobe I think is trying to phase it out. I don't use this tool to begin with because this way I cannot batch export my artboards, but this tool is still the best way to export JPEGs for the web that look good and they're nicely compressed. Adobe still has to fix some of the glitches on the other tool. Let's use this one for now to fix just this one ad and we'll be good to go.
11. Keep an eye on ad performance: Now, we're all done with the design process. Our files are ready to go and organized, so please upload them to the gallery so we can all see and take a look and comment on them. If you're actually taking this campaign live, this would be the time when we upload everything to the platform that we're using or send it to the agency that we're working with or however it is. However, the work doesn't really end once we upload things because we have to keep an eye on the performance of the ads. This might be you or this might be someone else in your team, but you need to make sure that your metrics are in place and they are what you expect. For example, two metrics that you may want to keep an eye on are click rate and conversions. Click rates basically mean how many times your ad was clicked on per view, whereas conversion rates are how many times a user has landed on your landing page and performed an action that you were looking for, like buying a product or signing up for a free trial or something like that. In the case of this campaign, a conversion rate would probably be donating to your cause if that's what you want them to do in your ad. If you and your team are not happy with the metrics that you're getting back, maybe it's time to take a second look at your ad or a second look at your landing page and see how they can be better. Maybe your ad isn't eye-catching enough, or maybe the messaging isn't clear enough, or maybe your landing page is a little bit too full of stuff, maybe you need to go minimal. Maybe you need to be more direct. Try and experiment and see what happens. Don't be afraid to A/B test. These are all things that come in the design process. Now, what I've talked so far may sound like one person's opinion, but I do have some facts to back it up with real life examples of campaigns that I've worked on. Let's take a look at a particular campaign that I worked for that wasn't performing so well and needed changes so that would get a better click rate and a better conversion rate. Here's the first design. It wasn't performing as well as we hoped. We looked at it again and we felt that there were three areas that could be improved. The colors weren't really eye-catching enough, the messaging wasn't very direct and effective and there were legibility problems in smaller sizes. Here you can see the redesign. We fixed those issues and soon saw our numbers rise to what the team expected to see. In the real world out there, don't be afraid to test your designs.
12. Conclusion: This brings us to the end of our class. Hopefully, you were able to learn the anatomy of a great art and what makes in engaging art campaign. If you've completed your project along with us, please share it in the gallery. I'm really excited to see what you've made. If you'd like to stay in touch with me, you can follow me on Instagram or email me. I'd be really happy to hear from you. Bye.
Juliana Sauvé, Marketing designer
