Since the dawn of the internet, banners have played a large part in the way we see and interact with a website. From the tiny “link & share” banners of the 1990’s, to the more elaborate sliding banners of the modern day, they can act as a powerful call-to-action. But what exactly makes a banner great, and how do we utilise the full space of our banner space to realise its full potential?
In this article, we’ll be exploring the ins and outs of the humble banner space. Looking at the properties that make up what makes them so effective as a visual, we’ll also dissect the absolutely critical components of a great banner. We’ll also be adding a discussion about appropriate written content as a bonus. We’ll look at how to combine both text and imagery, to create an instantly noticeable and distinctive space on your homepage.
But first… The bare essentials
Banners nowadays are relatively large, responsive, and are often always used in conjunction with the main header of the website. This wasn’t always the case, however. Up until a few years ago, banners were often predominantly text, had little in the way of images outside of graphic design, and usually had a standard call-to-action.
The idea of a banner being a much more powerful way to connect with your audience began to emerge with the advent of CSS 3. This provided much greater control to web designers, and therefore made the banner a much more encompassing tool. What underpins the construction of a banner in the modern era is:
- Background, either through a photograph or an elaborate use of graphic elements.
- Header, briefly explaining the following content on the page it is being displayed on.
- Sub-header, a more insightful and detailed description of the page’s content.
- Interactivity, achieved through either through a marquee sliding mechanism or engaging material.
The canvas to your message. Choosing a suitable background can either make or break your banner, and what you’re trying to say. If you prefer to choose an actual photograph, make sure that it is conveying your overall message. If the focus of your banner was to encourage people to overcome adversity, then an image along these lines (e.g. a rock climber) will suffice. Using graphic design principles can also help to draw attention to your headers, too.
No matter what you choose, be it a photograph or your own graphic design, keep in mind the amount of detail that you’re using. “Busy” images, where there are a lot of elements competing with one another, will be too distracting, and may even turn people off of exploring the rest of your content further. Aim to provide an image with your banner that is enticing and attention grabbing, but one that doesn’t steal the show on its own.
Headers and sub-headers (H2)
Common uses of headers and sub-headers on banners make good use of a “problem/solution” principle. Using the header as a headline to basically illustrate what that particular page is about, you can then concentrate on having the sub-header as a CTA. Whilst this can be effective, there aren’t any rules regarding headers and sub-headers, so you essentially have a blank canvas.
Anything you wish to have displayed up in text, however, must be relating to your business or the message you want to get across. Unrelated or random content defeats the purpose of your banner, and this is where selecting the right background also plays a pivotal role. You should also consider the font type, as choosing one that doesn’t work well with your design will also hinder the banner. We wrote an article on this that can help you, which can be found here.
In some cases, having multiple, scrolling marquee banners may provide more benefits. For instance, businesses which offer a wide variety of services will lose a lot of their pulling power by consigning these services to one banner. The idea of a scrolling set of banners also boosts up the ever important user experience stats of your website. If there is an invitation to scroll, the viewer will do so, simply due to the function existing.
If you believe that an interactive set of scrolling banners will do the job for you, make sure to adhere to the two important factors of your banner prior – backgrounds and headers. Unfortunately, due to the power of the banner, a poor design can be the difference between people being turned away, or those very same viewers being hooked on your content.
ITCC is a full-service digital agency, specialising in web design and web development. We love banners, and know what a good one looks like. In conjunction with our design services, your website, made by us, will grab the traffic and the attention that your business craves.
What do you think about web banner design? Is there any particular style that gets your attention?
Since the dawn of the internet, banners have played a large part in the way we see and interact with a website. From the tiny “link & share” banners of the 1990’s, to the more elaborate sliding banners of the modern day, they can act as a powerful call-to...Read More