How to design an effective online banner?

Karolina /

In the times of ad blindness, consumers rarely pay attention to advertisements, not to mention the fact that they can easily sense whether they’re good or not. See how to find yourself in the world of conscious recipients. Make your potential clients not only notice your ads but also click on them. Check out how to design an effective online banner.

How does human perception work?

The basic rule on this matter is the F-pattern rule, by J. Nielson. It explains how Internet users scan content while searching the website. It turns out that users firstly look at the upper left corner of what they see. Next, the eyes go to the upper right corner, and then again to the left one, but this time in the row below.

This is similar to the process of reading a book, but there is a small catch here. With each successive verse, the reader reads in less detail and rather scans the content:

What does it mean for your project? This means that you should put a photo in the upper left corner of the online banner. Photography stops the viewer’s attention (definitely more effective than text), especially if it presents people. You can now use photo models to direct your user’s attention to wherever you want.

  Do you want to work with Photoshop? Check 3 traits of a good graphic designer

An online banner where nothing is accidental

How to create one? Use your models’ eyes. When deciding on a photo, choose the one where people look straight at the place where you want to put the main headline of the advertisement and the CTA. Thanks to this, your users’ eyes will look exactly where the models do.

Place numbers between the headline and CTA to keep the recipient’s attention in those places (the sight stops on the numbers).

Have you noticed that we have moved smoothly from detaining the recipient to the CTA? The Internet user first stopped his gaze on the photograph, he followed the headline, then he noticed the number, and finally, he saw the CTA. That’s exactly what we wanted.

Look at these online banners and think how you would re-design them according to the rules I described above:



A good CTA is the final test

What does a good CTA mean?

  • Relatively short
  • Exposing the user’s benefits resulting from his click
  • Some copywriters, such as Artur Jabłoński, say that the most effective CTAs are those written in the first person singular.
  How much does website maintenance cost?

What does this mean in practice?

Think about the main benefit your user gets from a click. Is it really buying, registering, or paying? Notice that all of them are linked with an effort (e.g. filling in the form) or expenses (Buy now!).

It’s better to think what the recipient will have from buying your product, let’s say, a yoga mat. A new mat probably means a better comfort, more pleasure from yoga practice, and as a result, a greater motivation to exercise. You can base your CTA on this and write, for example: I want to practice comfortably! instead of Buy a yoga mat! However, you can go deeper and consider what the client will have from buying your extremely high quality and super comfortable mat. Perhaps it will be an achievement of yogic championship? Bet on the CTA I want to become a yoga master! and wait for the analysis of your shop’s conversion rate 😉