Insights to Power Social Good

Nonprofit Web Design: 7 Essential Elements for Your Site

Posted by Jeff Gordy on Apr 6, 2017 9:00:00 AM


Building a Fantastic Website


Editor's Note: This article is brought to you by Jeff Gordy from NeonCRM. Jeff is, quite frankly, an expert on this stuff, and we are so grateful for his addition to our blog! Check out Neon for all of your CRM needs!


In the age of the internet, there are few things as off-putting as a bad website.


Now, “bad” can translate into a lot of things—from non-functioning to unintuitive to just plain unattractive.


While a bad website can encompass a lot of elements, a good website, on the other hand, generally includes a number of pretty standard components.


Here, we’ll walk through 7 nonprofit web design must-haves that can turn any bad website into a compelling, engaging experience for visitors, including:


  1. CRM Integration
  2. Simple Design
  3. Easy-to-Use Navigation
  4. Consistent Branding
  5. Clear Donation Options
  6. Mobile-Responsiveness
  7. Donor-Centric Content


A well-designed website can demonstrate an organization’s reputability and naturally encourage visitors to make online donations.


That means that by investing some time into building a strong website, your nonprofit might just reap the benefits of better donor relationships and greater fundraising results, too.


Once you’ve incorporated each element on our list, we’re confident your website will be one of the best around—and your donors will agree!


Ready to get started? Let’s dive in.


NE-mGive-Nonprofit Web Design_ 7 Essential Elements for Your Site-Header1.jpg 

1) CRM Integration

Why does it matter?

As a nonprofit, you likely rely on your CRM to manage many aspects of your fundraising and stewardship strategies. But did you know you may also be able to use your nonprofit CRM to generate online forms that integrate perfectly with your website?


When your CRM and online forms work hand-in-hand, all data collected on your website will automatically flow into your donor database, removing a lot of manual data management from the equation.


This doesn’t just apply to donation forms, either. Many CRMs are able to generate any kind of webform, from event registration to volunteer sign-up and everything else under the sun.

How is it done?

If you’re shopping for a CRM, you should select one that can generate webforms to integrate with your website. (And since integrations can be tricky, do your research to ensure that your CRM and website builder are compatible.)


Make sure the forms have the level of customization you need. As we’ll touch on later, it’s important that every page on your website—including your donation page—is fully branded to match your organization.


On the other hand, if you’re in the process of building a new website, consider looking for a vendor who offers both CRM and nonprofit web design services.


By working with only one provider, you’ll not only guarantee foolproof integration, but you’ll streamline the buying process significantly.


NE-mGive-Nonprofit Web Design_ 7 Essential Elements for Your Site-Header2.jpg

2) Simple Design

Why does it matter?

Let’s face it: everyone wants to be able to access what they want when they want it, and your donors are no exception!


When your website is crammed with a million design elements and paragraphs upon pages of text, chances are, you’re more likely to overwhelm your donors than you are to connect with them.


Conversely, a website that’s clean and free of unnecessary clutter will make it easy for visitors to find what they’re looking for (and stick around to see some other great parts of your site, too!).

How is it done?

To create a website that’s practical without being overpacked, follow this simple rule of thumb: if you don’t need a particular element, don’t include it.


That means avoiding too many icons and animations, ditching images that don’t add value, and breaking up blocks of hyper-descriptive (read: rambling!) text.


When building your site, consider white space your friend. Keep paragraphs to five lines or less, and don’t pack any design elements too close together. While images and videos can be great additions, use them sparingly and thoughtfully.


NE-mGive-Nonprofit Web Design_ 7 Essential Elements for Your Site-Header3 (1).jpg

3) Easy to Use Navigation

Why does it matter?

Let’s walk through an example scenario. A supporter has found your (CRM-generated, minimalistic) website.


They’re excited to learn more about your organization and maybe even make an online donation, but there’s only one problem: they have no idea how to leave your homepage!


Including an intuitive, user-friendly navigation bar can solve this issue.


In order to get the full experience of your nonprofit website, visitors need to be able to move from one area of the site to another quickly and easily.


Even if you do have a navigation bar in place, if it’s too confusing to follow, most site visitors won’t have the patience to learn how to use it.


After all, no matter how beautifully designed, without proper navigation, your website won’t be very useful at all!  

How is it done?

Faulty or impractical navigation can be a major obstacle for your website, but luckily, it can also be a pretty easy problem to fix.


You should include a navigation bar at the top of every page of your website (minus your donation page). To maximize its effectiveness, make sure to keep all navigation titles simple (fewer than 3 words each) and accurate. Your navbar is not the place for jargon or confusing language!


As you’re setting up your navigation bar, keep in mind that you’re also establishing a hierarchy among your pages. Include your most important content (your About and Ways to Give pages, for example) first and work outward to other essential links.


NE-mGive-Nonprofit Web Design_ 7 Essential Elements for Your Site-Header4.jpg 

4) Consistent Branding

Why does it matter?

As we’ve already alluded to, strong branding across every page of your website is a must. Not only is a well-branded page more aesthetically pleasing, but it adds a layer of trustworthiness to your organization.


Think about it: when a supporter interacts with your website, they want to trust that they’re interacting with your nonprofit on every page.


