11 Unique Nonprofit & Charity Website Designs [2018 Edition]

Are you looking for a little inspiration to build or refresh your nonprofit website?You’ve come to the right place.

But before we showcase all the eye-catching designs, it’s important to highlight a few key statistics that might influence the way you think about your website:

\n
• There are over 1.5 million registered nonprofits in the U.S. alone
\n
• 2.39% of nonprofits account for 90% of total reported revenue
\n
• 84% of donation landing pages that are not optimize for mobile(34% increase in conversion rate on websites optimized for mobile)\n
\n
• 37% of nonprofits don’t send any email within 30 days of sign-up
  \n
\n

(Sources: National Center for Charitable Statistics, Giving USA, Blackbaud Institute, Dunhaman Company, npEngage) 

The takeaways from these statistics are:

\n
• There is a lot of competition online, so your website needs to stand out. Having the same generic WordPress template as everybody else just won’t cut it. You need to build something unique to your organization.
\n
• The revenue gap between big and small charities is huge. This drastically affects the budgets allocated towards building and marketing a website. Small organizations typically need to use a website builder and create it internally.
\n
• Your website needs to be optimized for mobile. Period.
\n
• Having a newsletter sign-up on your website is not enough. You need to follow-up and nurture your subscribers.
  \n
\n

To further highlight some of these points, let’s take a look at some of the best nonprofit and charity websites online today. We will look at what they do well, and what they could improve.

Enjoy!

Top 10+ NonProfit & Charity Website Designs

Charity Water

Why this is a great design

\n
• Easy to read fonts, bright colors, and generous spacing make this site a pleasure to navigate.
\n
• Well thought-out menu labels and call-to-actions that encourage people to get involved with the charity.The “why water?” page does an amazing job explaining the importance of the cause using highlighted titles, icons, and powerful imagery.
\n
• As you scroll down any of the subpages, the main menu layout changes to only showcase the primary call-to-action. This entices visitors to take action while learning about the foundation.
\n
• The site does an excellent jobGreat job offering multiple donation options so people can offer their support in different ways.
  \n
\n

Things we think could be improved

\n
• Call-to-action on newsletter signup could do a better job at explaining the value. “Get our emails” is not enough.
\n
• There are a few issues with the blog (on Tumblr). For example,here should only be a short text snippet linking to the full articles instead of having the entire post visible on the main page. This makes for infinite scroll. Also, the navigation menu overlays the text in a weird way and appears broken.
\n

The Future Project

Why this is a great design

\n
• All the titles and statistics have large typography which makes them stand out and easy to read.
\n
• The baby blue color is consistently used to highlight the call-to-actions and focus the users attention as they scroll through the site.The forms are designed well which makes it easy for visitors to take action.The mobile experience is great, with a seamless transition from desktop to mobile.
  \n
\n

Things we think could be improved

\n
• The linked photos and videos should open in a new tab. If users are sent directly to Instagram, they are less likely to convert on the main site.
\n
• Although the site has an SSL certificate, the page rules should be set up to force HTTPS.
\n
• On the main page, the “Our programs” boxes have a great hover effect, but don’t link to the proper page upon click. This is a UX issue.
  \n
\n

Thirst Relief

Why this is a great design

\n
• The very clean design is a great example of how less is often more when it comes to web design.
\n
• Distinct sections and links make the site very easy to navigate.
\n
• The high-quality images and icons used help explain things faster than text.
\n
• The strong call to action on the newsletter does a good job explaining what to expect and why you should sign up.
  \n
\n

Things we think could be improved

\n
• Ditch the “Home” link. A linked logo is sufficient for bringing visitors back to the homepage.
\n
• The white overlay on the subpages makes the white text hard to read. A darker overlay might of been a better choice.
\n
• The footer’s design is a little off; it could be rearranged to prioritize certain elements and make them easier to find.
\n

Life in my shoes

Why this is a great design

\n
• The single page design offers multiple sections to display all the relevant information, reducing the amount of navigation required.
\n
• To help draw visitors’ attention, every section is unique, but still offers a strong level of consistency in the beautiful images, colors, fonts and highlighted call-to-actions.
\n
• Social proof: the organization effectively communicates backing from well-known celebrities, in addition to recognition and awards for filmmaking.
  \n
\n

Things we think could be improved

\n
• An SSL certificate to enable HTTPS! Every website should provide a secure connection. This is especially true for websites that ask for private information and payments, like nonprofits!
\n
• Update your site! There has been no NEWS since 2015. If the site is no longer active, redirect it to your main website to help reduce the confusion.
\n
• The contrast is a little light on some of the text: light grey on white or dark grey on black are UX no-nos.
\n
• The main navigation is a little busy. Consider trimming it down and having your main call-to-action in the top right corner.
\n

WWF

Why this is a great design

