Designing Effective Banner Ads

1. Introduction: Hi, Antonio Garcia, and welcome to designing effective plan rods in this class will look at the best practices of design on engaging message. Could use off typography and color a strong call to action and clean the sign. Follow along while I show you real examples to visually reinforced every point, you will be able to play these best practices to any type of banner ad. Whether ecstatic automated UNWTO ads use for social media websites, bloods or landing pages for the class project, I created a band, A Rod for my favorite beverage with Adam before the shop Who ate your own by applying the tapes, you'll learn in this class unshared in the past. Forget, let's get started. 2. Important Points Before Design: even though these class focuses on the sand best practices I wanted to point out to in factors that should have been defined before jumping to the resign. What's the goal of your advertising campaign to bring more visitors to your side, to generate brand awareness to inform about a certain sale on who's your target audience? Are they a potential according consumers? What your audience demographics? That's age, gender, ethnicity, location, income, marital status. Under psychographic information. These are more personal characteristics like interests, personality, hobbies, values, lifestyle, attitude to behavior. After having all these defined, you'll be a step closer to achieving an effective online campaign on Remember Arts are no justice sign. There should be a strategy behind them. Now let's take a look at the best practices of design. 3. Keeping the Design Simple: we Newman is the sign is taking over. Understand reason why it removes unnecessary to be able to focus on what needs to be there , since our goal is to engage your target audience and make them click are odd are the signs should be as clean as possible? If there's too much going on, it will confuse your audience on. This is a good example. The Saudi So BC I want to Sue Me may look a little glory. There's too much copy, which is also not eligible on the call to action gets lost. You see, the logo is the standard focal point. Instead of the call to action, the lower should be a smaller on there are too cold to actions register now and call for an additional discount. There should only be one city a with shorter copy on a different color to make it stand out . Just because there's plenty space in the ad doesn't mean you have to fill it up on the same with the size of the graphic elements. Don't make them larger just to fill up the space, respect the white space and learn to love it 4. Message and Typography: your hearts message is a key part of the design. Look at these are the message is so clever? Work closely with a copywriter to create a strong message. I would also make it fit within the space, since there isn't much room to work with. If you're working solo, try to be as creative as possible. Who searched your competitors on? Look for Arts online for inspiration. Text ads with Killer copy A nice typography comes as effective as arts with images on This is a good example. These are has many things going right. Besides the copy, which is short into the point, it's given the cold toe action prominence and use in a bowl background color Legibility is also very important. The tax shouldn't be hard to read. It must be instantly readable, since the poor post often are is to take you to a landing page or website to make you do a certain action. There's no need to cram the ad with copy. Be concise and to the point. You don't want to over stimulate your audience. The landing page of websites. You provide enough information about the product or the service you're offering. Use on serve typography and stay away from course of funds is crypt bonds theocratic funds Extremely thin phones, all uppercase copy except for the button, or is smaller than 12 point phones. Unless he's a disclaimer or copyright notice. Off course, the phone size will depend on the phone you use. The typeface is I use the most are Helvetica and Avenir. 5. Imagery: We are so saturated with media that being direct, it's essential to grab your audience attention. Use a powerful image that will catch the attention of make them stop and read where you have to offer, but use imagery only when you need it on a stay away from abstract concepts. A bull background color cumbias Effective Now there are two main ways you can use an image as a background for the entire odd. If you take this route, make sure there's enough contrast, so the copy doesn't get lost or is hard to read. Plays the text in the darker or lighter areas of the image. On that, Joseph funds color accordingly. Another option would be to use the color overlay over the background photo. It will make it easier they you know, the rest of the ad using an isolated image for a product or service. These acts can also be easier to lay out because, you know, limited to the empty space available in the background image. If you are designing an ad with a white background, other border one point stroke is usually enough. I use the shape to London for a shop, so if you. Are you saying, Why does the background color for your ad, like the shape tool, draw the shape? I don't really use this panel, so let me close that now. Select the layer with a shape. I'm president later you. It would bring out the menu on the top knowledge. Choose white or no feel for the background color, one point a stroke and this shoes a light gray for the stroke color. Infographics or vector graphics are also an effective way to show certain information of services. They should be a dominant logo in your are but not as dominant as the value proposition or the call to action. If you are designing an ad for Facebook or Twitter, for example, there's no need for the local Toby on the ad because it already appears right above the image. 6. Call-to-Action (CTA): the call to action is the most important element off your ad is where you want your audience to do so, it has to attract the attention and persuade him to take action. It should be a standout focal point. Place it after the main copier, the headline and in contrasting colors. Let's look at this hour from Solarcity, for example. The ad looks great. The design is clean, a simple but the city A blends in too much. Now let's change the bottom color. So, like the shape tool, let's draw the button shape and I'm going to choose a red. So double click on the layer and let me choose Red. No, let's say like the type tool. And let's write the copy for the Buckman. Let me change the color toe white. Go on, let me make it fit. Now look at the difference. Also have enough contrast that the copying the button doesn't get lost. It should be instantly readable. One of the most cover mistakes is just young people know what to do, so be very clear about what action you want them to take. Language place a huge effect on conversion drive for simple clear language that inspires uses to take action. White spaces social, important element in giving your call to action the attention it deserves. Beauty anaesthetics should not be compromised, so the city is should be effective and in your face, but yet pleasing to the eye. 7. Color: color is the first thing notice in an ad and is one of the most powerful methods off the sign. According to Kiss Metrics, 85% of shoppers place color as a primary reason for wide by a particular product. So to choose the best colors for your banner ad, you should know who your target audience is. Since colors can be subjective on the feelings that color might evoke will depend on the person's life experiences and cultural differences. When designing your ad, think about the message or the emotions you want to convey. Bright and warm colors can evoke feelings of happiness, optimism on energy, but they could also evoke hostility and hunger. Cool colors evoke feelings off comfort, communists and peace, but can also expressed sadness. Neutral colors are flexible and served to put focus on other colors or toned down colors that might be overpowering. Two scholars to create contrast on Make the call to action to stand out on a stick to a combination off 2 to 3 colors because using too many come may cannot confusing and hard to understand 8. Animated Banner Ads: There are three types of animated arts. Flash Jeeves on HTML five. Flash hearts are mostly extinct, so I wouldn't recommend wasting your time. Jeeves are like static banners with changing slides. They are supported by all kinds of devices on. They don't need a plugging like flash shots. Do they are good when you want to showcase more products? HTML. Five works on any browser and device and allows you to create responsive banner ads. Animations on transitions are smoother than Jif banners. There's research pointing on aesthetic ads. Have any higher click through rate an animated ones one off? The reasons behind it is that animated ads don't get to the call to action quickly enough. The build up to the city a can last as long as 30 seconds, but if executed properly, they can work well. If you are creating an animated banner ad, you can do one of the following. Do a simple animation of 15 seconds or less with three frames and want to know loops and place the call to action on logo in the last frame. Another option would be to create an ad with a subtle animation on a study copy meaning the value proposition on the call to action will appear throughout entire animation. What's important is to stay with from those irritating animated banners. The animation shouldn't be struck from the message. 9. Exporting for Web: some publishers have restrictions regarding they add file size because the bigger a banner file is the heavier and slower to download that webpage will be. So try to stay below 150 kilobytes for both ecstatic and animated adds. To save an ecstatic add flat in the image. So go to the menu in the years panel in twos, flatten image and then go to file export, say for Web Here, you can see the size off the ad so, like J. Peg and select the compression quality that will bring the ad below 150 babies. One click save I usually designed animated ads with for the shop, so to save it as achieve, go to file export Safe a Web and select GF. And for the maximum number off colors, let's choose 256. This is the file size and click. See 10. Class Project: for the class project, you will create a banner at with Adobe for the shop for your favorite beverage. Following the tips. Kofler in this class feel free to use their elements up. Used to design my ad, you'll find them in the class product top. So I'm going to the sign. An act for simply orange, mostly a water drinker, so to know, look boring and going to choose my favorite round of orange peels, considering that's no boring. So these are the most popular Bonner out. Size is. These are not for social media. The best performing one is the 300 by 250 pixels, so I'm going to use that size for my odd. So let's goto file new. There's do 300 by 250. A solution 72. Call a remote RGB because these hat size is small and going to make it three times larger so you guys can see it better, So that will be 900 by 750 pixels and click OK, there are two images I'm going to use. I'm going to use these one for the background image on these one for the product Please don't stretch the images like I'm doing here. I grab them from the Internet just for these exercise of the resolution. Wasin grades. So in real life, please always a start with a good resolution image. So, like the text tool click on Drug to create a text field. Let's write the headline. Select to San Serve typography. Let Mika with Helvetica new and a justice size under leading. Now let's create a call to action. So, like the shape toe on, draw the button that will creek on the layer to bring out the color picker. Let me get the I drop to pick a color within the image to see if it works. Okay, works. Now let's tie the button. Copy. I'm going to reduce the size and change the color white. Select the direct selection tool to modify the shape, and then you organize thes layers. That's the city A and that's the imagery folder. Then listen well to see how it looks more. I'm going to clean up the background a little bit so critical your mosque and select is so brush. You can change the burst size by person, the bracket keys that would make the headline on the button. Stand out more Now I'm going to create a shudder for the Jews bottle. So creating new layer like the brush that's use black was the color under placate the shadow layer. So to the bottom shadow layer, I'm going to be with emotion. Blur effect. Um, you reduce your pussy too Un reduced capacity. Also in the top shadow layer, I remove some of the shadow access. I'm going to change the headlines color to green. So, like the drop on them Get this cream from the bottle. This way, they I will look more uniform and that's it. Bulls. You're awesome at to the class project. If you are working on an ad not related to this class and would like my feet back, go ahead and post it to I can't wait to see them