Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

Non Profit Website Design: Examples and Best Practices


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 Link

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.


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 Link

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.


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 Link

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.


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 Link

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.


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 Link

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.


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 Link

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.


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 Link

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?


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 Link

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).


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 Link

Greenpeace USA8
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.


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.


New York City Coalition Against Hunger12
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.


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.


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).


The Michael J. Fox Foundation for Parkinson’s Research18
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.


Save the Children20
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.


Oxfam America22
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.


Natural Resources Defense Council24
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.


Amnesty International26
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.


The Nature Conservancy28
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.


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.


Product (Red)
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).


Susan G. Komen for the Cure32
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.


Take The Walk34
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.


Change.org36 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.


charity: water38
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.


The Breadline Africa Worldwide Blogger Bake Off
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.


Blog Action Day
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.


Ducks Unlimited41
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.


Further Resources Link

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

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.

↑ 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.

  1. 1

    Christopher Wulff

    May 14, 2009 8:22 am

    Agreed with @Mike. These are principally sites designed to raise awareness and money. These sites are closer to product marketing than anything else.

    I would be interested in seeing an index of the best non-profit organization sites that are focused on service delivery to clients, which I see as the biggest gap out there right now.

  2. 2

    Well at least this makes a change from all the inspirational posts on here of late.
    Good work

    • 3

      Desperately seeking help with my Non forProfit website, I started with and well my skills lie in raising funds and networking but building a website was a major challenge. a face lift is in order, or a labotomy probably. Is there any amazingly generous student free lancer,dream maker that could give me a hand up. Just need some new foundations or complete reno, full crreative permission is yours., Deborah King Director needs you and so do the 300 kids that need hope.

  3. 4

    Nice one :)

  4. 5

    takethewalk image links to the wrong site

  5. 6

    Wauw this really comes at a great moment…. SM is really amazing, it’s like I have a co-worker or something!!

  6. 7

    Extreme work for this subject. Thanks very much. I really appreciate that.

  7. 8

    this is right on time :) … excellent read guys, thanks a lot!

  8. 9


  9. 10

    Unique Post….
    Keep it up

  10. 11

    These aren’t so much non-profits as they are considered advocacy sites within the industry.

  11. 12

    Appreciate the look into non-profit/group-based organizations…kudos to Cameron for putting focus on this. Knowing that a lot of us come to SM for tips, inspiration and shortcuts…It’s worth noting that many of these organizations showcased in this article have completely mastered the grassroots and network aspect of marketing online. Very beneficial to pull best-practices from these entities for pushes into twitter, facebook, blogging and how to tie them all together around your corporate domain for a consistent message.

  12. 13


    May 14, 2009 7:56 am

    Great post!

  13. 14

    9. Make sure your site is über accessible.

    10. If you’re registered, make sure that every page has your charity details (in the footer). Especially if you’re asking for money.

    Great post though.

  14. 15

    Mandy Richardson

    May 14, 2009 8:11 am

    “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.” does a great job for great cause and adheres to the mindset for this post… simple and effective.

  15. 16

    I think that Mike and Christopher have a valid point: each organization’s site should have a distinct purpose – there are many outcomes you can focus on with your website. It’s just that many examples above focus on advocacy or getting more donors.

    Although we all wish that outcome for our nonprofits, some organizations are trying to achieve entirely different goals with their websites. What about nonprofits that are research-oriented? Dissemination and knowledge sharing should definitely be a main component of the site, but so many nonprofits lack the capacity, resources or know-how for it. We’d like this (very vibrant) discussion around nonprofits and technology to include more talk about sharing information!

    at IssueLab

  16. 17

    Chris Robinson

    May 14, 2009 9:12 am

    Some great info and examples, actually just used Kiva this morning to lend some money to a Entrepreneur in Bosnia although its not the prettiest site it works beautifully.

  17. 18

    This article was amazing! Thanks!

  18. 19

    I suppose all tips go for all (commercial) stes also, when generalized… ;)

  19. 20

    Cool, but I think #4 should be at the top

  20. 21

    You guys are sync with me these days. I’ve taken on a new project, building a Web Site for a Non – Profit and a few of your suggestions did not occur to me to recommend.
    But now I’ll be able to help this organization further by throwing out some of your awesome suggestions.

    I’ve actually referred a couple of more users to your site. Count me in as one of your enthusiastic site promoters.

    Again, Thank you for all your hard work and great resources!

  21. 22

    Always love your showcases. Keep it up Smashing!

  22. 23

    wow, two of the featured sites – Amnesty and Witness – made by Civicactions, where I work :) w00t ;)

  23. 24

    Very nice! Thanks a lot!

  24. 25

    I am heartened by the comments of Mike, Christopher, and Luise. Too many people I meet in the non-profit industry equate “good website” with “raises a lot of money”.

    Let’s move #7 (Know Your Site’s Purpose Up Front) to #1, since that’s what “up front” means. Then we can imagine all sorts of excellent websites that assist non-profits in accomplishing their mission, not just fundraise for them.

  25. 26

    Great post! By the way, “nonprofit” is a legitimate word without a hyphen or a space.

  26. 27

    Nice article- very useful, thanks

  27. 28

    Paul Pennel

    May 14, 2009 2:41 pm

    Good ideas, I need to go back over a website now. Thanks.

  28. 29

    Wonderful subject to discuss. Doing work for non-profits is pretty important to me (paid or unpaid) and these are some great basics (I agree that they carry over into the for-profit world). If anyone else is interested, I came across this website a few months back where you can volunteer a few hours for various nonprofits throughout specific areas: Most of the needs are for graphic and web design projects.

  29. 30

    This is really great advice. I had a few things to add.

    If you have some specific goals set out for this quarter, year, etc, then make it easy for people to help achieve those goals. The first thing you should do is ask them to help recruit others to help you achieve the goal. Then ask them to announce it to other news/social sites (reddit, blogs, facebook, etc). Lastly, get them to sign-up or give you an email address. Make sure you follow-through and let them know how they have helped. And in every email, make it really easy to opt-out.

    Also, a note on putting news on the front page. Providing news is good, but make sure you keep it up to date. If the news gets too old or is no longer relevant, just put it in an old-news archive and don’t display it. Also, make sure the news you are putting out there is about achieving your mission, not just the latest hires, etc. There is a place for that, but, make sure it’s not the only thing up! If it is, just take it down after a short period of time.

  30. 31

    Great article! In regards to point #1, this may not always hold true. For example, my company created a not-for-profit website (Between Friends Club), and as you mention, online donations were a top priority. However, we did need to collect more information than just enough to process the credit card information; the system automatically generates a PDF tax receipt which requires full name (or company name) and address. This is a really nice convenience for the donor, as they don’t have to wait for a mailed receipt.

  31. 32

    Thomas Strobl

    May 14, 2009 10:18 pm

    it’s funny that every lame and crappy design nowadays is called “simple and straightforward”

  32. 33

    thanks for these great tips…
    check out

  33. 34

    Product (RED) is a for profit company to the best of my knowledge.

  34. 35

    Great stuff, thanks

  35. 36

    Great post, plenty of inspiration and good advice – thanks!

  36. 37

    So kewl, thanks guys. Coincidentally I have started building a non profit site for a punk magazine (it doesn’t even have a name, but you can guess no sponsors and therefore no money) so this came at just the right moment :D

  37. 38


    May 15, 2009 3:55 am

    Great, thanks! Any examples for a ballet school by any chance? :-)

  38. 39

    Wow. The Nature Conservancy website may be the best website I’ve seen for a long time. Fantastic design, great use of jQuery and clear content. It loses it slightly towards the footer, but that’s pretty minor. Really good job by whoever the designer was.

  39. 40

    I work for a local non-profit and have taken it upon myself to redesign their website. This article, although focused on much larger non-profits, provided some great insight for the redesign. Keep up the good work! I love this website!

  40. 41

    Yup, good article with great examples, although you missed WaterAid America’s site!


↑ Back to top