What strikes me is how similar they all are. Ignore the colours and photos and you’ll see that most of them follow the pattern of having a big ‘hero’ image or slider at the top, and the content conforms to an obvious grid – sections are usually full width or split into two or three columns.
This modular approach makes sense for many charities as it makes it easier to tweak the design and drop new rows of content in.
What they all have in common is the big hero images that dominate the home pages of the websites. Looking into it more, I got to thinking about what makes a good big hero image?
- It’s got to add something to instantly telling your story, so something ‘metaphorical’ isn’t ideal.
- Pictures of people, or a single person are more engaging.
- Unless they’re animal charities, most charities are ultimately about people. Which is why photographing cancer research is likely to be pretty hard/boring, but Cancer Research UK do a great job of bringing their work to life by using photos of people.
- A bit of eye contact with the subject in the photo is good.
- The image should complement the words, not compete with them for attention.
- What most of the charities here tend to do is to use a more hard-hitting ‘need’ photo for their fundraising/emergency appeals, but balance that out by using more positive photos the rest of the time.
Some examples that I found of really good Hero images:
Save the children has a really nice positive image, offset to one side which leaves a good amount of space for the text.
Action for aid has a more sober image that is used, with eye contact from the child in the photo, demonstrating the need for support.
This is an example of where the words and the focal point of the image perhaps compete with each other. They’re both centred in the screen so the words cover up the children’s faces. However it works well for this website, you get a sense of the desperation of the appeal.
This research has given me plenty to think about when it comes to design my own charity website. It seems that the image is important part of the initial look of the website and something that needs to be considered carefully.