What's involved in nonprofit website design?

Making the mission itself the thing that pulls a visitor in — for Trinity Yard School, that meant leading with a custom animation and a clear story, with donation and engagement paths built in rather than bolted on.

What makes a homepage animation like this work?

It has to load fast and read clearly even before someone consciously registers what’s happening — the weaver, the boys with soccer balls, and the girl painting were built as a custom SVG website animation specifically so it stays lightweight while still feeling alive.

Can a nonprofit site generate revenue beyond donations?

Yes — alongside the donation portal, I designed a print-on-demand store for Trinity Yard School’s branded merchandise, giving them a second, ongoing revenue stream tied directly to the site.

Does a website project ever include writing the content itself?

Sometimes, yes — Trinity Yard School’s existing copy needed a full rewrite to actually do justice to what the school does, so this project included writing alongside the design and development.

Nonprofit Website Design for Trinity Yard School

DESIGN DE SITE WEB POUR ASSOCIATION — TRINITY YARD SCHOOL

Design de site web associatif avec navigation intuitive, portail de dons et nouvelle stratégie de revenus.

Trinity Yard School, une association ghanéenne, avait besoin d'un design de site web associatif à la hauteur de l'ambition de sa mission. Au-delà de l'enseignement académique, TYS transmet les arts traditionnels du tambour, de la danse et du batik, et exploite une ferme de 20 acres comme modèle pratique d'agriculture durable — peu de familles de la région grandissent en cultivant la terre sans jamais apprendre de méthodes durables, si bien que la ferme elle-même devient un outil pédagogique. Leur ancien site était statique et répétitif, en décalage avec la richesse de cette mission.

La ferme à elle seule accomplit énormément : des vergers de papayes, mangues, avocats et agrumes, des jardins annuels de tomates, poivrons et une dizaine d'autres cultures, une production de pleurotes autosuffisante depuis 2018, une initiative apicole visant dix ruches actives, et un système en boucle fermée où les déchets de cuisine nourrissent les poules pondeuses, dont les œufs nourrissent le personnel et les élèves, et dont le fumier nourrit à son tour les jardins. Ce type de design de site web pour l'agriculture durable devait vraiment faire ressentir ce cycle avec clarté, plutôt que de simplement l'énumérer.

J'ai entièrement repensé le site pour en faire une plateforme dynamique, articulée autour d'une animation SVG sur mesure en page d'accueil — une scène illustrée à la main d'un tisserand traditionnel au travail, de trois garçons jonglant avec des ballons de foot, et d'une fillette en train de peindre, le tout animé et pris vie. Les visiteurs se connectent désormais à l'histoire de l'école avant même d'avoir lu un seul mot.

Au-delà de l'animation, la refonte s'est concentrée sur la fonctionnalité : une navigation intuitive dans l'ensemble du site, et un portail de dons conçu pour permettre aux donateurs de contribuer avec des options flexibles et récurrentes. Ayant identifié le besoin de nouvelles sources de revenus pour l'école, j'ai également conçu une boutique d'impression à la demande proposant des produits dérivés à l'image de la marque, ouvrant ainsi un nouveau canal de revenus au service de leurs programmes éducatifs.

Une grande partie des textes du site a dû être entièrement réécrite en parallèle de la refonte, afin que la rédaction rende justice au travail réalisé sur le terrain. La collaboration a débuté avec la création complète du logo et de l'identité de marque de l'école, et s'est poursuivie depuis — j'assure la maintenance et la mise à jour du site sur le long terme, et je produis leur newsletter annuelle.

Ce type de design de site web associatif illustre les services de création et développement de sites web que je propose. Découvrez le site finalisé sur Trinity Yard School.

client

trinity yard school

date

FÉVRIER 2020

site

trinityyardschool.org

categorie

Conception et développement de sites web

review

"Will a utilisé son expertise en matière de branding pour nous construire un logo magnifique et transformer notre site démodé en une œuvre d'art pleine de vie avec ses animations ! Cela a donné à notre ONG l'image publique que nous voulions. Le nouveau portail de dons qu'il a créé nous permet de collecter des dons récurrents ! Le nouveau site dépasse largement ce que notre conseil d'administration attendait. Nous sommes reconnaissants pour ce site magnifique et fonctionnel et pour son entretien et sa mise à jour continus."

Questions sur ce projet

Que comprend un projet de design de site web associatif ?

Faire de la mission elle-même ce qui capte l'attention du visiteur — pour Trinity Yard School, cela s'est traduit par une entrée en matière via une animation sur mesure et un récit clair, avec des parcours de don et d'engagement intégrés dès le départ plutôt qu'ajoutés après coup.

Qu'est-ce qui fait fonctionner une animation de page d'accueil comme celle-ci ?

Elle doit se charger rapidement et se lire clairement, avant même que le visiteur ne réalise consciemment ce qui se passe — le tisserand, les garçons avec leurs ballons de foot et la fillette en train de peindre ont été conçus comme une animation SVG sur mesure, précisément pour rester légère tout en paraissant vivante.

Un site associatif peut-il générer des revenus au-delà des dons ?

Oui — en complément du portail de dons, j'ai conçu une boutique d'impression à la demande pour les produits dérivés de Trinity Yard School, leur offrant une seconde source de revenus continue, directement liée au site.

Un projet de site web inclut-il parfois la rédaction du contenu lui-même ?

Parfois, oui — les textes existants de Trinity Yard School nécessitaient une réécriture complète pour véritablement rendre justice au travail de l'école, ce projet a donc inclus la rédaction en plus du design et du développement.