If they’re bouncing around pages with a variety of colors, layouts, and font choices, they’re not going to feel very secure (and they’re almost definitely not going to make a donation).

How is it done?

There are a few simple ways to use branding to ensure that your donors trust your site.


In general, you should develop a style guide that establishes design standards for all your online content.


More specifically, we recommend starting with your color scheme. Don’t go crazy here—2 or 3 bright colors and a handful of neutrals is enough to give your site a cohesive look and feel.


You’ll also want to choose a standard font to use for all your text. While your logo font can be as creative as you want, you’ll want to choose a legible sans serif font for your body and headings.


Another way to subtly remind your donors that they’re in the right place? Include your organization’s logo on the top left header of every page!


NE-mGive-Nonprofit Web Design_ 7 Essential Elements for Your Site-Header5.jpg

5) Clear Donation Options

Why does it matter?

What’s the purpose behind your nonprofit’s website?


To educate and inform donors about your cause? Perhaps. To provide relevant resources and articles? Maybe. To empower supporters to contribute to your organization through online donations? Bingo!


While your organization’s website will accomplish many things, one of your goals should be to facilitate online donations directly on your site. To that end, it’s vital that you prominently display your donation button all over your website.


After all, how can you expect your visitors to make a donation if they don’t even know how to?

How is it done?

Like many of these tips, it’s not difficult to promote online donations on your site.


The best way? Just incorporate your donation button onto a variety of places throughout your website.


The first and foremost location should be in your navigation bar. Since the donation page is (arguably) the most important page on your site, make its navigation title stand out by giving it a bright, colorful background.


While you don’t want to pepper every page with a handful of “Donate Now!” signs, you should always give your supporters a logical next step as they’re exploring your site. In many cases, that means making a donation.


Consider adding a prominent, eye-catching donation button throughout your site, especially at the bottom of important pages.


For more ways to collect online donations on (and off) your website, check out this article from DonorSearch.


NE-mGive-Nonprofit Web Design_ 7 Essential Elements for Your Site-Header6.jpg 

6) Mobile-Responsiveness

Why does it matter?

The logic behind building a mobile-friendly site is pretty obvious: people love their smartphones!


Individuals of all age groups use their phones for just about everything these days, from browsing social media to catching up on the news to—that’s right!—learning about charitable causes and even making donations.


If your website doesn’t perform as perfectly (and look just as visually engaging) on a small screen as it does on a laptop, you’re going to miss out on a significant portion of your potential visitors and potential donors.

How is it done?

Thankfully, most web designers won’t design a page that isn’t mobile-ready, and most website-building platforms will include features for automatic mobile optimization.


That said, it’s still a good idea to take some steps to ensure that all your pages (especially your donation page) are mobile-responsive, such as:


  • Including large, easy-to-read fonts.
  • Minimizing the number of elements on each page.
  • Using a vertical layout.
  • Making buttons large and free of unnecessary text.
  • When in doubt, testing your website on a phone or tablet.


Optimizing your page for mobile isn’t a difficult task, but the payoff is well worth any extra effort!


NE-mGive-Nonprofit Web Design_ 7 Essential Elements for Your Site-Header7 (1).jpg

7) Donor-Centric Content

Why does it matter?

In this post, we’ve focused on how you can make your site more appealing and engaging, but let’s not forget who it is we’re doing all of this for—your nonprofit’s supporters, of course!


Your nonprofit accomplishes a lot, but none of it would be possible without your donors. That’s why it’s important to take a donors-first strategy when plotting out your web content.


When donors see how their contributions (either monetary donations or volunteer time) can impact the world, they’ll be much more likely to consider becoming involved or contributing again.


There are a lot of benefits to creating a website that highlights your supporters rather than your organization, but let’s sum it up. Donors want to know where their money, efforts, and time are going, and your website is the perfect place to show them!

How is it done?

To emphasize the important role your donors play in your organization, you’ll need to make them the heart of all your nonprofit’s efforts.


As you’re discussing your accomplishments or highlighting key successes, make sure that you’re framing your supporters as the protagonists of your nonprofit’s story.


Language such as “because of our donors’ generous support” or “our supporters raised” will subtly communicate how highly you value your constituents. You should avoid too much “I” or “we” phrasing.


You can show your appreciation more directly, too.


Consider using photos that show your supporters participating in community service or fundraising events. You might even include a dedicated page that highlights your donors’ hard work, with testimonials from supporters themselves.


Unlike some of our other points, there’s really no wrong way to implement this website essential. Just make sure you’re always keeping your donors front and center, and your website will be good to go in no time.


Wrapping Up

When we spend a lot of our time staring at a screen, there are few things as refreshing as a beautiful, well-designed website.


Hopefully, these tips have helped you feel more confident as you build (or improve upon) your own nonprofit website.


For more web design best practices, take a look at Double the Donation’s tips and tricks for outstanding nonprofit web design. (Trust us: your website visitors will thank you!)

Topics: Fundraising, nonprofit, Mobile Engagement, SEO, web design

Receive Fundraising, Acquisition, and Cultivation Tips by Email

Resources to Mobilize Your Organization

2015 Text Donation Study

Follow Us

Most Popular Posts