How to design an effective HTML banner?


How to design an effective HTML banner?
2018-05-14
The goal of the advertising banner is conversion. It means that the user interested in your ad clicks on the CTA and goes to the website to, for example, complete a sale. How to design an effective advertising HTML banner, which will stand out in the jungle of other messages?

 

An HTML banner should be simple and readable

Remember that ad banners are short forms of communication and the audience doesn’t pay attention to them for more than a few seconds. To keep it simple and readable, use some proven, good practices. It is good, for example, to:

  • Watch the hierarchy of elements. Make sure that your brand’s logo is dominant, but still with a good proportion with a CTA button and the slogan.

  • Use visible frames for your HTML banner. And if your ad is white, you can put a 1-pixel gray border around it.

  • Use copy that is instantly readable. Give up thin fonts, small font sizes, or small caps.

  • Place buttons after your copy on the lower right side of your HTML banner, and in contrasting colors.

  • Use calls to action that invite users to click. You can use, for example, calls like Get started, Learn more, Check out now, Sign up now, Watch now, Get a discount.

Take care of good visual of your banner

It is not only a matter of a good information architecture (hierarchy and selection of elements), but also using colors and fonts. It is important, for example, to design HTML banner that is in line with visual identification of your brand. So, when you cut PSD to HTML, make sure that fonts, colors, and slogans are consistent with the site to which the banner links.

Designing the visual of your HTML banner, you can also use the power of colors. Think about what emotions you want to evoke in the audience and do it with the appropriate color palette. Remember, however, that colors have their cultural meanings. Meet them before you display ads in countries you do not know well. For example, in France the red color is considered the most masculine of all.

Also, take care of good quality graphics. Ask for professional graphics assistance or buy a picture on a stock. Make sure, however, that it is a high-resolution photo and that it suits your communication.

Remember about techies

There are, for example, some sizes of HTML banners that Google AdSense indicates as the most successful. These are: 728×90px, 300×600px, 300×250px, and 336×280px. Google AdSense also hints at the banner size – it should be under 150 kb. Finally, don’t forget about using correct files formats. It can be an HTML banner, but also JPG, PNG, or GIF.

Also, remember that the location of your banner matters. It is good to buy space on a website nearby the main content and above the fold.

What does weaken advertising banners?

Remember that we live in times of information blindness. The flood of ads makes us stop noticing them and clicking on them. To make the banner effective, you must then try to stand out in the jungle of other communications. So, think about the interactive banner, banner-animation, or maybe something more controversial?


Redakcja Archnews informuje, że artykuły, fotografie i komentarze publikowane są przez użytkowników "Serwisów skupionych w Grupie Kafito". Publikowane materiały i wypowiedzi są ich własnością i ich prywatnymi opiniami. Redakcja Archnews nie ponosi odpowiedzialności za ich treść.

Nadesłał:

https://cut2code.com/
http://cut2code.com/

Wasze komentarze (0):


Twój podpis:
System komentarzy dostarcza serwis eGadki.pl