Tattoo-Artists leben auf Instagram - in einem Raster, das ihre Arbeiten komprimiert, ihre Buchungsregeln versteckt und jemand anderem gehört. Dieses Konzeptprojekt zeigt, was eine eigene Website stattdessen sein kann: eine dunkle, ruhige Galerie, die sich bewegt wie Tinte im Wasser, ein Anfrageformular, das die richtigen Fragen stellt, und ein zweisprachiges CMS, das die Künstlerin oder der Künstler ohne mich betreibt. Zur Live-Demo (öffnet in einem neuen Tab)
Ein Tattoo-Artist ist eine Marke - und doch mieten die meisten ihr Schaufenster bei einem sozialen Netzwerk: Die Fotos werden komprimiert, die Buchungsregeln liegen drei Klicks entfernt, und ein Algorithmus entscheidet, wer was sieht. Der übliche Ausweg, eine eigene Website, tauscht oft nur eine Abhängigkeit gegen die nächste: Für jedes neue Motiv wartet man auf die Entwicklerin. Mein selbst gestelltes Briefing hatte deshalb zwei Hälften: eine Galerie bauen, die eindrucksvoll genug ist, um das Raster dafür zu verlassen - und sie so vollständig übergeben, dass der Artist sie allein betreibt, inklusive Inhalten, SEO und Guest Spots.
Eine dunkle, kontrastreiche Oberfläche, die sich zurücknimmt - damit die Tattoos auf jedem Bildschirm das Hellste sind.
Ein handgeschriebener WebGL2-Shader hinter der Überschrift: feine, gravierte Linien, gebogen von einer echten Wellensimulation, die Maus oder Finger folgt.
Gebaut mit three.js - beim Scrollen fliegt die Kamera durch die Arbeiten, und jedes Stück bringt seine eigenen Hintergrundfarben mit, gewonnen aus dem Foto.
Stil, Körperstelle, Grösse und Budget gleich zu Beginn - und jedes Motiv hat einen Button „Enquire about a piece like this“, der die Referenz mitnimmt.
Englisch und Spanisch mit übersetzten URLs, hreflang und einer Sitemap für beide Sprachen - bereit für lokale Kundschaft und internationale Guest Spots.
Ein individuell konfiguriertes Sveltia CMS mit eingebautem Handbuch: Arbeiten, Guest Spots, Texte, SEO und Farben - alles ohne Entwicklerin bearbeitbar.
Die ausgewählten Arbeiten liegen nicht auf einer Seite - man bewegt sich durch sie hindurch. Das Scrollen steuert eine Kamera durch eine three.js-Szene, in der jedes Stück auf einer eigenen Ebene in der Tiefe hängt. Eins nach dem anderen tritt jedes Tattoo in voller Grösse nach vorn, während das nächste im Dunst dahinter wartet - so sieht man immer nur ein Motiv, ohne dass etwas anderes um Aufmerksamkeit konkurriert. Näher kommt ein Bildschirm dem langsamen Gang an einer Wand gerahmter Arbeiten kaum.
Die Atmosphäre bewegt sich mit. Jedes Stück bringt eigene Hintergrundfarben mit, und der Nebel der Szene ist darauf abgestimmt - der Raum scheint sein Licht zu wechseln, sobald man bei einem Tattoo ankommt. Jedes Motiv atmet ganz leicht und neigt sich zur Maus hin, und der Hintergrund reagiert darauf, wie schnell man scrollt. Nichts davon wird pro Foto von Hand eingestellt: Der Artist lädt ein Bild im CMS hoch, den Rest übernimmt die Galerie.
Beim Build liest ein Skript jedes Foto und gewinnt daraus einen Grund und zwei Lichter - in einem ruhigen Band warmer Grautöne, damit das Tattoo das Hellste auf dem Bildschirm bleibt.
Botanical wrap Grund: #272524 Licht 1: #433e3b Licht 2: #50534a 
Sea goddess half sleeve Grund: #2e2c2a Licht 1: #494542 Licht 2: #575951 
Red floral linework Grund: #31302e Licht 1: #4c4a46 Licht 2: #595c55 
Mountain in a diamond Grund: #2a2827 Licht 1: #454140 Licht 2: #54554e Tattoo-Fotos: Pexels. Die Paletten sind genau die Werte, die die Demo für sie erzeugt hat.
Alles im Frontend beantwortet eine einzige Frage: Lässt es die Arbeiten besser aussehen?
Hinter der Überschrift liegt ein Feld aus feinen, wie graviert wirkenden Linien. Sie treiben langsam von selbst, und eine echte 2D-Wellensimulation biegt sie überall dort, wo sich Maus oder Finger bewegen - mit einer nachziehenden Spur und Wellen, die sich begegnen und überlagern, wie eine Hand, die durchs Wasser streicht. Die Helligkeit wurde gemessen, nicht nach Augenmass gewählt: Das Muster wirkt als Textur und lenkt nie vom Namen ab.
Auf der Startseite sind die Arbeiten kein Raster. Beim Scrollen bewegt sich eine Kamera von Stück zu Stück, und der Hintergrund nimmt die Farben des jeweiligen Fotos an. Das vollständige Archiv hat eine eigene Seite, nach Stil filterbar.
Beim Scrollen schieben sich die Abschnitte übereinander, und die Kante bewegt sich bewusst etwas langsamer als der Finger - so wirkt jeder Übergang ruhig statt aufdringlich. Darunter sorgt Lenis für weiches Scrollen.
Viele Artists arbeiten in mehreren Städten. Deshalb ist die Website von Grund auf englisch und spanisch, und Guest Spots haben eine eigene Seite - kommende und vergangene Termine und ob Buchungen offen sind -, die sich in Minuten aktualisieren lässt.
Aufwendige Visuals bedeuten meist eine langsame Website. Hier kosten sie fast nichts, bis sie gebraucht werden.
Die Wellen sind wenige Kilobyte handgeschriebenes WebGL2 ohne Bibliothek - klein genug für den ersten Bildschirm. Sie pausieren, sobald man wegscrollt oder den Tab wechselt, werden bei reduzierter Bewegung zum Standbild und weichen einem passenden Farbverlauf, wenn WebGL fehlt. three.js bleibt der Galerie vorbehalten, wo sich eine echte 3D-Szene lohnt.
Unter der 3D-Galerie liegt ein echtes Bildraster im HTML: Suchmaschinen, Screenreader und Geräte ohne WebGL sehen jedes Motiv. Texturen laden ein paar Stücke vor der Kamera, und Smartphones rendern mit geringerer Pixeldichte, um den Akku zu schonen.
Name, E-Mail, Stil und Idee sind Pflicht; Körperstelle, Grösse und Budget werden gleich mit abgefragt - so kann die erste Antwort eine echte Antwort sein statt einer Liste von Rückfragen.
Übersetzte URLs, hreflang, Canonical-Tags und eine zweisprachige Sitemap auf jeder Seite. Strukturierte Daten beschreiben das Studio als TattooParlor - Adresse, Öffnungszeiten, Standort - und jeden kommenden Guest Spot als Event. Titel und Beschreibungen lassen sich pro Seite und Sprache im CMS bearbeiten; ein leeres Feld fällt auf den eigenen Text der Seite zurück statt auf ein leeres Tag.
Sveltia CMS läuft über das GitHub-Konto des Artists und das Login von Netlify - ohne eigenen Server und ohne monatliche CMS-Gebühr. Nach der Anmeldung erscheint zuerst ein Handbuch mit 13 Themen. Jede bearbeitbare Datei wird beim Build geprüft, sodass ein geleertes Feld die Website nicht lahmlegt, und die zwei änderbaren Farben werden automatisch lesbar gehalten.
Die Tattoo-Stile stehen nicht fest in den Seiten - sie sind eine Liste im CMS, jeder mit Namen, Reihenfolge und Suchbegriff. Wird dort ein Stil ergänzt, umbenannt oder verschoben, aktualisiert sich beim nächsten Build alles, was davon abhängt: die Zeile unter dem Namen des Artists, die Filter auf der Arbeiten-Seite, die Stilauswahl im Anfrageformular, der Seitentitel jedes Motivs und die strukturierten Daten, die Suchmaschinen sagen, was das Studio macht.
"knowsAbout": ["black and grey tattoo", "fine line tattoo", "floral tattoo", "dotwork tattoo"] Jedes Motiv hat einen Button „Enquire about a piece like this“. Er öffnet das Kontaktformular mit diesem Motiv bereits als Referenz - sichtbar, verlinkt und entfernbar, falls die Kundin es sich anders überlegt -, damit der Artist genau weiss, worum es in der Anfrage geht.
Lighthouse-Performance, Desktop und Mobil
Largest Contentful Paint, Desktop
Largest Contentful Paint, Mobil
Cumulative Layout Shift
Gemessen mit Google Lighthouse auf der Live-Demo (öffnet in einem neuen Tab), Desktop und Mobil. Auch Barrierefreiheit und Best Practices erreichten auf beiden 100.
Dieses Projekt ist ein technischer und gestalterischer Spielplatz. Es zeigt, was entsteht, wenn man Page-Builder und gemietete Plattformen hinter sich lässt: ein digitaler Raum, so individuell wie die Kunst darin - und trotzdem vollständig in der Hand des Artists.
Demo-Website · Konzeptprojekt · Fotos: Pexels. Artist, Kontaktdaten und Studio sind Platzhalter.
Ersetzen Sie Tattoo-Stile durch Behandlungen, Menübereiche oder Produktlinien, und dasselbe Muster passt zu fast jedem Unternehmen: eine Liste im CMS, die Navigation, Filter, Formulare und Suchdaten steuert - und Anfragen, die schon wissen, worum es geht.
Erzählen Sie mir von Ihrer Arbeit, Ihrem Publikum und wo Sie gesehen werden möchten - und lassen Sie uns ein Portfolio bauen, das ganz für sich steht.