MamaTattoo

O projektu

MamaTattoo je osobní značka tatérky Kateřiny Tomaselli. Pod jednou značkou funguje tetovací studio, piercing a Academy, tedy vzdělávání budoucích tatérů. Každý obor má jinou cílovou skupinu a jiný způsob rozhodování, na webu ale musí působit jako celek. Na projektu mám na starosti celý balík od product discovery přes návrh a stavbu ve Frameru po spuštění, nastavení a předání klientce. Projekt stále probíhá.

Výzva

Vypadalo to jako redesign webu, ale šlo o informační architekturu celé značky. Největší problém nebyl vizuální, ale porozumění nabídce. Zájemce o kurz nevěděl, jaký si vybrat a co získá, a místo odpovědi dostal akreditaci a osnovy. Klient studia zase neřeší techniku, řeší, komu svěří své tělo.

[OBRÁZEK 2, volitelně: screenshot původního webu před redesignem, pokud existuje, s jedním popiskem, co nefungovalo. Pokud ho nemáš, vynech.]

Katka jako tvář značky

Značka stojí na Katce jako osobnosti. Lidé si nevybírají jen službu, chodí za tatérkou, které věří. Proto je tváří webu ona, ne fotka studia. Homepage nejdřív buduje důvěru v člověka, teprve potom představuje služby, a důvěryhodnost je přímo v úvodní sekci.

Přístup: otázky místo sekcí

Původně jsme stránky navrhovali seznamem sekcí. Vznikaly stránky, ne dobrý zážitek. Proto jsme u každé stránky nejdřív určili, jakou otázku si člověk klade, jakou obavu tím řeší a která informace ji odstraní. Až potom vznikla sekce.

Nenavrhujeme stránky. Navrhujeme odpovědi na otázky uživatelů.

Sekce bez otázky ze stránky vypadla. Z tohohle postupu vznikl UX Question Framework.

Homepage jako rozcestník

Homepage nepředstavuje všechny služby, pomáhá najít správnou cestu: emoce, důkaz, důvěra a teprve potom rozcestník podle situace (chci tetování, chci piercing, chci se stát tatérem). FAQ je až na konci a obsahuje jen otázky, které by jinak zabránily objednávce.

Stránka Tetování

Stránka pro klienty studia jde v pořadí rozhodování: emoce, práce, důvěra, proces, rezervace. Začíná silným portfoliem, hned následují recenze a ocenění, potom průběh od konzultace po péči a teprve pak cena. Poslední bariéry zachytí FAQ. U každé sekce mám zapsáno, proč na stránce je a na jakou otázku odpovídá, takže jde obhájit každé rozhodnutí.

Piercing

Piercing jsme původně brali jako vedlejší službu. Ukázalo se, že má vlastní cílovou skupinu a jiné obavy (sterilita, bezpečnost, kvalita šperků), proto dostal vlastní sekci i detail.

Academy: informační architektura

Academy vypadala jako více než deset nesouvisejících kurzů. Ve skutečnosti jde o dvě osy: co se člověk chce učit (obor) a jak se k cíli dostane (studijní cesta). Místo desítky stránek proto vznikly oborové stránky a jedna sdílená šablona detailu.

Cestu si člověk nevybírá podle názvu produktu, ale podle situace: chci kompletní cestu, chci vlastním tempem, už mám zkušenosti. Porovnání je nástroj pro rozhodnutí, ne záložky. U každé možnosti je krátké srovnání vidět ještě před výběrem, detail ukáže, pro koho cesta je a co člověk získá, a srovnávací tabulka staví varianty vedle sebe.

Detail kurzu je uspořádaný podle otázek, ne podle firmy: je to pro mě, kam mě kurz dostane, jak cesta probíhá, proč tomu věřit, co dostanu a co mám udělat. Nejdřív říkám, kam člověka kurz dostane, až potom, co obsahuje.

Data přicházejí z CMS do jedné šablony, sekce bez dat se samy skryjí a stránka oboru nabízí jen existující cesty. Orientaci drží drobečková navigace, lepicí lišta s přepínačem cest a mega menu, které ukáže mapu nabídky podle oboru ještě před otevřením stránky.

Vizuální strategie: mezi ženskostí a tetováním

MamaTattoo nemá být sterilní beauty salon, tvrdé underground studio ani generická akademie. Stojí mezi ženskostí (péče, bezpečí, osobní přístup) a tetováním (sebevyjádření, řemeslo, odvaha). Výsledkem nemá být růžový tattoo web, ale ženský, sebevědomý a řemeslně poctivý svět tetování. Z toho vzniklo pět pilířů: osobitost, péče, profesionalita, sebevědomí a transformace, každý s vizuálním důsledkem.

