PLEŠO TATTOO: web, na kterém je 30 let tetování vidět celé

1. 1Problém #1

   Vizuální směr bez písemného zadání

   Referenční weby ani popis stylu neexistovaly. Oporou bylo Plešovo logo a jeho vlastní banner s andělem, lebkou a růží; směr bylo třeba vyčíst z nich.

   Naše řešení

   Z banneru jsme vybrali to, co se v něm opakuje: monochrom, selektivní červenou, kámen a rytinovou šrafuru z loga. Z toho vznikl motiv RYTINA a světlá síň s tmavými místnostmi. Hero skládá banner do webové kompozice: dvě postavy po krajích, jméno uprostřed, koruna jako jediný červený bod.

   Technologie a implementace

   Designový systém z banneru + motiv RYTINA

2. 2Problém #2

   Tetování nesmí být oříznuté, ani o centimetr

   Portfoliové šablony kadrují fotky do mřížky a na tetování tak odříznou hlavu lva nebo konec rukávu. Klient to při kontrole pojmenoval sám: „lebo je to také useknuté“. Pro tatéra je oříznutá práce horší než žádná.

   Naše řešení

   Zavedli jsme zákon exponátu: výška kádru se počítá z poměru stran práce a z výšky obrazovky, takže celá práce i její štítek jsou vidět bez rolování. Stejné pravidlo platí v prohlížeči archivu i u videí. Kontroluje se i zdrojový soubor: kádr nohy s drakem jsme překadrovali z originálu, aby noha byla celá.

   Technologie a implementace

   Utilita .exhibit + object-contain + poměr stran z dat

3. 3Problém #3

   Rukáv ani záda se nedají ukázat jednou fotkou

   Velké práce se ovíjejí kolem těla. Na jedné ploché fotce z nich zůstane polovina, proto má hodně prací i video, na kterém se otáčí před kamerou. U téměř čtvrtiny archivu jde o video.

   Naše řešení

   Video je v archivu rovnocenný typ exponátu, jako socha na otočném podstavci. Dlaždice nese slovo VIDEO a rytinový kroužek místo ikony play. Každý klip má nejvýš 1 MB, bez zvuku, s plakátem a načítáním až po otevření; při prefers-reduced-motion se nespouští sám. Videa se v mřížce střídají s fotkami, aby archiv neotvíral stěnou plakátů.

   Technologie a implementace

   Kódování s rostoucím CRF do 1 MB + preload="none" + prokládání v mřížce

4. 4Problém #4

   Podklady přišly v několika vlnách

   Podklady přišly v několika vlnách a neměly jednotnou kvalitu ani pořadí. Bylo z nich třeba složit archiv, ve kterém má každá práce své místo.

   Naše řešení

   Každou vlnu jsme prošli jako kurátoři: seskupili klipy téže práce, spárovali stavy před a po, odstranili vodoznaky a u práce, která existovala i na starém webu, publikovali kvalitnější zdroj. Klientovy poznámky měly přednost před jakýmkoli výběrem z naší strany.

   Technologie a implementace

   Kurace médií + inventář archivu + série stavů

5. 5Problém #5

   Klient chtěl archiv spravovat sám

   Na hovoru při prohlížení archivu řekl: „to by som už mohol sám urobiť“. Tatér nahrává z telefonu, fotky mají 5 až 12 MB a videa desítky megabajtů, zatímco serverová funkce na Vercelu přijme nejvýš 4,5 MB.

   Naše řešení

   Postavili jsme správu portfolia ve slovenštině s přihlášením jen heslem. Soubory jdou z prohlížeče přímo do úložiště, proto projde fotka s 24 MB i video se 107 MB. Ukládá se samo, každé uložení je nová verze, druhé otevřené okno nepřepíše první a prázdné uložení se odmítne. Klient k tomu dostal krátké pokyny ve slovenštině.

   Technologie a implementace

   Vercel Blob s přímým nahráváním + verze obsahu + optimistický zámek

6. 6Problém #6

   Stará doména měla své místo v Google

   Stránka /portfolio s galerií byla druhou nejsilnější adresou starého webu a obrázky z ní žily v Google Images pod WordPressovými jmény souborů. Vedle toho WordPress nechal v indexu mapy stránek, RSS kanály a prázdné šablony hlavičky a patičky.

   Naše řešení

   Nasadili jsme 9 trvalých přesměrování: obě portfoliové stránky i všechny staré obrázky vedou do archivu, kde ty práce opravdu jsou, staré mapy stránek na novou sitemap.xml a šablony s kanály na domovskou stránku. K tomu strukturovaná data TattooParlor, llms.txt, IndexNow a ověření v Search Console.

   Technologie a implementace

   Přesměrování v next.config + JSON-LD + IndexNow

Podobné problémy ve vašem byznysu? Pomůžeme vám je vyřešit moderními technologiemi.

• Domů
• Archiv
• Rezervace
• Ochrana osobních údajů
• Zásady cookies
• Správa portfolia (neveřejná)

1. 01

   Hero rozložený jako banner klienta

   Světlá betonová stěna, vlevo trup s jeho pracemi, vpravo ruka v černé rukavici se strojkem, uprostřed jméno PLEŠO v Bodoni Moda s karmínovou korunou. Pod jménem disciplíny Realizmus · Colourwork · Custom a jediné psané slovo na webu: „Umenie, ktoré zostáva“. Rohy nesou Bratislava · Eberhard, Est. 1996 a 30 rokov skúseností.

