1. Web Design
  2. Visuals

Design a Series of Smart Banner Ads in Photoshop

Scroll to top
Read Time: 3 min

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

Part 2: Designing the Banners

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

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.