Jeden systém, dva režimy

Web má jednu značku ve dvou režimech podle toho, co člověk potřebuje. Když má něco cítit, používám prezentační režim s velkou typografií, silnou fotografií a pohybem. Když má něco pochopit a rozhodnout se, informační režim s čitelnou hierarchií, střídmou barvou a postupným odkrýváním. Je to škála, ne vypínač.

Na stránce Tetování je portfolio dramatické, proces, cena a péče klidnější a kontakt nejklidnější: jasný další krok, minimum polí a informace, kdy přijde odpověď. Právě takovou informaci uvádí podle mého auditu webů studií jen 6 % z nich.

Systém místo jednotlivých stránek

Web MamaTattoo nemá jeden vzhled, který by se opakoval na každé stránce. Má pravidla, podle kterých se vzhled mění s tím, co má člověk právě udělat. Zapsal jsem je do několika navazujících dokumentů: master systému, prezentačního a informačního režimu a systému infografik, k tomu emoční mapa značky a vizuální průvodce s tokeny a komponentami. Psal jsem je tak, aby podle nich šlo stavět další stránky, i s AI, a proto v nich není jen výsledek, ale i pořadí rozhodování. Základ systému je v kostce tohle.

• Písmo: jedna rodina, extrémní kontrast na homepage (nadpis 134 px proti textu 16 px), na informačních stránkách strop nadpisu 38 px.

• Barva: fialová hlavní, tyrkysová jen pro hlavní akci, pastelový přechod na kartách bez okraje.

• Detail: ruční kresba u nadpisů (Scribble) dává webu tatérský charakter a používá se jen v prezentačním režimu.

Rytmus intenzity

Stránka není řada stejně důležitých sekcí, ale střídání intenzity. Rozlišuji tři úrovně. Vysokou mají úvodní sekce, velká prohlášení a pohyblivé portfolio. Střední mají dvojice textu a fotografie, představení služby, reference a proces. Nízkou má obyčejný text, FAQ a kontaktní údaje. Pravidlo je jediné: dvě vysoké sekce nejdou přímo za sebou a celá stránka nemá zůstat v nízké.

Klidné části přitom nejsou prázdné. Vytvářejí prostor, ve kterém silné momenty zaberou. Když je všechno výrazné, nic už nepůsobí výrazně. Proto se u sekce ptám i na to, jaký zážitek jí předcházel a na co má připravit další.

Stejné je to s pohybem. V jednom vizuálním prostoru má být jeden dominantní pohyb, ne text odhalující se po znacích, parallax, běžící galerie a vyjíždějící karty najednou. Nejsilnější je úvod, výraznější je hlavní sdělení, jemnější fotografie a karty, běžný text je statický a formuláře mají jen funkční pohyb.

Dva režimy jako škála

Prezentační a informační režim nejsou dvě kategorie stránek, ale dva konce škály. Záleží na tom, co má člověk udělat. Když značku teprve objevuje, převládá prezentace: cítit, toužit, objevovat. Když porovnává možnosti, převládá informace: porozumět, porovnat, získat důvěru a rozhodnout se. A když něco dokončuje, třeba vyplňuje formulář nebo rezervuje termín, výraznost ustupuje ještě víc, protože jasnost má přednost před efektem.

Jedna stránka tak může začít prezentačním úvodem a pokračovat strukturovanými informacemi, jen přechod mezi režimy musí být přirozený a v sekci, která se zhušťuje, ubývá pohybu a dekorace a přibývá hierarchie.

Dobře to ukazuje stránka Tetování: portfolio může být dramatické, ale proces, příprava a péče jsou klidnější a informační, protože na nich závisí důvěra. Academy má jinou energii: nemá působit rebelsky, ale rozvojově a sebevědomě, a hlavně nesmí vypadat jako cizí web. Režim proto nevybírám jednou pro celý web, ale pro každou sekci znovu.

Jedno pravidlo jsem si zapsal výslovně, protože se na něj snadno zapomíná: informační stránka nesmí přebírat nejvyšší intenzitu homepage. Obě sdílejí značku, ale slouží jinému člověku v jiné chvíli.

Typ sekce určuje hustotu

