Making-of / Guide

Wie „Aufblühen“ entstand

Der Redesign-Kandidat für juliablaschke.de erzählt Coaching als Wachstum: Ein generativer Zweig treibt beim Scrollen aus und blüht im Finale auf. Dieser Guide dokumentiert Konzept, Technik und die drei Iterationen.

1 — Das Konzept

Julia Blaschke verbindet 30 Jahre Bankerfahrung mit positiver Psychologie — Selbstwert-, Happiness- und Finanzcoaching für Frauen. Die bestehende Website ist hell und freundlich, aber visuell austauschbar. Das Redesign gibt der Positionierung eine eigene Bildsprache mit einer einzigen Leitmetapher: Was in dir wächst, trägt dich.

Der Zweig: per L-System generiert, bei jedem Besuch leicht anders — wie jeder Coaching-Weg. Er wächst mit dem Scroll und blüht am Ende auf.
Die Farbdramaturgie: Morgenlicht (Elfenbein) → warme Mitte → tiefe Pflaume mit Gold. Die Seite gewinnt an Tiefe wie der Prozess, den sie beschreibt.
Keine Klischees: kein Coaching-Rosa, keine Stockfotos, keine erfundenen Testimonials — der Stimmen-Bereich ist ehrlich als Platzhalter gestaltet.

#FAF4EC Morgenlicht #B0788C Mauve #8FA382 Salbei #3A2333 Pflaume #C29B4A Gold

2 — Die Technik

Der generative Zweig

Eine rekursive Wachstumsfunktion (im Kern ein L-System) erzeugt beim Laden eine Segmentliste: Jeder Ast teilt sich in zwei bis drei Kindäste mit zufälliger Krümmung und Länge — gespeist aus einem seeded Zufallsgenerator, damit jeder Besuch einen eigenen Baum bekommt. Beim Scrollen wird nur entschieden, wie viele Segmente gezeichnet werden:

var growth = .07 + scrollP * 1.18;      // kleiner Spross ab Start
var count = segments.length * growth;    // Wachstum = Scroll
if (growth > .82) zeichneBlüten();       // Finale: Aufblühen

Farbdramaturgie

Fünf Farbstationen werden per smoothstep interpoliert und als background-color gesetzt. Ab 70 % Scrolltiefe kippt eine nacht-Klasse die Textfarben — der Zweig wechselt von Pflaume auf Gold.

Die PERMA-Blüte

Fünf SVG-Blütenblätter (je 72° rotiert) werden per JavaScript erzeugt; jedes ist fokussierbar (tabindex, role="button", Enter/Leertaste) und füllt bei Berührung ein aria-live-Panel mit dem jeweiligen PERMA-Element — das Modell der positiven Psychologie als Interface.

3 — Die drei Iterationen

Iteration 1 · Zweig-Komposition

Der Baum lernt Rücksicht

Browser-Test: Im Finale überwucherten die Blüten die Navigation → Krone ausgedünnt (nur 60 % der Astspitzen blühen) und oberhalb von 16 % Viewporthöhe blütenfrei.
Am Seitenanfang war der Zweig unsichtbar → ein kleiner Spross (7 % Wachstum) begrüßt jetzt schon beim Einstieg.
Gesamthöhe der Krone reduziert — der Zweig begleitet den Text, statt ihn zu dominieren.

Iteration 2 · Responsive

Wachstum auf schmalem Grund

Auf Screens unter 760 px wandert der Zweig weiter an den Rand und skaliert auf 72 % — Lesefluss vor Dekoration.
PERMA-Blüte, Stimmen-Box und Headline-Umbrüche für Mobile nachjustiert.

Iteration 3 · Robustheit

Ruhe auch unter der Haube

Canvas-Zeichnung ans Frame-Raster gekoppelt (ein requestAnimationFrame pro Scroll-Burst statt pro Event).
Skip-Link ergänzt; Fokus-Zustände, No-JS-Fallback und prefers-reduced-motion waren bereits im Basis-Build.
Kein Dauer-Loop: Die Seite rechnet nur, wenn gescrollt wird — gut für Akku und Gewissen.

4 — Den Prozess reproduzieren

Bestehende Seite lesen wie ein Coach: Positionierung, Tonalität, Zielgruppe — und die eine Metapher finden, die alles trägt (hier: Wachstum).
Farbdramaturgie an die Erzählung koppeln: Nicht „schöne Farben wählen“, sondern fragen: Wie soll sich der Weg von oben nach unten anfühlen?
Generative Grafik statt Stockfotos: Ein L-System (20 Zeilen Code) schlägt jede Fotodatenbank — einzigartig, leichtgewichtig, markenexklusiv.
Ehrlich bleiben: Platzhalter als Platzhalter kennzeichnen (Porträt, Testimonials) statt Inhalte zu erfinden.
Werkzeuge: Claude Code (Fable 5), reines HTML/CSS/JS, Cormorant + Instrument Sans (SIL OFL, self-hosted), Netlify-Deploy.

Teil der Serie „5 Websites, 5 Welten“ — fünf grundlegend unterschiedliche, technisch anspruchsvolle Websites, jede mit eigenem Guide. Diese Studie ist der Redesign-Kandidat für juliablaschke.de; die Live-Schaltung erfolgt separat nach Freigabe.

← Zur Designstudie „Aufblühen“