How to Design a Nonprofit Website that raises money
Summary
If your website isn't raising you money around the clock, you might be unwittingly driving donors away with these design issues.
Want to build a nonprofit website that raises money while you sleep?
In this video, I'll show you:
How to structure headings, layout, and white space to keep donors reading and engaged
Why your call-to-action buttons may be invisible to donors — and exactly how to fix it
The image strategy that evokes emotion and motivates visitors to give
How to use photos, quotes, and stats as proof that turns website visitors into donors
The simple two-category navigation system that reduces confusion and increases conversions
"If you can hit that right balance on each of your website pages, you'll find that conversions go up — because some people are drawn more to the emotional resonance of your content and other people are really looking for the hard data."
If you want a nonprofit website that raises money while you sleep, you need to understand the 10 design principles that keep donors engaged — and stop driving them away before they ever click donate.
"Think like a movie maker. What would need to appear in this scene, in this picture, to really evoke a message and an emotion about your mission?"
In this episode, learn how to design a nonprofit website that converts visitors into donors. Plus, you'll discover why small changes — like your button color and text alignment — can dramatically increase your donation page performance.
Watch the video to get the full training.
Free Guide
Frequently Asked Questions
1. What are the most important design tips for a nonprofit website that raises money?
There are 10 essential design principles covered in this video: using clear and descriptive headings in bold fonts, keeping text left-aligned, placing a strategic call to action on every page, using a bright contrasting color for your donate button, choosing images that show action and impact, arranging content in a logical reading order, using white space generously, adding proof (photos, quotes, and stats) to every page, keeping navigation simple with two categories, and designing for accessibility. Each of these plays a role in keeping donors engaged and guiding them toward giving.
2. How should I use headings on my nonprofit website to improve readability?
Headings should always appear in a clear, bold, easy-to-read font and follow a logical order — H1 at the top of the page, H2 next, then H3. Most website builders like Squarespace and WordPress make it easy to style text as headings in the text editor. Well-structured headings allow donors to skim a page, quickly understand what it's about, and decide whether to keep reading — all without having to read every word from top to bottom.
3. Why is left-aligned text better than centered text for nonprofit websites?
Left-aligned text is significantly easier to read because every line starts at the same point on the left, allowing the eye to move smoothly from line to line. Centered text varies the starting position of each line, which forces the reader's eye to search for where the next line begins — an exhausting experience that can cause visitors to give up and leave. Center alignment is fine for short quotes or titles, but should never be used for body copy.
4. How do I choose the right color for my nonprofit's donate button?
Your donate button needs to stand out visually from the rest of your page. Choose a bright, complementary color that contrasts with your brand palette. For example, if your brand colors are navy blue and olive green, a button in those same colors will fade into the background. Introducing a vibrant color — like pumpkin orange or sunflower yellow — can make your button immediately visible and increase donations. The goal is for the button to be impossible to miss.
5. What kind of photos should I use on my nonprofit website?
Rather than group shots of smiling volunteers, use images that show genuine action and impact. Focus on one or two people interacting, or a single person doing meaningful work. Think like a movie director — ask yourself what would need to appear in this scene to really communicate your mission and stir emotion in the viewer. With today's smartphones, you have everything you need to capture compelling, authentic photos.
6. What is a call to action, and why does every page of my nonprofit website need one?
A call to action (CTA) is a prompt that tells your website visitor what to do next — donate, sign up, learn more, get involved. Every page of your website should have one beyond the donate button in your header. The key is to customize it to the content on each page. If a visitor is reading about one of your programs, the CTA should be specifically about donating to or signing up for that program — not a generic ask. Tailored CTAs convert far better than one-size-fits-all buttons.
7. What is white space and why does it matter for my nonprofit website?
White space is the empty area around your content — the breathing room between sections, paragraphs, and images. A page packed with information from top to bottom can feel overwhelming, causing visitors to leave without reading. Think of your content in sections, like a layer cake — each layer has its own space and purpose. This structure makes your site look more professional, easier to scan, and ultimately more likely to convert a visitor into a donor.
8. How do I use photos, quotes, and stats as proof on my nonprofit website?
Nonprofits are selling intangible public good — and donors need evidence that you're delivering on your mission. Include photos that show your work in action, quotes from clients, volunteers, donors, and stakeholders, and hard data that quantifies your impact. Crucially, be specific with your numbers. Say "427 hours" rather than "nearly 430." Say "1,000 middle schoolers" rather than "over a thousand." Specificity makes your stats feel credible and helps readers truly connect with the information. Balance the emotional power of quotes with the credibility of data to reach both heart-driven and fact-driven donors.
9. How should I organize my nonprofit website's navigation to avoid overwhelming visitors?
Keep your navigation as clean and simple as possible by thinking in two categories: People and Programs. The People category covers pages that speak directly to your audiences — like your About and Contact pages. The Programs category covers your programs, services, and impact areas. Avoid creating deep folder-within-folder structures or crowding your navigation bar with too many links. A clean, simple navigation reduces confusion, builds trust, and makes it easier for donors to find what they're looking for.
10. How do I make my nonprofit website more accessible to all users?
One of the most common accessibility mistakes nonprofits make is placing important text inside images — such as event flyers or promotional graphics. Text embedded in images cannot be read by screen readers used by people with disabilities, and on mobile devices, it forces users to pinch and zoom just to read it. Instead, always place important text directly on the web page as actual browser-rendered text, either alongside or below the image. Accessibility isn't just good ethics — people with disabilities represent $200 billion in discretionary spending power, and your website should welcome everyone.
Full Video Transcript
Is Your Website Driving Donors Away? Here's What You Might Be Missing
If your website isn't raising you money around the clock, you might be unwittingly driving donors away with these design issues. Hi everyone, Ricardo Ibarra with Market Your Mission, and today I am sharing with you 10 tips on how to design a nonprofit website that raises money. Let's jump into it.
Tip 1: Use Clear, Descriptive Headings in a Bold, Easy-to-Read Font
Number one, your website should have clear descriptive headings in a bold, easy to read font. This is because as we read on the web, we tend to skim the headings rather than reading all the way from top to bottom like we would read a text document in front of us. So you can ensure that you're not turning donors away by very clearly using those headings on your web page.
Most of you are using a website builder like Squarespace or WordPress, which are my top two favorites. And in the text editor of your website builder, there are options for styling your text as headings. And they should go in order. H1 should always appear at the top of the page. H2 follows, H3 follows that, dividing your content into easy to understand sections.
And you can make it really easy for your donors by using a clear, easy to read, bold font or typeface for all of your headings. So as they skim a page, they can get a sense of the information that's on that page, whether they want to continue reading, and of course take the actions on your website that you want them to take. More on that later.
Tip 2: Left-Aligned Text Is Your Secret Weapon for Readability
Tip number two is to use left aligned text always, except occasionally. You can use center aligned text to highlight short quotes or titles.
Now the reason why center aligned text is a big no no is because in center aligned text the left edge of the text varies making it harder to read. I see a lot of nonprofits who will write an entire web page and it's all center line text. So as you're reading it your eye has to track from left to right to left to right to find the new start of the following line.
You can make your website so much easier to read and less likely to turn donors away by using left aligned text in all cases except the occasional use for a quote or heading in center aligned. Right aligned just doesn't work at all. So don't even bother.
Tip 3: Every Page Needs a Customized Call to Action That Matches Donor Intent
Number three is to focus on the call to action. There should be a call to action on every single page of your website. And I'm excluding the big donate button that should be in the header of your website. We're going to ignore that one. There should always be a header button in the upper right hand corner of your navigation.
But beyond that one, on every page of your website, there should be a clear call to action. And you should customize it to the content on that page and the user's intent for visiting that page. For example, if you're talking about one of your programs, your call to action should be specifically to donate to fund that program or to sign up to support that program.
Oh, here comes a kitty. See, not AI generated. I'm a real human in my home office teaching you about nonprofit marketing.
Tip 4: Use a Bright, Contrasting Color to Make Your Donate Button Impossible to Miss
Number four is to use color appropriately and to choose a complementary, bright color that will stand out for your calls to action, specifically your donate buttons.
One of my clients — their brand colors are a beautiful navy blue and olive green and kind of a light gray color — and we realized that their donate page was not doing very well because their donate buttons were fading into the background. They weren't standing out enough. So we introduced a beautiful bright kind of pumpkin or sunflower orange color and they saw an increase in their donations. Their donation page is much clearer, and the other call to action buttons on their website are clearer and easier to find.
Tip 5: Choose Images That Show Action and Impact — Not Just Happy Group Photos
The next tip I have for you is to use images that show action and impact. Now, it's easier to capture a photo of a group of volunteers all smiling and arms around each other's shoulders looking happy, but that doesn't accurately tell the story of your nonprofit or really evoke the emotion of your mission.
So, do your best. Most everyone has a smartphone now. So use your assets, use your smartphone to get in close to show action and impact. Try and show one or two people interacting, one person doing an activity. Try and show things that are really tangible.
Think like a movie maker. What would you write if you were writing a script? What would need to appear in this scene, in this picture, to really evoke a message and an emotion about your mission and the work that you're trying to show?
Tip 6: Arrange Your Page Content in a Logical Z-Pattern Reading Order
Layout. Now, the layout of your pages on your website should follow a logical reading order. Now, most of us when we read, we start at the top left and we read across to the right and then we read down and then we read left to right. Because I'm sharing this video in English, I'm guessing you're probably an English speaker as well. So we read English from left to right.
So, try and arrange the content on your page following that convention. Ideally, in the top left of your page, you should have your heading one — what the page is about, a brief description, perhaps a call to action to read more or to do that important activity on the page — and then the next section should follow directly beneath it. Keep pages neat and tidy and organized in that Z pattern and it'll be easier for folks to scan the page, determine the information that they want to consume on the page, and ultimately donate to you.
Tip 7: Use White Space So Your Website Breathes and Donors Don't Feel Overwhelmed
Next up is to keep lots of white space so it doesn't feel crowded on your pages. I've seen a lot of websites where folks are trying to cram all the information in like one screen. Now, that's kind of an old holdover from web design and the early days — talking about above the fold and making sure all of the important information on the page was in that first visual screen a user would see.
Well, we browse on mobile now and so that above the fold terminology isn't as helpful. It's still important to keep that information above the fold, but it's also important to show discrete pieces of information as the user is scrolling down the page.
Think of your content in sections, maybe like a layer cake. The top layer of the cake is your heading and your header on the page where you have that big clear descriptive title and a call to action. And then maybe the next section has the next piece of content. What this does is it helps your site look more professional and it's easier to read because then the brain isn't overwhelmed with so much text on the page. It has a little breathing room. It can say, "Oh, there's a paragraph of text here. There's a bulleted list here. There's a nice quote here." It makes it an easier browsing experience for your visitors.
Tip 8: Build Trust on Every Page with Photos, Quotes, and Highly Specific Stats
Every page should have proof in the form of photos, quotes, and stats. Now, in the nonprofit world, we are selling the intangible. We're selling public good. We're doing things that may not benefit everyone who's reading our web page. For example, I donate to a lot of nonprofits whose missions are very important to me, but don't directly impact me or benefit me or my community. So, we need to showcase in our website design on every page the proof that we're doing what we say we do.
You can do that in photos — I've already talked about that. In quotes from your clients, your volunteers, your donors, your stakeholders, anyone in that circle of support, anyone in your audiences that has an impact on your mission. You can get quotes from them to prove you're doing what you say you're doing. And of course, stats.
Now, the one-two punch of quotes and the qualitative or emotional information is so important to be balanced with the hard data, the quantitative, the numbers. And if you can hit that right balance on each of your website pages, you'll find that conversions go up — because some people are drawn more to the emotional resonance of your content and other people are really looking for the hard data and facts. Hey, you served a thousand middle schoolers free lunches over the summer last year, or 20 volunteers devoted 427 hours to cleaning up your local watershed.
What's important in both quotes and stats is that you are super specific. There's something about the human brain where when we round numbers or we speak generally, it's easy for us to kind of abstract and not relate with a message as clearly. So if you're presenting stats and you're talking about your river cleanup and your volunteers devoted 427 hours, say 427 hours rather than "nearly 430" or "over 420." That specificity helps your reader feel like you're more truthful and helps them really hook into the information.
And same with the quotes. Try and get as detailed as possible, of course, while honoring the confidentiality and the journey and the unique identities of the people you serve. But the more specific you can get in your quote in terms of how your mission impacted someone — whether that's a client, a stakeholder, or a donor — the better.
Tip 9: Simplify Your Navigation with Just Two Categories — People and Programs
Okay, my last two tips. Your navigation should be simple and based on two categories: people and programs. This is so important because it's really easy to just keep creating pages on your website and before you know it, you have this kind of complicated linking structure and there's folders within folders and there's so many links in your top navigation that can really turn off donors and confuse people who visit your website.
So, do your best to keep your website navigation as clean and simple as possible. And I like to think about two buckets of pages that should live in the navigation — pages around people, so speaking directly to your core audiences and sharing important information about your organization, like your about page and your contact page, and programs, which is pretty self-explanatory. What are the programs, services, or impact areas that you work in? Those should all live in your top navigation.
Tip 10: Design for Accessibility — Never Put Important Text Inside Images
And my final tip for designing a nonprofit website that raises money is around accessibility. I see a lot of nonprofits build beautiful flyers or graphics promoting events and volunteer opportunities, but they put a lot of text in an image and then they put that on their web page or in a blog post and they expect people to read it. Well, that's not accessible.
The text in that image can't be read by assistive technology like screen readers, but also when you look at that same image on mobile, you have to do that annoying pinch to zoom thing in order to read what you're trying to communicate.
So, my final tip for designing a website that helps you raise money is to avoid putting text in images at all cost — or if you must, put that text on the actual web page right next to the image so someone can see the image and then scroll a little bit further down on the page and see all that information rendered in text in the browser.
Wrapping Up: 10 Design Principles That Turn Your Website Into a 24/7 Fundraiser
All right, today I shared 10 tips with you on how to design a website that raises money. If you'd like more information, tips, and strategies on nonprofit websites and nonprofit website design, subscribe to this channel. Stay tuned. Come back and I'll see you soon.