U informačních stránek dělím sekce na čtyři typy. Statement uvede téma nebo oddělí husté bloky, má málo textu a hodně prostoru. Informace vysvětluje strukturovaný obsah, třeba program kurzu nebo podmínky. Důkaz podporuje tvrzení fotografií, referencí nebo konkrétním výsledkem. Rozhodnutí je cena, varianty a hlavní výzva k akci, takže v něm nesmí rušit nic navíc.

Typy se střídají, typicky statement, informace, důkaz, statement, informace, rozhodnutí. Husté sekce odděluje vždy něco lehčího, nejčastěji důkaz, protože fotografie nebo reference stránku odlehčí. Více hustých sekcí za sebou nechci.

Pro stránky s hodně obsahem jsem k tomu přidal malou knihovnu kompozic místo jednoho univerzálního layoutu: dělení zhruba 60 na 40 pro vysvětlení s fotografií, boční navigaci s obsahem pro dlouhý program kurzu, řadu čísel pro rychlé porovnání a soustředěný panel pro cenu nebo přihlášení. Kompozice se vybírá podle typu sekce, ne naopak. Důležitá čísla, třeba délka nebo počet bloků, patří do samostatné řady, ne do odstavce.

Tagy a metadata mají stejné omezení: každý musí říct něco konkrétního, třeba formu, délku nebo certifikát, a nesmí být jen ozdoba.

Karty jen pro samostatné objekty

Karta je v systému jen pro věc, která je samostatný objekt, třeba variantu kurzu, cenový plán, lektora, referenci nebo cestu, mezi kterými si člověk vybírá. Nehodí se pro každý benefit, odstavec, položku osnovy nebo údaj. Nejdřív se ptám, jestli stejnou věc nevyřeší typografie, volný prostor, dělicí linka, seznam, accordion nebo časová osa.

Seznam toho, čemu se vyhýbám, je stejně důležitý jako to, co dělám: stěna karet, karta uvnitř karty, box kolem každé informace, všechno vystředěné, ikony bez informační funkce a dashboard estetika. Odstrašující příklad je pořád dokola opakovaný vzorec nadpis, odstavec, tři karty. Detail kurzu má působit jako editorialový vzdělávací zážitek, ne jako sbírka komponent naplněná textem.

S barvou je to podobné. V informačním režimu je přibližně 80 procent neutrálního základu, 15 procent sekundárních ploch a 5 procent akcentu. Akcent označuje aktivní stav, výběr nebo důležitou akci, ne každý prvek. Velká barevná plocha musí mít důvod. Měkký přechod, kterým se karty odlišují od původních ohraničených, je podpis vybraných komponent, ne výchozí vzhled každé krabice.

Infografika začíná vztahem, ne komponentou

Infografika není několik karet vedle sebe. Pokud stejnou informaci vyjádří pět boxů stejně dobře, ještě to není infografika. Smyslem je ukázat vztah, který by v seznamu nebyl vidět. Proto je pořadí návrhu pevné: informační vztah, vizuální struktura, základní prvky a až nakonec styling. Nezačínám komponentou, ale otázkou, o jaký vztah jde, jestli o posloupnost, závislost na čase, růst, propojení, rozhodování nebo kvantifikovaný důkaz.

Typy vztahů jsem pojmenoval jako archetypy: cesta, časová osa, postup, vztah, porovnání a metriky. Archetyp je typ vztahu, ne komponenta. Existující řešení, třeba velká čísla na stránce kurzu nebo výběr cesty studia, jsou jen jednou z možných realizací, ne šablona pro každou další. Podobně kruh není výchozí značka kroku: stačí zápis 01, název a popis, a kruh se použije až tam, kde musí oddělit číslo od hustého okolí nebo leží na skutečné ose.

Díky tomuto pořadí se každá další infografika nestane jen další variantou stejné časové osy. Čísla, linky, body, popisky a prázdný prostor jsou stavebnice, ne seznam k využití. Použije se jen to, co daný vztah vysvětlí, a použít všechno najednou je chyba.

Na mobilu se vodorovná struktura nepřeskládá mechanicky pod sebe. Pořadí a vztah musí zůstat zachované a spojnice se přeorientuje, nezmizí. Infografiku proto kontroluji na desktopu, tabletu i telefonu, ne jen podle toho, jestli se vejde do šířky.

Obraz jako důkaz

U informačních stránek má fotografie jednu otázku, kterou musí zodpovědět: co tento obraz dokládá. Když mluvím o studiu, ukazuji skutečné studio. Když představuji lektora, ukazuji ho při práci. Když popisuji výuku, ukazuji skutečný proces. Fotografie přidaná jen proto, že je sekce vizuálně prázdná, nepatří na stránku.

