Good landing page design is CRUCIAL to the success of a charity. A business is likely to only be as successful as their website.

As a charity organisation, it’s easy to fall into the trap of making the site seem more like a digital brochure or a sales focused machine! The design of these sites must reflect the charity and be ready to adapt each year by following fundamental design trends.

These are some of the most successful landing pages over the last year and the similar design features they share.

Video Backgrounds

The use of video within a landing page is not a new trend, but it is one that will be prominent throughout 2019. Aside from the slick and modern feel video gives a page, it has been proven to increase conversions. But why is that? Videos used in the background of a page will be set to play automatically on loop when a user visits a page, which in turn will gain their attention instantly. The longer a user is on your site, the chance of them converting increases. Meaning a win for all things SEO!

Charity donation landing pages are a great platform for the use of video, due to the nature of a complex message or feeling that needs to be explained to the users in a short amount of time. Granted, page speed can be an issue with the use of video, (another subject we’ll cover) but when used correctly this shouldn’t be a problem.

The British Red Cross and Friends Of Earth organisations have great examples of the use of video in their homepages, as they capture the spirit, energy and story of what they do.

Hero Images

When video isn’t used within a charity page’s header, you can be sure it will almost certainly be a ‘hero image’ instead. Never heard of the term? You’d be forgiven for expecting to see a member of the Avengers in one of these images, but a hero image is simply a very large banner image (i.e. images that take up the majority of the screen at the top of the homepage).

Charity juggernauts will have an advantage when it comes to sourcing high-quality images for this, as they’ll have the budget for them and possibly a more photogenic niche (e.g. animal protection charities). If you are a medical charity, for example, the right photography could be problematic. However, this could be used to your advantage when rather than sourcing a stock image online, you capture something more real, compelling and creative within your restraints.

What makes a great hero image? As discussed with the use of video, it has to instantly engage with your audience and tell a story, so something ‘symbolic’ won’t do for this. Unless your charity is for animals, most charities will usually be about people at the core. Therefore images of people within or helping the situation your charity is fighting for are what we’re looking for here.

Eye contact from the subject within the hero image is a common trait, that works best when it complements the words used within the header in unison, rather than competing for attention separately from the viewer.

The image will either be positive or negative – i.e. do you show the reason why you’re doing this, or a photo showcasing the impact your charity has had? In general, most charities tend to lean more towards the negative side and use a more emotional image for their hero image. Be wary that you must also show the positive side to what peoples donation will go towards though, as this makes for a more likely conversion.

White Space

This next subject may seem slightly boring/unnecessary to mention heading into 2019, but bear with me (it’s key I promise). We’ve shown the importance of good video/imagery, but picking the right source material of these isn’t enough. You must consider the use of white space with this. In web design, white space doesn’t have to be as literal as it sounds. It’s empty space that adds breathing space to the content on your page to improve the charity’s perception and in turn user experience.

A good example of this in action is Upstream International‘s landing page. Here, we have a powerful image of a woman, a message that isn’t competing for attention AND a good use of white space on the left and more predominantly on the right. Our previous two areas of focus work best when white space isn’t overlooked but integrated into the thought process.

Donation Button/Link

In terms of UX design, your donation button will be important way beyond 2019, because, as you know…it’s a big deal for your charity! People have become accustomed to seeing them. There is an expectancy when arriving on a charity website that the user can locate it immediately.

What good is your site’s donation button if it gets lost within the page design or has nowhere to go? Making a donation should be as easy as possible as if donors spend even a few seconds too long looking for the button, they may give up and your charity pays the price. With that in mind, your donation button must reside near the top of your landing page, (eliminating any scrolling time) which in many instances is the top right.

Want to be different and put it elsewhere? Don’t. There are things people have become accustomed to finding in a certain place on a page and a donation button, in this example, is instinctively expected to be found there. This makes it the safe and obvious choice.

In addition to this, having an attention-grabbing donation button will decrease the time it takes a user to find it (even if they didn’t intend on spotting it). With this in mind, bigger is better! A large button and font have the most conversion success, combined with a bright colour. In fact, Network For Good had a 30% increase in donations when they changed their donation button from grey to red!

Mobile First

You may or may not have noticed, but people tend to be on their phones a lot these days. This is why designing for ‘Mobile First‘ (or responsive design as it can be known) is now often the first thing any business, never-mind charity, hoping to be successful will address.

As the name suggests, ‘Mobile First’ means that the design of the site must start from the mobile view end and the restrictions that come with it, before expanding the site’s features when moving over to the desktop/tablet version. Mobile internet usage surpassed desktop usage in 2017 according to Statista will continue to rise past 2019.

A charity that’s a good example of mobile first design is Crisis, whose work you can see below. Crisis is the national charity for homeless people, who we’ve helped gain traffic and in turn donation increases! Find out how we did it here.

The ‘Ken Burns’ Effect

Who’s Ken Burns? He’s an American filmmaker, known for his style of panning and zooming into still imagery to create the illusion of motion. The term was previously known as ‘animatics’, but since his rise in documentary film making, it’s been named after him as the ‘Ken Burns Effect’. This means otherwise static images are given dynamism and more visual interest by either panning sideways across the image or zooming into the image centre or a certain area.

Subtlety is what makes this technique special as it adds another dimension to an otherwise fine image. It’s also something that could be quickly implemented to your current landing page. Similarly to the impact video can have on your landing page, this technique would also benefit your page in terms of speed (we’ll look at that next) as it will be much lighter in terms of the bandwidth. This is because it’s built into the page through code.

Here’s an example of that:

div {

 background-image: url(https://k8k5i5r9.stackpathcdn.com/’/images/your-image-here.jpg&);

 background-position: center;

 background-size: 100%;

 transition: background-size 1s ease;

}

div:hover {

   background-size: 120%;

   transition: background-size 2s ease;

}

Background effect hover image

A good example of this in action can be found on acumen.org/ as almost every image on the landing page has jumped on the Ken Burns bandwagon.

Page Speed

Every charity shares the common goal of wanting to increase the conversion rate on their donations and reduce the number of people exiting their site without making one. Implementing what we’ve discussed in this article is key towards making a success of that, but page speed might just be the most important of the lot.

One of the main reasons people leave a site quickly is because of the poor load performance of a page. If a user has to wait too long for a page to load they will get naturally frustrated and increase the bounce rate of your page (the rates at which visitors to a page leave without interacting with anything).

A study by Gomez.com found that over half of the internets users will become frustrated if a webpage fails to load within just 2 SECONDS. Any longer and you’ll likely lose a potential donation, as around three-quarters of these people wouldn’t ever return. Scary stuff…

Luckily, this is a subject we’ve covered in more depth to help you avoid this scenario from ever happening to your charity. Have a read of it here.

Hopefully, you can take something away from this and make this year one of your charities most successful yet!

Read more about our Charity Services.