Verein & Non-Profit: Wirkung zeigen

Verein / Non-Profit / Stiftung / Nachhaltigkeitsinitiative

Ein Satz Mission in einer kräftigen, schmalen Display-Schrift, echte Fotos aus den Projekten und große Wirkungszahlen – alle drei Referenzen arbeiten so. Ein tiefer Markenton trägt die Seite, ein Signal (Gelb) gehört nur dem Spenden-Button. Viele Wege zum Mitmachen statt nur 'Spenden'; Transparenz, wohin das Geld geht.

Bauplan tokens.css Alle Techniken

Schrift

Wirkung zeigen

Ein Satz Mission in einer kräftigen, schmalen Display-Schrift, echte Fotos aus den Projekten und große Wirkungszahlen – alle drei Referenzen arbeiten so.

Headline: Big Shoulders
Text: Archivo

Farbe

#FFFFFF
#EDF5FA
#002E6D
#222520
#DFDFD7
#FFCA0A

Bewegung

cubic-bezier(0.83, 0, 0.17, 1)

Stil: Animationsstil „Kinetisch filmisch“ (inOut-Raumwechsel)
Stil für UI: Animationsstil „Asymmetrisch auf/zu“ (schnell zu, langsam auf)
Dauer: 150–200 (Buttons, Links, Formular), 600–1000 (Kampagnen-Slider, Bild-Übergänge, Medien-Expansion), Zahlen-Odometer 1200–1500 einmalig

Aufbau der Seite

SignaturBild/Video in Schrift (Typo-Maske)

HeroBild/Video in Schrift (Typo-Maske)

Wirkung in Zahlen (3–4 Zahlen mit Quelle und Stand)Zahlen-/Fakten-Sektion als Typo-Ereignis · Mit Mini-Diagramm Rollende Ziffern (Zahlen-Ticker / Odometer)
Aktuelle Projekte / KampagnenNatives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · Kartenreihe Editorial-/Magazin-Layout · Zeitung
Spenden (einmalig/monatlich, Betragsvorschläge mit Wirkung, freies Feld)Spendenmodul mit Wirkungssatz · Einmalig oder monatlich Fehlerzusammenfassung im Formular · Liste
So wirkt deine Spende (Mittelverwendung als Diagramm hinter dem Spendenmodul; ausführlich auf der Unterseite Transparenz bzw. Jahresbericht)Zahlen-/Fakten-Sektion als Typo-Ereignis · Mit Mini-Diagramm
Mitmachen: Spenden, Spendenaktion, Ehrenamt, Gruppen vor Ort (Bento nur mit echtem Foto und Text je Weg, sonst gleichwertige Karten)Bento-Grid mit lebenden Zellen
Geschichten aus den ProjektenEditorial-/Magazin-Layout · Magazin Testimonials neu gedacht · Masonry-Wand
Termine & Aktionen vor OrtProgramm-Kalender mit Liste und Monat · Liste und Monat
Kontakt / Ansprechperson / Anfahrt (Geschäftsstelle, Vereinsheim oder Gelände: Adresse als Text, Karte per 2-Klick)Kontakt- und Anfrageformular als eigene Sektion Karte per 2-Klick (Anfahrt ohne vorab geladene Karte) · Kartenbild
Partner / FördererLogo-Wand / Social-Proof-Band · Ruhiges Raster
Jahresbericht / FAQ / SpendenquittungAkkordeon mit Höhenanimation auf auto · FAQ

Navigation: Sticky-Header, der schrumpft bzw. sich beim Andocken umfärbt Native Dropdowns mit Popover-API, Anchor Positioning und Invokern
Scroll: Medien-Expansion beim Scrollen (Bild/Video wächst zum Vollbild)
Schrift: Rollende Ziffern (Zahlen-Ticker / Odometer)Gezeichnete Markierung und Unterstreichung
Hover: Bild-Zoom in der Maske · Basis
Mikroanimation: Animierte Checkbox und Radio Fortschrittsring Konfetti / Erfolgs-Feier
Galerie: Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · Kartenreihe Masonry-Galerie mit nativem display: grid-lanes (plus Fallback)
Footer: Newsletter-Modul mit Persönlichkeit · Shop Mega-Footer mit Sitemap und Utility-Leiste
Buttons: Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)Füllung vom Eintrittspunkt · Clip-Path

OptionalDaten-Scrollytelling Balkendiagramm aus Datenattributen

Nicht verwenden

Animierter Mesh-Verlauf Holo-/Irisierungsfolie auf Neigung und Cursor Hochglanz-Effekte widersprechen dem sparsamen Umgang mit Spendengeld
Interaktives 3D-Objekt im Hero Morphende Partikel und Punktwolken teuer, langsam auf älteren Handys, kein Bezug zur Wirkung
Abschnittsweises Einrasten (Fullpage-Snap)Gepinnte Scrub-Sequenz (Scrollytelling) als Startseite – zwingt Besucher durch eine Inszenierung, bevor sie spenden können
jeder Preloader – Spendenwillige brechen ab
Subtiler mehrschichtiger Parallax wirkt wie Kampagnen-Microsite, nicht wie seriöse Organisation
Custom-Cursor (cursor-follower-lerp, blend-difference-cursor) – keine Agentur-Gesten