U prezentačních stránek je pravidlo volnější. Fotografie tam nemusí vždy dokazovat fakt, někdy má ukázat, jaký svět MamaTattoo vytváří. Společné pravidlo je ale stejné: obraz je důkaz nebo záměr, nikdy dekorace.

Sémantika odděleně od vizuálu

V systému se úroveň nadpisu v dokumentu a jeho velikost na obrazovce rozhodují zvlášť. Na informačních stránkách je hlavní nadpis sémanticky stále h1, ale vizuálně má strop na velikosti Heading 3. Velká display typografie je vyhrazená pro úvod a prezentační momenty. Nadpisy 2 až 4 jsou univerzální a fungují v obou režimech.

Ve Frameru na to navíc číhá past: nastavení textového stylu přepíše sémantický tag bloku na výchozí tag toho stylu. Po každé změně stylu proto kontroluji, jestli mají nadpisy pořád správnou úroveň, jinak se hierarchie nenápadně rozbije, i když stránka vypadá správně.

Typografická hierarchie se škáluje podle režimu. Heading 1 je vyhrazený pro velký úvod na tmavém pozadí, kde je bílý a velký, a na informačních stránkách se vizuálně velký nepoužívá. Nadpisy sekcí používají Heading 2 a nadpisy uvnitř bloků nižší úrovně. Všechny styly mají těsné písmo (záporný letter-spacing), které je podpisem značky, ne nastavením konkrétní stránky.

Systém psaný pro stavění s AI

Dokumentace není jen popis hotového stavu. Obsahuje i pravidla, podle kterých se rozhoduje, takže se podle ní dá stavět, i s AI. První pravidlo je pořadí zdrojů pravdy: existující homepage, vizuální průvodce, existující komponenty, zadání konkrétní stránky a až nakonec vlastní interpretace. Když se zdroje neshodují, vyhrává ten výš.

Druhé pravidlo je vyznačená jistota. Rozhodnutí mají stav: potvrzeno, navrženo a čeká na ověření, nebo otevřeno. U analýzy webu se to samé dělí na ověřené, odvozené a nedefinované. Kdo podle dokumentu staví, vidí, na čem může stavět a co je zatím jen předpoklad. Třetí je rámec pro každou sekci. Před návrhem určím komunikační cíl, primární roli, dominantní prvek, intenzitu, okolí a existující vzor. Nový vzor vznikne, až když současné komponenty opravdu nestačí.

Díky tomu je proces opakovatelný. Nejdřív pochopit účel stránky a existující komponenty, potom ji zařadit do prezentačního, informačního nebo hybridního režimu, napsat krátký příběh uživatele, přiřadit sekcím intenzitu, vybrat existující vzory, postavit, ověřit na všech třech šířkách a nakonec zkontrolovat. Kontrolní otázky jsou prosté: je na první pohled jasné, že jde o MamaTattoo, je pořád cítit svět tetování, ví člověk, co má udělat dál, a je důvěra vidět, nebo ji jen tvrdíme v textu?

Rozhodnutí zapisuji do deníku s klasifikací, takže je vidět, co je globální a co patří jen jednomu režimu. Podle dokumentu se tak nestaví od nuly a neopakují se zamítnuté cesty.

Systém mi nejvíc ukázal, že rozhodování o tom, kde se má dít něco silného a kde něco klidného, je stejná práce jako volba komponent. Pravidla, která jsem zapsal, nemají za úkol omezovat, ale vysvětlit, proč je sekce taková, jaká je, tak, aby se rozhodnutí dalo zopakovat na další stránce.

Od návrhu po spuštění

Web jsem nenavrhoval jen jako sadu obrazovek. Celou dodávku jsem měl na starosti já: od product discovery přes návrh a stavbu ve Frameru až po spuštění, nastavení a předání klientce. Rozhodnutí z návrhu se tak dostala do hotového webu bez překládání mezi několika lidmi.

Přesun ze starého webu

Obsah a stránky ze starého webu jsem převedl na nový ve Frameru. Nový web má úplně jinou architekturu a strukturu než starý.

Adresy a indexace

Měl jsem na starosti adresy a jejich indexaci. Nový web má jinou strukturu, takže spousta dříve zaindexovaných odkazů přestala fungovat a velká část stránek se musela indexovat znovu. Dělal jsem to přes Search Console: Googlu jsem řekl, aby staré odkazy už nedoporučoval a doporučoval nové. Web má také mapu stránek a soubor robots.txt, který indexaci povoluje.

