Unter /main/ liegt die echte Seite — kein Entwurf, sondern der Code, der später auf der Vereinsdomain läuft. Wer wenig Zeit hat, klickt nur die an. Alles darunter sind die Wireframes, Varianten und Texte, aus denen sie entstanden ist; sie bleiben stehen, damit nachvollziehbar bleibt, warum die Seite so aussieht und nicht anders. Adressen folgen dem Schema /<artefakt>/<seite>/<version>, und ein veröffentlichter Stand wird nie überschrieben.
Echtes HTML, eigenes Stylesheet, selbst gehostete Schrift, ein kleines Skript für den Kostenrechner. Kein Framework, kein Build beim Ausliefern, keine Anbieterbindung — der Ordner lässt sich auf jeden Webserver kopieren. v2 holt das Aussehen aus dem Buch des Vereins: die sieben Kapitelfarben aus dem Inhaltsverzeichnis, das Grün des Umschlags, dazu eine gezeichnete Straße als Aufmacher und eine Displayschrift mit Handschrift-Anmutung.
Gelb markierte Stellen sind Inhalte, die der Verein noch liefern muss — IBAN, Mitgliederzahl, Satzung, Kontakt. Alles Weitere auf dieser Seite sind die Wireframes und Varianten, aus denen die Gestaltung entstanden ist.
Die sieben Kapitelfarben aus dem Inhaltsverzeichnis des Vereinsbuches, das Grün des Umschlags, die belegten Kostenzahlen, eine neu gebaute Verkehrspyramide — und als Aufmacher eine gezeichnete Straße ohne ein einziges parkendes Auto. Displayschrift mit Handschrift-Anmutung, Lesetext in einer Textschrift.
Streng typografisch, ohne Illustration, ein Rot als einzige Akzentfarbe. Der Stand, an dem zum ersten Mal Produktionscode stand statt eines Wireframes.
Logo, Navigation und Vorteile aus den Unterlagen des Vereins, die Kostenzahlen aus dem eigenen Buch, ein echtes Mitgliederzitat — und der Beitritt in den drei Wegen des bestehenden Papierformulars.
Der Kostenrechner bekommt Platz und einen gezeichneten Schieberegler statt eines Systemelements. Gleicher Aufbau, ruhigere Seite.
Spricht Autofahrer als Nutznießer an statt als Gegner. Dazu zum ersten Mal das Buch als eigener Abschnitt.
Erst rechnen lassen, dann fragen: der Schieberegler steht vor jeder Bitte um Mitgliedschaft.
Alles ab Abschnitt 4 stand zur Wahl. Die Gegenüberstellung dazu liegt unter /vergleich/startseite/v4/.
Zum ersten Mal eine durchgehende Website in einem gezeichneten Browserfenster, mit Bändern statt Trennlinien.
Kein Aufmacherfoto. Wer in deiner Nähe mitmacht, was dein Auto kostet, Beitritt in drei Feldern. Funktioniert ohne eigenes Bildmaterial.
Bildgeführt: großes Aufmacherfoto, drei Wege, Zahlenleiste. Stärker im Gefühl — setzt aber Fotografie voraus, die es nicht gibt.
Die Anschrift wandert nach Schritt 2 — Schritt 1 fragt nur, was billig zu geben ist. Oben durchgehend eine Schrittanzeige. Wer nach Schritt 1 aufhört, bekommt einmal eine Erinnerung, der Vorstand eine Notiz. Deshalb steht die Datenschutz-Zustimmung vorn.
Der Vorstand hat entschieden: ausgefüllt wird auf der Website, zugestellt per E-Mail. Kein Zahlungsdienstleister, keine gespeicherte IBAN, kein Mitgliederkonto. Unter dem Entwurf steht, was dabei im Postfach des Vorstands ankommt. Ein Formular in einem Zug.
Interesse, Mitgliedschaft und Freundschaftserklärung — die Wege gab es schon, nur nicht sichtbar. Ließ noch offen, ob die Seite auch Geld einzieht.
Der erste Entwurf: Schritt 1 die Entscheidung, Schritt 2 die Überweisung mit Giro-Code. Kein Lastschriftmandat.
| Seite | Wofür sie da ist | Adresse |
|---|---|---|
| Ortsgruppen | Eigene Karte und Gruppenprofile. Bei vier Gruppen ist die Leermeldung der Normalfall — das muss der Entwurf aushalten | /wireframe/ortsgruppen/ |
| Kostenrechner als eigene Seite | Teilbar, presseauffällig. Rechnet im Browser, sendet nichts | /wireframe/rechner/ |
| Gestaltung | Farbe, Schrift, Bilder, echtes Layout — der nächste Schritt nach der Freigabe der Struktur | /design/startseite/ |