Skip to content

Nonprofit and Charity Website Design

A nonprofit or charity website should state the mission in one plain sentence, give donors, volunteers and people seeking help their own visible routes, keep the donate flow short, and publish reports, accounts and governance pages that show how money is used. It has more audiences than most small business sites. Donors want to know the money is used well. Volunteers want to know what they would actually do. People who need help want to find it quickly, sometimes in a difficult moment. Funders, journalists and partners want reports, contacts and facts. The design challenge is to give each group a clear route without turning the homepage into a list of everything the organization has ever done.

This guide covers the pages a nonprofit site needs, the order of homepage sections, how to build a donate flow that people finish, and how to present impact and stories honestly.

Key takeaways

  • Put the mission in one plain sentence at the top of the homepage, followed by one clear main action.
  • Give donors, volunteers and people seeking help their own visible routes.
  • Keep the donate flow short: few fields, clear amounts, an honest choice between one-off and regular giving.
  • Transparency pages with reports, accounts, governance and policies build trust that slogans cannot.
  • Tell stories with consent and dignity, and keep identifying details out unless people have agreed to share them.

Recommended page structure

Pages, in rough order of importance:

  1. Home
  2. Donate
  3. Get help, if you provide direct services
  4. What we do: a programs hub with one page per program
  5. About: mission, history, the people involved, governance
  6. Impact and reports
  7. Get involved: volunteer, fundraise, events, corporate partnerships
  8. Other ways to give: regular giving, gifts in memory, gifts in wills, where relevant
  9. Stories and news
  10. Transparency: annual reports, accounts, board or trustees, key policies
  11. Contact
  12. Legal pages: privacy, cookies, complaints, safeguarding where relevant

Homepage sections, in order:

  1. Header with a Donate button and, if you provide services, a Get help link that is just as easy to find.
  2. Hero with the mission in one sentence, a real photo from your work and one primary button.
  3. What we do, as three to five program cards linking to program pages.
  4. How support is used, with figures only from your published accounts or records.
  5. A story or two, shared with consent and linked to the full piece.
  6. Get involved: volunteer, fundraise, attend an event.
  7. Transparency strip: registration number, latest annual report, link to the board or trustees.
  8. Newsletter signup with a clear statement of what people will receive.
  9. Footer with contact details, registration information, legal links and, if relevant, helpline numbers.

Pages and their purpose

Page Purpose Key content
Donate Take a gift with as little friction as possible Amounts, one-off or monthly choice, short form, tax relief option where applicable
Get help Connect people to support quickly Who you help, how to contact you, hours, emergency numbers, what happens next
Program pages Explain each piece of work The problem, what you do, who it serves, where, how to take part or refer someone
About Show who runs the organization Mission, history, staff and board, founding documents where relevant
Impact and reports Show results with evidence Annual reports, program outcomes, how you measure them
Get involved Turn interest into action Volunteer roles with real tasks, events, fundraising packs
Transparency Let people check the facts Accounts, governance, policies, registration details
Stories Show the work through people Consent-based stories, with names changed where needed

The donate flow

The donate page is usually the most important page for the organization’s income, so remove anything that does not help someone complete a gift.

  • Keep it on your own site if you can, or make the handover to a payment provider clear so donors know they are in the right place.
  • Offer one-off and monthly giving as an honest choice. Do not preselect monthly in a way people miss, and say clearly how to cancel a regular gift.
  • Show a few suggested amounts plus an “other amount” field. If you link amounts to what they fund, make sure the link is accurate and explain that gifts go where they are most needed if that is the case.
  • Ask only for what you need: name, email, payment details and anything required for tax relief. Address fields only when a tax scheme or receipt requires them.
  • Explain tax relief options in plain language, using the wording your tax authority requires where it requires any.
  • Keep consent separate. Marketing permission should be an unticked choice, not a condition of giving.
  • Remove distractions. No sliders, pop-ups or unrelated links on the donate page itself.
  • Confirm properly. A thank-you page, a receipt email and a note on what happens next.

Many of the same principles apply to any conversion page. Our guide to landing page anatomy covers forms, objections and calls to action in more detail.

The Get help route

If people come to you for support, put their route first.

  • A plain “Get help” link in the header, not hidden under “Services”.
  • Contact options stated clearly: phone, chat, email, walk-in, with hours.
  • Emergency information at the top of the page if people might be at risk, pointing to the official emergency number.
  • A quick exit button for services where someone might be in danger if another person sees the page, such as domestic abuse support. It should take the visitor to a neutral site immediately.
  • Simple language and no forms longer than they need to be. The contact page design guide covers form fields and response times.

Transparency and governance pages

Trust in a charity comes from facts people can check.

  • Registration number and the name of the register, in the footer and on the About page
  • Annual reports and accounts, listed by year
  • Board, trustees or directors, with roles
  • Key policies such as safeguarding, complaints and data protection
  • How you handle fundraising complaints and opt-outs

Keep reports downloadable, but also summarize the main points in HTML so people on phones can read them without opening a large PDF.

Stories, consent and dignity

Stories show what the work means, but they involve real people.

  • Get written consent for names, photos and quotes, and explain where they will be used.
  • Change names or hide faces where people prefer, and say so.
  • Avoid images that present people only as helpless. Show people as participants, not as props for an appeal.
  • Do not invent composite stories and present them as real. If a story is illustrative, label it.
  • Review consent periodically and remove stories when people ask.

Content to prepare before building

  • A one-sentence mission and a short paragraph expanding on it
  • A list of programs with a short description of each
  • Your latest annual report, accounts and governance information
  • Registration and tax details, and any required fundraising statements
  • Real photos from your work, with consent records
  • Two or three stories with consent
  • Volunteer roles with real tasks and time commitments (smaller volunteer-run groups can also borrow from our sports club and community website guide)
  • Payment provider setup and test donations
  • Privacy notice covering donor data
  • Contact details and hours for every route, including helplines

Images and colors

  • Use your own photos where possible. Stock images of anonymous smiling volunteers look generic. Our website images guide covers licensing and preparing images.
  • Pick one strong accent color for the Donate button and use it consistently, so the action is easy to find on every page.
  • Check contrast and readability. Charity audiences include older people and people using assistive technology. The accessibility basics guide covers contrast, headings and forms.
  • Keep emotional tone appropriate. Calm, honest images usually serve the cause better than distressing ones.

Common mistakes

  • A homepage that tries to say everything, with no clear main action.
  • A long donate form with fields nobody needs.
  • Preselected monthly giving that donors miss.
  • Impact figures without a source, or a “your gift buys” claim the organization cannot back up.
  • People seeking help having to go through fundraising content to find a phone number.
  • Reports only as large PDFs.
  • Stories and photos used without clear consent.
  • Volunteer pages that say “get in touch” without describing any real roles.

FAQ

Should the Donate button always be in the header?

For most charities, yes. Keep it visible on every page. If you provide direct services, place a Get help link alongside it so the two routes are equally easy to find.

Do we need a separate site for fundraising campaigns?

Usually not. A campaign landing page on your main site keeps donors in one place and builds trust in your domain. A separate site makes sense only for large campaigns with a distinct audience.

How much should the About page say about money?

Enough for someone to check the basics: where income comes from, how it is spent in broad terms, and where to find the full accounts. Our guide to writing and designing an about page covers the rest.

Bottom line

State the mission in one sentence, give donors, volunteers and people seeking help their own clear routes, and keep the donate flow short and honest. Back every claim with your own records, publish reports and governance information in a form people can read on a phone, and tell stories only with consent. A site built this way earns trust before it asks for money.