Analytika

Napojil jsem měření návštěvnosti (Google Analytics) a analýzu chování uživatelů (Microsoft Clarity) a nastavil souhlas s cookies. Klientka tak vidí, co lidé na webu dělají.

Doména, e-maily, formuláře a rychlost

Nastavil jsem doménu a DNS, e-maily a formuláře (kontakt a přihlášky ke kurzům). Průběžně jsem hlídal rychlost webu.

Automatizace v Make a platba přes Stripe

Pro nákup kurzu jsem postavil automatizaci v Make. Jakmile zájemce zaškrtne souhlas s podmínkami, odemkne se tlačítko, do Google Sheetu se zapíše záznam, že souhlas opravdu proběhl, a otevře se platba přes Stripe. Souhlas s podmínkami je tak doložitelný a platba navazuje bez ručního kroku. Do záznamu se ukládá výslovný souhlas se zpřístupněním digitálního obsahu: „Výslovně souhlasím se zpřístupněním digitálního obsahu před uplynutím 14denní lhůty pro odstoupení od smlouvy a jsem si vědomý, že jeho zpřístupněním ztrácím právo od smlouvy odstoupit.“

Předání a zaškolení

Pro klientku jsem připravil tutoriály, jak pracovat ve Frameru a jak používat analytické nástroje (Google Analytics a Clarity). Díky tomu může web sama upravovat a číst z dat.

Výsledky

[Doplnit po spuštění: co se změnilo a jak jsme to změřili, například počet poptávek, doba odpovědi nebo dokončené rezervace před a po. Zatím žádné naměřené výsledky nemám.]

[OBRÁZEK 17, až budou data: graf nebo tabulka před a po, například počet poptávek, doba odpovědi a dokončené rezervace.]

Z mého výzkumu

←→

Psychologie klienta

Dobrovolná proměna vzhledu: teze, na které tenhle výzkum stojí

Tetování, piercing, permanentní make-up i estetická medicína podle mě řeší jednu a tu samou situaci, jen jinými nástroji.

4 min čtení

Psychologie klienta

Nevratnost jako paradox: proč reverzibilní rozhodnutí bolí víc

Klasický psychologický experiment ukázal něco, co jde proti intuici: možnost změnit rozhodnutí vede k větší lítosti, ne menší.

3 min čtení

Psychologie klienta

Proč u nevratných rozhodnutí přidávat tření, ne ho odstraňovat

Standardní UX rada zní: snižuj friction, ať zákazník rychleji koupí. U nevratných tělesných rozhodnutí to může být špatná rada.

3 min čtení

Trh a zákazníci

Proč se klient nevrací: není to důvod, který byste čekali

Přímý důkaz u tetovacích klientů neexistuje. V kadeřnictví a zubařství ale existuje, a mechanismus je stejný: klient se neozve, když nemá proč.

3 min čtení

Metoda

Jak poznat, že web odpovídá na špatné otázky

Audit, co jde udělat na jakémkoliv existujícím webu za dvacet minut: najde sekce, co neodpovídají na nic, a otázky, na které web vůbec neodpovídá.

3 min čtení

Trh a zákazníci

Co jsem zjistil o velikosti CZ/SK trhu (a jak moc tomu věřit)

Zkoušel jsem zjistit, kolik tetovacích studií, piercing salonů a klinik v ČR a SK vlastně existuje. Krátká odpověď: přesně to neví nikdo.

9 min čtení

Co z toho beru

Projekt změnil, kde začínám. Neptám se, jak bude stránka vypadat, ale co člověk potřebuje pochopit, aby mohl udělat další krok. AI navíc dává lepší výsledky, když je struktura dobře definovaná: po dokončení rekvalifikace stačil detailní prompt, aby převedla stejnou strukturu na online kurz.

Rozhodování se u tetování, piercingu i kosmetických zákroků opírá o podobnou trojici: důvěru v konkrétního člověka, sterilitu a bezpečí, nevratnost rozhodnutí. Tenhle poznatek dnes rozvíjím jako vlastní specializaci, viz výchozí tezi mého výzkumu.

Zdroje

Těhník, L. (2026a). Co chybí českým a slovenským tetovacím webům: audit 95 studií. Body Modification Research.

Těhník, L. (2026b). Dobrovolná proměna vzhledu: teze, na které tenhle výzkum stojí. Body Modification Research.

Těhník, L. (2026c). UX Question Framework: nenavrhujte sekce, navrhujte odpovědi. Body Modification Research.