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?
Perhaps the greatest change to the way in which we saw the internet came with social media. Allowing us to tailor and personalise such a broad based form of communication was seen as something incredible at the time, and to this day still is. Part of this personalisation was the presentation of images, whether they were our own, or ones that we were inspired by.
Beginning with MySpace (remember that?) Images began to take prominence in a world that was dominated by text at the time. As the evolution of better internet processing and quicker speeds progressed, we began to see the humble image as much more than a visual tool. The image reflected our thoughts, our feelings, and allowed us to convey these effectively.
For businesses using their own social media platforms, tapping into this aspect is the very foundation of a successful ad campaign. In this article – a follow up on the previous two chapters – we will be investigating exactly how you can make your images and brand stand out. The themes we will be exploring will be clarity, prominence, integrity, and positioning.
Common problems associated with using images
As the image has become a powerful tool for marketers, it has become a sort of test example for pushing the boundaries of what’s allowed. Whilst some of these experiments have been put to good use, and opened up new avenues for campaigns, there are some that have fallen flat. A quick glimpse around Facebook or Google+ will flag up some pitfalls of the image, of which include:
- Non-sensical, or irrelevant images associated with the brand or post.
- Poor quality images, including a duplication of the same image.
- Good images being used in ways where their strengths are not emphasised.
- Poor choice of colours or branding.
These common problems don’t just have an impact on the viewer, either. Facebook has made it quiter clear that it will no longer tolerate ill thought out posts – an attempt to avoid the “clutter” on a person’s news feed. If your image falls into the above categories, it will simply not be seen, and will be associated with a low reach.
When we talk about post reach, we are referring to the amount of times that your post on both platforms is served to your fans and their friends. Reach has become perhaps the most important aspect of any ad campaign, more so than likes. This is because, whilst likes may be an indicator of how popular your page is, the reach is showing how many people see your posts.
How to avoid these common pitfalls
When conceptualising your ad campaign on social media, consider the material that you want to discuss. Is it light hearted, or does it possess a more serious tone? Your images have to directly reflect the material that you are discussing. If say your business is a pizza restaurant, include images of your pizzas.
Utilising your products or services in this way will help enforce an idea onto the viewer of what your business is all about. Far too often, we see many pages using pure stock images, where the photos they have taken themselves would work much better. This use of products can include completed installations, work in progress photos, or even photos of the interior of your business.
Clarity is key
When we talk about clarity, we’re referring to the presentation of the image. Any image that you publish on your respective social media pages should be crystal clear and presentable. You wouldn’t present a potential customer with a crumpled pamphlet or flyer, so why do the same for your images on the internet?
Whilst some images may require editing, enhancing their clarity and visual quality often requires minimal adjustments. These adjustments don’t necessarily require Photoshop, either, as more standard image processors allow you to make these changes easily. Remember to make the focal point of your image clear to see, and consider using your branding, if need be.
Positioning and predominance
Facebook and Google+, in particular, are highly visual platforms. Facebook’s image display creates a pleasing aesthetic, akin to a collage, whilst the native interface found on Google+ allows you to create your own hierarchy. Utilising the strengths of both platforms will go a long way to boosting your reach organically, and making your page that little bit more attractive.
For Facebook, your strongest image (the one that relates to your content more) should be the very first picture that you upload, followed by others as support. Facebook’s collage effect will reflect this, and will display this picture and its supporting visuals akin to a display pamphlet. This effect resonates with viewers, who will be more likely to scroll through and engage with your post.
The grid like interface of Google+ is perhaps your strongest asset. Take the time to carefully craft your profile page, so that material you are discussing is broken down into individual posts, reflecting a workflow. A line of relevant images will showcase your content in brilliant fashion, and will also encourage those viewing to engage more with your posts.
Overall, however, make your images unique. Visuals are the strongest identifier of the human brain, and we receive images better than any other medium of communication. Your images should always be about expressing yourself, the message of your company, and what you can offer those who come across your company.
That’s it for our three part series. We hope that you learnt a lot about how to construct cover photos, positioning brand imagery, and everything else that we have covered. Do you have any more questions regarding the design process for social media? Ask below, and we’ll be more than happy to help you out!
Whilst the logo has changed, the simplicity of Google+ – and how you can best maximise the potential of your images – has not. The very first differential that Google+ sought to make when it launched was the power of its capacity to display visuals. Even to this day, the Silicon Valley company has worked hard at this, with the launch of Collections being a further step into making the platform the sole realm of the image.
In this article – a follow up to the first edition of this series – we’ll be looking at how Google+ displays images, and how best to use the parameters that they have set. Focusing more on the cover photo, we’ll also be discussing setting up visual cues, to maximise the many call to action areas that Google+ offers.
What makes up the Google+ cover photo
The first thing that you need to know is that Google+, unlike Facebook, employs a responsive design. This means that building an image to a specific dimensions may hamper the visual quality of your product. However, this provides us with the upturn to be more flexible in design, and use the full gamut of visual aesthetics to add a vibrant spark to your page. We’re going to start with the dimensions of 920×518.
The cover photo works along the principle of the rule of thirds, and will designate roughly 33% of your cover photo to the logo section of the image. From here, it samples the middle of whatever image you make, adds an effect similar to a gaussian blur, and makes that as the basis of what we’ll call from now on the “details section”.
It’s important to note that the details section of the Google+ cover photo is your strongest asset. It displays where people can find you, your opening hours, and displays your brand predominantly. Our job here is to create an image in such a way in which this will be the focal point, without proving to be too distracting.
The shaded area, therefore, is the most important part of our cover photo. It is from here where the majority of our visual cues will be placed. Simple design, rather than photographs, work best in this regard – a clear differential between Facebook. Unlike facebook, however, there are no fixed dimensions or parameters.
How to approach your design
Using our made up company – UCC – we’re going to look at emphasising the logo to make it more predominant, as well as utilising some simple design ethos. Google+, with its ultra-modern interface style, works best when we think along the same lines. Below is an example of what using a sleeker design will look like. Note the vast difference between this, and the other Facebook cover photo that we created.
Using translucent, simple shapes to recreate a 2D skyline, we are keeping the image dynamic in visuals. We have also taken the main focal point of the brand’s design – the U – and centered it in the middle. You may also note that the U symbol is slightly off white. This has been done as to avoid making the details section of your page easier to read. When we upload this to our actual Google+ page, we can see that this U symbol is perfectly centered in this section.
What else can I do to enhance the image?
- Think about a minimal approach, rather than a complete one. Feel free to use open space, but refrain from making the image cluttered with visuals.
- Google+, unlike Facebook, presents perfectly matching colours. This will allow you to align your cover photo with your brand’s colour.
- Google+ allows you to crop your photo, and does so as soon as you upload it. If your image requires the full image size to be used, make sure to do this before proceeding.
- If your brand mainly revolves around the colour white, consider using other colours in your brand’s design for the Google+ cover photo.
- Feel free to break your image into thirds. This will not only make designing for the details section easier, but also create a nice little hierarchy of visuals on your page
Similar to Facebook, Google+ will compress any .JPG files that you create, so once again we need to save the file in .PNG. The Google+ interface, however, is much more simple than that of Facebook, so saving and uploading will be much quicker and easier. If you’ve followed the idea of centering the focal point of your brand or similar visuals, your cover photo will have a high quality of retention.
In the third and final edition of our Designing for Social Media series, we’ll be looking broadly at how to use images in your posts, both on Google+ and Facebook. This will give you an idea of how best to use certain photos or visuals, as well as including your branding into the image. Let us know what you think about the article, and if you have any questions, feel free to leave them below, we’ll be more than happy to answer your queries.