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. v3 zeigt die freigegebene Struktur des Prototyps in der neuen Gestaltung: dieselben neun Abschnitte in derselben Reihenfolge, derselbe Wortlaut — neu sind allein die gezeichnete Straße, die Farben aus dem Buch und die Displayschrift. v4 bringt den Feinschliff: farbige Vorteilskacheln, der Buchumschlag neben dem PDF-Hinweis, weiche Seitenwechsel ohne Framework, bündige Karten und ein Aufmacher ohne harte Kante.
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 Scroll-Bewegung ist ersatzlos raus. Stattdessen ziehen Radfahrer und Menschen in reiner CSS-Animation über die Straße, die Häuserzeile steht fest. Entscheidend war der Schnitt zwischen Bewegtem und Festem: Der Verzerrungsfilter liegt nur noch auf dem Unbewegten. Gemessen: 120 Bilder pro Sekunde, im Leerlauf wie beim Scrollen.
Die Seite folgt jetzt der Systemeinstellung für dunkle Darstellung, samt Zeichnung: nachts brennt Licht in den Fenstern. Beim Scrollen bekommt die Straße Tiefe, mit einer Bremse gegen hektisches Mitscrollen. Rahmen und Knöpfe sind gezeichnet, sofern das Gerät es flüssig schafft. Neu: /main/ortsgruppen/ mit einer gezeichneten Deutschlandkarte.
Die Dreier-Kartenreihen haben keine farbige Oberkante mehr — die machte aus der Karte eine Registerkarte und trug die Farbe in den Innenraum. Der farbige Schlagschatten bleibt: außerhalb der Karte, gibt Tiefe, konkurriert mit nichts.
Hier war auch der Schatten neutral. Das war ein Missverständnis meinerseits: gemeint war nur die Oberkante.
Der Kopf bleibt jetzt auch auf dem Telefon oben stehen — dafür zusammengedrückt von 181 auf 98 Pixel, damit er nicht ein Fünftel des Schirms belegt. Logo und Beitritts-Knopf stehen in einer Zeile statt in zweien. Dazu behoben: die gelbe Markierung war auf dem dunklen Band unlesbar.
Die Wortmarke steht jetzt zweizeilig wie das Originallogo, „i“ und „!“ bilden eine senkrechte Spalte. Auf dem Telefon klappt die Navigation hinter einem Menüknopf zu — ohne Skript bleibt sie sichtbar, damit sie nie unerreichbar ist. Dreier-Kartenreihen bekommen farbige Oberkante und Schatten, alle Eingabefelder Beispielwerte.
Nur zum Vergleich: statt der nachgebauten Schriftfassung das echte Logo des Vereins, aus dem Buch geholt — und der Kopf wie im Wireframe-Entwurf, mit Logo im Rahmen und dem Slogan zweizeilig daneben. Inhaltlich identisch mit v4.
Vorteile in den Buchfarben statt fünf weißer Kacheln, der Buchumschlag neben dem PDF-Hinweis, Seitenwechsel ohne Sprung, Kartenlinks bündig unten, Himmel ohne harte Kante. Dazu behobene Fehler: ein toter Link im Rechner, eine Lücke mitten im Manifestsatz, die Markierung, die wie ein Durchstreichen aussah.
Die neun Abschnitte des Prototyps in ihrer Reihenfolge und ihrem Wortlaut — Manifest, Vorteile, Rechner, Einwände, Buch, Stimmen, drei Wege, Rundbrief. Neu ist nur das Aussehen. Eine Prüfung im Bauvorgang vergleicht die Texte mit den Quellen, in denen sie beschlossen wurden.
Erste Fassung mit der Zeichnung und den Buchfarben — aber mit eigenmächtig umgeschriebenem Manifest, entferntem Vorteile-Block und zwei erfundenen Abschnitten. Bleibt als Beleg stehen, gilt aber nicht.
Streng typografisch, ohne Illustration, ein Rot als einzige Akzentfarbe. Der Stand, an dem zum ersten Mal Produktionscode stand statt eines Wireframes. Inhaltlich mit denselben Abweichungen wie v2.
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/ |