Website visitors only need 50 milliseconds to form an opinion about your website. That’s why you must choose your nonprofit website’s visuals carefully.
Users are drawn to authentic images of real people—not decorative images or stock photos alone. As a nonprofit organization, your website’s images should also convey information about your mission and motivate new donors to get involved.
If your website visuals need a refresh, use these six tips to select compelling images:
1. Go for authenticity.
The best nonprofit websites include genuine, engaging photos of actual community members, volunteers, and others involved with your organization. Scroll through Kanopi’s roundup of the best nonprofit websites, and you’ll see plenty of examples of compelling visuals from organizations with a wide range of missions.
Needless to say, stock photos aren’t going to fit the bill in most cases. Too much stock imagery throughout your website can hurt your credibility, reduce audience trust, and make your website look less professional.
So, if stock photos aren’t the way to go, how can you choose images that showcase your mission, convey emotion, and build credibility? We recommend taking the following steps:
- Assemble a photo catalog of original images that your organization owns the rights to. If you have a photography whiz on staff, ask them to take photos at events or during volunteer opportunities. If not, it’s worth hiring a professional photographer to collect high-quality photos. Either way, have your photo person create a robust photo archive to pull from whenever you need to update your website’s imagery or other marketing materials.
- Consider illustration. Illustrators are skilled at creating original artwork to portray the mood and topic of your web content, such as blog posts or testimonials. They can also create icons and a library of art that you can use for other areas of your website.
- Gather user-generated content. Ask donors, volunteers, beneficiaries, and other stakeholders to send photos of themselves participating in your nonprofit’s events and programs. Obtain each person’s consent to use the images in your marketing materials and fundraising communications.
The CARE website is an excellent example of incorporating authentic imagery into web content. The homepage includes a compelling header image of children receiving support. Users can get a clear picture of the organization’s mission by scrolling through the rest of the homepage, which includes images showing different types of services CARE offers to communities worldwide.
2. Reflect your community’s diversity.
Research shows that almost 80% of consumers worldwide expect brands to commit to showcasing inclusiveness and diversity in their advertising. Consumers aren’t interested in superficial attempts by companies and nonprofits to incorporate more diversity. Rather, they want genuine commitments that show the organizations they support prioritize diversity and inclusivity in all aspects of their work.
That’s why you should choose website images that accurately reflect your organization’s and surrounding community’s diversity. You can do this by encouraging your photographers to take images representing the diversity of ethnicities, races, genders, abilities, and ages at your events and programs. Also, ensure the photographers include everyone at the event, not just your board members or nonprofit leadership.
If you need to use stock photography, intentionally seek websites that allow you to search for images that showcase the diversity of your audience.
Prioritizing inclusivity and diversity in your images ensures that your nonprofit’s audience can see themselves represented in all aspects of your work. But remember that updating your imagery to reflect diversity should be just one element of your overarching inclusion strategy. The more your nonprofit strives for greater holistic inclusivity, the easier it will be to create a website that reflects that image.
3. Set image quality standards.
Your website’s load speed has a significant impact on its conversion rates. Sites that load in one second have a three times higher conversion rate than those that load in five seconds.
Large, clunky image files that take several seconds to load significantly slow down your pages and lower your conversion rate. To enhance your website’s images, implement guidelines requiring team members to:
- Compress images. If you’re working with a top content management system (CMS) like Drupal or WordPress, you should be able to compress images within your CMS. You can also use simple, free tools like TinyPNG to compress images. Set resolution standards so any images used on your website are crisp and quick to load.
- Consider optimal file formats. Modern image formats like WebP or SVG load faster than traditional formats like JPEG and PNG. WebP images offer smaller file sizes, while SVG images are incredibly scalable and can be resized without losing quality.
- Ensure images are responsive to different screen sizes. Your images should automatically adapt to any screen size, including laptops, tablets, and mobile phones. Verify that your CMS automatically makes images responsive. If not, you may have to implement custom HTML or CSS code to ensure images resize appropriately.
Review image quality and load speeds as key items on your website maintenance checklist. Use tools like PageSpeed Insights to test load times for critical pages like your homepage or image-heavy pages like long-form blog posts.
4. Leverage A/B testing.
In the A/B testing process, you’ll create two different web designs and assess which is more effective for engaging visitors.
Use A/B testing to help you choose compelling website visuals for important pages, such as your online donation page or About Us page. Whichever option receives the most engagement is likely the best choice for your site.
These best practices will help you conduct a successful experiment and understand which changes actually made a difference:
- Only change one page element at a time, or you won’t be able to isolate the most impactful changes. For example, if you’re updating your infographic style, start by just changing the color scheme to have stronger contrast. Then, monitor engagement analytics to see if the adjustment makes a difference.
- Make significant enough adjustments that you can actually see a change in engagement or traffic patterns. Increasing the thickness of the body text on your infographics may not have a meaningful impact on your online engagement. However, changing the banner image on your donation page from a landscape shot to a group photo of volunteers may be significant enough to see real changes in website traffic.
- Don’t assume that a positive change on one website page will automatically have the same results on a different page. For instance, your audience’s reaction to the images on your homepage might be completely different from their response to the visuals on your About page.
Throughout this process, you might find your initial assumptions about what type of images to use were off base. Thorough testing can help you be more confident that you’re only moving forward with the most effective strategies.
5. Use infographics to illustrate concepts.
Of course, not all website visuals have to be images of people. Infographics can be highly valuable for explaining complex concepts or illustrating impact information.
To ensure you’re using the most effective infographics possible, follow these best practices:
- Keep it simple. Overloading your infographic with too much information can make it cluttered and confusing. Choose just a handful of concepts to convey, along with icons or small illustrations that explain them further.
- Remember color theory. Keep basic color principles in mind when designing infographics. For example, contrasting colors make for effective background and text color combinations. Check out this infographic from Oxfam that uses complementary color pairings like blue and orange and purple and yellow.
- Make infographics useful and actionable. Know your audience and what information they’re looking for. For instance, if you’re using infographics to support an online fundraising campaign, your audience will want to know how their gifts benefit your mission. The WWF website’s 2023 annual report includes an example of a simple infographic illustrating how much of their funding goes directly to mission-critical conservation efforts:
The human brain can process visual information 60,000 times faster than written information. When your infographics are optimized to share information as simply and quickly as possible, your website content will be more engaging and informative for new and existing supporters alike.
6. Brand images effectively.
Above all, your images should align with your mission and messaging. Make sure all your website’s photos reflect your nonprofit’s unique style, tone, and message.
Set digital branding guidelines to help your team members decide between multiple image options. Double the Donation’s nonprofit web design guide recommends setting standards regarding various aspects of an image, including:
- Sizing: How will you size images such as blog post feature images or testimonial portraits? Set standard sizing guidelines to keep your visuals consistent and ensure everyone uploading site photos knows what size to choose.
- Formatting: Should images be uploaded in JPG, PNG, SVG, WebP, or a different format? Set formatting regulations so there’s no uncertainty.
- Look: Do you want your images to have a certain tone? Consider including recommendations on the types of images to select for certain website pages or marketing materials. For instance, you might want to choose images of people smiling and chatting for your event recap blog posts but incorporate more somber imagery into your online donation form.
- Sourcing: How can staff members access your internal image catalog? Or, if you choose to include a minimal number of stock images on your website, where will you source them from? Include instructions on using filters to find images representing a wide range of people. Ensure you have permission to use any images produced outside your organization to avoid copyright issues.
- Branding: Your infographics, especially high-value ones, should be branded with your organization’s logo, colors, and font. Take elements from your overall nonprofit branding strategy to establish infographic specifications. For example, you might standardize placing your logo in the upper left corner of every infographic or specify which brand colors to use in infographics.
These guidelines will create visual harmony throughout your website to keep visitors’ attention on your mission.
Your nonprofit’s website images matter, and you should choose them deliberately. They should convey your mission, speak to audience members, and provoke emotion. By using these tips to select images strategically, you can ensure your visual content tells your story accurately.
About the Author:
As Founder and CEO of Kanopi Studios, Anne provides digital strategy to clients and organizations in the nonprofit, higher education, healthcare, and corporate sectors. She opened Kanopi in 2013, upon seeing the untapped opportunities in the market for iterative web design and development. Anne has spent her career at the intersection of business development, marketing, and technology. She specializes in building rapport with clients and converting conversations into tangible results.
Leave A Comment