I have made hundreds of online adverts and web banners over the years. I have also made lots of mistakes. After taking a good look over my earlier work I can now see where I went wrong. This retrospective is what gave me the idea to write this article on what not to do.

How to design a crappy web banner.

1. The Wrong Photos

Bad quality

There really isn’t much excuse for using a bad low-quality photo nowadays. Most phones can take a half decent photo but they are still nowhere near the quality of a digital SLR camera. A good digital SLR is cheaper than ever and the low-end ones are more than enough for product photos and lifestyle shots.

If you don’t fancy taking your own photos, invest in one of the many stock websites, or do a search for public domain photos. Public domain work has no copyright restrictions.

Be very careful about using other peoples photos, sometimes the risk avoidance you get from a stock vendor makes it worth the cost.

You cannot make a low-quality photo look as good as a high-quality photo. Even with all the tools in Photoshop, you still cannot polish a turd.

Wrong size

If the photo doesn’t fill the canvas try to avoid stretching it to fit. Tiny little stretches here and there are okay depending on the photo but stretching a photo to the point of distortion should always be avoided. It never works

We, humans, have a keen eye for what looks natural and we can tell immediately when something is not right.

If the photo will not fit and you do not have a suitable alternative then try a design like this. This design allows you to fill the space missing and you have a nice clean area for some text.

Wrong theme

A good photo isn’t necessarily the right photo. You may have the best photo of a surfer anybody has ever seen but that isn’t going to help you sell home insurance. Unless you offer special home insurance for surfers or something… I dunno where I’m going with this.

Too much complexity

I almost never use a crazy high detailed HDR image for an online advert. There is simply too much going on and ultimately the photo distracts from the intended message of the advert. I often look for photos that have one or a few of these characteristics:

  • Lots of negative space for text and graphics
  • A shallow depth of field: a heavily blurred background makes the text stand out even more.
  • Limited scene depth, either the foreground or the background is missing
  • No over processing

You don’t always need a photo

Not all banners need photos to look good enough. Just a little bit of text with some complementary colors can be enough in some cases. It is often better to have a design that is a bit simple, than to force a design with bad material.

2. Poor font choices

Wrong theme

Just like using the wrong photo you can definitely use a font with the wrong theme. Imagine using an elegant font like in the above graphic for a tech company. If you are regularly making adverts or any design with text it is well worth your time learning some typography skills. A huge chunk of graphic design is dedicated to understanding typography it is that important.

Typography can be a weighty subject but the basics are more than enough for most people.

There are many fonts to choose from so if you are a bit stuck. Or if you want a little inspiration take a look this article on my favourite pre-installed (default) fonts.

The Best Graphic Design Fonts Already Installed

Wide font or narrow font?

I have come to notice that for some reason, narrow fonts suit wide designs and wide fonts suit narrow designs. Not always mind you, it depends on many variables like the length of the text, but it is something to consider. It is probably because a narrow font takes up less horizontal space and doesn’t crowd the design, and vice versa.

This could totally be my personal taste though, so do not feel like this a rule you need to follow.

If you discover a font you really like and it looks good in one of your ads, there is no problem with using it in multiple designs if anything it will give your site some continuity.

3. Bad layout

No continuity

If your site has navigational elements which overlay your banner carousel you need to make sure you always keep text and graphics away from these elements. To do this: create a template for your designs with a margin and use that same margin for every other banner.

This margin represents an area of the banner where no elements should go. (excluding any background photos etc)

Hard to read

This one tip will put you ahead of half of the websites on the planet. Avoid putting text over areas of an image which make the text hard to read. This can be putting bright text over highlights or dark text over shadows. It can also be that the image underneath the text is simply too textured and distracting. Look for areas with low contrast like the sky for instance.

Above is an example of poor text placement.

What if I have no choice and can’t change the photo? In this scenario, you can always apply a solid colour like the banner below to lower the contrast and make the text more readable.

In the above banner, I added a layer of black with an opacity of around 60%.

Hierarchy and placement

Try to prioritize the message, which bit is the most important? If I was making a sale banner the word SALE! would usually be the biggest or the most distinctive part of the design. This is the first thing I want my reader to know, there is a sale, next would be the details like offer ends in 30 days etc.

This can also be done with the placement, generally, most people read left to right so if there are two statements the one on the left will be read first.

4. Bad Masking

If there is one guaranteed way to turn people away from your website, it is by using a poorly cut out image. There is no way to salvage a poorly masked image it looks horrible and makes your website look cheap. Sorry to be so brutal.

Just don’t do it.

If it is a product image I recommend checking out my Tutorial on vector masking. Vector masking is how the majority of big online retailers cut out their product images. It is much cleaner than the standard lasso/quick masking tools and it always produces a clean sharp edge. Vector masking is also non-destructive so you can always edit the mask if you made a mistake.

How to Mask a Photo with the Pen Tool in Photoshop

If you own or work for an online store I strongly recommend getting into advanced masking techniques it is a skill you will use all the time.

There are times when you might want a rough, jagged, cut-out image, like a scrapbook effect. In this scenario, I would still advise beginning with a good clean mask and then adding the distressed effect afterwards (non-destructively).

If we can rid the world of jagged pixelated masks, the world will be a better place. 🙂

5. Over-designing

I will hold my hands up and admit to this mistake. It is hard to switch off the creative desire sometimes. Game of Thrones and Star Wars may be my biggest inspirations, but that does not always help when designing an end of season t-shirt sale…

A web advert has to be quick and direct, not fancy and thought-provoking (99% of the time). Most of us nowadays have the attention span of a toddler, people flick through websites in seconds. You only have a split-second to grab a users attention and plant an idea in their head.

If your intended message is: “Sale now on, act fast” then that’s all you need to accomplish. You don’t need to spend thousands on stock graphics, you just need a good clean banner that informs the user there is a sale now on. Even if the user doesn’t click on the advert they will remember the message and potentially revisit, if they are interested.

A few tips:

  • Limit yourself to only a handful of colours
  • No big sentences, keep it simple
  • Limit the layer effects like glow, shadow stroke, emboss etc

6. Not compressing the file size

I have saved the best for last, by best I mean the most common. Even with the perfect design, a slow loading banner will kill your front-page and potentially harm your rankings. It looks amateurish and it does not give off a good impression. I absolutely attack my banners with compression, I rarely create a banner bigger than 250kb. This keeps the site loading smoothly and it stops people from getting frustrated and clicking back.

If your site is experiencing any speed problems the first thing to check is the file size of your photos.

If you have a big collection of image files to compress take a look at my article on mass processing image files to a specific size.

How to Compress a Batch of Images to a Specific File Size

Well there you go, if you avoid these common pitfalls you will be creating better adverts than a large amount of the websites on the internet. Often what you don’t do is just as important as what you do.

Continue reading.

How to Design a Simple Web Banner That Converts

How Design Makes an Online Shop Look Trustworthy


David

Works part-time as a Graphic Designer and Website Designer. Studied Animation and has been using and learning design software for over 15 years.