2. 02

   Vybrané práce a signaturní kus

   Sedm prací, každá s vlastní kompozicí podle poměru stran kádru. Po nich tmavá místnost se signaturním kusem, Polynéskými zády. Štítek se stylem a umístěním stojí vždy na stěně vedle práce, nikdy na fotografii.

3. 03

   Řemeslo a čísla od klienta

   Portrét při práci, tři zásady ze starého webu (design, kvalita barev, hygiena) a počítadla 10 000+ klientů, 25 000+ tetování a 30 let. Čísla jsou klientova vlastní, řečená na hovoru, a web je tak i vede: jako text ze slov klienta, ne jako měření.

4. 04

   PRED / PO

   Nadpis sekce je samotné srovnání. Pod ním dva kádry vedle sebe, původní tetování a předělávka, bez posuvné opony, která by vždy jeden z nich zakrývala. Na mobilu jdou fotky na celou šířku obrazovky.

5. 05

   Disciplíny jako index

   Sedm disciplín v tom pořadí, v jakém je klient používá: Realism, Animals, Mandala, Tribal, Black & White, Cover up, Colour. Jehlová linka z loga vede aktivní řádek a vedle se mění práce z dané disciplíny.

6. 06

   Archiv na samostatné stránce

   895 záznamů se dvěma osami filtru, TYP (foto, video, stavy) a DISCIPLÍNA. Klik otevře práci na celou obrazovku bez oříznutí, listuje se šipkami nebo swipem, Esc zavře a adresa nese ID práce, takže se dá poslat odkazem.

7. 07

   Rezervace na jedné obrazovce

   Tlačítko Rezervácia v liště vede na vlastní stránku se třemi kanály: telefon, WhatsApp a e-mail. Formulář tam záměrně není; klient chce, aby mu lidé volali nebo psali přímo.

• Frontend a motiv RYTINA

  Jedna společná komponenta pro vstup obrázku přes šrafuru, která funguje na světlém i tmavém poli. Každá animace má variantu pro prefers-reduced-motion a kádr se počítá z poměru stran práce, ne z mřížky.

  • Bodoni Moda · Schibsted Grotesk · DM Mono · Italianno
  • Karmín z loga jako jediná barva
  • Respektovaný prefers-reduced-motion
  • Next.js 16
  • React 19
  • TypeScript
  • Tailwind CSS v4
  • framer-motion
  • Lenis

• Archiv a správa portfolia

  Metadata archivu i nové soubory žijí ve Vercel Blob. Každé uložení zapíše novou verzi, takže se změna ukáže hned a dá se vrátit. Přihlášení je jen heslem, druhé otevřené okno nepřepíše práci prvního.

  • Přímé nahrávání z prohlížeče
  • 40 uložených verzí archivu
  • Ochrana před souběžným přepisem
  • Vercel Blob
  • PBKDF2 heslo
  • Route Handlers
  • next/image

• SEO, měření a soulad

  Strukturovaná data typu TattooParlor s disciplínami jako nabídkou, devět trvalých přesměrování ze starého WordPressu, llms.txt a IndexNow. GA4 se načte až po souhlasu a měří kontaktní kliknutí, otevření práce a filtr archivu.

  • JSON-LD TattooParlor + Person
  • 9 přesměrování starých adres
  • Cookie lišta a právní stránky
  • JSON-LD
  • robots.txt & sitemap.xml
  • llms.txt
  • IndexNow
  • GA4
  • Silktide Consent Manager
  • Vercel

Moderní technologie = rychlý web + jednoduchá údržba + dlouhodobá podpora

1. 16.–17. září

   Koncept, motiv RYTINA a první odkaz

   2 dny

   Z banneru a loga vznikl designový systém, motiv RYTINA a první verze webu na 47 pracích vybraných z 1252 stažených originálů. Druhý den jsme web sladili s bannerem ještě těsněji: světlá kamenná síň, hero jako rozložený banner, zákon exponátu a archiv na samostatné stránce. Večer dostal klient odkaz.

2. 22. září

   Videa a série stavů

   1 den

   Přišla další vlna podkladů. Videa dostala vlastní typ exponátu, série stavů sekci na domovské stránce a archiv druhou osu filtru podle typu.

3. 23.–24. září

   Hovor s klientem a správa portfolia

   1 den

   Na hovoru klient upravil fakta: místo Ružinova Eberhard, Est. 1996 zůstává („to tam necháme“), praxe 30 let („No, máme 30.“). Sekci stavů jsme zjednodušili na PRED / PO podle jeho „Musíme to spraviť jednoduchšie“, přibyly další práce a správa portfolia, přes kterou si klient přidává práce sám.

4. 25.–26. září

   Rezervace, SEO a předání

   2 dny

   Tlačítko rezervace dostalo vlastní stránku s telefonem, WhatsAppem a e-mailem; na WhatsApp klient odpověděl „No to by bolo super.“ Přibyla přesměrování starých adres, GA4 po souhlasu, cookie lišta, ochrana osobních údajů s údaji z faktury, ověření v Search Console a adresa provozovny podle klienta. Tím byl web předán, po 6 dnech práce.