Snapshot
Problem
Salon-Vorlagen greifen alle zur selben Pastellpalette. Die wirkt jung und günstig, nicht hochwertig.
Ziel
Sieben Seiten mit einer gemeinsamen Handschrift, nicht sieben einzeln entworfene Bildschirme.
Meine Rolle
Konzept, Farbwelt, Bildregie, Gestaltung und Umsetzung, allein.
Ergebnis
Ein Beleg, den man selbst bewegt. Lighthouse 79 / 100 / 100 / 100.
Kontext
Ein Salon verkauft nicht nur einen Haarschnitt, sondern eine Stunde Ruhe. Das ist leicht gesagt und schwer zu zeigen: Die Kategorie greift fast geschlossen zu Rosa und Lavendel, und diese Palette liest sich als jung und günstig, das Gegenteil dessen, was ein Studio mit Preisen im dreistelligen Bereich braucht.
Dazu kommt ein Umfangsproblem. Sieben Seiten (Startseite, Leistungen, Preise, Galerie, Team, Termin, Kontakt) entstehen normalerweise nacheinander und sehen dann auch so aus: sieben Entwürfe, die eine Navigationsleiste teilen.
Beide Probleme haben dieselbe Ursache: Es fehlt eine Entscheidung, die für alle sieben Seiten gilt.
Hinweis zur Einordnung
AURELIA ist ein Konzeptprojekt. Studio, Team, Preise, Bewertungen und Kennzahlen sind erfunden; es gab keinen Auftraggeber und keine Nutzerforschung. Gestaltung, Bildregie, Umsetzung und die gemessenen Werte sind real.
Die zentrale Entscheidung
Statt sieben Layouts zu entwerfen, habe ich drei Regeln festgelegt und sie über alle Seiten durchgezogen: eine Farbwelt aus warmem Beige, Gold und Weiß; eine Schriftpaarung aus editorialer Serife und klarer Grotesk; und eine einzige Kartenform: dieselbe Rundung, dieselbe milchige Glasfläche, überall.
Danach war jede neue Seite eine Anwendung dieser Regeln, keine neue Gestaltungsaufgabe. Das ist auch der Grund, warum sich die sieben Seiten wie ein Ort anfühlen und nicht wie ein Ordner.
Gestaltung
Drei Entscheidungen, die alle aus derselben Frage folgen: Woran merkt jemand in zwei Sekunden, dass dieser Ort teurer ist als die Kette um die Ecke?
Beige statt Rosa
Warmes Beige, Gold und Weiß ersetzen die erwartbare Pastellpalette. Dazu eine editoriale Serife für Überschriften und eine ruhige Grotesk für den Text, damit das Studio durchdacht wirkt statt niedlich.
Ein Shooting aus vielen Bildern
Jede Aufnahme (Team, Leistungen, Innenräume) wurde einzeln farblich angeglichen. Nichts verrät zusammengetragene Bilder so schnell wie unterschiedliche Weißabgleiche nebeneinander.
Weiche Glasflächen, überall
Milchig abgesetzte Kartenflächen greifen die Weichheit eines Spa-Umfelds auf, nicht nur im Kopfbereich, sondern als durchgehendes Bauteil über alle sieben Seiten.
Der Beleg
Ergebnisse sind das überzeugendste Argument eines Salons und gleichzeitig das unglaubwürdigste: Zwei Fotos nebeneinander sehen nach Werbung aus, weil die Auswahl beim Absender liegt.
Ein Regler dreht das um. Der Besucher entscheidet, wie weit er zieht und wie lange er hinsieht, und aus einer Behauptung wird eine Handlung. Der Regler funktioniert mit Maus, Touch und Tastatur, damit das auch gilt, wenn jemand nicht zieht, sondern tabbt.
Highlight · Rundgang durch die sieben Seiten
Vier Aufnahmen aus der gebauten Seite. Sie zeigen, woran die gemeinsame Handschrift hängt, und wo sie mich beim Bauen korrigiert hat.
Ein Kopfbereich, der zum Weiterlesen einlädt
Der Kopfbereich blendet ein freigestelltes Porträt direkt in den Farbverlauf der Seite, statt es in einen Bilderrahmen zu setzen. Nach mehreren gerahmten Versuchen war genau das Weglassen des Rahmens der Punkt, an dem der Kopfbereich wie ein Teil der Seite wirkte und nicht wie ein aufgeklebtes Stockfoto. Eine milchige Glasfläche trägt Überschrift und Eckdaten, ohne das Porträt zu verdecken.
Jede Leistung im selben Rahmen
Die abgerundete Form aus dem Kopfbereich zieht sich durch alle vier Leistungsbereiche: Foto und Preisangabe teilen sich einen gemeinsamen Rahmen, statt dass das Bild getrennt von einer eckigen Textfläche darunter rundet. Dadurch liest sich das Scrollen durch die Leistungen als eine durchgehende Fläche statt als gestapelte Karten.
Ein klarer Preis, ein klarer Reiter
Preise in Reitern verhindern, dass vier Leistungsbereiche zu einer einzigen langen Liste werden, dabei ist immer genau ein Reiter sichtbar aktiv. Der Gutschein-Bereich ist als eigener, ruhiger Hinweis gestaltet statt als Banner, das um Aufmerksamkeit ruft.
Kontakt ohne Reibung
Kontaktformular, Karte und FAQ liegen auf einer Seite, sodass niemand die Telefonnummer über die ganze Webseite hinweg suchen muss: gestaltet in derselben ruhigen, glasigen Sprache wie überall sonst, statt als übliche Zweckseite.
Barrierefreiheit & Performance
Beim Aufbau dieser Fallstudie habe ich die veröffentlichte Seite gemessen, und sie fiel durch. Largest Contentful Paint lag bei 17,8 Sekunden. Gefunden und behoben:
- Sieben Megabyte Bilder, kein einziges
loading="lazy". Ein Handy lud die komplette Galerie, bevor der erste Bildschirm fertig war. Jetzt lädt nur der Kopfbereich sofort, alles andere beim Scrollen. - Das Kopfbild war ein 1,2 MB großes PNG, und damit das langsamste Element der Seite. Als WebP mit Transparenz sind es 183 KB bei gleicher Qualität. (Eine Zwischenlösung mit reduzierter Farbtiefe habe ich verworfen: Sie sparte ähnlich viel, erzeugte aber sichtbare Streifen auf der Haut. Bei einem Beauty-Studio ist die Bildqualität das Produkt.)
- Keine Seite hatte einen
<main>-Bereich. Damit fehlt Screenreader-Nutzern der Sprung zum Inhalt. Alle sieben Seiten nachgerüstet. - Tailwind kam über das CDN. Das sind 124 KB JavaScript, die das CSS bei jedem Aufruf erst im Browser erzeugen: Lighthouse rechnete dem Dokument dafür rund 850 ms Hauptthread-Arbeit zu. Einmal gebaut sind daraus 19 KB CSS geworden; die Blockierzeit fiel von 170 auf 50 ms.
Übertragene Datenmenge: von über 4,7 MB auf 1,2 MB. Largest Contentful Paint: 17,8 s auf 3,7 s.
Ergebnis
Gemessen mit Lighthouse gegen die veröffentlichte Seite, mobil, im privaten Fenster:
79
Performance
100
Barrierefreiheit
100
Best Practices
100
SEO
Largest Contentful Paint 3,7 s · Cumulative Layout Shift 0 · Total Blocking Time 50 ms. Vor den Korrekturen oben stand hier 56 / 98 / 100 / 100 bei 17,8 s. Einzelne, saubere Messung, nicht der beste aus mehreren Durchläufen.
Eine Handschrift, sieben Seiten
Drei Regeln statt sieben Entwürfe. Jede Seite ist eine Anwendung, keine neue Aufgabe.
Beleg statt Behauptung
Der Vorher-Nachher-Regler wird vom Besucher bewegt, mit Maus, Touch und Tastatur.
Fast fünfmal schneller
17,8 s auf 3,7 s, übertragene Datenmenge von 4,7 MB auf 1,2 MB.
Gelernt
Der Rahmen war das Problem
Der Kopfbereich sah mehrere Versuche lang nach aufgeklebtem Stockfoto aus. Es lag nicht am Bild, sondern am Rahmen darum: Erst als das Porträt freigestellt direkt in den Farbverlauf lief, gehörte es zur Seite. Weglassen war die Lösung, nicht Hinzufügen.
Schön gebaut heißt nicht gut gebaut
Diese Seite sah fertig aus und war mit 17,8 Sekunden praktisch unbenutzbar auf einer Mobilverbindung. Ich hatte sie vorher nie gemessen. Das war der eigentliche Fehler, nicht das PNG.
Was ich als Nächstes prüfen würde
Ob der Vorher-Nachher-Regler auf dem Handy überhaupt als beweglich erkannt wird. Am Schreibtisch ist der Griff eindeutig; auf einem Touchscreen ohne Mauszeiger ist das eine offene Frage, die fünf Personen in zehn Minuten beantworten würden.
Kurz gefasst
Ein Salon verkauft Ruhe, die Kategorie verkauft Pastellrosa. AURELIA setzt dagegen eine Farbwelt aus Beige und Gold, drei Regeln, die für alle sieben Seiten gelten, und einen Beleg, den der Besucher selbst bewegt: plus die Erkenntnis, dass eine schöne Seite, die 17 Sekunden lädt, keine schöne Seite ist.
Live ansehen
Alle sieben Seiten sind erreichbar, inklusive Galerie, Preisliste und Terminstrecke.
Konzeptprojekt: Studio, Team, Preise und Kontaktdaten sind erfunden.