Nonprofit Website Design: 4 Elements to Include

September 1, 2021


One of the major takeaways from the COVID-19 pandemic is the necessity of virtual communications in the modern world. When we were all isolated in our homes, we had to rely on tools like Zoom and FaceTime to maintain connections with our loved ones. 

Mission-driven organizations like yours also made this transition, planning virtual events rather than in-person gatherings and relying more heavily than ever on digital marketing for supporter engagement. 

Although the pandemic-related restrictions and best practices continue to change, this increased reliance on the digital realm won’t retire. We continue to see more hybrid event opportunities, digital fundraising, and virtual outreach. All of these digital strategies centralize around one vital nonprofit tool: your website. 

If you’re creating a new website for your organization or revamping your old one to accommodate this increased digital reliance, you need to pay special attention to specific web design elements. These include your: 

  1. Mission
  2. Calls to Action
  3. Organization Impact
  4. Visual Brand Attributes

Your website is often the first place that supporters go to get more involved. Inspirational branding and web design can make the difference between capturing a relationship with your web visitor and letting them fall to the wayside.

1. Mission

Your nonprofit’s mission is the central focus of your team and broader community. Therefore, it should also be a central component of your website design.

If you have a concise mission statement, include it directly on the homepage of your website. If it’s more lengthy and could take up too much space on your homepage, try including the full statement on your “about us” page with a summary on the homepage. 

This statement should stand out from the rest of your content, so leverage the space at your disposal to make it stand out from the other content on your site. For example, consider how the WWF uses white space on their homepage to create space between their header image and their mission statement: 


Because this website incorporates engaging images both at the top of the homepage and in the middle, including their mission statement on a white background, centered on the page, draws attention to it.

2. Calls to Action

Your nonprofit website’s calls to action are what drive your visitors to engage. Individuals can learn all there is to know about your mission and programs from the content included on your site, but your efforts to make them care are fruitless if they don’t have an easy way to get involved. 

Effective calls to action drive the initial engagement visitors have with your website, then make it easy for them to return and continue engaging in the future. It takes involvement from both your organization and the supporters to grow impactful relationships that last for the long haul. Make it easy to do their part by showing them how to get involved with calls to action like these:

Donation Buttons

The most direct way that visitors can help your organization achieve its mission is by donating. When designing your website, place your donation button where it will be visible immediately to all interested visitors. To make it prominent and navigable, include this valuable tool above the fold on your website, making it accessible and visible on your homepage without needing to scroll down. 

But placement isn’t enough to make sure your donation button is visible to visitors. Use contrasting colors so that the button pops against its background. 

Finally, use active language like “Donate Now!” or “Give Today!” to communicate exactly what you want visitors to accomplish with a sense of urgency. 

Subscription Boxes

Some visitors won’t be quite ready to donate to your cause, but they may be willing to learn more about it. That’s why it’s important to also include a call to action to encourage supporters to subscribe for future engagement. 

Make it clear to the supporter what your subscription box is offering to receive, such as blog updates or your email newsletter. For instance, if you send a regularly scheduled bi-weekly newsletter, but only update your blog now and then, push your supporters to your newsletter as a more consistent source of information. Then, use language such as “Sign up to read our latest newsletter!” so that subscribers know exactly what they’re getting. 

Your subscription box is meant to make involvement easier for your visitors. By providing an immediate action to take, they don’t need to leave the current page they’re viewing on your site. They can simply type in their email address and receive the information they’re looking for. 

Options to Learn More

Adding cards and buttons to your web design that introduce new topics and provide links to learn more can help drive visitors deeper into your content, allowing them to dive deeper into the mission and develop a passion for it.

If you have case studies or testimonials that back up your mission, tease the content on your homepage and throughout the main pages of your site. Then, include prominent buttons that link to more information and stories about your mission

Just like your donation button, these buttons should be featured in a color that stands out against the background. However, you may choose to include these buttons below the fold on your homepage to drive more traffic to your donation page rather than informational ones. 

