Non Profit Web Design Tips | Examples & Strategy

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Revive Africa Non-Profit Example

New York City Coalition Against Hunger Non-Profit Example

Revive Africa Non-Profit Example

To Write Love on Her Arms 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…