Wie diese elf Seiten entstanden sind.
Elf fiktive Betriebe, elf grundverschiedene Gestaltungen, ein Prozess. Diese Seite dokumentiert ihn — nicht als Geheimnis, sondern als Arbeitsprobe.
Ein Konzept pro Gewerk, eine Mechanik pro Seite
Am Anfang stand keine Wireframe-Sammlung, sondern eine Regel: Jede Seite bekommt genau eine unvergessliche Signature-Mechanik, die aus dem Handwerk selbst kommt — Regen, der am Dach des Dachdeckers abprallt; eine Wiese, die sich beim Gärtner um den Cursor teilt; Wasser, das beim Installateur durch die Rohre der Seite fließt.
Alles Weitere — Typografie, Farben, Layout — wurde pro Gewerk eigenständig entschieden. Keine zwei Seiten teilen sich Fonts oder Palette.
Assets: generiert statt gestockt
Sämtliche Fotos wurden mit KI-Bildmodellen (Higgsfield, Modell Soul) eigens für die fiktiven Betriebe erzeugt — 34 Bilder, vom Meisterporträt bis zum Schieferdach, anschließend web-optimiert. Für die Tischlerei wurde ein generiertes Studiofoto eines Eichenstuhls per Image-to-3D in ein texturiertes 3D-Modell (GLB) überführt, das im Hero frei drehbar ist.
Technik: bewusst roh
Kein Framework, kein Build-Step. Jede Seite ist statisches HTML, CSS und JavaScript; 3D und Partikel laufen über eine lokal eingebundene Three.js-Instanz bzw. handgeschriebene Canvas-Engines (Curl-Noise-Dampf, Instanced-Grass-Shader, Verlet-Späne). Das hält die Templates portabel: Jedes lässt sich einzeln kopieren und weiterentwickeln.
- 3D & ShaderThree.js (vendored), eigene Vertex-/Fragment-Shader, Image-to-3D-GLB
- AnimationCanvas 2D, IntersectionObserver-Reveals, Scroll-gekoppelte Uniforms, Custom-Beziers
- BilderHiggsfield Soul, 2K generiert, als JPEG ≤1920px ausgeliefert
- HostingEine Netlify-Site, jedes Template unter eigenem Pfad, Formulare über Netlify Forms
Drei Iterationspässe, echte Klicks
Jede Seite ging nach Fertigstellung dreimal zurück auf die Werkbank: erst Konsole, Ladepfade und Screenshots auf Desktop-Breite; dann echte Interaktionstests — klicken, scrollen, Formulare, 375-Pixel-Viewport; zuletzt Feinschliff an Typografie, Fokus-Zuständen und prefers-reduced-motion-Fallbacks. Was im Pass auffiel, wurde vor dem nächsten behoben.
Und so wird daraus Ihre Seite
Die elf Templates sind Orientierung, kein Katalog. Sagen Sie uns, welches Template der Ausgangspunkt sein soll und welche Elemente Ihnen gefallen — Mechanik von Seite A, Typografie von Seite B, Ruhe von Seite C. Daraus entsteht ein eigenständiger Entwurf für Ihren Betrieb, mit Ihren Inhalten.