PLEŠO TATTOO: web, na ktorom je 30 rokov tetovania vidieť celé

1. 1Problém #1

   Vizuálny smer bez písomného zadania

   Referenčné weby ani popis štýlu neexistovali. Oporou bolo Plešovo logo a jeho vlastný baner s anjelom, lebkou a ružou; smer bolo treba vyčítať z nich.

   Naše riešenie

   Z baneru sme vybrali to, čo sa v ňom opakuje: monochróm, selektívnu červenú, kameň a rytinovú šrafúru z loga. Z toho vznikol motív RYTINA a svetlá sieň s tmavými miestnosťami. Hero skladá baner do webovej kompozície: dve postavy po krajoch, meno v strede, koruna ako jediný červený bod.

   Technológie a implementácia

   Dizajnový systém z baneru + motív RYTINA

2. 2Problém #2

   Tetovanie nesmie byť orezané, ani o centimeter

   Portfóliové šablóny kadrujú fotky do mriežky a na tetovaní tak odrežú hlavu leva alebo koniec rukáva. Klient to pri kontrole pomenoval sám: „lebo je to také useknuté“. Pre tatéra je orezaná práca horšia ako žiadna.

   Naše riešenie

   Zaviedli sme zákon exponátu: výška kadra sa počíta z pomeru strán práce a z výšky obrazovky, takže celá práca aj jej štítok sú vidieť bez rolovania. Rovnaké pravidlo platí v prehliadači archívu aj pri videách. Kontroluje sa aj zdrojový súbor: kader nohy s drakom sme prekadrovali z originálu, aby noha bola celá.

   Technológie a implementácia

   Utilita .exhibit + object-contain + pomer strán z dát

3. 3Problém #3

   Rukáv ani chrbát sa nedajú ukázať jednou fotkou

   Veľké práce sa ovíjajú okolo tela. Na jednej plochej fotke z nich zostane polovica, preto má veľa prác aj video, na ktorom sa otáča pred kamerou. Pri takmer štvrtine archívu ide o video.

   Naše riešenie

   Video je v archíve rovnocenný typ exponátu, ako socha na otočnom podstavci. Dlaždica nesie slovo VIDEO a rytinový krúžok namiesto ikony play. Každý klip má najviac 1 MB, bez zvuku, s plagátom a načítaním až po otvorení; pri prefers-reduced-motion sa nespúšťa sám. Videá sa v mriežke striedajú s fotkami, aby archív neotváral stenou plagátov.

   Technológie a implementácia

   Kódovanie s rastúcim CRF do 1 MB + preload="none" + prekladanie v mriežke

4. 4Problém #4

   Podklady prišli v niekoľkých vlnách

   Podklady prišli v niekoľkých vlnách a nemali jednotnú kvalitu ani poradie. Bolo z nich treba poskladať archív, v ktorom má každá práca svoje miesto.

   Naše riešenie

   Každú vlnu sme prešli ako kurátori: zoskupili klipy tej istej práce, spárovali stavy pred a po, odstránili vodoznaky a pri práci, ktorá existovala aj na starom webe, publikovali kvalitnejší zdroj. Klientove poznámky mali prednosť pred akýmkoľvek výberom z našej strany.

   Technológie a implementácia

   Kurácia médií + inventár archívu + série stavov

5. 5Problém #5

   Klient chcel archív spravovať sám

   Na hovore pri prezeraní archívu povedal: „to by som už mohol sám urobiť“. Tatér nahráva z telefónu, fotky majú 5 až 12 MB a videá desiatky megabajtov, zatiaľ čo serverová funkcia na Verceli prijme najviac 4,5 MB.

   Naše riešenie

   Postavili sme správu portfólia v slovenčine s prihlásením iba heslom. Súbory idú z prehliadača priamo do úložiska, preto prejde fotka s 24 MB aj video so 107 MB. Ukladá sa samo, každé uloženie je nová verzia, druhé otvorené okno neprepíše prvé a prázdne uloženie sa odmietne. Klient k tomu dostal krátke pokyny v slovenčine.

   Technológie a implementácia

   Vercel Blob s priamym nahrávaním + verzie obsahu + optimistický zámok

6. 6Problém #6

   Stará doména mala svoje miesto v Google

   Stránka /portfolio s galériou bola druhou najsilnejšou adresou starého webu a obrázky z nej žili v Google Images pod WordPressovými menami súborov. Popri tom WordPress nechal v indexe mapy stránok, RSS kanály a prázdne šablóny hlavičky a pätičky.

   Naše riešenie

   Nasadili sme 9 trvalých presmerovaní: obe portfóliové stránky aj všetky staré obrázky vedú do archívu, kde tie práce naozaj sú, staré mapy stránok na novú sitemap.xml a šablóny s kanálmi na domovskú stránku. K tomu štruktúrované dáta TattooParlor, llms.txt, IndexNow a overenie v Search Console.

   Technológie a implementácia

   Presmerovania v next.config + JSON-LD + IndexNow

Podobné problémy vo vašom biznise? Pomôžeme vám ich vyriešiť moderným tech stackom.

• Domov
• Archív
• Rezervácia
• Ochrana osobných údajov
• Zásady cookies
• Správa portfólia (neverejná)

