Non Profit Website Design: Examples and Best Practices

Advertisement

Non profit websites share many of the same best practices as any website. They need to be user friendly, easily navigable, and use appropriate fonts, colors, and other design elements. But often a non profit website needs to offer more than your typical corporate site.

A non profit’s website needs to make it easy to find out more about their cause, to donate money, and to become more involved. It needs to make it easy for media contacts to find the information they need and the contact information of key personnel. And it needs to do all this in a way that’s inviting to the organization’s targeted donors and/or volunteers.

Below are a list of best practices for designing non profit websites followed by some examples of non profit websites that are getting things right.

1. Make Your Site Donor-Friendly

Donations are a necessary thing for every non profit organization out there. Your website can be a great place to solicit donations, especially from new donors. It can also make it easier for recurring donors to make additional donations. In either case, you want it to be a simple and straight-forward process for people to give you money.

Screenshot1

There are a few things to keep in mind when creating a donor-friendly site. First, make sure your donation page is prominently linked from your home page. Whether you do this with a special banner or button or simply make it prominent in your regular navigation, donors have to see where to donate before they can do so.

Second, make the actual donation process as painless as possible. Don’t require visitors to set up an account to donate. The donation process shouldn’t be any more complicated than any other online transaction. Other than information required to process their credit card or e-check, don’t require any other information. And use a single-page donation form if possible, with just one confirmation page. There’s less chance that there will be browser or connectivity issues if there’s only a single page to deal with.

2. Make Your Site Media-Friendly

Getting media attention can have a huge impact on a non profit organization. Whether the media attention brings in more donations directly or simply raises the profile of the organization, getting attention from journalists, bloggers, and anyone else with an audience is important.

Screenshot2

Make it easy for journalists to find information about your organization. Include profiles of your board of directors, founder(s), and other key personnel. Make sure you include contact information (email and phone) for each of these key people. Have a downloadable media kit that includes everything your print media kit does.

Offer downloadable images from your site so journalists and bloggers don’t have to contact your and wait for a response. And include press-ready quotes, both from members and directors as well as outsiders. Make it clear that journalists and other organizations may use these items in news coverage without contacting the organization for prior permission.

3. Make Your Site Volunteer-Friendly

Make it easy for visitors to your site to find information on how they can get involved. There are plenty of people out there who might not have the money to make a donation but are still passionate about what your organization is doing.

Whether you provide detailed information about volunteering directly, steps people can take on their own, or just contact information for your volunteer organizer, make sure you don’t overlook this crucial bit of information.

Screenshot3

Providing multiple means of contact makes it easier for volunteers to get in touch, so include an email address, phone number, and a web contact form if you can.

4. Make Sure Your Organization’s Purpose is Immediately Apparent

How many times have you gone to a website and not had a clue what the site was about? This happens all too often. Designers and clients often take for granted what visitors to their site will already know about their organization.

But considering how much information is pushed in bite-size pieces on sites like Twitter and Facebook, there’s no telling how much or how little visitors will know. With some organizations it’s easy enough to figure out what the organization is about just by its name, but for others it’s not so easy.

Screenshot4

Putting an abbreviated mission statement right on the home page is one way to solve this. Another way is to put a prominent link somewhere on the home page that takes visitors to an about page that offers concise, plain-language (not “marketing-ese”) information about what the organization does.

5. Make Sure Your Content Takes Center Stage

Design on any site should be transparent, and especially so on non profit sites. That’s not to say your site can’t have an interesting design, just that the design should revolve around your content and your mission, not the other way around. Take into account the types of information you’ll be providing on the site and the formats that will be used.

Screenshot5

Consider up front how much multi-media elements will be used, and whether they’ll be used on every page or just in special gallery sections. If you plan to post videos and photos on multiple pages, you’ll need to make sure your column widths other elements are complimentary to the kinds of media you want to use.

