40 Effectively Designed Non-Profit and Charity Web Sites

A charity or cause may not need the sleek sales pages of a business on the web, but a poorly designed one could still mean the difference between helping people or failing to do so. Therefore, a non profit website design should be appealing enough to invite the organization’s targeted donors and volunteers.

The basics of web design are enough to make a difference – An easy to navigate and user friendly website with careful use of fonts, colors and other graphical elements make finding and navigating these websites easy for their users to understand and learn about their cause. Additionally, it will make it much easier to raise money.

If more charities followed the precedent set by the sites below, perhaps our world could be just a little bit better.

Here’s Life Mission Africa

Here’s Life Mission Africa has designed a trendy and visually sophisticated website that definitely calls for action from its users. The “Donate Now” button is in red and in a prominent position at the top of the web page.

World Food Programme

World Food Programme website design plays tremendously well with the color handling that makes this website visually comforting.

New York City Coalition Against Hunger

New York City Coalition Against Hunger website is an outstanding example of acquiring lots of information into a tiny space, while at the same time keeping the whole thing cluttered-free as well as user-friendly.

Amnesty International

This website design brings bright color into play with the amalgamation of black color to grab visitors attention. Donate and Take Action buttons are placed prominently.

CUPS

The web designer of Cups has successfully created a very natural and pleasant website design. All the buttons and options are presented symetrically.

Plant with Purpose

Loads of green is used to excellent effect in this website design created for Plant with Purpose. The link to donate has been afforded a spot at the top navigation menu that suggests its importance over other elements.

Stand

Stand makes use of refreshing colors to differentiate the website from others. The donate button is placed at the center of the top navigation menu and in blue to set itself apart from the other elements.

Save the Children UK

Here we have a great example of using soft and delicate colors. The donate button in this website design is red and is placed right at the top navigation menu.

Greenpeace USA

Greenpeace USA makes use of fresh and refreshing colors to distinguish their website from others. The Donation button is placed at the center of the page with the word ‘make’ using bold for emphasis.

Kiva

The website design of Kiva is far beyond the ordinary non profit website design. Not only does it feature a number of users that the website empowers with its services, but it also informs you about how the website works.

ASPCA

This website design plays extremely well with the color usage, making this website design visually appealing and soothing. The header and all the important and attention grabbing elements are in orange while the donate button is placed prominently.

Save the Children

The Save the Children website presents information in a concise and user-friendly manner. The web design provides lots of information in easy-to-read portions around the page.

Oxfam America

Here the website design is slightly more stylish as compared to other non profit site designs in this collection. The use of different colors is interesting to make a distinction between different segments while the Donate button is in red color to grab extra attention.

Natural Resources Defense Council

Natural Resources Defense Council takes advantage of three different colors to make its header easy to read and distinguish. The Donate and Take Action buttons are in orange while the Blogs button is in green with all the remaining buttons in blue.

The Nature Conservancy

The color theme of this website is soothing and subtle. The whole design has been given a very natural and well accepted look with the Donate Now button in red near the top of the page as well as in the side bar.

Witness

Yet another great example of using soft and subtle colors while creating a strong impact. The Donate button in this design is in orange and is placed right at the top in the navigation bar.

Susan G. Komen for the Cure

Here you’ll notice many shades of pink across the page, raising awareness of breast cancer and related diseases. The donate button is designed to draw attention while remaining in keeping with the color theme of this website.

Take The Walk

The dark color theme of Take The Walk’s design is what sets it apart from other similar websites. Although the design is simple, it does grabs the viewers attention. The Donate button matches the color theme nicely.

Change

This is a simple, uncluttered design fresh website design with delicate and nice color choices. The Start A Petition button is in red for emphasis while rest of the design displays a very subtle look.

Charity: water

In this non profit website design, only Charity Water and Email subscription field are blue while the rest of the content and buttons are presented in black and white creating an elegant high contrast design.

Blog Action Day

An extremely simple and fresh website design without too many graphical elements stuffed onto the page. The content of this site is presented against a white background, giving it a very professional look.

Ducks Unlimited

Ducks Unlimited brings typography and color into play to create an attention grabbing and compelling website.

The Memphis Zoo

This website design carries a slightly joyous look that goes pretty well with the name of the website. As far as the color usage is concerned, the header is presented in excellent symmetry without any discrimination in terms of colors and typography.

Custodial Abuse

A vintage look is created for this website with a header that presents the navigation options uniformly.

The Michael J. Fox Foundation for Parkinson’s Research

The Michael J. Fox Foundation for Parkinson’s Research creatively divides the web page into four segments to accommodate a lot of information while keeping the whole design simple and interesting.

Wiser

The header of this website is in dark while the content is presented in lighter colors that draws more attention. The Donate Now and Contact Us buttons are placed at the top of the header to attract attention.

Housing Works

This website design’s subtle and pleasant color combination is straight forward, uncomplicated and uncluttered. The Login button is in black for emphasis while the rest of the design carries a more subtle look.

Practical Family Living

Truth be told, the whole color theme of this website is extremely comforting and delicate. The design has a very natural and well established look, with the Donate button placed at the top navigation bar.

MANNA Food Bank

The MANNA Food Bank website design is in a shade of green that conveys the message of greenery and vegetation suitable for the cause the website is supporting. Donate Online Now button has been given an additional importance and stands out while looking very much a part of the page.

One

No more graphical elements are used in this web design than are necessary. Instead, the designer only made use of typography to draw the difference between vital elements.

Metropolitan Inter-Faith Association

Metropolitan Inter-Faith Association website design is simple, uncomplicated and has a very minimalist look. The Donate button is right at the top on the navigation bar and has been further distinguished with a nice green color.

Action for Children

In this design, the designer kept the design simple and uncomplicated while giving it a very beautiful look. The Donate button is in red and is placed near to the top navigation bar.

Children’s Rights

Here, the Support Us button appears in the area of the navigation bar in red, suggesting its critical importance. Meanwhile the other elements are presented symmetrically.

Dalit Freedom Network

This website design brings dark color into play with a combination of white used for the site content, giving it a compelling look. Also notice the Donate button, placed in the top navigation bar.

Sower of Seeds

You’ll notice a somewhat unique level of contrast in the colors of this design. The designer very creatively blends black, white and pink colors in a single design. The Donate button is at the top of the page.

Urban Roots

Urban Roots has a look that matches its name while creating a very professional feel. All elements and options on this design are presented with symmetry and without any inequity.

A Word from His Word

In the web design of A Word from His Word, the web designer attempted to keep the design straightforward and unfussy. In this design less graphical elements are more, and instead this web designer made use of fantastic typography to draw the difference between elements.

Wide Awake

Yet another example of how successfully colors can be used to create a contrast between different elements of a web page and to draw attention quickly to the most important elements.

Park Angels

Here, Park Angels utilizes a very unique approach that successfully matches the design of this website and creates an interesting result.

Yellow Bird Project

Yellow Bird Project calls more attention to the content of the website rather than the design solely. Therefore, varying font sizes are used to create the distinction.

Hope Unlimited

Hope Unlimited website design is different and unique from other website designs as it does not have any header. Instead, it sports a sidebar that serves the roles usually reserved for the header.

Author: (30 Posts)

Jameel Khan is a web graphic designer and has been working in this field for 4 years. He also writes for other blogs, His biggest passion is blogging and vector illustrations.

Comments