GiveWave: Charity and Fundraising Website Design
Abdul Awal
Overview
GiveWave is a donation website template for nonprofits, charities and fundraising campaigns. I designed it in Figma, then built production versions in Webflow and Framer. It covers the full supporter journey in 15 pages, with a donation flow, campaign and event collections, and a CMS blog.
GiveWave homepage
The Challenge
Charity websites run on trust, but many feel either cluttered or pushy. Donors can't see where the money goes, the donate button is hard to find, and campaigns read as vague appeals rather than specific goals. Volunteers and event attendees have no clear path either, so interest stalls before it turns into action.
The Approach
I kept the design clean and calm so the cause stays in front. The first screen states who the organization helps and how, followed by a single donate button, so a ready supporter never has to hunt.
Every appeal is made concrete. Campaign blocks carry a goal, a progress figure and a clear ask, which turns a vague request into something urgent and measurable. A donate section also sits in the footer of every page, so giving stays one click away wherever someone lands.
GiveWave campaign and donation sections
Key Features
Donation-focused layouts: goals, progress figures and clear asks on every campaign.
Programs showcase: structured blocks show exactly where donations go.
Events and campaigns: galas, drives and awareness weeks run on CMS collections with their own detail pages.
Team and volunteer profiles: faces behind the work, plus a dedicated volunteer signup page.
Testimonials: donor feedback and volunteer stories together in one credibility block.
Blog and news hub: field stories and updates between appeals.
Responsive build: the donation form works properly on a phone.
GiveWave programs and events pages
Pages
Home, About, Programs, Campaigns, Events, Donate, Team, Blog, Contact and Join as a Volunteer, plus a 404 page and utility pages for the style guide, licenses, instructions and changelog. CMS templates cover blog posts, campaign details and event details.
GiveWave inner pages
Build Notes
Motion stays subtle throughout: page transitions, scroll animations, sliders and lightboxes support the story without distracting from it. The Webflow build uses global classes for quick rebranding, and the Framer version mirrors the same structure.
Links
Webflow live preview: givewave.webflow.io
Framer live preview: givewave.framer.website
Like this project
Posted Sep 26, 2026
Donors give when they can see where the money goes, yet many charity sites hide the ask and the impact. I designed and built GiveWave in Webflow and Framer with goal-driven campaign blocks, a one-click donate path on every page and CMS campaigns and events.
