Portfolio-Konzept

ROTH Malermeister

Design-Guide zum Konzept „Begehbare Farbkarte“ — eine Scroll-Motion-Landingpage für einen Malerbetrieb, bei der jede Sektion eine eigene Wandfarbe trägt und der Nutzer die Seite selbst umstreichen kann.

Branche: Malerbetrieb Typ: One-Page / Scroll-Slides Register: Brand Jahr: 2026
Live Seite ansehen →

Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Projekt & Anforderungen

Was das Konzept leisten muss, für wen es gebaut ist und welche Haltung dahintersteckt.

Projektziel

Eine Konzeptseite, die beweist: Handwerker-Websites können sich wie eine eigenständige Marke anfühlen, ohne auf Seriosität zu verzichten.

Zielgruppe

Hausbesitzer 35–65, die 2–3 Betriebe vergleichen und nach wahrgenommener Sorgfalt entscheiden, nicht nach dem billigsten Angebot.

Design-Philosophie

Die Wandfarbe ist der Held. Layout und Typografie bleiben streng monochrom, damit ein einzelner Akzentton wirken kann.

Design-Gedanken zum Konzept

Warum Scroll-Slides: Jede Sektion ist exakt 100vh und snappt wie eine Präsentationsfolie. Das erzwingt Disziplin: eine Folie, eine Aussage, kein Zuscrollen an halben Gedanken vorbei.

Warum eine Wandfarbe pro Folie: Statt Fotos oder Illustrationen zu bemühen, wird die Seite selbst zum Anstrich. Jede Folie trägt ein Wandton-Etikett wie auf dem Farbtopf, das Layout dahinter bleibt streng typografisch.

Warum die Seite umstreichbar ist: Vier Farbchips im Hero ändern den Akzent live über die ganze Seite. Das ist die einzige Interaktion, die für einen Malerbetrieb tatsächlich etwas beweist: Kompetenz in Farbe, nicht in Spielerei.

Farbgebung

Kalkweiß und Tiefschwarz als neutrale Basis, ein einzelner Akzentton pro Sitzung. Keine Verläufe, keine Pastell-Deko.

Bildwelt

Reale Vorher/Nachher-Fotografie statt Stockfotos. Farbflächen ersetzen Bilder dort, wo noch keine Fotos existieren.

Typografie

System-Font-Stack für Display und Fließtext, dazu ein Mono-Stack nur für technische Etiketten. Keine Web-Font-Requests.

Interaktionskonzept

Scroll-Snap statt Wheel-Hijacking, Punkt-Navigation, Farbchips zum Umstreichen der Seite, Drag-Regler für Vorher/Nachher.

Farbpalette

Zwei neutrale Basistöne plus vier wählbare Wandfarben — ein System, keine beliebige Sammlung.

Kalkweiß
#F4F1EA · rgb(244,241,234)
Basisfläche, Ausgangspunkt jeder Folie
Tiefschwarz
#191817 · rgb(25,24,23)
Kontrastfolien, technische Präzision
Ultramarin
#2B3CB5 · rgb(43,60,181)
Standard-Akzent, meistgewählter Wandton
Tomatenrot
#B5352C · rgb(181,53,44)
Alternativ-Akzent, warme Baustellen
Ockergelb
#C98A1B · rgb(201,138,27)
Alternativ-Akzent, dunkler Text nötig
Tannengrün
#2E5941 · rgb(46,89,65)
Alternativ-Akzent, ruhige Räume

Monochrome Basis

Kalkweiß signalisiert eine frisch vorbereitete, saubere Fläche — der Zustand vor jedem Anstrich.

Tiefschwarz bricht die Wärme, wirkt technisch statt kitschig — Gegengewicht zur Handwerks-Klischee-Ästhetik.

Ultramarin

Vertrauen und Sorgfalt, ohne die Kühle einer Bank. Der Ton, den die meisten Kunden im Farbfächer zuerst greifen.

Weitere Wandtöne

Tomatenrot: Energie für Kunden, die Farbe als Statement wollen.

Tannengrün: gedeckt, für ruhige Wohn- und Praxisräume.

Typografie

System-Font-Stack für optimale Ladezeit und DSGVO-Konformität, ein Mono-Stack ausschließlich für technische Etiketten.

Headline / Display · 900
Wände können mehr.
Fließtext / Body · 400–500

ROTH Malermeister, Köln. Seit 1987 streichen, lackieren und spachteln wir so, als wär’s die eigene Wohnung.

Meta / Etikett · Mono
Ultramarin 5002 · matt · 4/6
Typografie-Richtlinien
Headline900, letter-spacing -0.045em, clamp bis ~11vw, nur eine pro Folie.
Meta-Label11–12px, Mono, letter-spacing 0.12em, Großbuchstaben.
Body16–18px, max. 34em Zeilenlänge, Gewicht 400–500.
Farbe im TextAkzent nur für Zahlen, CTAs und das Anstrich-Reveal im Hero.
Ultramarin 5002 · matt

UI-Komponenten

Wiederverwendbare Bausteine aus der Live-Seite — zwei davon sind unten tatsächlich interaktiv.

Farbchips — interaktiv
Klicken Sie einen Ton an: Vorschau-Zeile darunter reagiert live.
Ultramarin 5002 · matt
Buttons & CTAs
Primär auf Ink, Akzent für Handlungsaufforderungen, Outline für sekundäre Aktionen.
Kontakt-Elemente
Telefonnummer als größtes Element der Kontakt-Folie, Adresse/Zeiten als ruhiger Zweitblock.
0221 · 968 247 00

Mo–Fr 7–17 Uhr

Rückruf meist am selben Tag

Venloer Str. 214

50823 Köln

termin@roth-malermeister.koeln

Vorher/Nachher-Vergleich — interaktiv
Regler ziehen. Der „Nachher“-Ton folgt dem oben gewählten Farbchip.
Vorher
Nachher
Formular-Elemente
Minimalformular für Rückrufanfragen — bewusst kurz gehalten.