1. 01

   Hero rozložený ako baner klienta

   Svetlá betónová stena, vľavo trup s jeho prácami, vpravo ruka v čiernej rukavici so strojčekom, v strede meno PLEŠO v Bodoni Moda s karmínovou korunou. Pod menom disciplíny Realizmus · Colourwork · Custom a jediné písané slovo na webe: „Umenie, ktoré zostáva“. Rohy nesú Bratislava · Eberhard, Est. 1996 a 30 rokov skúseností.

2. 02

   Vybrané práce a signatúrny kus

   Sedem prác, každá s vlastnou kompozíciou podľa pomeru strán kadra. Po nich tmavá miestnosť so signatúrnym kusom, Polynézskym chrbtom. Štítok so štýlom a umiestnením stojí vždy na stene vedľa práce, nikdy na fotografii.

3. 03

   Remeslo a čísla od klienta

   Portrét pri práci, tri zásady zo starého webu (dizajn, kvalita farieb, hygiena) a počítadlá 10 000+ klientov, 25 000+ tetovaní a 30 rokov. Čísla sú klientove vlastné, povedané na hovore, a web ich tak aj vedie: ako text zo slov klienta, nie ako meranie.

4. 04

   PRED / PO

   Nadpis sekcie je samotné porovnanie. Pod ním dva kadre vedľa seba, pôvodné tetovanie a prerábka, bez posuvnej opony, ktorá by vždy jeden z nich zakrývala. Na mobile idú fotky na celú šírku obrazovky.

5. 05

   Disciplíny ako index

   Sedem disciplín v tom poradí, v akom ich klient používa: Realism, Animals, Mandala, Tribal, Black & White, Cover up, Colour. Ihlová linka z loga vedie aktívny riadok a vedľa sa mení práca z danej disciplíny.

6. 06

   Archív na samostatnej stránke

   895 záznamov s dvoma osami filtra, TYP (foto, video, stavy) a DISCIPLÍNA. Klik otvorí prácu na celú obrazovku bez orezania, listuje sa šípkami alebo swipom, Esc zatvorí a adresa nesie ID práce, takže sa dá poslať odkazom.

7. 07

   Rezervácia na jednej obrazovke

   Tlačidlo Rezervácia v lište vedie na vlastnú stránku s tromi kanálmi: telefón, WhatsApp a e-mail. Formulár tam zámerne nie je; klient chce, aby mu ľudia volali alebo písali priamo.

• Frontend a motív RYTINA

  Jeden spoločný komponent pre vstup obrázka cez šrafúru, ktorý funguje na svetlom aj tmavom poli. Každá animácia má variant pre prefers-reduced-motion a kader sa počíta z pomeru strán práce, nie zo sieťky.

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

• Archív a správa portfólia

  Metadáta archívu aj nové súbory žijú vo Vercel Blob. Každé uloženie zapíše novú verziu, takže sa zmena ukáže hneď a dá sa vrátiť. Prihlásenie je iba heslom, druhé otvorené okno neprepíše prácu prvého.

  • Priame nahrávanie z prehliadača
  • 40 uložených verzií archívu
  • Ochrana pred súbežným prepisom
  • Vercel Blob
  • PBKDF2 heslo
  • Route Handlers
  • next/image

• SEO, meranie a súlad

  Štruktúrované dáta typu TattooParlor s disciplínami ako ponukou, deväť trvalých presmerovaní zo starého WordPressu, llms.txt a IndexNow. GA4 sa načíta až po súhlase a meria kontaktné kliknutia, otvorenie práce a filter archívu.

  • JSON-LD TattooParlor + Person
  • 9 presmerovaní starých adries
  • Cookie lišta a právne stránky
  • JSON-LD
  • robots.txt & sitemap.xml
  • llms.txt
  • IndexNow
  • GA4
  • Silktide Consent Manager
  • Vercel

Moderný tech stack = rýchly web + jednoduchá údržba + dlhodobá podpora

1. 16.–17. september

   Koncept, motív RYTINA a prvý odkaz

   2 dni

   Z baneru a loga vznikol dizajnový systém, motív RYTINA a prvá verzia webu na 47 prácach vybraných z 1252 stiahnutých originálov. Na druhý deň sme web zladili s banerom ešte tesnejšie: svetlá kamenná sieň, hero ako rozložený baner, zákon exponátu a archív na samostatnej stránke. Večer dostal klient odkaz.

2. 22. september

   Videá a série stavov

   1 deň

   Prišla ďalšia vlna podkladov. Videá dostali vlastný typ exponátu, série stavov sekciu na domovskej stránke a archív druhú os filtra podľa typu.

3. 23.–24. september

   Hovor s klientom a správa portfólia

   1 deň

   Na hovore klient upravil fakty: namiesto Ružinova Eberhard, Est. 1996 zostáva („to tam necháme“), prax 30 rokov („No, máme 30.“). Sekciu stavov sme zjednodušili na PRED / PO podľa jeho „Musíme to spraviť jednoduchšie“, pribudli ďalšie práce a správa portfólia, cez ktorú si klient pridáva práce sám.

4. 25.–26. september

   Rezervácia, SEO a odovzdanie

   2 dni

   Tlačidlo rezervácie dostalo vlastnú stránku s telefónom, WhatsAppom a e-mailom; na WhatsApp klient odpovedal „No to by bolo super.“ Pribudli presmerovania starých adries, GA4 po súhlase, cookie lišta, ochrana osobných údajov s údajmi z faktúry, overenie v Search Console a adresa prevádzky podľa klienta. Tým bol web odovzdaný, po 6 dňoch práce.