Non Profit Web Design Tips | Examples & Strategy

non profit web design tips

Designing a non profit website? Learn non profit web design tips from my design experience. I’ll share helpful examples and some strategy.

Non-Profit Web Design

Non-profit websites typically get a bad wrap when talking about great web design. Many non-profit organizations out there are getting web design right by following a simple plan of attack.

Recently, I was approached to do a website for a non-profit organization. This sparked my thought process, and I decided to really break down the goals for the design.

Non-profit websites share many of the elements of any common or corporate website design. Some basic web design principles include making the design appropriate for the niche, following the company brand, and focusing on the important content. However, there are many other elements to consider when designing a website for a non-profit organization. Mainly, let your visitors know your purpose, and make it easy for them to help.

In this article, I will lay down a solid plan to help take your non-profit organization’s web design to maximum efficiency.

1. Make Your Mission Statement Clear


Nobody wants to visit a website where they have no idea what it’s about. Assume your visitors have no previous experience with your organization. Design your website around your non-profit’s actions and purpose. Make the mission statement clear as day. You could place an abbreviated mission statement at the top of a sidebar, at the top content, or in the header.

non-profit mission design

Example from michaeljfox.org

Another option would be to include a link in your main navigation leading to the full mission statement. Title the navigation link so that visitors will know where to read more about the organization and it’s goals.

2. Make it Easy to Donate


Every company needs capital to function. Non-profits aren’t really an exception to this rule. A website can be a great tool for taking donations, because it is so easy to access from the internet. Make the donate button obvious, and position it high in the visual hierarchy of your design.This is known as a ‘call-to-action’ Also, include the donate button on every page. (A ‘call-to-action’ button is simply a button on your site that is urging the visitor to take action.)

make it easy to donate

Example from glocalventures.org

The donate button should be only second to your organizations logo. The top right corner is a great place to make your donate button visible.

Extra tip: Make the donation process as simple as possible. If there is no benefit of creating an account then do not make them sign up. An excessive sign up form could be enough to scare away someone making a minor donation.

3. Make it Easy to Volunteer


Volunteers are vital to a non-profit organization. Provide information on how people can get involved with your organization. Setup a link in your main navigation and/or promote sign ups with a ‘call-to-action’ button similar to the donate button discussed above.

non profit volunteer web design tip

Example from africaoasisproject.org

4. Stick to Your Brand


All of your promotional materials should work with the same schematic as your website. This means using the same logo, colors, fonts, and as well as other design elements. Using the same design elements will increase the chance that someone will recognize your branding more than once. Perhaps a person has been to your website, and now they are sitting in a waiting room somewhere reading brochures. They will be more likely to skim through again, and push a return visit to the website if their first visit was cut short.

non profit branding web design

Example from shoeboxministry.org

Keeping a consistent design will strengthen your organization’s brand overall. Also, be sure emphasize the same goals and purpose within your materials.

non profit brochure based on web design branding

Brochure design by splendidmediagroup.com

5. Design for the Niche


Designing a non-profit website for the niche is where graphic design skills start to kick in. This can make or break visitor your experience. Use textures, fonts, and color that relate to what your non profit organization is pushing. Check out the carbonica website example below.

target non profit niche web design example

Example from carbonica.org

The carbonica mission statement reads, “Our mission is to combat global warming. We do this by planting trees.”

Consider the atmospheric setting of your website. They have effectively conveyed what they do by using recycled paper textures, a down-t0-earth color pallet, dirty fonts, sketchy shapes, and even trees/grass in the header. This is only one approach to the eco-friendly appeal, but it’s a great example of website atmosphere/environment.

6. Be Friendly to the Media/Press


The media is your friend. Make it easy for journalists, blog contributors, and anyone else to find out information about your organization. The attention can bring big publicity free of charge, and that could lead to more donations. Also, beyond donations you may also see an increase in support from volunteers, and the public will become more aware of your market brand.

save the children media example

