{"id":4909,"date":"2017-05-19T16:33:57","date_gmt":"2017-05-19T16:33:57","guid":{"rendered":"https:\/\/www.mobidea.com\/academy\/?p=4909"},"modified":"2018-05-16T16:54:27","modified_gmt":"2018-05-16T16:54:27","slug":"banner-design-ads","status":"publish","type":"post","link":"https:\/\/www.mobidea.com\/academy\/banner-design-ads\/","title":{"rendered":"Banner Design for Affiliate Marketing: The Definitive Guide"},"content":{"rendered":"<div class=\"mobid-before-content\" style=\"margin-top: 5px;margin-bottom: 5px;margin-left: auto;margin-right: auto;text-align: center;\" id=\"mobid-2184986081\"><div class=\"mobid-adlabel\">Advertisement<\/div><a data-no-instant=\"1\" href=\"https:\/\/www.mobidea.com\/academy\/recommends\/banner-placement-1\/\" rel=\"noopener nofollow\" class=\"a2t-link\" target=\"_blank\" aria-label=\"da\"><img src=\"https:\/\/www.mobidea.com\/academy\/wp-content\/uploads\/2022\/09\/da.gif\" alt=\"\"  class=\"no-lazyload\" width=\"730\" height=\"90\"   \/><\/a><\/div><p>Wanna learn how to create a killer\u00a0banner design for your ads but feel like you still don\u2019t have what it takes?<\/p>\n<p>No biggie!<\/p>\n<p>Time for you to get the tools you\u2019ll need to know and also get some amazing tips from me, David, one of the dopest members of Mobidea Crew\u2019s Design Team!<!--more--><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter ez-toc-transparent ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title ez-toc-toggle\" style=\"cursor:pointer\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.mobidea.com\/academy\/banner-design-ads\/#intro-to-banner-ads\" >Intro to Banner Ads<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.mobidea.com\/academy\/banner-design-ads\/#what-is-a-banner-ad\" >What is a Banner Ad?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.mobidea.com\/academy\/banner-design-ads\/#banner-ads-examples\" >Banner Ads Examples<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.mobidea.com\/academy\/banner-design-ads\/#how-to-use-banner-advertising-to-make-money\" >How to Use Banner\u00a0Advertising to Make Money?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.mobidea.com\/academy\/banner-design-ads\/#banner-size-%e2%80%93-whats-the-deal\" >Banner Size &#8211; What&#8217;s the Deal?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.mobidea.com\/academy\/banner-design-ads\/#banner-formats\" >Banner Formats<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.mobidea.com\/academy\/banner-design-ads\/#jpeg-files\" >JPEG Files<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.mobidea.com\/academy\/banner-design-ads\/#png-files\" >PNG Files<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.mobidea.com\/academy\/banner-design-ads\/#gif-files\" >GIF Files<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.mobidea.com\/academy\/banner-design-ads\/#choose-your-images-carefully\" >Choose Your Images Carefully<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.mobidea.com\/academy\/banner-design-ads\/#banner-design\" >Banner Design<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.mobidea.com\/academy\/banner-design-ads\/#conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"intro-to-banner-ads\"><\/span><strong>Intro to Banner Ads<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Are you a media buyer concerned with making the best banner of all time?<\/p>\n<p>A banner so hot it\u2019s gonna give you that sweet CTR which allows your campaign to be more effective, making sure it showcases phenomenal performances?<\/p>\n<p>Maybe you\u2019re just an affiliate marketer who wants to know more about how to make a killer banner.<\/p>\n<p>It doesn\u2019t matter!<\/p>\n<p>Why?<\/p>\n<p>Because today I\u2019m gonna show you how it\u2019s done!<\/p>\n<p>You\u2019re lucky, because I\u2019m part of Mobidea Crew\u2019s wicked Design Team and I\u2019m here to hook you up with some great tricks and tips.<\/p><div class=\"mobid-in-content-15-p\" style=\"margin-top: 26px;margin-bottom: 26px;\" id=\"mobid-4288676277\"><div class=\"mobid-adlabel\">Advertisement<\/div><a data-no-instant=\"1\" href=\"https:\/\/www.mobidea.com\/academy\/recommends\/semrush-v2\/\" rel=\"noopener nofollow\" class=\"a2t-link\" target=\"_blank\" aria-label=\"semrushtrialseo\"><img src=\"https:\/\/www.mobidea.com\/academy\/wp-content\/uploads\/2022\/09\/semrushtrialseo.gif\" alt=\"\"  class=\"no-lazyload\" width=\"728\" height=\"90\"  style=\"display: inline-block;\" \/><\/a><\/div>\n<p>Before you can become fully able to create a super appealing banner, you\u2019ll need to get to know some info.<\/p>\n<p>I\u2019m referring to such things as which font you should use, which colors can allow you to get a higher CTR, the most common banner dimensions and format specifications.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"what-is-a-banner-ad\"><\/span><strong>What is a Banner Ad?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>A banner ad is a common form of online advertising.<\/p>\n<p>Banner ads are generally used to attract traffic and their main goal is simple:<\/p>\n<p>To be appealing to users so they feel like clicking the banner &#8211; which is usually a specific promotion, such as an offer.<\/p>\n<p>If you\u2019re used to surfing the internet you\u2019ve come across banner ads.<\/p>\n<p>There\u2019s no doubt about that.<\/p>\n<p>Sometimes banners are so similar to the site interface you don\u2019t even realize you\u2019re looking at them.<\/p>\n<p>At other times, you look at one and it\u2019s clear that it\u2019s a banner.<\/p>\n<p>It all depends on the approach used on the communication, and on the quality of the design.<\/p>\n<p>There are banners with image and text, banners which are just an image, banners which only contain text, and even animated banners.<\/p>\n<p>Most of the the times, the most important part of the banner is the Call-to-Action (CTA) button that encourages users to take action.<\/p>\n<p>The action is usually clicking on the button, which will redirect users to a specific offer\/site\/landing page.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"banner-ads-examples\"><\/span><strong>Banner Ads Examples<\/strong><a href=\"https:\/\/academy.mobidea.com\/wp-content\/uploads\/2017\/06\/320X480_GEOBANNER_CPI_1.jpg\"><img decoding=\"async\" class=\"aligncenter wp-image-4465 size-medium\" src=\"https:\/\/academy.mobidea.com\/wp-content\/uploads\/2017\/06\/320X480_GEOBANNER_CPI_1-200x300.jpg\" alt=\"banner example 1\" width=\"200\" height=\"300\" \/><\/a><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a href=\"https:\/\/academy.mobidea.com\/wp-content\/uploads\/2017\/06\/320X480_GEOBANNER_CPI_3.jpg\"><img decoding=\"async\" class=\"aligncenter wp-image-4466 size-medium\" src=\"https:\/\/academy.mobidea.com\/wp-content\/uploads\/2017\/06\/320X480_GEOBANNER_CPI_3-200x300.jpg\" alt=\"banner example 2\" width=\"200\" height=\"300\" \/><\/a><\/p>\n<p><a href=\"https:\/\/academy.mobidea.com\/wp-content\/uploads\/2017\/06\/320X480_GEOBANNER_CPI.jpg\"><img decoding=\"async\" class=\"aligncenter wp-image-4467 size-medium\" src=\"https:\/\/academy.mobidea.com\/wp-content\/uploads\/2017\/06\/320X480_GEOBANNER_CPI-200x300.jpg\" alt=\"banner example 3\" width=\"200\" height=\"300\" \/><\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"how-to-use-banner-advertising-to-make-money\"><\/span><strong>How to Use Banner\u00a0Advertising to Make Money?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Before starting to refer to the technical specifications, there\u2019s one big elephant in the room.<\/p>\n<p>This is something that I really need to make clear to you guys: a good banner is a combination of different factors, such as the banner\u2019s design, the banner\u2019s target, and its specific content.<\/p>\n<p>The latter point is hyper important.<\/p>\n<p>You should always think about where users are gonna be led to after they click the banner, designing your creative bearing its specific destination in mind.<\/p>\n<p>Taking this into account, you should also know that making money using banners isn\u2019t an exact science.<\/p>\n<p>The same banner &#8211; used in different circumstances &#8211; can have varying performances.<\/p>\n<p>Sometimes, a very small change on the banner can really improve its performance.<\/p>\n<p><em><strong>Related Content: <a href=\"https:\/\/www.mobidea.com\/academy\/banners-tips-improve-performance\/\">Banners: Tips to Improve Campaign Performance<\/a><\/strong><\/em><\/p>\n<p>So this is really a trial and error process based on a whole lotta testing.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"banner-size-%e2%80%93-whats-the-deal\"><\/span><strong>Banner Size &#8211; What&#8217;s the Deal?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Now let\u2019s get technical! Time to dive in and refer to banner sizes.<\/p>\n<p>There are some common sizes you should really know about.<\/p>\n<p>If you\u2019re working with the mainstream industry, the banner dimensions\u00a0are 320 x 50 px, 300 x 250 px, and 320 x 480 px.<\/p>\n<p>If you\u2019re working with adult content, you\u2019ll be working with 300 x 250 px and 300 x 100 px.<\/p>\n<p>Those sizes are a standard so you can find them across the web.<\/p>\n<p>Remember: you\u2019re mostly working for mobile devices.<\/p>\n<p>You should always bear that in mind when designing the banner.<\/p>\n<p>Even if you\u2019re creating your banner on a desktop computer &#8211; which you probably are &#8211; try to visualize your design and think about it being seen on a smartphone screen.<\/p>\n<p>And if you wanna check how the banner would really look on a smartphone, you can use an emulator, such as the <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/ripple-emulator-beta\/geelfhphabnejjhdalkjhgipohgpdnoc\">Ripple emulator<\/a>.<\/p>\n<p>Designing banners for mobile also means that you\u2019ve gotta think about the size of your banner.<\/p>\n<p>You don\u2019t wanna have a heavy banner, because that\u2019ll influence the loading speed and the user experience.<\/p>\n<p>That being said, try to make sure the size is lower than 800 kb.<\/p>\n<p>How to be certain that your banner doesn\u2019t cross that line?<\/p>\n<p>You\u2019ll need to take advantage of an awesome invention: compressed files.<\/p>\n<p>The best and most popular ones are .JPG (also known as .JPEG) .PNG, and .GIF (the latter is used for animated banners.)<\/p>\n<h2><span class=\"ez-toc-section\" id=\"banner-formats\"><\/span><strong>Banner Formats<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"jpeg-files\"><\/span><strong>JPEG Files<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The .JPEG format is the most popular file type used for banners on the internet.<\/p>\n<p>It\u2019s the perfect solution to use when you\u2019re working with photographs or complex images containing gradients, lots of colors or shadows.<\/p>\n<p>Besides having a huge color palette, JPEGs usually give you a file that\u2019s got the right size (under 200kb.)<\/p>\n<p>JPEGs also allow you to adjust your banner\u2019s quality.<\/p>\n<p>You can opt to go for high or low quality, letting you tweak your banner\u2019s final size according to your needs.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"png-files\"><\/span><strong>PNG Files<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Another popular file format is PNG, which can be divided between the PNG-8 and the PNG-24.<\/p>\n<p>The PNG-8 is smaller than the PNG-24, but is limited to a palette of 256 colors, which won\u2019t be a good option if you\u2019ve got a complex banner with lots of colors.<\/p>\n<p>PNG-24 has a more diverse color palette.<\/p><div class=\"mobid-in-content-15-p_2-2\" style=\"margin-top: 26px;margin-bottom: 26px;\" id=\"mobid-712840271\"><div class=\"mobid-adlabel\">Advertisement<\/div><a data-no-instant=\"1\" href=\"https:\/\/www.mobidea.com\/academy\/recommends\/semrush-v1\/\" rel=\"noopener nofollow\" class=\"a2t-link\" target=\"_blank\" aria-label=\"backlinks\"><img src=\"https:\/\/www.mobidea.com\/academy\/wp-content\/uploads\/2021\/03\/PD-970x250-Discover-backlinks-faster-than-ever-1.png\" alt=\"\"  srcset=\"https:\/\/www.mobidea.com\/academy\/wp-content\/uploads\/2021\/03\/PD-970x250-Discover-backlinks-faster-than-ever-1.png 970w, https:\/\/www.mobidea.com\/academy\/wp-content\/uploads\/2021\/03\/PD-970x250-Discover-backlinks-faster-than-ever-1-250x52.png 250w, https:\/\/www.mobidea.com\/academy\/wp-content\/uploads\/2021\/03\/PD-970x250-Discover-backlinks-faster-than-ever-1-700x144.png 700w, https:\/\/www.mobidea.com\/academy\/wp-content\/uploads\/2021\/03\/PD-970x250-Discover-backlinks-faster-than-ever-1-768x158.png 768w, https:\/\/www.mobidea.com\/academy\/wp-content\/uploads\/2021\/03\/PD-970x250-Discover-backlinks-faster-than-ever-1-120x25.png 120w\" sizes=\"(max-width: 970px) 100vw, 970px\" class=\"no-lazyload\" width=\"970\" height=\"200\"  style=\"display: inline-block;\" \/><\/a><\/div>\n<p>This is gonna mean a higher quality compared to the PNG-8.<\/p>\n<p>However, it\u2019ll also mean you get a much larger file.<\/p>\n<p>The main difference between .JPG and .PNG files is that .PNG allows you to use transparent backgrounds.<\/p>\n<p>You should take this info into account in case you wanna reveal a specific background detail of your site.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"gif-files\"><\/span><strong>GIF Files<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>What about .GIF files?<\/p>\n<p>.GIF is a format used specifically for documents with moving images.<\/p>\n<p>If you wanna create an animated banner ad, this is the format you\u2019ll be working with.<\/p>\n<p>Here&#8217;s an example:<a href=\"https:\/\/academy.mobidea.com\/wp-content\/uploads\/2017\/06\/320X480_GEOBANNER_CPI-1.gif\"><img decoding=\"async\" class=\"aligncenter wp-image-4468 size-medium\" src=\"https:\/\/academy.mobidea.com\/wp-content\/uploads\/2017\/06\/320X480_GEOBANNER_CPI-1-200x300.gif\" alt=\"banner gif\" width=\"200\" height=\"300\" \/><\/a><\/p>\n<p>The more complex your animation, the bigger your file will be.<\/p>\n<p><strong>BEWARE:<\/strong> high-quality GIFs mean large files, which will have a slow loading speed.<\/p>\n<p>This cruel fact will be quite obvious in case you\u2019re surfing the web on mobile.<\/p>\n<p>GIF\u2019s coolest advantage (compared to the other formats) is the possibility to contain more content, since you can distribute the info among different frames.<\/p>\n<p>Animated banners can be an interesting tool to promote your offer, but you should be careful about your banner\u2019s length: if your banner is too long, the user may lose interest and will eventually only see half of it!<\/p>\n<h2><span class=\"ez-toc-section\" id=\"choose-your-images-carefully\"><\/span>Choose Your Images Carefully<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The images you use on your banner ad are as important as the banner\u2019s structure.<\/p>\n<p>These pics should really have that awesome quality that makes users go nuts!<\/p>\n<p>Indeed, that quality is gonna be relevant, since it\u2019ll obviously help attract more potential users.<\/p>\n<p>You should always pick professional images which look clear.<\/p>\n<p>You need to stay away from blurred images, since they\u2019ll be avoided by users, who\u2019ll obviously decide to click another banner which looks better than yours.<\/p>\n<p>Try to pick dynamic pictures that match the content you\u2019re promoting.<\/p>\n<p>This will give credibility to your banner, as well as reinforce the message you\u2019re trying to go for.<\/p>\n<p><strong>Pro tip:<\/strong> choose pictures with a good contrast in terms of colors.<\/p>\n<p>Search for free pics on Stock photos sites.<\/p>\n<p>There are a few which are very good and free to use in a commercial context.<\/p>\n<p><strong>My\u00a0top stock sites:<\/strong><\/p>\n<ul style=\"list-style-type: disc;\">\n<li><a href=\"https:\/\/www.pexels.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Pexels<\/a><\/li>\n<li><a href=\"https:\/\/unsplash.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Unsplash<\/a><\/li>\n<li><a href=\"https:\/\/www.canva.com\/photos\/\">Canva<\/a><\/li>\n<li><a href=\"https:\/\/stocksnap.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">StockSnap<\/a><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"banner-design\"><\/span>Banner Design<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The crucial principle of contrast mentioned above should also be applied to the different elements of your banner such as typography, shapes, colors, and the size of the elements.<\/p>\n<p>If you always bear this in mind, the user will have a better visual experience since it becomes easier to check the different elements in the banner.<\/p>\n<p>A good banner with a clear contrast will also help you stand tall against your direct competition.<\/p>\n<p>Moreover, you should never forget that your banner needs to be designed bearing the platform where it\u2019s gonna be showcased in mind.<\/p>\n<p>Try getting a feel of the website\/app where you wanna display the banner.<\/p>\n<p>This will allow you to adjust, adapt and come up with something really special and perfect for that particular spot!<\/p>\n<p>How to make sure your creatives are gonna fit in?<\/p>\n<p>Use similar colors, similar typefaces and &#8211; if necessary &#8211; the same type of images shown on the website.<\/p>\n<p>Check this example to understand what I mean:<\/p>\n<p><a href=\"https:\/\/academy.mobidea.com\/wp-content\/uploads\/2017\/06\/Capturar.jpg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-4456\" src=\"https:\/\/academy.mobidea.com\/wp-content\/uploads\/2017\/06\/Capturar.jpg\" alt=\"banner ad example 1\" width=\"1004\" height=\"477\" \/><\/a><\/p>\n<p>On the example above, the banner\u2019s designer had one obvious concern:<\/p>\n<p>To design the banner specifically for this website.<\/p>\n<p>This will make sure you\u2019ll get more people to actually click the banner, since they can be tricked and led to believe the banner is part of the website.<\/p>\n<p>Be like the chameleon and you shall succeed!<\/p>\n<p>Now let\u2019s check the exact same website with the same banner.<\/p>\n<p>What\u2019s new?<\/p>\n<p>The color is different!<\/p>\n<p><a href=\"https:\/\/academy.mobidea.com\/wp-content\/uploads\/2017\/06\/Capturar2.jpg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-4457\" src=\"https:\/\/academy.mobidea.com\/wp-content\/uploads\/2017\/06\/Capturar2.jpg\" alt=\"banner ads example 2\" width=\"1004\" height=\"477\" \/><\/a><\/p>\n<p>This proves that &#8211; just by creating a banner of a different color &#8211; you can have a totally different result.<\/p>\n<p>What\u2019s gonna happen?<\/p>\n<p>Users will now check this banner and they\u2019ll feel like it doesn\u2019t fit in.<\/p>\n<p>It seems strange.<\/p>\n<p>The colors have got nothing to do with the website!<\/p>\n<p>Now imagine this scenario: a user walks in, opens the door, and checks this image.<\/p>\n<p>What are they gonna think?<\/p>\n<p>That it makes no sense and looks weird, like something that doesn\u2019t belong. Users will definitely hesitate and think twice before clicking, since they\u2019ll surely know that this image is gonna be a trampoline which will redirect them to a whole other page.<\/p>\n<p><em><strong>Related Content:\u00a0<a href=\"http:\/\/www.mobidea.com\/academy\/misleading-banners-vs-non-misleading-banners\">The Difference Between Misleading Banners and Non-Misleading Banners<\/a><\/strong><\/em><\/p>\n<p>This example also showcases the importance of choosing the right color when creating your banner, since it can also really influence how clear\/unclear the words contained on the banner are gonna be.<\/p>\n<p>Got any doubts?<\/p>\n<p>Feel like you can\u2019t really tell whether or not your banner has great or awful legibility?<\/p>\n<p>Here\u2019s a cool technique that can help you: close your eyes to 85% and try to distinguish the text from the background.<\/p>\n<p>If you can\u2019t distinguish one from the other then you\u2019ve got a problem, mister!<\/p>\n<p>What to do?<\/p>\n<p>You\u2019ve gotta get back to the drawing board!<\/p>\n<p>Check what you\u2019ve gotta do in order to improve your banner\u2019s legibility.<\/p>\n<p>Why is legibility so hard to get right?<\/p>\n<p>Because there may be a lack of contrast between the luminosity of the banner and the color of the typography.<\/p>\n<p>Take a good look at this example to understand what I mean:<\/p>\n<p><a href=\"https:\/\/academy.mobidea.com\/wp-content\/uploads\/2017\/06\/Untitled-1.jpg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-4460\" src=\"https:\/\/academy.mobidea.com\/wp-content\/uploads\/2017\/06\/Untitled-1.jpg\" alt=\"banner design example\" width=\"1200\" height=\"627\" \/><\/a><\/p>\n<p>The banner is well designed, no doubt about it.<\/p>\n<p>Even so, it lacks something in terms of good legibility.<\/p>\n<p>What about visual hierarchy?<\/p>\n<p>Shoddy, to say the least.<\/p>\n<p>The call-to-action button should be way clearer to the user, in order for them to click like crazy!<\/p>\n<p>Check this out:<\/p>\n<p><a href=\"https:\/\/academy.mobidea.com\/wp-content\/uploads\/2017\/06\/Untitled-2.jpg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-4461\" src=\"https:\/\/academy.mobidea.com\/wp-content\/uploads\/2017\/06\/Untitled-2.jpg\" alt=\"banner design example 2\" width=\"1200\" height=\"627\" \/><\/a><\/p>\n<p>In order for me to be able to explain this to you, I\u2019ve changed the banner a bit.<\/p>\n<p>I\u2019ve kept the elements smooth and minimal while really improving legibility.<\/p>\n<p>In order to keep the main text (\u201cOcula\u201d) white, I applied a blue layer with some transparency over the image, which allows me to have the background image visible, as well as the text legible.<\/p>\n<p>In order to make sure I wouldn\u2019t have to change the color of the word \u201cOcula\u201d I decided to apply a blue layer.<\/p>\n<p>It\u2019s got a bit of transparency over the image, since this technique allows me to have both a clear background and text.<\/p>\n<p>To wrap it up, I changed the call-to-action button to a more appealing one.<\/p>\n<p>This is super important, since this is the part of the banner where the user is gonna click.<\/p>\n<p>Easy!<\/p>\n<p>The best way for you to know how to design great banners is to put yourself in the user\u2019s shoes.<\/p>\n<p>In which type of banner would you click?<\/p>\n<h2><span class=\"ez-toc-section\" id=\"conclusion\"><\/span><strong>Conclusion<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>When designing your banner, never forget about the following 4 Banner Ad\u00a0Rules:<\/p>\n<ol>\n<li>Choose a typeface with good legibility<\/li>\n<li>Try to have a nice contrast between the written text and the banner\u2019s background<\/li>\n<li>Choose professional, sharp images<\/li>\n<li>Always have a clear Call-to-Action button on the banner. If possible, use intense and appealing colors. This is crucial for you to be able to create an engaging experience between the user and the banner.<\/li>\n<\/ol>\n<p>And that\u2019s all for now!<\/p>\n<p>Keep reading Mobidea Academy articles because we\u2019re gonna continue featuring some cool design posts that you just can\u2019t miss!<\/p>\n<p><span style=\"font-size: 14pt;\"><strong>See Also:<\/strong><\/span><\/p>\n<ul style=\"list-style-type: disc;\">\n<li><a href=\"https:\/\/www.mobidea.com\/academy\/banners-tips-improve-performance\/\">Banners: Tips To Improve Campaign Performance<\/a><\/li>\n<li><a href=\"https:\/\/www.mobidea.com\/academy\/misleading-banners-vs-non-misleading-banners\/\">The Difference Between Misleading Banners and Non-Misleading Banners<\/a><\/li>\n<li><a href=\"https:\/\/www.mobidea.com\/academy\/banner-ad-copy-different-languages\/\">How to Write Banner Ad Copy in Different Languages<\/a><\/li>\n<\/ul>\n<div class=\"mobid-after-content\" style=\"margin-top: 5px;margin-bottom: 5px;margin-left: auto;margin-right: auto;text-align: center;\" id=\"mobid-582460185\"><div class=\"mobid-adlabel\">Advertisement<\/div><a data-no-instant=\"1\" href=\"https:\/\/www.mobidea.com\/academy\/recommends\/banner-placement-2\/\" rel=\"noopener nofollow\" class=\"a2t-link\" target=\"_blank\" aria-label=\"da\"><img src=\"https:\/\/www.mobidea.com\/academy\/wp-content\/uploads\/2022\/09\/da.gif\" alt=\"\"  class=\"no-lazyload\" width=\"730\" height=\"90\"   \/><\/a><\/div>","protected":false},"excerpt":{"rendered":"Wanna learn how to create a killer\u00a0banner design for your ads but feel like you still don\u2019t have what it takes? No biggie! Time for you to get the tools you\u2019ll need to know and also get some amazing tips from me, David, one of the dopest members of Mobidea Crew\u2019s Design Team!","protected":false},"author":44,"featured_media":4910,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8972],"tags":[174,190,204,205,224],"learning_paths":[3825],"class_list":["post-4909","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guides-tutorials","tag-banners","tag-ctr","tag-making-money","tag-media-buying","tag-tips","learning_paths-banner"],"translation":{"provider":"WPGlobus","version":"3.0.0","language":"en","enabled_languages":["en","ru"],"languages":{"en":{"title":true,"content":true,"excerpt":false},"ru":{"title":false,"content":false,"excerpt":false}}},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.1 (Yoast SEO v26.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Banner Design for Affiliate Marketing: The Definitive Guide<\/title>\n<meta name=\"description\" content=\"Want to learn how to create killer banner ads? Check this article with tips from the industry gurus and become a banner design machine!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.mobidea.com\/academy\/banner-design-ads\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Banner Design for Affiliate Marketing: The Definitive Guide\" \/>\n<meta property=\"og:description\" content=\"Want to learn how to create killer banner ads? Check this article with tips from the industry gurus and become a banner design machine!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.mobidea.com\/academy\/banner-design-ads\/\" \/>\n<meta property=\"og:site_name\" content=\"Mobidea Academy\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Mobidea\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-19T16:33:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-05-16T16:54:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.mobidea.com\/academy\/wp-content\/uploads\/2017\/06\/banner_design.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"844\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"David Monteiro\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@mobacademy\" \/>\n<meta name=\"twitter:site\" content=\"@Mobideanews\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.mobidea.com\/academy\/banner-design-ads\/\",\"url\":\"https:\/\/www.mobidea.com\/academy\/banner-design-ads\/\",\"name\":\"Banner Design for Affiliate Marketing: The Definitive Guide\",\"isPartOf\":{\"@id\":\"https:\/\/www.mobidea.com\/academy\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.mobidea.com\/academy\/banner-design-ads\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.mobidea.com\/academy\/banner-design-ads\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.mobidea.com\/academy\/wp-content\/uploads\/2017\/06\/banner_design.jpg\",\"datePublished\":\"2017-05-19T16:33:57+00:00\",\"dateModified\":\"2018-05-16T16:54:27+00:00\",\"author\":{\"@id\":\"https:\/\/www.mobidea.com\/academy\/#\/schema\/person\/7d1735f37436ed5fe345d558550b1d9c\"},\"description\":\"Want to learn how to create killer banner ads? Check this article with tips from the industry gurus and become a banner design machine!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.mobidea.com\/academy\/banner-design-ads\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.mobidea.com\/academy\/banner-design-ads\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.mobidea.com\/academy\/banner-design-ads\/#primaryimage\",\"url\":\"https:\/\/www.mobidea.com\/academy\/wp-content\/uploads\/2017\/06\/banner_design.jpg\",\"contentUrl\":\"https:\/\/www.mobidea.com\/academy\/wp-content\/uploads\/2017\/06\/banner_design.jpg\",\"width\":1500,\"height\":844,\"caption\":\"banner design for ads\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.mobidea.com\/academy\/banner-design-ads\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.mobidea.com\/academy\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Banner Design for Affiliate Marketing: The Definitive Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.mobidea.com\/academy\/#website\",\"url\":\"https:\/\/www.mobidea.com\/academy\/\",\"name\":\"Mobidea Academy\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.mobidea.com\/academy\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.mobidea.com\/academy\/#\/schema\/person\/7d1735f37436ed5fe345d558550b1d9c\",\"name\":\"David Monteiro\",\"description\":\"David Monteiro is part of Mobidea's cool Design Team! His passion for the highest arts and his crazy banner-creation skills have led him to be chosen as a Mobidea Academy expert in Design-related matters. Reading his well-crafted articles is like getting to study at a fancy art school so take advantage of his banner knowledge and then learn how to bring the best creatives to life to monetize faster like a master!\",\"sameAs\":[\"https:\/\/x.com\/mobacademy\"],\"url\":\"https:\/\/www.mobidea.com\/academy\/author\/david-monteiro\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Banner Design for Affiliate Marketing: The Definitive Guide","description":"Want to learn how to create killer banner ads? Check this article with tips from the industry gurus and become a banner design machine!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.mobidea.com\/academy\/banner-design-ads\/","og_locale":"en_US","og_type":"article","og_title":"Banner Design for Affiliate Marketing: The Definitive Guide","og_description":"Want to learn how to create killer banner ads? Check this article with tips from the industry gurus and become a banner design machine!","og_url":"https:\/\/www.mobidea.com\/academy\/banner-design-ads\/","og_site_name":"Mobidea Academy","article_publisher":"https:\/\/www.facebook.com\/Mobidea\/","article_published_time":"2017-05-19T16:33:57+00:00","article_modified_time":"2018-05-16T16:54:27+00:00","og_image":[{"width":1500,"height":844,"url":"https:\/\/www.mobidea.com\/academy\/wp-content\/uploads\/2017\/06\/banner_design.jpg","type":"image\/jpeg"}],"author":"David Monteiro","twitter_card":"summary_large_image","twitter_creator":"@mobacademy","twitter_site":"@Mobideanews","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.mobidea.com\/academy\/banner-design-ads\/","url":"https:\/\/www.mobidea.com\/academy\/banner-design-ads\/","name":"Banner Design for Affiliate Marketing: The Definitive Guide","isPartOf":{"@id":"https:\/\/www.mobidea.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.mobidea.com\/academy\/banner-design-ads\/#primaryimage"},"image":{"@id":"https:\/\/www.mobidea.com\/academy\/banner-design-ads\/#primaryimage"},"thumbnailUrl":"https:\/\/www.mobidea.com\/academy\/wp-content\/uploads\/2017\/06\/banner_design.jpg","datePublished":"2017-05-19T16:33:57+00:00","dateModified":"2018-05-16T16:54:27+00:00","author":{"@id":"https:\/\/www.mobidea.com\/academy\/#\/schema\/person\/7d1735f37436ed5fe345d558550b1d9c"},"description":"Want to learn how to create killer banner ads? Check this article with tips from the industry gurus and become a banner design machine!","breadcrumb":{"@id":"https:\/\/www.mobidea.com\/academy\/banner-design-ads\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.mobidea.com\/academy\/banner-design-ads\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mobidea.com\/academy\/banner-design-ads\/#primaryimage","url":"https:\/\/www.mobidea.com\/academy\/wp-content\/uploads\/2017\/06\/banner_design.jpg","contentUrl":"https:\/\/www.mobidea.com\/academy\/wp-content\/uploads\/2017\/06\/banner_design.jpg","width":1500,"height":844,"caption":"banner design for ads"},{"@type":"BreadcrumbList","@id":"https:\/\/www.mobidea.com\/academy\/banner-design-ads\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.mobidea.com\/academy\/"},{"@type":"ListItem","position":2,"name":"Banner Design for Affiliate Marketing: The Definitive Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.mobidea.com\/academy\/#website","url":"https:\/\/www.mobidea.com\/academy\/","name":"Mobidea Academy","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.mobidea.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.mobidea.com\/academy\/#\/schema\/person\/7d1735f37436ed5fe345d558550b1d9c","name":"David Monteiro","description":"David Monteiro is part of Mobidea's cool Design Team! His passion for the highest arts and his crazy banner-creation skills have led him to be chosen as a Mobidea Academy expert in Design-related matters. Reading his well-crafted articles is like getting to study at a fancy art school so take advantage of his banner knowledge and then learn how to bring the best creatives to life to monetize faster like a master!","sameAs":["https:\/\/x.com\/mobacademy"],"url":"https:\/\/www.mobidea.com\/academy\/author\/david-monteiro\/"}]}},"_links":{"self":[{"href":"https:\/\/www.mobidea.com\/academy\/wp-json\/wp\/v2\/posts\/4909","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mobidea.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mobidea.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mobidea.com\/academy\/wp-json\/wp\/v2\/users\/44"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mobidea.com\/academy\/wp-json\/wp\/v2\/comments?post=4909"}],"version-history":[{"count":12,"href":"https:\/\/www.mobidea.com\/academy\/wp-json\/wp\/v2\/posts\/4909\/revisions"}],"predecessor-version":[{"id":14305,"href":"https:\/\/www.mobidea.com\/academy\/wp-json\/wp\/v2\/posts\/4909\/revisions\/14305"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mobidea.com\/academy\/wp-json\/wp\/v2\/media\/4910"}],"wp:attachment":[{"href":"https:\/\/www.mobidea.com\/academy\/wp-json\/wp\/v2\/media?parent=4909"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mobidea.com\/academy\/wp-json\/wp\/v2\/categories?post=4909"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mobidea.com\/academy\/wp-json\/wp\/v2\/tags?post=4909"},{"taxonomy":"learning_paths","embeddable":true,"href":"https:\/\/www.mobidea.com\/academy\/wp-json\/wp\/v2\/learning_paths?post=4909"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}