Ein Barbershop, fünf vollständige Designrichtungen — Classic, Dark, Street, Minimal und Swiss. Live umschalten, per Klick oder Pfeiltaste, und die ganze Marke wechselt ihr Gesicht, ohne dass der Weg zur Buchung verloren geht. Eine eigene Demo ohne Auftraggeber, die gestalterische Bandbreite auf einer einzigen Seite zeigt.
01 / DAS PROBLEM
„Zeigen Sie mir ein Beispiel“ ist die Frage, an der das Projekt hängen bleibt.
Wenn ein lokales Geschäft eine Landingpage will, bleibt das Gespräch am Geschmack hängen. Der Inhaber kann den gewünschten Stil nicht beschreiben, und drei Pinterest-Referenzen klären es auch nicht — jeder stellt sich etwas anderes vor. Das Ergebnis ist eine Korrekturschleife, die man sich sparen könnte, wenn man dieselbe Seite in verschiedenen Stilen nebeneinander sieht.
Ich habe einen erfundenen Barbershop, Navalha, genommen und fünf vollständige Art Directions derselben Landingpage gebaut, um genau das zu lösen: den Geschmack abstimmen, bevor produziert wird.
02 / DER ANSATZ
Gleiche Struktur, fünf Gesichter.
Die Regel, die ich mir gesetzt habe: Der Weg zur Buchung ändert sich nicht. Hero, Leistungen mit Preisen, Galerie, Team, Kundenstimmen und ein Kontaktbereich mit WhatsApp-Button stehen in allen fünf Stilen, in derselben Reihenfolge. Was sich ändert, ist die Art Direction — Typografie, Palette, Rhythmus, Ornament.
Classic ist Sepia und Vintage-Serife. Dark ist Schwarz und Gold, Premium. Street ist Neonorange, hoher Kontrast, riesige Schrift. Minimal ist Schwarz auf Weiß mit viel Luft. Swiss ist Raster und rote Haarlinien mit nummerierten Leistungen. Fünf Marken, ein Aufbau, der zur Buchung führt.
03 / DIE UMSETZUNG
Sofortiger Wechsel, kein Framework, eine Seite.
Live-Umschalter. Eine feste Auswahl am unteren Rand wechselt den Stil sofort — per Klick oder Pfeiltaste. Jede Richtung ist eine Funktion, die das komplette HTML der Seite zurückgibt; Umschalten heißt neu rendern und nach oben scrollen. Kein Neuladen, kein Flackern.
Fünf Schriften mit Charakter. Fraunces für Classic, Bebas Neue für Dark und Street, eine Serifenlose für Minimal, fett für Swiss. Die Schrift trägt die halbe Identität — ich habe jede so gewählt, dass sie den Stil in eine andere Richtung zieht.
Der Weg zur Buchung bleibt überall. Ein Preis bei jeder Leistung, ein WhatsApp-Button zum Buchen und Kontakt mit Adresse und Öffnungszeiten stehen in allen fünf — denn ein Stilwechsel darf nie Buchungen kosten.
Es ist eine einzige HTML-Datei mit Tailwind und etwas Vanilla JS. Kein Build, kein Backend — öffnen, und es läuft.
04 / ERGEBNIS
Fünf Entwürfe auf einem Bildschirm, der Geschmack mit einem Klick geklärt.
Die Demo wird zum Verkaufswerkzeug: Statt lose Mockups zu schicken, öffne ich Navalha mit dem Kunden und wechsle die Stile direkt vor seinen Augen. In Sekunden zeigt er auf das, was ihm gefällt, und das Projekt startet mit bereits entschiedener Art Direction.
Fünf vollständige Stilrichtungen, sechs Abschnitte und sechs Leistungen mit Preis — auf einer einzigen Seite, die ihr Gesicht wechselt, ohne dass der Weg zur Buchung verloren geht. Gestalterische Bandbreite, live gezeigt statt versprochen.
Stilrichtungen
5
Abschnitte
6
Leistungen
6
Datei
1 HTML