Example from savethechildren.org.uk

The primary function of the Media Center is to assist with publicity. Make sure materials such as logos, imagery, and contact information readily available. Having a media kit available for download will cut out any delays and/or inconveniences for the press. Include anything a journalist might need to know about your organization.

green peace media example

Example from greenpeace.org

Make the media or press link easy to find on the website, but not so large that it draws more attention than your donate button. Placing a link in your navigation, or even in a secondary link set will do the trick.

7. Entice Visitors with  News, Events, and Blogging


Including sections like ‘Latest News’ and ‘Upcoming Events’ can have some big advantages.

non profit news and events web design example

Example from wisergirls.org

A few advantages include…

  • Relevance
    • New content shows that your organization is making moves. Letting visitors see upcoming events will keep them informed and active.
  • Exposure
    • Writing about recent happenings in the organization or topics will allow other websites to link to your website. This is a great way to gain traffic from other websites.
  • Search Engine Spydering
    • Having new content on your organization’s website is great for search engine visibility. Increasing the amount relevant content you have gives you a better chance of being found.

8. Spark Community with a Blog


Blogging has many of the same advantages of the news feed. The big difference is the amount of content you will be adding is significantly greater. Contributing relevant articles to your organizations website can mean an even larger increase in traffic. Loyal readers can come back for controversial and informative topics, therefor generating discussions on the comment boards.

aiga blog non profit web design example

Example from www.aiga.org (a great design association to join…)

9. Be Social


Social media is one of the latest epidemics to sweep the internet scene. Social websites like Facebook, and now Twitter, are becoming highly valuable to contributing to websitetraffic. It’s basically free advertising.

social networking for non profit website

Example from envirenew.org

Make the links visible on the website, but place them into a slighty inconspicuous position. Make them extras when compared to the content of the website. If you place them at the top of a sidebar, or on the home page, be sure to make them compact. This will keep them out of the way. If you blog, be sure to place them in every article by using a social widget.

Social bookmarking websites like StumbleUpon, Tumblr, Reddit, etc. may also bring in traffic. There are hundreds of bookmarking sites out there. I published a some of them previously in my post, “30+ Promotional Sites Where to Submit Your Design Blog.”

10. Content Management Systems


“Plain Jane” HTML websites are becoming a thing of the past. Hook your non profit website up with an easy to update content management system.

drupal vs wordpress vs joomla

WordPress vs Joomla! vs Drupal

In the long run, installing a CMS will save you time and/or money on website updates. Out of the box web software like WordPress, Joomla!, and Drupal are often not difficult to setup, and they typically come free with any shared hosting package running CPanel. (TheDesignerHost.com offers FREE Non-Profit Hosting)

There are many places to purchase quality templates for your web software. ThemeForest.com has tons of templates that can be easily modified to get the desired results for your non profit website.

Tips For Choosing…

  • WordPress: User-friendly, Versatile (can be used for most medium development projects)
  • Joomla!: A bit more advanced than WordPress but slightly less user friendly
  • Drupal: Recommend for advanced developments, Not so user friendly
    Here is a detailed breakdown… What CMS Is Best For You?

Not sure if you have CPanel? Follow these instructions:

Type to http://yourdomain.org/cpanel into the address bar. (yourdomain.org is your web address) If a Cpanel login box doesn’t show then your hosting probably does not have Cpanel installed.

Want to install a content management system now?

With Cpanel: After logging into you Cpanel, find the icon that says Fantastico Deluxe under Software/Services. On the left side you will see a sub section that is titled Content Management. Pick your web software of choice and install.

Without Cpanel: It’s still possible to install manually via ftp. An example of a manual install for WordPress.

11. A Few More Great Non-Profit Websites to Look at for Inspiration


If checking out the non-profits in the examples above wasn’t enough to satisfy you then check out a few more below.

take the walk non profit website

Revive Africa Non-Profit Example

new york hunger web example