3. Organization Impact

Your website visitors will take interest in the mission and the community problem that your nonprofit is working to solve. By including impact information on your website, you show visitors that not only are you aware of the issue but that you’re actively working to fix it. It adds a level of trust amongst prospective supporters when they see your past success. 

Showing impact to visitors can take a number of forms, including: 

  • Statistics. Statistics provide concrete evidence that your organization is doing what you claim to in the community. Choose two or three statistics that stand out and show off the value of your organization to highlight on your website. 
  • Testimonials. Testimonials pull at visitors’ heartstrings, showing them how the actions of your organization directly impact a single individual. This provides a personal perspective on how your nonprofit is able to help people in your community. 
  • Links to annual reports. There’s a lot of valuable information in your annual reports, including financial information, project updates, and major donor acknowledgements. These reports can come in the format of traditional books, videos, postcards, and self-mailers. Whatever the format, digitize your report and include it in a prominent place on your website to show a detailed account of your community impact. 

Here’s an example from Oxfam Canada’s website: 


These statistics show the progress made so far by this project, which provides resources to reduce violence against women and girls. If visitors are on the fence about engaging, these impact statements show that the funding provided by supporters directly helps the mission and that the organization can be trusted to address the issue at hand. 

4. Visual Brand Attributes

Humans process visual information 60,000 times faster than text. Therefore, when visitors see your website, the first things they’ll take in are the visual attributes. Carefully consider the branding elements in your website design to make sure you provide a positive impression.

The nonprofit branding guide by Loop lays out a number of branding elements that you should consider when designing your site. From this guide, we’ve pulled out three important visual elements that you can leverage to define your visual identity. 

Logo 

Your nonprofit’s logo is the first indication of your brand. It’s the design you want people to immediately associate with your organization, no matter where they encounter it. If you were to see the Nike Swoosh or the Golden Arches on marketing materials, you would immediately associate these symbols with Nike and McDonalds. Create a design that has the potential to become just as recognizable. 

Design a simple, unique logo that uses your brand colors and fits in with your style. Simplicity is key because it replicates across various marketing platforms more effectively, from your website to t-shirts to email campaigns. 

Your logo should also be timeless, not requiring many updates or playing into the trends of the day. This helps maintain a sense of consistency with your brand and builds on existing recognition. 

Typography

Text is important on your website, both in the capacity that you must write well and that it must be attractive. For accessibility purposes, your text needs to be easily readable with a clear font. This means you shouldn’t use script or display fonts for large chunks of text. 

Consider the tone that you want to communicate with your visitors, then leverage a font type that communicates that tone. For instance, strong, boldface fonts communicate urgency and action while a lightweight font conveys a lighter tone.

Color Palette 

When designing your website, choose specific colors to represent your organization’s brand. When doing so, keep in mind that different colors bring about different subconscious emotions in site visitors. For example:

  • Red is often used to convey bold emotions such as passion, health, and strength. 
  • Yellow is associated with sunshine, happiness, and optimistic emotions. 
  • Green frequently is used to represent growth, prosperity, and a connection with nature. 
  • Blue may represent tranquility and trust. 
  • Black often represents serious and bold brands and causes. 

When you choose your colors, be sure you have an adequate contrast ratio to stay compliant with accessibility standards. Otherwise, it could be challenging for those who have trouble distinguishing colors to read the content on your site.  


Whether you’re redesigning your nonprofit website to give it a more modern look or launching a brand new one, you don’t need to start from square one. Explore other websites and discover the elements that speak to you. Then, make a list of these creative attributes that you’d like to adopt on your own site. 

From there, you can either start designing yourself, usually by customizing an existing template or talk to a professional like Loop who can help you with the design process. If you choose the latter, communicate openly with your agency about what your organization represents and the visitors you want to attract.

{ 0 comments… add one now }

Leave a Comment

Previous post: