Zum Inhalt
← Rezepte
Alle Rezepte

Salon: Handschrift und Termin

Friseur / Barbershop / Kosmetikstudio / Nagelstudio

Ein Salon verkauft Termine bei bestimmten Menschen. Deshalb steht die Handschrift der Stylist:innen im Mittelpunkt: ihre Looks zum Durchwischen, ihr Name als Unterschrift, ihre Preisstufe offen in einer echten HTML-Preisliste. Puder statt Weiß, Espresso statt Schwarz, ein Lackrot nur für „Termin buchen“, dazu eine breitenvariable Kontrast-Antiqua mit Haltung. Alle Bewegung läuft auf einer einzigen Hauskurve: zögernder Anlauf, langer weicher Auslauf, wie ein Kammstrich.

Bauplan tokens.css Alle Techniken Beispielseite

Schrift

Handschrift und Termin

Ein Salon verkauft Termine bei bestimmten Menschen.

Friseur

Headline
Kalnia
Text
Familjen Grotesk
Akzent
Mrs Saint Delafield

Farbe

  • #F4E9E4
  • #1E1412
  • #9B1D2E
  • #E9DBD4
  • #6E5A55
  • #D9C8C0

Bewegung

cubic-bezier(0.625, 0.05, 0, 1)
Dauer
250 (Farbe, Schatten, Hover), 400 (Menü, Drawer, Akkordeon, Unterstreichung, Reiter der Preisliste), 475 (Buttons: Fläche fährt von unten ein), 725 (nur Wurf und Rückkehr der Look-Karten, Hero-Bild einmalig); Schließen 65 % der Öffnungsdauer mit derselben Kurve (Menü 260)

Aufbau der Seite

SignaturKarten-Stapel und Fächer zum Wegschnippen

HeroFoto-Hero: echtes Foto, ein Satz, ein Weg · Split

  1. Bewertungsband direkt unter dem Hero (Google-Profil: Schnitt, Anzahl, Stand-Datum, Echtheitshinweis daneben)Plattform-Bewertungen mit Echtheitshinweis · Band unter dem Hero
  2. Leistungen & Preise (Rubriken Damen, Herren, Kinder, Farbe, Pflege, Kosmetik/Nägel als Reiter; Stufen als Spalten, Haarlänge als Zuschlag, ab-Preise mit dem Satz, wovon der Endpreis abhängt; jede wichtige Leistung mit eigener Unterseite, Antwort zuerst)Speisekarte als Editorial · Salon-PreiseTabs und Segmente mit Pfeiltasten · AutomatischLeistungsseite: Antwort zuerst · Praxis
  3. Team: wer schneidet, färbt, berät (Porträt, Name als Unterschrift, Stufe, Spezialgebiet, Sprachen, eigener Buchungsknopf; ab etwa sechs Personen Raster, darunter Variante statement)Team-/Über-mich-Layout mit Porträt-Interaktion · Statement-SatzTermin-Buchung per 2-Klick-Einbettung · Vorauswahl
  4. Looks: Arbeiten je Stylist:in als Kartenstapel zum Durchwischen (Look, Leistung, Dauer, ab-Preis als Text); die ganze Wand erst ab etwa acht BildernKarten-Stapel und Fächer zum WegschnippenMasonry-Galerie mit nativem display: grid-lanes (plus Fallback)Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026) · Projektraster zu
  5. Termin buchen (Widget erst nach Klick, daneben Telefon und WhatsApp; Ausfall- und Verspätungsregel des Salons als markierter Platzhalter)Termin-Buchung per 2-Klick-Einbettung · Platzhalter
  6. Gutscheine (Wert oder Leistung, Live-Vorschau, PDF oder Post; bei Online-Kauf Widerrufs-Button)Gutschein-KonfiguratorWiderrufs- und Kündigungs-Button · Richtig
  7. Produkte im Salon (die Pflege, mit der gearbeitet wird; ohne Shop nur zeigen, mit Shop Kaufbox und Warenkorb aus d2c-produkt-zuerst leihen)Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · Produktreihe
  8. Karriere & Ausbildung (offene Stellen direkt offen, Ausbildung, Initiativbewerbung)Stellenliste mit Kurzbewerbung · Wenige Stellen
  9. Öffnungszeiten, Anfahrt, Kontakt (Status aus echten Zeiten im Kopf, Adresse als Text, Karte per 2-Klick, ein Datenblock für Seite und JSON-LD HairSalon / BeautySalon / NailSalon)Öffnungszeiten mit Live-Status · KopfzeileKarte per 2-Klick (Anfahrt ohne vorab geladene Karte) · KartenbildFirmendaten aus einer Quelle · Friseursalon
  10. Barrierefreiheit (eigene Seite; Variante BFSG, wenn online gebucht oder verkauft wird und der Salon kein Kleinstunternehmen ist – vom Kunden prüfen lassen)Seite „Barrierefreiheit“ als Vorlage · Erklärung

