Designing a Non-Profit Website for Maximum Efficiency

Blake McCreary — Thu, 15 Apr 2010 10:24:56 +0000

Non-profit websites typically get a bad wrap when talking about great web design. The fact of the matter is that many non-profit organizations out there are getting it 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. 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…

Creating a Lightbox Gallery in WordPress | Introducing the Lightbox Plus Plugin

Blake McCreary — Wed, 21 Oct 2009 16:08:25 +0000

The answer to your lightbox gallery problems is here.

Last night, I was pressed for time developing a WordPress site for my friend who happens to be an upcoming hip hop artist out of Atlanta, Georgia. Before we get started you can check out the new gallery to see how it functions. (Mr. Floyd County Photo Gallery) The launch is on October 23rd and everything was ready to drop on iTunes. The website had been neglected all summer with both of us being busy and we had to throw everything together quickly. After all, what artist doesn’t have a website up and running at all times if you are anywhere near the mainstream? (hrrm…http://www.kidcudi.com…seriously. I’m getting big timed hardcore on Twitter.) Anyway, I ran into some major issues when implementing a lightbox gallery in the WordPress.

If you haven’t noticed yet I use the Flexible Lightbox plugin on my Portfolio page to showcase my designs to potential clients. That plugin has always been quite a pain in the ass to me. It never works when I try to simply import a gallery all at once instead of doing all of the images individually. The CSS code has to be tweaked every single time I go in to edit. I will be taking my own advice soon and upgrading to the Lightbox Plus WordPress plugin by 23Systems.net.

I tried just about every single lightbox plugin possible including Lightbox 2, Shadowbox, and Flexible Lightbox. They just would not work with my new theme design. The images in the gallery just kept popping the images into a new window tab which is extremely boring. After getting frustrated I performed a search in google and hit this page.

http://wordpress.org/extend/plugins/lightbox-plus/faq/

After reading through the frequently asked questions and troubleshooting page for the Lightbox Plus plugin I was immediately convinced that there was some good development behind the plugin so I installed it. After installing the plugin I was immediately impress by the array of options available within the admin panel. The screenshot below does not do justice.

Lightbox Plus Options Sample

One of the most impressive options within Lightbox Plus is the style setting. Many bloggers are not very knowledgeable in CSS customization and the plugin clearly takes care of it with so many choices already available. A few of other settings available Resize Speed, Transition Type, Overlay Opacity, Slideshow, Previous/Next Labels, and much more. You can check the plugin out at the 23Systems.net home page or I’ve provided a direct link to the WordPress.org plugin below for quick download. Enjoy creating your lightbox gallery with efficiency and ease!

blakemccreary.com » Web Design