Vorlage für eine Nonprofit-Website

Menschen kommen meist mit einer einfachen Frage: Was macht diese Organisation, und wie kann ich helfen?

Deine Startseite sollte das direkt im ersten Bildschirm beantworten. Ein kurzer Missionssatz, ein starkes Bild und eine klare Handlungsaufforderung reichen oft schon aus.

Besucherinnen und Besucher suchen häufig nach:

• einer einfachen Erklärung für das Anliegen oder die Community, die ihr unterstützt
• Nachweisen aktueller Arbeit, etwa Programme, Veranstaltungen oder aktuelle Updates
• einem klaren Weg zum Spenden
• Informationen zu Ehrenamt oder Partnerschaften
• Kontaktdaten und Standort, falls relevant
• Anzeichen dafür, dass die Organisation echt und aktiv ist

Bei einer Nonprofit-Organisation ist Vertrauen genauso wichtig wie Design. Das bedeutet: echte Namen, echte Fotos und konkrete Beschreibungen eurer Arbeit statt allgemeiner Behauptungen.

Die meisten Nonprofit-Websites funktionieren gut mit einer kleinen, fokussierten Auswahl an Seiten.

Eine praktikable Struktur ist:

• Startseite: Mission, wichtigste Wirkungspunkte, zentrale Handlungsaufforderungen
• Über uns: Geschichte, Leitung, Werte, wen ihr unterstützt
• Programme: Die Angebote, Kampagnen oder Initiativen, die ihr durchführt
• Mitmachen: Ehrenamt, Partnerschaften, Fundraising, Newsletter-Anmeldung
• Spenden: klare Spendenoptionen und wofür Spenden verwendet werden
• News oder Updates: aktuelle Aktivitäten, Veranstaltungen oder Geschichten aus der Praxis
• Kontakt: E-Mail, Formular, Telefon, Adresse, Karte, wenn Menschen vor Ort vorbeikommen

Auf der Startseite sind oft folgende Bereiche hilfreich:

• Hero-Bereich mit Missionssatz und Spendenbutton
• kurze Zusammenfassung der Wirkung
• hervorgehobene Programme
• Optionen für Ehrenamt oder Unterstützung
• aktuelle News oder kommende Veranstaltungen
• Testimonials oder Partnerlogos, wenn ihr dafür die Erlaubnis habt
• Footer mit Kontaktdaten und Social Links

Wenn eure Organisation lokale Dienste anbietet, fügt Angaben zum Einzugsgebiet und praktische Informationen für Besuche hinzu.

Nonprofit-Texte funktionieren am besten, wenn sie konkret und leicht überfliegbar sind. Vermeide möglichst vage Missionssprache. Statt zu sagen, ihr „stärkt Gemeinschaften“, erkläre lieber, was ihr konkret anbietet, für wen und wie Menschen helfen können.

Guter Startseiten-Text beantwortet meist:

• wen ihr unterstützt
• was ihr tut
• warum es gerade jetzt wichtig ist
• was Besucherinnen und Besucher als Nächstes tun können

Beschreibe Programme zum Beispiel ganz konkret: wöchentliche Lebensmittelausgabe, Nachhilfe nach der Schule, Rechtsberatungen, Rettung und Vermittlung oder Workshops für die Community.

Fotos sollten dokumentarisch wirken, nicht gestellt. Nutze:

• echte Fotos aus euren Programmen
• Porträts von Mitarbeitenden oder Freiwilligen
• Bilder von Veranstaltungen, Räumen oder Materialien im Einsatz
• möglichst einheitliche Zuschnitte und Lichtstimmung

Füge Bildunterschriften hinzu, wenn Kontext hilfreich ist. Wenn Fotos schutzbedürftige Gruppen zeigen, stelle sicher, dass ihr die nötigen Einwilligungen habt und die Bilder angemessen verwendet.

Welche Funktionen sinnvoll sind, hängt von eurer Organisation ab, aber einige sind besonders häufig.

Ein Spendenprozess ist oft das Wichtigste. Moremade enthält einen integrierten Stripe-Connector, sodass du Checkout mit den gewünschten Preisen oder Spendenbeträgen einrichten kannst.

Weitere nützliche Ergänzungen können sein:

• Kontaktformulare für allgemeine Anfragen
• Bewerbungsformulare für Ehrenamtliche
• Links oder Anmeldungen für Veranstaltungen
• E-Mail-Anmeldung für Updates mit Resend oder SendGrid
• eine Karte für Büros, Zentren oder Veranstaltungsorte
• ein einfaches formular- oder mitgliederbereichsbasiertes System mit Supabase, falls nötig

Wenn ihr regelmäßig Updates veröffentlicht, sollte das Layout wiederverwendbare News- oder Event-Karten unterstützen. Wenn euer Team Texte häufig ändern muss, nutzt kurze Abschnitte, die sich leicht austauschen und neu anordnen lassen.

Für Organisationen, die direkte Dienstleistungen anbieten, ist ein klarer Anfragenweg meist hilfreicher als zu viele interaktive Funktionen.

Mit Moremade beginnst du, indem du die Website in einfacher Sprache beschreibst. Du kannst zum Beispiel nach einer Nonprofit-Website mit Startseite, Über-uns-Seite, Programmübersicht, Spendenseite, Mitmach-Seite und Kontaktformular fragen.

Die KI schreibt den Quellcode und zeigt eine Live-Vorschau. Websites werden als echter React- und Tailwind-Code erstellt.

Von dort aus kannst du die Website per Chat verfeinern:

• bitte darum, die Überschrift zu ändern
• ersetze Abschnitte
• passe Farben oder Abstände an
• füge einen Spendenbereich hinzu
• schreibe einen Call-to-Action für Ehrenamtliche neu

Du kannst außerdem den visuellen Inspector verwenden, um ein Element anzuklicken und zu ändern, oder die Code-Ansicht öffnen.

Wenn die Website fertig ist, veröffentlichst du sie mit einem Klick auf einer kostenlosen yourname.moremade.ai-Subdomain. In kostenpflichtigen Tarifen kannst du eine eigene Domain verbinden. Domains kannst du auch direkt in Moremade kaufen.

Wenn du die Quelldateien möchtest, kannst du das vollständige Projekt jederzeit als ZIP exportieren oder zu GitHub pushen.

Prüfe vor der Veröffentlichung die Grundlagen sorgfältig.

• Stelle sicher, dass der Missionssatz im ersten Bildschirm klar ist.
• Teste jeden Button, jedes Formular und jeden Spendenlink.
• Prüfe Kontaktdaten, Adresse sowie Öffnungs- oder Veranstaltungszeiten.
• Kontrolliere die mobile Darstellung auf lange Textblöcke und Bildzuschnitte.
• Achte darauf, dass Programmseiten erklären, für wen sie gedacht sind und wie man mitmachen oder unterstützen kann.
• Verwende Seitentitel und Meta-Descriptions, die zum jeweiligen Inhalt passen.
• Komprimiere große Bilder, damit Seiten einigermaßen schnell laden.
• Korrekturlese Namen, Daten und jede Formulierung zu Spenden.
• Wenn du eine eigene Domain verwendest, prüfe, dass sie vor der Bewerbung der Website verbunden ist.

Eine Nonprofit-Website braucht nicht viele Seiten, um gut zu funktionieren. Sie braucht eine klare Struktur, glaubwürdige Informationen und offensichtliche nächste Schritte.