Nicht verwenden

Regeln
  • Erster Bildschirm: echtes Foto einer Arbeit aus dem Salon, Salonname groß, ein Satz zu Spezialgebiet und Ort, „Termin buchen“ und „Preise ansehen“; das Bewertungsband steht direkt darunter.
  • Preise als HTML-Liste, nie als PDF oder Bild: Leistung, Dauer und Preis je Zeile, Preise in Tabellenziffern; Stufen (z. B. Junior, Stylist, Master) als Spalten, Haarlänge als Zuschlag; „ab“ nur zusammen mit dem Satz, wovon der Endpreis abhängt (wie Hair by SPECHT und Josh Wood). Gesamtpreise inkl. MwSt.
  • Jede Person im Team bekommt eine Karte mit Porträt, Name als Unterschrift (Akzentschrift, nur hier), Stufe, Spezialgebiet und eigenem Buchungsknopf („Bei [Name] buchen“); ihre Looks liegen als Kartenstapel (flick-karten-stapel) direkt dabei.
  • Kartenstapel immer auch per Knopf bedienbar (Weiter, Zurück, Alle zeigen); Wischen ist nur der schnellere Weg. Jede Karte nennt Look, Leistung, Dauer und ab-Preis als Text, nicht nur im Bild.
  • Buchung per termin-buchung-zwei-klick: Platzhalter in Widget-Höhe mit Leistungen und Anbieter, Kalender erst nach Klick; Telefon und WhatsApp stehen daneben. Ausfall- und Verspätungsregeln formuliert nur der Salon (markierter Platzhalter).
  • Mobil eine untere Leiste mit Termin, Preise, Anrufen (mobile-bottom-navigation); sie verdeckt weder Consent-Banner noch Buchungs-Widget.
  • Fotos von Kundinnen und Kunden nur mit schriftlicher Einwilligung, Kinder ohne erkennbares Gesicht. Instagram nicht live einbetten, sondern eine selbst gehostete Auswahl mit Link zum Profil.
  • Bewertungen nur mit Quelle, Anzahl, Stand-Datum und dem Hinweis, ob und wie geprüft wird, direkt neben den Stimmen (bewertungsprofil-mit-echtheitshinweis); keine Bewertungssterne über den eigenen Salon im Markup.
  • Gutscheine: Gültigkeit und Einlösung legt der Salon fest. Wird online gekauft, braucht es Gesamtpreis inkl. MwSt., Widerrufsbelehrung, AGB und den Widerrufs-Button (widerruf-und-kuendigung-schaltflaeche) – alles als markierte Platzhalter, vom Kunden prüfen lassen.
  • Pflichtangaben und Recht (Leitfaden 8a): Impressum und Datenschutz vom Footer und mobil erreichbar; beim Friseurhandwerk Handwerkskammer-Eintrag im Impressum (vom Kunden prüfen lassen). Kosmetik mit apparativen oder medizinnahen Behandlungen: keine Heilversprechen, Werbung nach Heilmittelwerbegesetz prüfen lassen. Claude schreibt keine Rechtstexte.
  • Lackrot nur für „Termin buchen“ und aktive Zustände; große Flächen aus Puder und Espresso.
  • Bewegung auf einer Kurve: Buttons füllen sich in 475 ms von unten, Menüs öffnen in 400 ms und schließen in 260 ms, Look-Karten fliegen beim Loslassen in 725 ms aus. Keine Scroll-Einblendungen außer dem Hero.
  • Team bis etwa fünf Personen: je Person ein Reiter mit Porträt, Unterschrift (Akzentschrift einmal pro Ansicht) und Look-Stapel; ab sechs Personen Raster ohne Unterschrift.
  • clip-path-form-hover nur für einen einzeln stehenden Knopf (z. B. Gutschein), nie neben „Termin buchen“.