\n
• Stunning images that really capture the beauty of the planet and that tie into the WWF’s mission. You won’t find any stock images here.
\n
• Simple navigation. Although this site has over 10,000 pages, there are only a few simple menu labels with relevant dropdowns.
\n
• Multiple donation options for every user-type: buy products, make one-time donations, make monthly donations, etc.
  \n
\n

Things we think could be improved

\n
• Multiple subdomains with a variety of navigation styles; we understand that the site is very large, but this inconsistency creates a poor user-experience.
\n
• Confusing calls-to-action. There are over 10 different ways to support the foundation. It might be beneficial to have a clear, generic call-to-action, like “MAKE A DIFFERENCE” and then explain the benefits on that page. 
\n

The Shoe That Grows

Why this is a great design

\n
• Beautiful fonts. The handwritten type makes you feel like the stories were written by the children benefiting from the charity.
\n
• Use of powerful images, videos, and copy throughout.
\n
• Simple, high contrasting section so users don’t get lost.
  \n
\n

Things we think could be improved

\n
• The overlaid text on a few images is hard to read; the design needs more contrast or better alignment.
\n
• Reduce the number of calls-to-action, as too many may create confusion for visitors.
\n
• Logos at the bottom of the homepage should be reduced in size, as they do not fit with the rest of the design. 
\n

Blood:Water

Why this is a great design

\n
• Simple, alternating sections make all of the information easy to digest.
\n
• The execution of strong branding and color consistency.
\n
• The navigation menus are simple, with a single call-to-action.
\n
• The footer presents a suggested donation amount.
  \n
\n

Things we think could be improved

\n
• The formatting of the background video could be improved, as it is fast-paced and makes the hero text difficult to read.
\n
• Increase line height in text as the paragraph text is a little crammed.
\n
• Menu labels are thin and hard to read; we suggest using a thicker or darker font.
\n

HeForShe

Why this is a great design

\n
• The strong colors and contrasts create a unique, memorable experience.
\n
• The interactive elements (buttons, maps, hover effects, etc) are effective in communication.
\n
• Strong copy and calls-to-action such as “COUNT ME IN” & “TAKE ACTION”.
  \n
\n

Things we think could be improved

\n
• Text overlaid on images should not be included within the image itself. This can create issues for search engines, screen readers, and slows down the site.
\n
• Once again, an SSL certificate to enable HTTPS! Every website should provide a secure connection. This is especially true for websites that ask for private information and payments, like nonprofits!
\n

Vintage Hope

Why this is a great design

\n
• Beautiful colors, fonts, and images make this design very unique.
\n
• The design incorporates a clever use of paint brush strokes to help highlight the different titles.
\n
• Great use of a single page design with interactive menu and anchor links for easy navigation.
  \n
\n

Things we think could be improved

\n
• This website needs a favicon! Without this little icon, the site won’t look professional when shared online.
\n
• Once again, this site is missing SSL. Without HTTPS, potential donors will not feel secure on your website.
\n
• Images are slow loading because they are too large. We recommend using a website builder with automatic image optimization to easily avoid this issue.
\n
• The website’s paragraph text is a little small, and contrast should be improved for better legibility.
\n

SAM

Why this is a great design

\n
• Modern use of looping video on the homepage to effectively showcase the story behind the charity.
\n
• Each subpage has a distinct look with excellent use of whitespace, beautiful fonts, bold colors, strong contrasts, and subtle animations.
\n
• Great illustrations, images, and powerful videos throughout the site help reinforce the messaging.
  \n
\n

Things we think could be improved

\n
• The website isn’t easy to navigate without getting lost. This can be improved with better menu labels and by revisiting the page hierarchy.
\n
• Although the video is great, text on the homepage can be hard to read because of the low contrasting text and fast-pace background video.
\n
• Another site that needs SSL. No one wants to give away personal information online without feeling secure.
\n

Girls Who Code

Why this is a great design

\n
• Genuine photography showcasing the diversity of all the girls participating in the “girls who code movement”.
\n
• The site is very easy to navigate and strong call-to-actions are ever-present.
\n
• Amazing illustrations on the about-us page really explains why the organization exists and why you should get involved.
\n
• Great use of social proof (eg. testimonials and statistics about the success of the participants).
  \n
\n

Things we think could be improved

\n
• Other than the homepage, none of the pages have an Open Graph image. Without this meta tag, the link won’t have an associated image when shared on social media.
\n
• Certain elements are not aligned, like the banner under the hero image.
\n
• Some of the pages flicker when loading because of the way the site was built.
\n

Summary

As you can see with the examples above, there are many ways to create a stunning non-profit website.

Some of these websites had bigger budgets and have custom sites built by agencies, while others built the websites internally with a website builder.

Whatever process you choose, the keys of a stunning design are the same:

\n
• Simple layout with easy navigation
\n
• Powerful images and graphics
\n
• Clear messaging and call-to-actions 
  \n
\n

If you’re looking for a website builder that gives you everything you need to build your own custom non-profit website without code, check out PageCloud! They have tons of charities already building on their site, and their team is there to support you every step of the way.