A Beginner’s Guide to Nonprofit Web Design: 5 Steps

Reading Time: 7 minutes

 

A website can be a great asset to your nonprofit’s community in a number of ways.

Donors may use your site to donate and help you with your online fundraising efforts. Volunteers might use it to register for upcoming trainings or sign up for a shift. Constituents may navigate to your site to request services or to find your social media profiles. 

However, if your website is difficult to use and unpleasant to look at, you’ll likely have trouble getting your stakeholders to use it.

Before you can get your nonprofit community using your website consistently, you have to design it (or revamp it) to be both beautiful and functional. This presents a challenge to many nonprofit professionals. After all, you’re an expert in fundraising or volunteer management, not web design or coding.

So how are you supposed to build a website at all, let alone one that looks great and is easy to use?

That’s where this beginner’s guide to nonprofit web design comes in.

In it, we’ll take you through five steps to start creating a great site for your nonprofit: 

1. Outline your visual brand. 
2. Choose the right website builder. 
3. Decide how you want your resources and tools organized. 
4. Pay special attention to your donation page. 
5. Integrate with social media. 

As you review these tips, look for examples of great websites that showcase these tips in action. And keep an open mind — even websites that aren’t specific to nonprofits can provide inspiration for your own. For example, Morweb’s list of well-designed college websites showcases a variety of different website looks and features that you can learn from to design your own website. 

1. Outline your visual brand. 

Your brand is everything that sets you apart from other nonprofit organizations — the things that make you unique! This includes intangible things like your mission or the attitude with which you approach your work. For example, maybe part of your brand is taking a positive approach to fundraising for your mission, which you communicate by carrying out campaigns with warmth and a can-do attitude. 

But your brand also includes visual elements, which can play an important part in putting together an aesthetically-pleasing design for your organization’s website. As you begin the process of learning how to design your nonprofit’s website, start by outlining which visual brand elements you want to leverage in your design. Your list might include: 

• Logo. If you were asked to picture the logo for McDonald’s, could you do it? Probably, because the golden arches on a red background have a ubiquitous presence all around the world. When you see that logo, you immediately think of Big Macs and French fries. Your nonprofit’s logo can serve the same function on your website, giving a shorthand overview of your mission and what your organization values. Many nonprofits like to place their logo prominently on their website’s homepage to establish who they are and what they stand for right off the bat.
• Color scheme. Colors can also communicate what your organization’s brand is all about. For example, earthy tones might be appropriate for a nonprofit organization focused on environmental issues, while bright primary colors might be best for an organization that focuses on teaching young children to read. Your color scheme is the backbone of your website design, establishing the mood of your website as soon as a website visitor arrives on it.
• Fonts. Yes, you read that right. Even fonts matter when it comes to your visual brand. Ideally, you’ll leverage easy-to-read, professional fonts. Whatever you choose, make sure the styling of text on your website is consistent across the board! 

Once you’ve identified how to transfer your visual brand to your organization’s new website, it’s time to begin building it. Let your branding lead the way as you build out different resources and tools that your audience can use to help your mission progress.  

2. Choose the right website builder. 

A website builder, also known as a content management system (CMS), is a software platform that you use to create your website. A CMS is an essential tool for creating a great website, especially if you don’t have the experience or time to build one from scratch using code. 

There are a number of CMS platforms to choose from, many of which you’ve likely heard of, such as WordPress, Drupal, or Squarespace. However, a nonprofit-specific CMS is typically the best option for organizations looking for an easy and intuitive website-building experience. A CMS built for nonprofits allows you to: 

• Add and edit content from the front end of your website 
• Easily add nonprofit-specific features to your site, like donation pages or event management tools 
• Get support from web design experts familiar with the platform, instead of digging on Google for advice and answers 

The bottom line with CMS platforms is this: Just as you want to reduce costs and increase revenue when fundraising, you want to do the same when choosing your CMS. A nonprofit CMS is a worthwhile investment because you’ll save loads of time and money, and get a beautiful website without a stressful design experience. 

However, if someone in your organization does have more technical web design experience, a generic option may be a good fit. Consider your specific organization’s needs and then pick the best CMS for your purposes. 

