Making-of / Guide

Wie „Signal“ entstand

Diese Seite dokumentiert, wie die Designstudie für ralfblaschke.com gebaut wurde — Konzept, Designsystem, Technik und die drei Iterationen. Der Prozess ist so beschrieben, dass er sich nachvollziehen und wiederholen lässt.

1 — Das Konzept

Ralf Blaschke positioniert sich als strategischer KI-Berater: „Ich helfe Entscheidern, KI zu verstehen, bevor sie ihr Geschäft verändert.“ Die Design-Metapher dafür: aus Rauschen wird Signal. Ein Partikelfeld beginnt im Hero als ungeordnetes Netz (das Rauschen der KI-Schlagzeilen) und ordnet sich beim Scrollen durch das Kapitel „Ansatz“ zu einem klaren Gitter — die Arbeit des Beraters, als Bewegung erzählt.

Bewusste Entscheidungen: ruhige Autorität statt Tech-Lärm, Deutsch, keine erfundenen Zahlen oder Testimonials, Porträt als generativer Platzhalter (das echte Foto wird vor dem Live-Gang eingesetzt).

2 — Das Designsystem

#0B1120 Grund #111A30 Panel #E9EDF4 Text #93A5C2 Sekundär #D8A24A Akzent

Farbe: Tiefes Nachtblau als Grund (seriös, kein reines Schwarz), ein einziger warmer Amber-Akzent. Der Akzent wird sparsam eingesetzt: Eyebrows, Kursive im Titel, CTA, geordnete Netz-Linien.
Typografie: Fraunces (variable Serif, optische Größenachse opsz für Display-Schnitte) für Headlines, Instrument Sans für Fließtext, Monospace für Labels. Alle Fonts: SIL-OFL-lizenziert, self-hosted (DSGVO-sauber, kein Font-CDN).
Layout: Eine Spalte, max. 1120 px, viel Weißraum, Kapitelnummern als typografische Anker. Zeilenlängen unter 60 Zeichen.

3 — Die Technik

Eine statische Seite, eine Datei, null Dependencies — auch kein Three.js: Das Partikelfeld ist handgeschriebenes Canvas-2D.

Das Partikelfeld (Kern-Effekt)

Jedes Partikel besitzt zwei Positionen: eine driftende Chaos-Position und ein festes Gitter-Ziel. Ein Ordnungsparameter o ∈ [0,1], gesteuert von der Scroll-Position im Kapitel „Ansatz“, blendet zwischen beiden über:

p.x = p.cx + (p.gx - p.cx) * ease(o);
p.y = p.cy + (p.gy - p.cy) * ease(o);

Verbindungslinien entstehen zwischen Partikeln unterhalb einer Distanzschwelle; ihre Farbe kippt mit steigender Ordnung von Schieferblau nach Amber. Dazu: Maus-Abstoßung im Radius von 120 px, ein leichtes „Atmen“ des geordneten Gitters (Sinus-Offsets), Partikelzahl abhängig von der Viewportfläche, Device-Pixel-Ratio auf 2 begrenzt.

Weitere Bausteine

Generatives Porträt: konzentrische, zufällig unterbrochene Ringe (Canvas) — jedes Laden erzeugt eine leicht andere Grafik.
Scroll-Reveals: IntersectionObserver setzt eine .in-Klasse; die Animation macht reines CSS.
Assets: zu 100 % prozedural — es gibt keine einzige Bilddatei im Projekt.

4 — Die drei Iterationen

Nach dem Basis-Build wurde die Seite im Browser geprüft und in drei gezielten Pässen verbessert — am bestehenden Stand, ohne Neubau:

Iteration 1 · Motion & Komposition

Der Hero lernt Auftritt und Haltung

Browser-Test zeigte: Bei niedrigen Viewports kollidierte die Headline mit der Navigation und der Scroll-Hinweis mit dem Text → festes Hero-Padding, Scroll-Hinweis wird unter 700 px Höhe ausgeblendet.
Gestaffelte Entrance-Animation (Eyebrow → Titel → Subline → CTA).
Amberfarbene Scroll-Fortschrittslinie am oberen Rand.
Magnetische Buttons (folgen dem Cursor um wenige Pixel).
Das geordnete Gitter „atmet“ jetzt per Sinus-Offset, statt einzufrieren.

Iteration 2 · Typografie & Responsive

Feinschliff der Skala, echtes mobiles Menü

Fraunces nutzt jetzt explizit die optische Größenachse (opsz 132 im H1, 96 im H2) — Display-Schnitte wirken gezeichneter.
Mobiles Burger-Menü mit aria-expanded statt versteckter Navigation.
Mobile Dichte: kompaktere Karten, kleinere Kapitelnummern, angepasste Grids.

Iteration 3 · Performance, A11y & SEO

Unsichtbares, das den Unterschied macht

Font-Preloads, Open-Graph-Meta, SVG-Favicon als Data-URI, theme-color.
Skip-Link, sichtbare :focus-visible-Zustände, No-JS-Fallback (Inhalte bleiben ohne JavaScript lesbar).
Animation pausiert bei verstecktem Tab (visibilitychange) — spart Akku und CPU.
prefers-reduced-motion: statisches Feld, keine Entrance-Animationen.

5 — Den Prozess reproduzieren

Recherche: Bestehende Website analysieren — Positionierung, Angebote, Tonalität. Daraus eine einzige tragende Metapher ableiten (hier: Rauschen → Signal).
Konzept & Moodboard zuerst: Palette, Typografie, Hero-Skizze und Technik-Plan als eine Seite formulieren und freigeben lassen, bevor Code entsteht.
Basis-Build in einem Guss: Eine HTML-Datei, CSS-Design-Tokens (--bg, --accent …), komplette Inhalte, Kern-Effekt zuerst grob.
Im Browser prüfen, dann iterieren: Drei Pässe mit je einem Fokus (Motion → Typografie/Responsive → Performance/A11y). Jede Iteration verbessert den Bestand, statt neu zu bauen.
Werkzeuge: Claude Code (Fable 5) für Analyse, Design und Implementierung; lokaler Statik-Server + Browser-Konsole zur Verifikation; Netlify für das Deployment. Fonts einmalig von Google Fonts als OFL-woff2 geladen und self-gehostet.

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 ralfblaschke.com; die Live-Schaltung erfolgt separat nach Freigabe.

← Zur Designstudie „Signal“