Nonprofit Website Template: Free Adobe XD UI Kit
4 min read
This nonprofit website template is a free Adobe XD kit by Meagan Fisher (Owltastic), made for Adobe. It is a responsive charity website with a full donation flow, built around a placeholder climate charity called The Green Trees Initiative.
Below is what the kit contains, where to download it, how to open it now that Adobe XD is no longer being developed, and what any nonprofit website design needs to get right.
What is in the nonprofit website template
The design uses a deep navy and mint green palette, with photos turned into navy and mint duotones so text stays readable on top. Headlines mix a serif with a hand-painted brush script, as in “#Stop climate change”. Our original listing described the file as a UI kit with a desktop prototype, a tablet prototype and a mobile version. The preview shows these parts:
- Home page: a menu (About us, Our stories, News and events) with a “Donate Today” button, a hero card about climate change and women in developing nations, and a row of four actions: Learn, Volunteer, Share and Donate.
- Impact section: large figures such as “50 million trees planted” and “200 women employed in communities”. These are placeholders to swap for your client’s real results.
- Team section: “Meet the team of people making it happen”, with portrait cards.
- Donation flow: a “Give hope to those who need it most” form for personal and card details, then a thank-you screen with share buttons for Twitter, Facebook, email and text.
- Mobile layouts: stacked versions of the hero and issue card, plus a swipeable carousel of story cards.
File details and licence
- Format: a single Adobe XD file of about 90 MB, delivered as a ZIP.
- Designer: Meagan Fisher, who designed it as a resource for other designers. She said she hoped people would use it to give charities better websites.
- Fonts: launch coverage listed Flood for the brush script, Poynter for headlines and Komet for body text. Install them, or swap in your own, before you edit.
- Licence: the kit is free to download, but neither our original listing nor the pages we checked state licence terms. Read the Behance page, or ask the designer, before you use it in paid client work.
- Content: the charity name, photos, numbers and copy are all placeholders.
Adobe also hosts the file as a direct ZIP download.
Opening it in Adobe XD or Figma
Adobe XD is in maintenance mode. Adobe still fixes bugs and security issues, but it is not adding new features. If XD is installed on your machine, the file opens as normal, and the prototype links let you click through the pages.
To bring the layouts into Figma, the Convertify plugin can import an .xd file into a new Figma page, with its layers, text and images. Check the plugin page for current pricing, and install the fonts first. Prototype links will need rebuilding in Figma. For a large file like this, you can also export single artboards from XD as SVG and rebuild the components you need.
What a nonprofit website needs
A template is a head start, not a strategy. Whatever kit you start from, good non profit website design comes down to a few jobs:
- A donate button on every page. Keep it in the header, as this kit does, and make the form short. Offer one-off and monthly giving.
- Impact stories. Real numbers and real people show donors where their money goes. Replace the placeholder figures with verified results and link them to stories.
- Events. A simple list with dates, places and a sign-up link keeps supporters coming back.
- Volunteer sign-up. The kit has a Volunteer action. Link it to a short form that asks only what you need.
- Accessibility. Check colour contrast, especially text on duotone photos and the mint buttons, add alt text to every image, label every form field and make sure the donation form works with a keyboard.
For more on structure and usability, read our tips on website navigation, colour schemes in web design and the rules of web design.
More free Adobe XD templates
Browse all our free Adobe XD kits, or try these full website templates:
- Educational website Adobe XD template, a good base for training charities
- Hotel XD full website template
- Lybra corporate Adobe XD template
- Agency XD landing page, for a single campaign page
Need a nonprofit website designed for a client?
Inkyy is a white label design and development team for agencies. Our in-house designers and developers build charity and nonprofit websites, with donation flows and accessible layouts, that you present under your own brand. See our design services or book a 15-minute call.