Bild und Ton
  • Licht: Salon- oder Fensterlicht, Haarfarbe farbecht.
  • Ausschnitt: Hinterkopf, Profil, Bewegung im Haar; Porträt der Stylist:in auf Augenhöhe.
  • Personen: Ja: Kund:innen nur mit schriftlicher Einwilligung, Kinder ohne erkennbares Gesicht; Stylist:innen mit Namen.
  • Formate: 4:5, 3:4, 1:1
  • Nicht: Keine Stock-Models, keine KI-Frisuren, keine Farbfilter, die Haarfarben verfälschen, kein Video im Hero.
  • Anrede: du
  • Sätze: Kurz und persönlich, mit Namen. Preiszeile: Leistung, Dauer, Preis; „ab“ nur mit dem Satz, wovon es abhängt.
  • Haltung: Stilbewusst und warm. Ein Herrensalon oder klassischer Salon mit älterer Kundschaft siezt, dann durchgehend.
  • Tonproben: Balayage bei Mira. Ab 145 €, je nach Haarlänge., Buch direkt bei deiner Stylistin.
  • Nicht schreiben: „Ihr Wohlfühlsalon“, „Haare sind unsere Leidenschaft“, Wortspiele wie „Haarmonie“, Bewertungssterne ohne Quelle.
Hero, Raum und Form
  • Hero-Raster: 12 Spalten: Salonname über Spalte 1 bis 7, echtes Foto im Hochformat über 8 bis 12; alternativ Foto randlos mit Name darauf.
  • Hero-Bild: Eine echte Arbeit aus dem Salon, 4:5 oder 3:4, Radius 16 px.
  • Überschrift: clamp(2.75rem, 1.5rem + 5.5vw, 6.5rem), Kalnia wdth 112 / 500, links.
  • Handlung: „Termin buchen“ (Lackrot #9B1D2E gefüllt) und „Preise ansehen“ (Kontur); Telefon und WhatsApp als Links darunter.
  • Zusatz: Satz zu Spezialgebiet und Ort unter der H1; Bewertungsband mit Quelle und Stand direkt unter dem Hero.
  • Sektionsabstand: clamp(64px, 8vw, 120px)
  • Dichte: mittel
  • Raum: Preisliste dicht und lesbar (Zeilen 12 px, Rubriken 32 px), Team-Karten mit Luft. Bewertungsband direkt unter dem Hero ohne großen Abstand.
  • Spalten: 12
  • Maximale Breite: 1360px
  • Raster: Hero 7/5 (Name/Foto im Hochformat). Preisliste mit Stufen als Spalten, Team als 3er-Raster mit Kartenstapel je Person.
  • Radius klein: 8px
  • Radius groß: 16px
  • Schatten: nur die Look-Karten im Stapel (flick-karten-stapel) heben sich weich in Espresso ab; sonst keiner
  • Form: Pillen für Knöpfe (fuellung-vom-eintrittspunkt), 16 px für Look-Karten und Porträts (Demo flick-karten-stapel zeigt 12 bis 16 px).
Vorbilder