3. Decide how you want your resources and tools organized.

Once you’ve selected your CMS, it’s time to think through the overall organization of your website. Deciding on what resources and content you want and where you want them will help guide your design decisions. It’s crucial to make your website donor-friendly.

The best place to start is your navigation menu. This is where website visitors will go to see what content and resources are available on your website. Take a top-down approach, listing your most important content first. For example, you might list your donation page higher up on your menu and include a link to volunteer or event waivers further down the menu. 

You should also decide on the organization of your homepage itself. While your homepage should be primarily focused on establishing your brand and the mission you stand for, it’s also a great place to showcase the most essential things on your website. For example, you might use your homepage to feature a list of your most recent blog posts, a fundraising thermometer for an ongoing campaign, or live social media feeds. 

Another great organizational tool that can also help visitors jump to important resources quickly is the call-to-action button. These buttons can help visitors quickly complete important tasks. To make these buttons effective, pay close attention to the wording. “Donate now” or “Register” may get the job done, but phrases such as “Donate to end childhood hunger today!” or “Register for our annual gala now” are much more eye-catching and communicate a clear action. 

Thinking through the organization of your website gives you the chance to step into your website visitors’ shoes and consider what their experience will be like when they navigate to your site. Approach your site organization efforts with intuition and simplicity—and ask for feedback along the way. This will help lay the foundation for a great user experience on your website. 

4. Pay special attention to your donation page. 

One of the most important resources on your website will be your donation page. This is where supporters go to act on their belief in your work. Sometimes a well-designed donation page can make the difference between a supporter giving a gift or deciding to abandon their plan to donate. 

So, how can you create an effective donation page that encourages people to give? Here are some donation page design tips: 

• Brand the page to your website. An unbranded, generic-looking donation page can appear suspicious to potential donors, even if it’s not! Brand your donation page to match the rest of your website. Branding will help you appear more professional and consistent across the board, and strengthen the tie between the act of donating and your mission.
• Keep the questions to a minimum. It can be tempting to ask dozens of questions on a donation form. After all, it’s a great tool to capture useful information about your donors! However, too many questions can drive donors away, especially if they’re short on time. Ask for only the essentials — like contact information and payment details. If you do want to ask for more information, make sure you mark those questions as optional.
• Offer a gift-matching tool. Donors love to increase their impact, especially if they’re able to do so at no additional cost. That’s where matching gifts come in. With matching gifts, an employer agrees to match their employees’ charitable contributions, dollar for dollar. You can kickstart this process of pulling in matching gifts by offering a gift-matching tool that donors can use to check their eligibility. According to Double the Donation’s guide to matching gift software vendors, you’ll want to choose a tool that is comprehensive, easy to use, and frequently updated. Consider your options carefully!

Your donation page is where the magic happens, so it’s not enough to just throw something together and hope that your donors figure out how to use it to give. Instead, consider the design of your donation page carefully, and don’t be afraid to ask team members or volunteers at your nonprofit to test it out and give you suggestions. The better your donation page, the better your chances of pulling in more and more support! 

5. Integrate with social media. 

If your nonprofit is active on social media, you can leverage your profiles to help create a steady stream of two-way traffic between your website and different social media platforms. All you’ll need to do is include social media icons on your website that link to your profiles. Better yet, you might add a live social media feed to your homepage to showcase your most recent posts.

Here’s how this might look in practice: Say you’re partnering with your local school district to launch a school fundraiser. You might send an informational flyer home about the campaign, encouraging parents to check out your organization’s website to learn more about the organization their child’s school will be helping out. An interested parent could then navigate to your website, see that you have an active Instagram profile, and follow your organization’s account. 

From there, they’ll get updates on Instagram when you’ve posted something new. Then, if you link to your website’s blog or donation page, you can encourage that new follower to move continuously between these two hubs of your online presence, becoming more and more committed to your mission! 

A well-designed, easy-to-use website can be a great tool for marketing your nonprofit’s cause and campaigns. And even if you’re new to web design, a high-quality website is still within your reach. Simply leverage this beginner’s guide to nonprofit web design to get started, using a nonprofit-specific CMS to effectively organize your content and provide useful resources to your audience. You’ve got this!