The 5 Elements of Great Nonprofit Web Design

Editor’s note: Your website is often the primary way volunteers identify with you. So it’s in your best interest as a volunteer manager to make sure your organization’s website is as well-designed as possible to make the best impression on volunteers. Below is a guest post from Dodd Caldwell, founder of Bellstrike and expert on what makes a nonprofit website great.

Guest post by Dodd Caldwell of Bellstrike

BellstrikeUgly nonprofit websites aren’t surprising. They’re everywhere. So when we see one that’s impeccably designed, it really stands out and makes a great impression. For that reason, great web design can be an even bigger differentiator for a nonprofit than for a for-profit, where great design is more prevalent.

But design isn’t just about decoration and making everything look pretty. Aesthetics are one of the elements, but by no means encompass all of web design.

Nonprofit web design can be broken up into 5 major elements:

Information Architecture

Frazee Dream Center

From Frazee Dream Center website.

How is your site structured? Where are the main links on your website? What are they called? The architecture of your site is the first step in designing your site. Think through where all of your information is located and how it’s reached.

Tip: Sketch out the “wire-frame” of your site, either on paper or by using wire-framing software. Before anything else, figure out which links you’d like to show up and where.


charity: water website

From charity: water website

Do people get confused when they use your site? Do links and buttons look clickable? Is your donation process confusing? Creating a usable website means simplifying all actions so that they take as few steps or create the least amount of confusion possible.

Tip: Conduct user testing. Grab some folks in your target audience, ask them to do about 5 tasks, and then watch what they do.


Operation Warm

From Operation Warm website.

Copy is design. The words on your website are as important as how beautiful it is or how easy it is to use. Keep in mind that people don’t read on the web, they scan. So always write much less than you normally would, write in a simpler form than you normally would, and break your text into sections and bullet points.

Tip: Write a summary. Let everyone know what your organization does in about 1-3 sentences in a very prominent place on your site.


Rice Bowls

From Rice Bowls website.

Let your organization’s personality shine through in the tone of your site. If your work helps put a smile on someone’s face, let that emotion show through in the tone of your copy, the colors you use and the artwork you display. If your work deals with battered women, make sure your site conveys the seriousness of the issue.

Tip: Know your target audience. Reaching wealthy donors over the age of 50 is different than reaching veterans looking to your site for job training.


War Child

From War Child website.

OK, now we’re getting to what most people think of when they think design. Some of the aspects that make up the aesthetic beauty of your site are color palette, typography, photography, layout, illustrations and buttons. Pay attention to the details – you don’t have to settle for unattractive buttons and web standard drop downs.

Tip: Hire a photographer (or recruit a volunteer). Stock photography doesn’t work. Find a young, local photographer who can help you capture your mission in action.

Dodd Caldwell (Twitter: @doddcaldwell) is the founder of Bellstrike.  Bellstrike allows nonprofits to create an attractive, donation-enabled website in about 1-2 minutes.