{"id":7485,"date":"2017-05-15T14:42:08","date_gmt":"2017-05-15T13:42:08","guid":{"rendered":"http:\/\/www.verveuk.eu\/?post_type=post&p=7485"},"modified":"2022-09-26T17:12:07","modified_gmt":"2022-09-26T16:12:07","slug":"7-design-tips-creating-promotional-banners-convert","status":"publish","type":"post","link":"https:\/\/verve-design.co.uk\/7-design-tips-creating-promotional-banners-convert\/","title":{"rendered":"7 Design Tips for Creating Promotional Banners that Convert"},"content":{"rendered":"

7 Design Tips for Creating Promotional Banners that Convert<\/h1>\n

 <\/p>\n

Whilst every eCommerce website is different, promotional banners are generally found on the homepage (above the fold) and throughout the user journey to inform visitors about offers, new products, company news or simply to make a make an impact on the page.<\/p>\n

 <\/p>\n

With the hundreds of free design programs available today, just about anyone can design these promotional banners for their eCommerce website. But designing a banner and designing a banner that encourage clicks are two very different things!
\nSo how can you design and create promotional banners that will convert? Below are our top 7 tips and general guidelines for designing promotional banners.<\/p>\n

 <\/p>\n

1. Create hierarchy<\/h2>\n

Hierarchy applies order to your designs, and makes sure the most important elements are seen first. This is crucial for homepage banners as they are the first thing visitors see when they land on your site.<\/p>\n

 <\/p>\n

Every promotional banner needs two elements: a value proposition, <\/b>and a call to action<\/b> (CTA).<\/p>\n

 <\/p>\n

Value proposition<\/b>:<\/h4>\n

This is the bulk of your banner. It is the message that showcases not only what service or product you are offering to the visitor, but how your product or service can benefit them. The message should be concise \u2013 3 to 10 words is ideal. Think things like: \u201cHigh quality\u201d or \u201c50% off\u201d or \u201cFor a limited time only.\u201d The message should take up most of the space on your banner and be the first thing that viewers\u2019 eyes see.<\/p>\n

 <\/p>\n

Call to Action (CTA)<\/b>:<\/h4>\n

This is the text or button that invites visitors to click. Phrases like \u201cLearn more\u201d, \u201cGet started\u201d or \u201cBuy Now\u201d are great examples. It\u2019s important to tell users they need to perform an action. (Yes, sometimes we are still a pretty impressionable bunch that require clear instructions.)<\/p>\n

 <\/p>\n

The CTA should be a clear focal point on your banner. It is the end goal – what you have to get your visitors to click on in order for the banner to be successful.<\/p>\n

 <\/p>\n

\"Wickes_kitchen_sale\"<\/p>\n

Wickes Homepage Banner<\/em><\/p>\n

 <\/p>\n

\n

 <\/p>\n

2. One banner = one message<\/b><\/h2>\n

Your visitors are too busy while browsing and have little time to read all the offers you’ve put on a single promotional banner and they are even less likely to choose from multiple calls-to-action. So, one banner should equal one message and ideally your landing page linked to this banner should also focus on this exact offer.<\/p>\n

 <\/p>\n

\"Habitat<\/p>\n

Habitat Homepage Banner<\/em><\/p>\n

\"Tesco<\/p>\n

Tesco Direct Category Page Banner<\/em><\/p>\n

 <\/p>\n

\n

 <\/p>\n

3. Keep it simple<\/b><\/h2>\n

You’ve tried some cool animations, contrasting colours, photo collages but the banner performance still leaves much to be desired… Now it\u2019s time to keep things really simple – a short headline, copy written in simple language, and a traditional red-coloured CTA button.<\/p>\n

 <\/p>\n

You may be surprised at how well your banner will perform after all this simplification.
\nA great way to encourage this is by using white space. White space is any negative or unused space in a design (fun fact \u2013 it doesn\u2019t need to actually be white). For example, look at this John Lewis promotional banner.<\/p>\n

 <\/p>\n

\"John<\/p>\n

John Lewis Homepage Banner<\/em><\/p>\n

 <\/p>\n

All of the unused background space is white space (or blank space).<\/p>\n

Now what\u2019s so great about white space? Take a look at the banner above, now think about what your eye focused on first when looking at it. I\u2019d be willing to bet you started with the words \u201cNew LG E7 OLED TV\u201d then went right to the image.<\/p>\n

The white space in this banner forces you to focus on one thing and one thing only. Think about the Google home page:<\/p>\n

 <\/p>\n

\"Google<\/p>\n

 <\/p>\n

There is literally nothing on the page except for the search bar. No distractions, no frills, just the one thing that is important. This is exactly what white space can do for your promotional banner. By leaving blank space you can draw focus to what is important \u2013 your proposition\/message, and your call to action.<\/p>\n

 <\/p>\n

\n

 <\/p>\n

4. Make text instantly readable<\/h2>\n

Do\u2019s<\/b><\/h3>\n

Order your title, subtitle and body copy by size. These elements are the three musketeers of typography. From largest to smallest, these should be read in a naturally progressive order.
\nYour title is the first thing that your visitor will read, so make sure it stands out. This can be done by making sure it\u2019s the biggest in size, and using a strong eye-catching font. The subtitle should support your title at a relatively smaller type size. Body copy is the smallest and should be clear and easy to read.<\/p>\n

 <\/p>\n

As a rule of thumb, copy should be four lines or less.<\/p>\n

 <\/p>\n

Also try mixing up your font styles. Most fonts come in different styles and weights, for example bold and italic, which can be especially useful when trying to draw attention to certain aspects of your design. Words that deserve a special note, like \u2018sale\u2019 or \u2018limited time only\u2019, are great to treat with a different font style.<\/p>\n

 <\/p>\n

\"Mothercare_my_mothercare\"<\/p>\n

Mothercare Homepage Banner<\/em><\/p>\n

Dont\u2019s<\/b><\/h3>\n

Avoid cursive\/script fonts, extremely thin font weights, all uppercase copy, or font sizes smaller than a 10 pt (unless it\u2019s a disclaimer or copyright notice). This can force strain on the reader\u2019s eye and makes the overall text much harder to read.<\/p>\n

 <\/p>\n

\n

 <\/p>\n

5. Choose appropriate colors<\/b><\/h2>\n

Every colour has a different association, and it\u2019s important to consider what types of emotions you want to evoke in your audience.<\/p>\n

 <\/p>\n

Colour not only evokes feelings but can also create a level of distinction between what is important and what is not. Applying a bright, bold colour to a significant feature will highlight and draw the eye to it, making it a focal point within your design.<\/p>\n

Top tip: <\/b>Use a colour picker tool to match the text colour with a colour in the background of your image.<\/p>\n

 <\/p>\n

\n

 <\/p>\n

6. Use appropriate imagery<\/b><\/h2>\n

Using just colour on your banners can end up being a little bit one dimensional. Especially on eCommerce sites, it\u2019s often important to include product images and other lifestyle imagery to encourage clicks.<\/p>\n

 <\/p>\n

But be sure to choose relevant imagery that enhances your message and is directly related to your product or service. Avoid abstract concepts.<\/p>\n

 <\/p>\n

Can\u2019t afford professional photography or models? Buy an affordable license for a stock library. There are millions of high quality libraries out there. Better still, opt for an original illustration or graphic created by a professional designer.<\/p>\n

 <\/p>\n

Top tip: <\/b>When searching through an image library look for images with clear space for you to place your text instead of having to work around the composition.<\/p>\n

 <\/p>\n

\"cotswold_outdoor_walking\"<\/p>\n

Cotswold Outdoor Homepage Banner<\/em><\/p>\n

\"George_summer_essentials\"<\/p>\n

George Asda Homepage Banner<\/em><\/p>\n

 <\/p>\n

\n

 <\/p>\n

7. Save properly<\/h2>\n

Lastly, but extremely important. Your banner needs to load fast on a page before visitors scroll down and miss it. So you must insure your files aren\u2019t too large and are properly formatted.<\/p>\n

 <\/p>\n

When it comes to file size, the smaller the better. The target file size should be somewhere around 300kb, depending on the size of the promotional banner.
\nThen make sure to save in a format that works across the web. Common file types for banners include JPG\u2019s and PNG\u2019s for static displays, and GIF for animated displays. As the popularity of SVG increases, this format is also becoming more widely accepted.<\/p>\n

 <\/p>\n

\n

 <\/p>\n

You\u2019re ready to build better banners!<\/h2>\n

There you have it! 7 design tips to help you create clickable promotional banners – but it takes a lot more to create truly professional, high-performing banners. If you\u2019re not a professional designer (or too busy running a business)…<\/p>\n

 <\/p>\n

call Verve today on 01743 360000 to discuss how we can help you.<\/strong><\/h4>\n","protected":false},"excerpt":{"rendered":"

7 Design Tips for Creating Promotional Banners that Convert   Whilst every eCommerce website is different, promotional banners are generally found on the homepage (above the fold) and throughout the user journey to inform visitors about offers, new products, company news or simply to make a make an impact on the page.   With the […]<\/p>\n","protected":false},"author":1,"featured_media":7542,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7],"tags":[],"acf":[],"fimg_url":"https:\/\/verve-design.co.uk\/wp-content\/uploads\/2017\/05\/7-Design-Tips-for-Creating-Promotional-Banners-that-Convert-2-e1606409475918.jpg","_links":{"self":[{"href":"https:\/\/verve-design.co.uk\/wp-json\/wp\/v2\/posts\/7485"}],"collection":[{"href":"https:\/\/verve-design.co.uk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/verve-design.co.uk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/verve-design.co.uk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/verve-design.co.uk\/wp-json\/wp\/v2\/comments?post=7485"}],"version-history":[{"count":3,"href":"https:\/\/verve-design.co.uk\/wp-json\/wp\/v2\/posts\/7485\/revisions"}],"predecessor-version":[{"id":12846,"href":"https:\/\/verve-design.co.uk\/wp-json\/wp\/v2\/posts\/7485\/revisions\/12846"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/verve-design.co.uk\/wp-json\/wp\/v2\/media\/7542"}],"wp:attachment":[{"href":"https:\/\/verve-design.co.uk\/wp-json\/wp\/v2\/media?parent=7485"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/verve-design.co.uk\/wp-json\/wp\/v2\/categories?post=7485"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/verve-design.co.uk\/wp-json\/wp\/v2\/tags?post=7485"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}