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 the careful use of fonts, colors and other graphical elements makes 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 charity websites followed the design precedent of the sites in this article, perhaps our world would be just a little bit better.
The Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Themes, Plugins & Design Assets
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.
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.
The web designer of Cups has successfully created a very natural and pleasant website design. All the buttons and options are presented symetrically.
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 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.
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 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.
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.
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.
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.
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 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 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.
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.
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.
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.
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.
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 brings typography and color into play to create an attention grabbing and compelling website.
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.
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.
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.
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.
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.
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 additional importance and stands out while looking very much a part of the page.
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 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.
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.
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.
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 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.
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.
Here, Park Angels utilizes a very unique approach that successfully matches the design of this website and creates an interesting result.
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 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.