Design a Series of Smart Banner Ads in Photoshop


With the continuous growth of the Internet, online marketing has gotten bigger every year, and along with it, the advertising industry. One major factor in all this craziness is buying and selling ads.

Now, it takes time to make a successful ad. One that would get you lots of visitors and a high conversion rate depends on how well it caters to a specific audience and how clear and to the point its message is. But let's not forget: before a user can read an actual banner it's important to see it and be drawn to it. That's where we, web designers, come in. Our job is to make a strong first impression and then deliver the message in a visual manner that's easy to understand and to the point.

So, join me in this "lengthy" quick tip as I show you some basic elements of an ad banner and then demonstrate how to design a banner set for a web hosting company.

Note: I initially anticipated this to be a quick tip, but things kind of got out of control and I ended up making a longer video. I just hope the surplus information will come in handy :)

Part 1: Introduction

Don't like ads? Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!

Part 2: Designing the Banners

Don't like ads? Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!

Good Practices

Some good practices to keep in mind when designing ad banners:

  • Keep it short and simple.
    Banner ads are displayed amongst large amounts of information in a webpage, so you must be creative to get the user's attention. And, because they get limited display areas, it's really important to keep them simple and easy to understand.
  • Less is more.
    Use larger fonts and fewer words because people simply don't have the time or patience to read long messages.
  • Keep the file size low.
    Typically, 70Kb is a good size for a banner. Many websites you'll advertise on will have file size limitation, but in case they don't, it's always a good thing to have fast loading banner ads. So, keep this in mind and don't make the file size too large.
  • Choose the color scheme in context.
    A general rule here is to design the banners while keeping in mind where exactly they'll be displayed. More specifically, try choosing colors based on the background they'll be sitting against. For example, if you have a dark blue background, it would make sense to have a banner with a white or light blue BG to create good contrast.

Structure of a Banner

  • The Heading.
    This is used to grab the user's attention while scanning the page.
  • Call to Action.
    This is used to explain to the user how to proceed. I mean, most people would just click the ad anyway, but don't assume they'll all do it. Provide some visual cues as to what do to next. This can be a button or an image, or just some text that says "Click here to…" "Find out how…"
  • Attention-grabber (optional).
    This is optional, but if implemented correctly, it can help you grab the user's attention. It can be an interesting illustration or graphic.

Additional Resources

Related Posts
  • Code
    Creative Coding
    Using a Custom Post Type to Create a Home Page BannerUsing a custom post type to create a home page banner
    Sometimes it's useful to have a nice obvious banner on your site's home page—for announcements, snippets that aren't long enough to merit a blog post, or links to new content within the site. But you don't want to be editing your homepage content every time you add a new piece of content, nor do you want to be delving into the code to add content.Read More…
  • Web Design
    Case Studies
    Exploring the Human-Centric WebHuman retina
    Some time ago I published an article describing a workflow which supports and emphasizes human-centric thinking in web design. In this article, we'll examining websites that apply this methodology and see how human-centric design has contributed to their success.Read More…
  • Web Design
    User Experience
    Use and Abuse of Icons in the Modern AgeIcon retina
    The number of icons we see on daily basis is amazing. They are everywhere around us, both online and offline. We love to use them. They enhance the aesthetic of our sites and can provide a better user experience. Sometimes however, we forget the reason behind using an icon, and that's when it becomes easy for icons to lose their effectiveness.Read More…
  • Web Design
    User Experience
    Best Practices for Designing Effective Banner AdsAd effective retina
    If you’ve ever been online — which, if you’re reading this, I assume you have — you’ve probably encountered a banner advertisement or two. These typically come in the form of a prominent image on the page, although the exact size, positioning and content can differ drastically.Read More…
  • Web Design
    User Experience
    A Beginner's Guide to Designing Ad-Friendly WebsitesAd guide retina
    Advertising has always been big business and, these days, the Internet plays a massively important role. By 2011, advertising revenue on the Internet surpassed that of cable television in the United States and, the following year, estimates put US Internet advertising revenues at $36.57 billion.Read More…
  • Web Design
    Applications and Tools
    A First Look at Google Web DesignerGoogle web designer logo retina
    Unless you've been hiding under a stone recently, you'll have no doubt seen Google's latest application release: Google Web Designer. Currently in Beta, GWD is a tool for building interactive websites and, perhaps more significantly, ad banners, through modern web standards. Let's take a first look at the interface, then build ourselves an animated banner using the tools on offer.Read More…