00.03 / 00.05

Zaczek Trockenbau

Website-Entwurf für einen Trockenbaubetrieb: Beim Scrollen werden echte Baustellenfotos Platte für Platte beplankt.

Kontext: Entwurf mit Auftrag, für Zaczek Trockenbau (Raum Anzing)
Kategorie: Website
Jahr: 2026
Tools: HTML, CSS, JavaScript, Archivo, ImageMagick, Vercel, Lighthouse

Browserfenster mit der dunkelblauen Startseite von Zaczek Trockenbau (Schlagzeile „Wände. Decken. Dachausbau.“ und Baustellenfoto in einer Hausform mit cyanfarbenem Doppeldach), davor ein Smartphone mit derselben Seite und der cyanfarbenen Anrufleiste am unteren Rand.

Aufgabe

Für den Betrieb ist keine eigene Website bekannt, nur ein MyHammer-Profil mit Fotos und Bewertungen sowie eine Visitenkarte. Ziel des Entwurfs: Besucher zum Anruf führen und die Arbeit mit echten Baustellenfotos belegen, ohne fehlende Angaben wie Titel, Zahlen oder Adresse zu erfinden.

Desktop-Startseite von Zaczek Trockenbau im Browserfenster: links die Schlagzeile „Wände. Decken. Dachausbau.“ mit Anruf-Button und MyHammer-Bewertung, rechts das Foto einer Metall-Unterkonstruktion an einer Glasfassade in einer Hausform mit cyanfarbenem Doppeldach.

Desktop-Abschnitt „Raum im alten Dachstuhl“ im Browserfenster: Das Nachher-Foto des beplankten Raumkörpers schiebt sich in plattenbreiten Streifen über das Vorher-Foto des Metallständerwerks, die Oberkanten der Streifen sind cyanfarben markiert.

Vorgehen

Die Fotos aus dem öffentlichen MyHammer-Profil wurden nach Vorher-Nachher-Reihen sortiert. Das Navyblau und der cyanfarbene Dachwinkel stammen von der Visitenkarte, das Logo wurde nach einem Handyfoto als SVG nachgezeichnet. Daraus entstand das Konzept „Beplanken“: Beim Scrollen steigt das Nachher-Foto in Plattenbreiten über das Vorher-Foto, am Ende verschwinden die Fugen. Die Seite ist statisches HTML und CSS mit rund 6 KB JavaScript, einer Fassung für reduzierte Bewegung und einer festen Anrufleiste auf dem Handy.