UI-Entwürfe für pfadfinder.cz-rostock.de

Jeder Entwurf ist eine andere Antwort auf dieselbe Frage: Wie überzeugen wir in zehn Sekunden Eltern, die uns nicht kennen? Gleiche Inhalte, gleiche Fotos, gleiches CI — unterschiedliche Priorisierung. A, B und C entsprechen den Varianten aus dem Anforderungsdokument, D und E kamen als zusätzliche Richtungen dazu. F ist die daraus gebaute Kombination — damit weiterarbeiten.

Startseite, Desktop & Mobil Echte Fotos aus dem Stamm RR-CI Farben & Schriften Klickbar, kein Build nötig
Entwurf F · Empfehlung

Die Mischung

Als einziger Entwurf vollständig: Startseite + fünf Unterseiten.

Hero aus A (dunkle Bühne, Vollbild, große Serifen-Typo) · Antwortkarte aus D (überlappt die Hero-Kante: Wann, Wo, Alter, Kosten, Anmeldung) · Altersstufen und Tonfall aus E (runde Abzeichen, Logbuch, Polaroids).

Idee
Der WOW-Moment bleibt, aber die harten Fakten stehen direkt darunter statt drei Bildschirme tiefer
Rhythmus
dunkel → hell → warm → dunkel → Foto → hell → warm → gelb
Neu
Stimmungsband nutzt jetzt IMG_4809, Galerie IMG_20260717_180421
Ansehen →
Entwurf A

Abenteuer

Dunkle Bühne, formatfüllendes Foto, große Typo. Emotion vor Information — das Bild macht die Arbeit.

Stärke
Wow-Effekt, wirkt hochwertig, klar unterscheidbar von Vereinsseiten
Risiko
Steht und fällt mit dem Hero-Foto; Infos kommen erst beim Scrollen
CI
Streng konform
Ansehen →
Entwurf B

Familie

Hell, warm, viel Luft, runde Formen. Vertrauen und Willkommensein stehen vor Adrenalin.

Stärke
Wirkt nahbar und ungefährlich; senkt die Hemmschwelle beim ersten Kontakt
Risiko
Kann austauschbar wirken — das gleiche Layout nutzen viele Vereine
CI
Streng konform, Beige/Braun stark gewichtet
Ansehen →
Entwurf C · verworfen

Modern

RR-Blau dominiert, harte Kanten, klare Raster. Signal: „Hier ist etwas gut organisiert.“

Feedback
Verworfen — Stimmung stimmt nicht, es fehlt das „da will ich hin“
Stärke
Wirkt seriös und verlässlich; gut für skeptische Eltern
Risiko
Kühl und institutionell — wenig „Kinderabenteuer“
Ansehen →
Entwurf D

Eltern-Wegweiser

Die Antwortkarte steht ganz oben: Wann, wo, Alter, Kosten, Anmeldung. Danach die sechs Fragen, die Eltern wirklich stellen.

Stärke
Höchste Wahrscheinlichkeit auf tatsächliche Kontaktaufnahme; sehr gut für SEO
Risiko
Wenig Emotion; wirkt eher wie ein Beratungsangebot als wie Abenteuer
CI
Konform, aber nüchtern interpretiert
Ansehen →
Entwurf E

Abzeichen

Das Aufnäher-Motiv wird zur Gestaltungssprache: runde Patches, Nahtränder, Polaroids. Spricht auch die Kinder direkt an.

Stärke
Eigenständig und merkfähig; nutzt das, was Royal Rangers wirklich ausmacht
Risiko
Verspielt — kann bei manchen Eltern weniger seriös wirken
CI
Bewusst freier: Braun/Rot dominieren, Blau tritt zurück
Ansehen →

Entwurf F: alle Seiten

Nur F ist als vollständige Seite gebaut. Die Navigation oben funktioniert, die Unterseiten sind direkt erreichbar:

Startseite Über uns Termine Häufige Fragen Kontakt Rechtliches

Direkter Vergleich

