How to Effectively Design a Web Banner

We were asked to design a banner for a client this week to go along with some other material we had produced. We had to refer to the graphic manual the organization uses and use their image bank to create the graphic profile.

Juanjo, who does all the designs at jontusmedia, produced a stack of sample banners and we sent them over to the client who selected a very clean, crisp looking banner as their first choice.

I thought it looked pretty good too.

The client's original choice

The client’s original choice

Look at the Whole Picture

Although I liked this banner in isolation, Juanjo wasn’t so sure.

And here’s where the magic comes in.

Off he went and took a screen shot of the website the banner would be run on and then worked in a selection of the designs he had produced so we could see the whole effect.

Testing the banner

Testing the banner showed it didn’t work

By doing this I saw how wrong the banner was for the site it was to be used on. Even though it fit with the client’s brand. So we went back to the client and showed them and they understood the issue.

Thankfully JJ is the designer and I’m not!

So off he went and created a banner that was in keeping with the client’s brand but maximized the way it interacted with the site.
He added a faded color background, a strip of other images to make the contrast stronger against The Local’s own navigation bar and took out a strip of background colour behind the tallest boy’s hat. This way, the images stands out more.

The final design

The final design

So How Do You Design for a Web Banner?

First and foremost you have to be aware of what you want the banner to achieve.

Then you need to make sure the design you produce is in keeping with your brand and will hit your goals.

Finally, and this was my lesson of the day, don’t forget to work with your banner design in conjunction with the look and feel of the site that it is going to be used on.

A banner won’t always fit every site you plan to advertise on. In fact, just going with your usual banner could in some instances definitely be the wrong move.

  • https://plus.google.com/105076725141939280120/about Stephan Hovnanian

    Excellent tip to put the banner in context. I’d add that you might want to also look at whether the website uses responsive design. Something pixel-perfect in the full desktop size could get mucked up in the tablet or “mid-size” layout.

    • http://jontusmedia.com/ Jon Buscall

      Hi Stephan,
      Thanks ! And, yes, good point about responsive

      The retina line of Macs is also starting to make this harder.

  • http://stephanhov.com/ Stephan Hovnanian

    Excellent tip to put the banner in context. I’d add that you might want to also look at whether the website uses responsive design. Something pixel-perfect in the full desktop size could get mucked up in the tablet or “mid-size” layout.

    • http://jontusmedia.com/ Jon Buscall

      Hi Stephan,
      Thanks ! And, yes, good point about responsive

      The retina line of Macs is also starting to make this harder.