Make sure your columns are wide enough to accommodate YouTube videos, for example. If they’re not, any time you embed a video (or similar element), your site design will look haphazard (and some of your site content might end up covered up).

6. Make Sure Your Website is Consistent with Your Other Promotional Materials

Your logo should use the same logo and colors as your other promotional materials. Maintaining a consistent brand throughout your organization greatly increases your chances of being recognized in passing. Your website doesn’t have to (and probably shouldn’t) match your print promotional materials exactly, but echoing the look and feel of those materials increases brand identity.

Screenshot6

Make sure the content is consistent, too. Proofread and copyedit your website content just as you do your print materials. While it’s easier to change content on a website, it still gives a negative impression if your site is riddled with errors and inaccuracies.

7. Know Your Site’s Purpose Up Front

The leaders of your organization (or whoever is in charge of the organization’s website) should make a list of what the goals for the site are before starting the design process. Is the site primarily to allow existing members to stay updated? Is it to solicit donations? Is it to get new volunteers or members? Is it to raise awareness in general?

Screenshot7

Whatever your purpose is, knowing it and communicating it to your designer going into the design process will save headaches and delays down the road. Make sure everyone is on board with the same vision, too, so you don’t have to make unnecessary changes down the road, which saves both time and money.

8. Include a News Section or Blog

Including a blog or news section has a couple of big advantages for non profit sites. First, it gives people a reason to come back to your site. If you offer news about your organization and your cause, people who are interested in either will come back on a regular basis (or subscribe via RSS). This keeps your site visible and makes it more likely they’ll become more involved in the future (or stay involved if they are already).

Screenshot8

Second, blogs and news sites are often quoted by other blogs and news sites. This increases the exposure for your site and will likely bring you more traffic.

Third, constantly-updated content increases your search engine visibility. This makes it easier for people actively looking for information related to your organization to find your site.

20 Examples Of Great Non Profit Sites

Greenpeace USA9
The Greenpeace website does a lot of things right. Links for donating or becoming a volunteer are featured prominently in their side navigation. Their media center page is also displayed prominently. The site features integrated mutli-media content in the form of both slideshows and videos, as well as both blogs and a news section.

Screenshot10

Kiva11
The Kiva website has a very simple and straightforward design. Right at the top of the page they explain exactly what Kiva does, and they make it very easy for visitors to lend money. They also have a featured entrepreneur on their home page, further encouraging others to join. They also feature an “About” link prominently in the header, which then links to tons of additional information, including a press center.

Screenshot12

New York City Coalition Against Hunger13
The New York City Coalition Against Hunger offers up an excellent website. Links to volunteer and donate are featured right on the home page. In the top navigation they include prominent links to both their “Media” section and an “About” section. Recent updates from the NYCCAH Hunger Blog are also included right on the home page.

Screenshot14

ASPCA15
The ASPCA website makes it immediately apparent through images and small text areas on their home page what the organization is all about. Donation links are featured both in the main content area of the home page and in the top navigation. Links to the “Pressroom” and “About” sections are also included in the top nav. Links to additional resources are also featured prominently.

Screenshot16

One17
This is one of my favorite non profit sites. A multi-media slideshow is featured prominently on the home page, showcasing featured content. Links for more information, the issues the organization is interested in, and links to join or take action are all featured prominently in the top navigation and elsewhere on the home page. The site also includes a blog (featured on the home page).

Screenshot18

The Michael J. Fox Foundation for Parkinson’s Research19
The Michael J. Fox Foundation website offers a great home page that includes tons of great information without looking cluttered. Links for living with Parkinson’s, about the foundation, research programs, and how to help are included prominently in the middle of the page. A donation link is also included in the top navigation. And news both about Parkinson’s and the Foundation are also featured prominently on the home page.

Screenshot20