KriteriumA AbenteuerB FamilieC ModernD WegweiserE AbzeichenF Mischung
Emotion●●●●●●●●●●●●●●●●●●●●
Information sofort●●●●●●●●●●●●●●●●●●●●●●
Vertrauen bei Eltern●●●●●●●●●●●●●●●●●●●●●●●●
Spricht Kinder an●●●●●●●●●●●●●●●●●
Abhängigkeit von Fotoqualitätsehr hochmittelgeringgeringmittelhoch
Pflegeaufwand späterhochmittelgeringgeringmittelmittel
Stand nach deinem Feedback: A liefert den WOW-Effekt, C ist raus. F setzt genau darauf auf: A-Hero unverändert, aber die Antwortkarte aus D schiebt sich über die untere Hero-Kante — die harten Fakten stehen damit im ersten Scroll statt drei Bildschirme tiefer. Altersstufen, Logbuch-Abschnitt und Polaroids kommen aus E und geben der Seite Wärme, die A allein fehlt.

Der eine offene Punkt: F erbt A's größte Schwäche — die Abhängigkeit vom Hero-Foto. IMG_4240 trägt das aktuell, ist aber kein bewusst für diesen Zweck gemachtes Bild. Ein gezielt fotografierter Hero würde hier am meisten bringen.

Worauf du beim Durchklicken achten solltest

  1. Erst am Smartphone ansehen — ca. 70 % der Eltern suchen mobil. Browserfenster schmal ziehen genügt.
  2. Zehn Sekunden Test: Seite öffnen, bis drei zählen, wegschauen. Was ist hängengeblieben?
  3. Finde in fünf Sekunden: Wann ist der Treff? Was kostet es? Wen schreibe ich an?
  4. Fremdblick: Zeig es jemandem, der Royal Rangers nicht kennt — idealerweise Eltern eines 8-Jährigen.
  5. Nicht auf Texte fixieren. Alle Formulierungen sind Entwurf und in jeder Variante austauschbar.

Bekannte Baustellen

  1. Abzeichennamen ungeprüft. Salamander, Ameise, Eule, Biber, Hirsch, Adler (Forscher) und Beobachter, Entdecker, Waldläufer, Meister (Kundschafter) stammen von der Stralsunder Seite, die inhaltlich älter ist. Gegen das aktuelle Logbuch prüfen, bevor sie live gehen.
  2. Programmablauf in D geraten. Die Zeitleiste (16:00 Antreten, 17:15 Andacht …) ist plausibel, aber nicht von euch bestätigt. Sie ist jetzt ausdrücklich als Beispiel gekennzeichnet.
  3. Elternzitat in B ist weiterhin ein Platzhalter und muss durch eine echte Aussage ersetzt oder entfernt werden. (B wurde nicht überarbeitet.)
  4. Weidendom-Foto fehlt. Der Abschnitt in F nutzt Image-4.JPG — darauf ist zwar die Gruppe zu sehen, aber der Weidendom nicht als Bauwerk erkennbar. Genau das ist der Punkt des Abschnitts. Siehe Foto-Briefing, Slot 2.
  5. Mitgliedsbeitrag steht überall als „ca. 30 € pro Halbjahr“. Genaue Zahl noch bestätigen.
  6. Versicherungsangaben auf der FAQ-Seite sind allgemein formuliert und für Stamm 556 beim Dachverband gegenzuprüfen.
  7. Anfahrt fehlt. Auf der Kontaktseite sind Straßenbahn- und Buslinien, Parkmöglichkeit und Fußweg bewusst leer gelassen — die rate ich nicht.
  8. Stamm 375: Stadtteil, Treffpunkt und Webadresse fehlen noch für die Verlinkung.
  9. Google Fonts. Die Entwürfe laden die Schriften noch von Google. Beim echten Bau lokal einbinden — sonst wird die Datenschutzerklärung unnötig kompliziert.
  10. ChurchTools-Embed auf der Termineseite ist ungeprüft. Vor allem fehlt für die Forscher das nächste konkrete Datum im Klartext.
  11. EXIF-Rotation: IMG_4814.jpeg und IMG_20260717_180352.jpg haben Orientation 6. Browser drehen sie im img-Tag korrekt, als CSS-Hintergrund wären sie gekippt. Beim Astro-Build einmal fest rotieren.
  12. Bildrechte geklärt für die Fotos der letzten 3–4 Jahre. Bei älterem Material vor der Verwendung erneut prüfen.