New York City Coalition Against Hunger Non-Profit Example

revive africa non profit web design

Revive Africa Non-Profit Example

towritelove non profit

To Write Love on Her Arms Non-Profit Example

one non profit example

ONE Non-Profit Example

Vandelay Design has also posted a more extensive list of non-profit websites if you still want more…

Tags: , , , ,

Blake McCreary, independent designer

An Indianapolis graphic designer specializing in a broad range of design skills, mainly logo/brand identity design. I work with clients around the globe.
Interested in hiring me for your next project? Let's talk!

Community

Feel free to share your thoughts via Facebook or with regular comments.

14 Responses

  1. [...] This post was mentioned on Twitter by Blake McCreary. Blake McCreary said: Designing a Non-Profit Website for Maximum Efficiency – http://sl.ly/12c17 (via @blakemccreary) [...]

  2. Diana Howard says:

    Great points, Blake. I would add that doing what you need to do to adapt a WordPress theme, instead of creating a difficult-to-manage regular HTML site from scratch can make the lives of the short-funded and short-staffed non-profits a lot easier. It will also help the designer, since, after the site is up and running, they are less likely to need your help with the site management—so you can spend your design time with more profitable clients!

  3. Diana Howard says:

    Great points, Blake. I would add that doing what you need to do to adapt a WordPress theme, instead of creating a difficult-to-manage regular HTML site from scratch can make the lives of the short-funded and short-staffed non-profits a lot easier. It will also help the designer, since, after the site is up and running, they are less likely to need your help with the site management—so you can spend your design time with more profitable clients!

  4. Social comments and analytics for this post…

    This post was mentioned on Reddit by blakemccreary: let me know what you think….

  5. Bess says:

    This is brilliant. Very helpful. Just what I needed. Thank you.

  6. Bess says:

    This is brilliant. Very helpful. Just what I needed. Thank you.

  7. I am glad to know about designing Non-profit websites concept. As described in your article three basic principles like, a making the design appropriate for the niche, following the company brand, and focusing on the important content. Specially and most important part of this article is 1-10 points with illustrations. I liked very much and I am sure this will help me to boost my business and others web developers too. :)

    Thanks,

  8. I am glad to know about designing Non-profit websites concept. As described in your article three basic principles like, a making the design appropriate for the niche, following the company brand, and focusing on the important content. Specially and most important part of this article is 1-10 points with illustrations. I liked very much and I am sure this will help me to boost my business and others web developers too. :)

    Thanks,

  9. BUZZINGSTREET says:

    Dear Visitor,
    Thanks for visiting this nice and useful blog. As many events are about to happen soon. So we just want to share few things with all visitors as it might be helpful for everyone.

    NSE and BSE are trading in range and we are expecting breakout in the market after budget. One should buy quality stocks at every decline and should exit long positions at every rise.

    Regards
    BUZZINGSTREET

    Stock market investment if done with proper research and updated knowledge than it can give very lucrative results. There are four basic golden rules of stock market which are to be followed
    (thebuzzingstreet1@gmail.com)http://www.buzzingstreet.com

    We will be discussing the various benefits of speed trading and its various coefficients using which one can make the most out of their investments in the Indian stock market including both Nifty and Sensex (NSE and BSE)

  10. [...] include making the design  appropriate for the niche , following the company brand , and … Read More RECOMMENDED BOOKS REVIEWS AND OPINIONS Become a typeface pro with [...]

  11. Web design Singapore says:

    Handling each topic very greatly manner,expose every should be very clearly and honestly. Give more information for the support of this blog in future. Good going man.

  12. [...] This post was mentioned on Twitter by AllianceMedicalTrust, Annette Oliveira. Annette Oliveira said: Graphic Design Professional Group Group News | LinkedIn: Designing A Non-Profit Website…http://t.co/eegULQu #website #nonprofit [...]

  13. [...] Link: Design Non-Profit Website Max Efficiency | Blake McCreary Design [...]