Save the Children21
The Save the Children website is an excellent example of getting a lot of information into a small space while keeping everything de-cluttered and user-friendly. Links to donate or sponsor a child are included in the top navigation as well as below the slideshow on the home page. There are also links to more information and for other ways to become involved featured prominently. Information on the site is presented in a concise and user-friendly manner, providing plenty of information in easy-to-read chunks.

Screenshot22

Oxfam America23
The Oxfam America website uses color to make their donation button stand out on the home page. While the majority of the site is designed in shades of green and tan but the donation link is orange. It stands out without being garish. News is prominently featured on the home page, along with plenty of information about what Oxfam does.

Screenshot24

Natural Resources Defense Council25
The NRDC website also makes use of color to distinguish between different sections of their site. The “Donate” and “Take Action” links are denoted in orange. “Blogs” are in green and everything else, including their “About” and “Policy” page links are in blue. Multi-media content is featured prominently on the home page, as is recent news.

Screenshot26

Amnesty International27
The Amnesty International site makes great use of color, including a bright yellow header and accents mixed with shades of gray and black. A slideshow on the home page shows current news and research. Links to join, donate, or take other action are featured prominently in the sidebar and a link to media information is included in the header. The home page also includes plenty of current news and resources below the main content up top.

Screenshot28

The Nature Conservancy29
The slideshow on the home page of The Nature Conservancy’s site is one of the best I’ve seen, offering up information about various programs and initiatives they support. The site also includes other multi-media content from the home page. Links to donate, become a member, volunteer and other ways to help the organization are highlighted in yellow in the sidebar, making them easy to find while still fitting with the understated overall site design.

Screenshot30

Witness31
Witness takes a slightly different approach to their site, as monetary donations are not their primary focus. They use their site to effectively solicit video contributions showing human rights violations from countries around the world. Links to news, their media archive, and ways to get involved (including training) are included prominently in the top navigation.

Screenshot32

Product (Red)33
The Product (Red) site features products that support the organization prominently in a slideshow on their home page. They also include links on other ways to get involved, their blog, and learning resources in the sidebar. The overall site design is simple, which is primarily achieved by the limited color palette (red, gray, and white).

Screenshot34

Susan G. Komen for the Cure35
This site makes great use of space in their header for highlighting important links, including ones to pages for women recently diagnosed with breast cancer, how to make a difference, and a page to share your own breast cancer story. The donation link is featured in the header, making use of a bright pink button where the rest of the header is gray. This is another site that features a slideshow prominently on the home page.

Screenshot36

Take The Walk37
The Take The Walk site makes great use of bold graphics and a slideshow on the home page to immediately capture visitor attention. A graphic showcasing how many miles have already been walked and how many left until they reach their goal is the main highlight of the home page. Below the graphic are the different ways people can contribute and the different causes for which they’re raising money.

Screenshot38

Change.org39
Change.org is a different kind of non profit site. Their aim is to raise awareness and get individuals to take action on a variety of different causes. Because of this, their “Causes” section is the most prominent feature on their site. Causes are featured in the main content of the home page as well as in the top navigation. Other prominent features are tools to help individuals get started with their own causes.

Screenshot40

charity: water41
The charity: water site is a great example of how simple but bold design can make a huge impact. The donate button is red, while the rest of the site employs black and dark gray navigation. Three images linked to different resources on the site make up the bulk of the home page, creating a huge impact without being complicated or fussy. Links for the media, getting involved, and other resources are easily found in the top nav.

Screenshot42

The Breadline Africa Worldwide Blogger Bake Off43
The Breadline Africa Worldwide Blogger Bake Off site is one of the more Web 2.0-ish non profit sites I’ve seen. It’s easy to find information about the project right on the home page, including brief explanations of every aspect of the event. Links to join the bake off, donate, and to other resources are also featured prominently, as is a counter to show how much money has been raised so far.

Screenshot44