Regeln

Hero = Mission in einem Satz (Versal, Display-Schrift) + echtes Projektfoto/-video + Spenden-Button; wenn Video, dann eigenes Material, stumm, mit Pause-Knopf.
Spenden-Button in Signalfarbe im Header immer sichtbar; Signalfarbe sonst nirgends.
Wirkungszahlen nur mit Quelle/Stand (z. B. 'Stand: Jahresbericht 2025'); höchstens 3–4 Zahlen in einer Reihe.
Spendenformular: einmalig/monatlich als Segment-Umschalter (wie in spendenmodul-wirkung), 3 Betragsvorschläge mit konkreter Wirkung ('30 € = …'), freies Feld; Spendenziel als ehrlicher Fortschrittsbalken.
Mehrere Wege zum Mitmachen gleichwertig zeigen (Spendenaktion starten, Ehrenamt, Gruppe vor Ort, Fördermitglied) wie Viva con Agua und charity: water.
Transparenz: Mittelverwendung, Jahresbericht, Gemeinnützigkeit/Spendensiegel, Ansprechperson mit Foto.
Konfetti höchstens einmal als Dank nach abgeschlossener Spende, sonst nie.
Footer mit Newsletter, Bankverbindung für Überweisung, Vereinsregister, Impressum, Satzung.
daten-scrollytelling nur als Zusatz (optional, Priorität F) auf der Unterseite Transparenz bzw. Jahresbericht (Variante mittel), nie auf der Startseite vor dem Spendenknopf (wann_nicht des Musters); auf der Startseite zahlen-fakten-section Variante diagramm.
mega-footer-sitemap nur bei mehreren Seiten; kleine Vereine und Onepager bekommen einen einfachen Footer.
Pflichtangaben und Recht (Leitfaden 8a): Impressum mit Vereinsregister (Registergericht, Nummer) und vertretungsberechtigtem Vorstand; Gemeinnützigkeit und Zuwendungsbestätigung nur mit gültigem Freistellungsbescheid; Fotos von Mitgliedern und besonders von Kindern und Jugendlichen nur mit Einwilligung (bei Minderjährigen der Eltern), widerrufbar; Mitgliedsantrag mit Satzung, Beitragsordnung, SEPA-Mandat und Einwilligungen; Spendensiegel nur echt; Förderer-Logos nur mit Erlaubnis; keine pauschalen Umweltaussagen ohne Nachweis – vom Kunden prüfen lassen.

Bild und Ton

Licht: Dokumentarisch, natürliches Licht vor Ort.
Ausschnitt: Menschen bei der Arbeit im Projekt, Nahaufnahme mit Umgebung; Bildunterschrift mit Ort und Jahr.
Personen: Ja, mit Einwilligung und in würdiger Lage; Namen in der Bildunterschrift.
Formate: 3:2, 4:5, 16:9
Nicht: Keine Mitleidsbilder, keine weinenden Kinder als Spendenhebel, keine Stockfotos, keine Hände um einen Globus.
Anrede: du
Sätze: Kurz und aktiv, Wirkung mit Zahl und Quelle.
Haltung: Glaubwürdig und nahbar: Wirkung statt Mitleid, viele Wege zum Mitmachen. Stiftungen mit älterer Zielgruppe siezen, dann durchgehend.
Tonproben: 30 € = [Wirkung laut Jahresbericht]., Mach mit: Starte deine eigene Spendenaktion.
Nicht schreiben: „Gemeinsam können wir die Welt verändern“, Schuldgefühle, Zahlen ohne Quelle, „klimaneutral“ ohne Nachweis.

Hero, Raum und Form

Hero-Raster: Foto randlos über die volle Breite, Mission unten links über Spalte 1 bis 8.
Hero-Bild: Echtes Projektfoto, 16:9 Desktop, 4:5 mobil; Typo-Maske (typo-maske-medien) nur für ein kurzes Schlüsselwort, einmalig.
Überschrift: clamp(2.75rem, 1.6rem + 5vw, 6rem), Big Shoulders 800 Versal, unten links.
Handlung: „Jetzt spenden“ (#FFCA0A, Text #222520) und „Mitmachen“ (Kontur), nebeneinander unter der Mission.
Zusatz: Spenden-Knopf zusätzlich im Kopf; Wirkungszahlen mit „Stand: …“ als eigene Leiste direkt darunter.
Sektionsabstand: clamp(64px, 9vw, 136px)
Dichte: mittel
Raum: Kräftig und klar: Wirkungszahlen mit viel Luft (höchstens 3 bis 4 in einer Reihe), Wege zum Mitmachen gleich groß mit 24 px Abstand.
Spalten: 12
Maximale Breite: 1320px
Raster: Hero mit randlosem Foto, Mission unten links über 8 Spalten. Mitmach-Wege als 4er-Raster, Transparenz 6/6.
Radius klein: 4px
Radius groß: 4px
Schatten: keiner
Form: Leicht gerundet und robust (button-zustaende und typo-maske-medien zeigen 4 px). Gelb #FFCA0A nur als Spenden-Fläche mit dunkler Schrift.

Vorbilder