Blog Action Day45
The Blog Action Day site changes each year based on the cause being blogged about (as well as changing for updates before and after the actual event). In its current incarnation, it’s providing a recap of 2008’s Blog Action Day focusing on poverty. Statistics are prominently featured on the home page (including a chart showcasing the percentage of all blog posts that day focusing on the cause), as is a link to more information about what Blog Action Day actually is. The home page also includes a place to sign up for updates on the next event, press information, and information on how to donate.

Screenshot46

Ducks Unlimited47
The Ducks Unlimited site focuses on providing useful and relevant content more than anything else. The sidebar is filled with links on how to get involved, their photo gallery, newsletter, FAQs, and about information. A “Join” button is featured prominently in the header but doesn’t detract from the overall design of the site. The top navigation is filled with more links to resources provided by the organization.

Screenshot48

Further Resources

Here are additional links that might be of use when designing your portfolio site.

Footnotes

  1. 1 http://ww5.komen.org/
  2. 2 http://www.greenpeace.org/usa/
  3. 3 http://www.savethechildren.org/
  4. 4 http://www.kiva.org/
  5. 5 http://www.nature.org/
  6. 6 http://www.joinred.com/Home.aspx
  7. 7 http://www.witness.org/
  8. 8 http://www.amnesty.org/
  9. 9 http://www.greenpeace.org/usa/
  10. 10 http://www.greenpeace.org/usa/
  11. 11 http://www.kiva.org
  12. 12 http://www.kiva.org/
  13. 13 http://www.nyccah.org
  14. 14 http://www.nyccah.org/
  15. 15 http://www.aspca.org
  16. 16 http://www.aspca.org/
  17. 17 http://www.one.org/us/
  18. 18 http://www.one.org/us/
  19. 19 http://www.michaeljfox.org
  20. 20 http://www.michaeljfox.org/
  21. 21 http://www.savethechildren.org
  22. 22 http://www.savethechildren.org/
  23. 23 http://www.oxfamamerica.org
  24. 24 http://www.oxfamamerica.org/
  25. 25 http://www.nrdc.org
  26. 26 http://www.nrdc.org/
  27. 27 http://www.amnesty.org
  28. 28 http://www.amnesty.org/
  29. 29 http://www.nature.org
  30. 30 http://www.nature.org/
  31. 31 http://www.witness.org
  32. 32 http://www.witness.org/
  33. 33 http://www.joinred.com/Home.aspx
  34. 34 http://www.joinred.com/Home.aspx
  35. 35 http://ww5.komen.org
  36. 36 http://ww5.komen.org/
  37. 37 http://www.takethewalk.net
  38. 38 http://www.takethewalk.net/
  39. 39 http://www.change.org
  40. 40 http://www.change.org/
  41. 41 http://charitywater.org
  42. 42 http://charitywater.org/
  43. 43 http://www.bloggerbakeoff.com
  44. 44 http://www.bloggerbakeoff.org/
  45. 45 http://www.blogactionday.org
  46. 46 http://www.blogactionday.org/
  47. 47 http://www.ducks.org
  48. 48 http://www.ducks.org/
  49. 49 http://www.networkforgood.org/npo/technology/answer7.aspx
  50. 50 http://blog.jelecos.com/post/2009/04/09/(Some)-Best-Practices-for-Nonprofit-Web-Site-Design.aspx
  51. 51 http://terrymorris.net/bestpractices/
  52. 52 http://www.masternewmedia.org/news/2006/03/25/web_design_and_development_top.htm
  53. 53 http://www.smashingmagazine.com/2009/03/31/backgrounds-in-web-design-examples-and-best-practices-2/
  54. 54 http://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices/

↑ Back to top Tweet itShare on Facebook

Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of The Smashing Idea Book: From Inspiration to Application.

Advertising
  1. 1

    Thanks for this, I actually operate a couple of small non-profit sites, this will certainly help.

    0
  2. 52

    This article came at a great time for me. I just had a meeting with a small non-profit who needs a site redesign, increased web presence, and better branding.

    I’m actually a student studying web design and this non-profit will be my first client.

    I look forward to integrating many of these ideas in the development of their site.

    Kudos to SM.

    0
  3. 103

    Russell Heimlich

    May 19, 2009 8:03 am

    Is Gallup.com a non-profit? I always liked their design. very slick and data driven.

    0
  4. 154

    Krishna Reddy O.V

    May 19, 2009 10:03 pm

    Its really great advice. I got a plenty of information by going through this site. Thanks for providing such a valuable information.

    0
  5. 205

    What there are non profit websites? ^^

    -3
  6. 256

    Can you please tell me how to make the donation page. How do you make the transaction and all that stuff without using paypal?
    thanks

    0
  7. 307

    very nice! thanks for sharing.

    0
  8. 358

    I cannot believe you have listed a hunting website as a non-profit website here. Ducks Unlimited invests some money in conservation to keep duck numbers up – just so that they can blow them out of the sky. It’s offensive and disgusting that you have listed this site here and I would suggest removing it and replacing it with an example of a TRUE conservation website!!!!!!

    0
  9. 409

    Please don’t flame me because I’m totally new to website design, but I love how the Take the Walk website has that huge flash animation and then the content underneath. My question is, is did they use CSS grid or a table to create that area underneath the flash animation…where they have the “buy sms credits, drill water, build schools…etc”? Just wondering because I would like to implement something like that on my website one day.

    Thanks.

    0
  10. 460

    I recently came across your blog and have been reading along. I thought I would leave my first comment. I don’t know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.

    0
  11. 511

    I think it’s also important to provide the user with a quick way to sign up to receive information so that you can begin building a relationship. Many of the examples presented show a search box where there should be a sign up opportunity.

    0
  12. 562

    Thanks for all the information it has really helped me.

    0
  13. 613

    Great article – very useful, I’ve been referencing this often for a project I’m currently working on.

    0
  14. 664

    Great article – very helpful for us non-profits!!! Thanks very much.

    0
  15. 715

    Thanks for this post – it was really useful during a recent redesign of Opportunity International’s website – opportunity.org – We went back and compared our work against the 8 objectives above!

    0
  16. 766

    Terrific article! One item I would add to this list is include personal stories that engage the visitor emotionally. This can make a huge impact toward converting website visitors to donors and donors to advocates. Corporate brands have long known the benefits of making an emotional connection with their audience and non-profits can benefit from this as well.

    Lynn Bell

    0
  17. 817

    Very helpful! Thankyou so much

    0
  18. 868

    This is a nice list of take action points. I’ve recently provided some free services to non-profits and hope to make a big impact particularly on their volunteer recruitment efforts, which they sorely need at the moment.

    Great examples here that I will definitely refer back to in the future.

    Ernie

    0
    • 919

      @Ernie

      I am starting a non-profit organization with zero money but I have a domain name. Please could you help me in good cause. My country Ghana has 1.4 million children out of school and my non-profit’s mission is to put these children back to school and keep them in school through donations.

      Thanks,
      Opoku

      0
  19. 970

    Great post on some of the best non profit web design ever done. Some of the design I sawa was very similar to what I’ve done for the company I work for.

    I saw some comments of people above asking for non profit web design companies. Any website company would be able to help you with that request as it’s pretty much the same as regular websites.
    Our CEO is very passionate about non profit as he’s involved with his own foundation and usually offer’s generous discounts to non profits. If you are unable to find someone, we’ll be able to offer you some nice discounts.

    Matt Hughes

    0
  20. 1021

    Great post here, we’ve been providing web design services to nonprofits for over 3 years. Our clients include nonprofits across the country. We not only pay attention to the design (which is very important) but also to search engine optimization, social media and internet marketing for nonprofits. Visit us to learn more – SEOnonprofit.com

    -1
  21. 1072

    Thanks for the really good tips and design examples!

    0
  22. 1123

    Great article with helpful info and wonderful design. I’m helping a nonprofit develop a website, this points me in the right direction. Thanks.

    0
  23. 1174

    Very useful article. thanks

    0
  24. 1225

    Thanks for the great article. Very helpful.

    0
  25. 1276

    Forfa-ah Micholas

    February 23, 2011 1:10 pm

    With the experience you have, can you giveus the address of two or more website designers who can meet the above criteria in building our website?

    -1
  26. 1327

    Could any please give me bad examples? I need it for training. Thank you

    -1
  27. 1378

    Something that non-profit websites should have now days is a video right on the home. I believe users want to connect with the organization and video helps if done well.

    Forfa-ah Micholas I know a firm that does non-profit web design. I was looking for examples as well and ran into this blog. Some decent tips. Here are some non-profit websites they’ve designed. They are lunawebs.com and here are some non-profit web design examples from their company:
    http://www.tifie.org
    http://www.agoodgrief.com
    http://www.mentorsinternational.org
    http://www.bighearthumanitarian.org
    Luna provides pro bono work to a limited number of non profits each year. Others they discount work for. I don’t know if they still do that, but it was part of their giving back to the community in their mission when I associated with them. I hope this helps

    0
  28. 1429

    The Green Coalition website is worth a mention too. http://www.greencoalition.net

    0
  29. 1480

    esta buenisiiiiimo!!!

    0
  30. 1531

    kaknockfoundation

    September 2, 2011 5:42 am

    Hello, Greetings from kaknockfoundation.

    We would like to have a professional best website.

    Please help us

    -2
  31. 1582

    yall are all fags

    -4
  32. 1633

    Wow, this site is right on time for me, as we are in the process of designing our web site now. Thank You

    0
  33. 1684

    Hello

    I want to start a website for my old school

    please help me

    1
  34. 1735

    This is definitely a very good post with some simple but insightful tips. Christopher makes the point that each organization’s site should have a distinct purpose – and that showcasing this from the onset is what will give your website the “edge”. I think that if you get muddled in the details this is often the most critical thing that gets overlooked.

    @seeruu This may or may not be helpful but some friends and I have used http://www.notforprofitweb.com – they offer a pretty comprehensive product/package and it is relatively inexpensive so you could run multiple sites without incurring a lot of fees(good for easy startup/low barriers to getting a site off the ground)

    @Joshua Gay I agree – having stale news will kill your site in terms of returning / recurring visitors. I recommend either forming some sort of partnership with a non-competitive NFP and utilizing their high quality content – or of course you could write your own.

    0
  35. 1786

    Marketing with articles recognition keeps growing swiftly. More people every day are usually seeing the advantage of getting content articles available to market their organizations .

    0
  36. 1837

    Here are a list of donation websites compared: http://www.squidoo.com/donation-websites. Even if you don’t use these directly, it’s useful to see how donation pages are layed out and presented

    0
  37. 1888

    Thanks for this helpful column and for the helpful comments that have been posted. It’s interesting that people are still reading and commenting on it 3 years after it was posted. Goes to show how useful it remains.

    0
  38. 1939

    Be nice if the links opened in new tabs…

    0
  39. 1990

    Please give your feedback regarding humancaresyria.org

    0
  40. 2041

    Another very good non-profit site is DC Jobs for Justice http://www.dcjwj.org/
    Contains all the elements listed above and more including advocacy, information distribution, membership and events.

    0
  41. 2092

    We used these guys to build our non-profit website for a local animal rescue. The templates are pretty and the website builder is easy to use. http://npowebsitedesign.org/ I think from start to finish with our logo we got the site completed and launched within 3 days!

    1
  42. 2143

    beginning a world service website, it is very helpful for your many comments. it has given me understanding enough of website issues to feel that I may be able to cope, and succeed. thank you everyone

    1

↑ Back to top