RM design: web truhlářského ateliéru postavený na jedné ose
RM design — Miloš Ružičic
RM design je truhlářský ateliér z Trnavy, který dělá nábytek na míru celým cyklem — od zaměření a návrhu po výrobu a montáž — a pracuje i s architekty. Projekt začal téměř bez podkladů: nebyla potvrzená značka, nebyla doména a neexistovala jediná fotografie hotové práce. Zadání klienta znělo v podstatě jednou větou: „jednoduché, a zároveň elegantné, čiary by mali byť symetrické medzi sebou“. Z té věty jsme udělali signaturní motiv celého webu — svislou středovou osu a zrcadlovou symetrii kolem ní, tak jako na truhlářském výkresu a jako spára mezi dvířky skříně. Web má tři jazyky (slovenštinu, angličtinu a srbštinu v latince), archiv šesti realizací rozdělený do šesti kategorií a běží jako statický export na klientově vlastním hostingu, ne na serveru s Node.js. Projekt trval 14 dní práce, prošel dvanácti vlnami klientských připomínek z hovorů a WhatsAppu a stál €900.
Trojjazyčný prezentační web + archiv realizací
Typ projektu
Poptávky na nábytek na míru a spolupráce s architekty
Hlavní cíl
€900
Cena tohoto projektu
Vybrané obrazovky a vizuály
Vizuální náhled projektu ukazuje, jak vypadá web na různých zařízeních. Responzivní design zajišťuje perfektní zobrazení na mobilech, tabletech a desktopech.
Hero: titulek „Nábytok vyrobený pre váš priestor.“ rozdělený svislou fotografickou spárou — signaturní motiv středové osy.
Netriviální úlohy projektu
Postavit sekce byla ta rychlejší část. Náročnější bylo všechno okolo: vytvořit vizuální jazyk značky, která ještě neexistovala, dostat moderní framework na hosting bez serveru a udržet každý záběr na webu v takové přesnosti, aby obstál před okem truhláře. Truhlář se měří spárou — a na tomto projektu to platilo doslova.
Celý brief se vešel do jedné věty o symetrii
Klient popsal svůj vkus přesně a stručně: „jednoduché, a zároveň elegantné, čiary by mali byť symetrické medzi sebou“. K tomu olivovou barvu a volný kontrastní tón. V této nice má šest ze sedmi konkurentů tentýž hero a tentýž katalog kuchyní — bez vlastního vizuálního tahu by z toho vyšel sedmý.
Z té věty jsme udělali signaturní motiv: svislou středovou osu a zrcadlovou symetrii kolem ní — tak, jak je vedena osa na truhlářském výkresu a jak se potkávají dvířka skříně. Motiv žije přesně v šesti bodech: rozdělený titulek hera, otvírání každé fotografie clip-pathem od středu ven, logo uprostřed navigace s položkami zrcadlově po stranách, svislá osa procesu, zrcadlové dvojice v archivu a tenká svislá čára v nadpisech sekcí. Šest bodů, ne každý prvek — přetížený motiv přestává být motivem. Kontrastní tón jsme vybrali z materiálu ateliéru: měď je barva kování a mosazných úchytek, takže dřevo neochlazuje.
Technologie a implementace
Motiv STŘEDOVÁ OSA v šesti bodech, axis-reveal přes clip-path, měď jako jediný akcent
Značka, doména i fotografie realizací ještě neexistovaly
Na začátku nebyl potvrzený název, doména, e-mail, telefon ani identifikační údaje — a nebyla ani jediná použitelná fotografie hotové práce. Bez těchto údajů se nedá napsat patička, zásady ochrany soukromí ani strukturovaná data. Vymyslet je nepřicházelo v úvahu: patička s nulami namísto IČO je nepravdivý údaj a na ostrém webu vypadá jako rozbitá stránka.
Projekt jsme rozdělili na dvě vrstvy: strukturu a design, které se daly postavit hned, a fakta, která čekala na potvrzení a byla po celou dobu vedena v registru placeholderů. Dokud údaj chyběl, příslušný řádek se jednoduše nevykresloval — nikdy se nenahrazoval výplní. Web tak mohl běžet a růst pod pracovní značkou, a když klient potvrdil svou (RM design / RM Custom Design), vyměnil se wordmark, doména i kontakty. Identifikační údaje jsme před nasazením ověřili ze dvou nezávislých zdrojů. Stejné pravidlo platilo pro obrázky: dokud fotografie neexistuje, kategorie nese vizualizaci s viditelnou značkou „koncept — vizualizácia“ nebo čestné „fotografie pripravujeme“.
Technologie a implementace
Registr placeholderů, podmíněné vykreslování, povinná značka konceptu
Serverový framework měl běžet na hostingu bez serveru
Klient má doménu na sdíleném Apache hostingu a neměl důvod ho měnit. Next.js tam nemůže běžet jako aplikace — a s ním padá všechno, co běžně řeší server: přesměrování, kanonická doména, hlavičky cache i obsluha chyb.
Projekt jsme přepnuli na statický export: build vytvoří složku, která je celý web, a ta se nahrává skriptem přes FTP. Serverové chování nahradil ručně psaný `.htaccess` s přesměrováními, kanonickou doménou a pravidly cache — včetně výjimky pro složku médií, která se smí přepisovat, a proto se musí i ověřovat. Větev `main` se zároveň nasazuje na Vercel přes GitLab CI/CD, takže náhled na kontrolu existuje nezávisle na ostrém webu. Klient tím nic neztratil: má moderní web na své doméně a bez nového předplatného.
Technologie a implementace
Statický export, .htaccess, FTP deploy skript, GitLab CI/CD, Vercel jako náhled
Každý záběr musel obstát před okem truhláře
Truhlář nehodnotí fotografii jako obrázek — dívá se na spáru, na zarovnání a na to, jestli kování na záběru existuje tak, jak existuje ve skutečnosti. Rozdíl mezi prací a fušeřinou je u svislé spáry asi dva pixely na šířce 1440. Web ateliéru, který prodává přesnost, si nemůže dovolit ani jeden záběr, na kterém to nesedí.
Zavedli jsme pravidlo, které platilo do konce projektu: když je předlohou skutečná realizace, jeho fotografie je měření, ne inspirace. Detail se opravuje lokální retuší, celek se nepřekresluje — a šířky spár jsme kontrolovali přímo na screenshotech v cílovém měřítku. Stejná přesnost platí pro vzorky materiálů: desku kování jsme nakonec postavili jako pohled do rohu otevřené dubové skříňky s dvířky na sto stupňů a s celým pantem Blum CLIP top BLUMOTION, generovaným podle katalogových fotografií Blum. Skrytý pant je totiž definovaný tím, že z čela ho vidět není — a přesně tak ho vzorka ukazuje.
Technologie a implementace
Lokální retuš namísto regenerace, měření spár na screenshotech, katalogová reference Blum
Rozhodování o dekoru nesmělo stát rychlost webu
Hero je trojaktová scéna, ve které mezi zavřeným a otevřeným záběrem skříně scrubuje sekvence 48 snímků. Klient se rozhodoval mezi dvěma dekory bočních dveří a chtěl oba vidět naživo na webu — „skúste aj tak, aj tak, uvidím“. Dokud byla volba otevřená, scéna musela nést obě sady snímků, tedy přibližně 5,6 MB na prvním obraze.
Variantu jsme udělali jako typovaný přepínač, takže si klient mohl obě verze prohlížet přímo na svém webu namísto statických náhledů ve zprávě. Když se rozhodl pro olivovou, variantu jsme z kódu odstranili — rozhodnutá volba přestává být volbou. Hero od té doby stahuje jednu sekvenci namísto dvou, tedy asi 2,8 MB, a spolu s variantou zanikla i větev priorit načítání. Média odmítnutého dekoru na disku záměrně zůstala: statický export je nikoho nestojí ani bajt přenosu a klient se k nim může kdykoli vrátit.
Technologie a implementace
Typový union variant, sekvence snímků, −50 % dat na prvním obraze
Srbština bez podznačky písma je pro vyhledávače nejednoznačná
Srbský obsah webu je psaný latinkou — tak se klient rozhodl na hovoru 15. srpna. Samotný kód „sr“ však nechává jazyk čtečkám i vyhledávačům nejednoznačný: většina jazykových dat ho standardně považuje za cyrilici, takže by se web srbskému návštěvníkovi mohl nabízet špatně.
Rozlišili jsme dvě věci, které se často zaměňují: segment adresy zůstává krátký `sr`, protože je v odkazech a slugách, ale značka jazyka v `<html lang>` a v hreflangu je `sr-Latn`. Stihli jsme to ještě před indexací webu, tedy na poslední chvíli, kdy se hreflang dal změnit bez ztráty v SEO. Reciproční hreflang včetně x-default jsme zároveň přesunuli do jednoho společného pomocníka, takže ho nemůže vynechat žádná podstránka a pravidlo platí stejně pro všechny tři jazyky.
Technologie a implementace
BCP-47 sr-Latn, reciproční hreflang, x-default, per-locale Open Graph
Podobné problémy ve vašem byznysu? Pomůžeme vám je vyřešit moderním tech stackem.
Výsledná struktura
Kompletní webová struktura navržená pro maximální konverzi a user experience. Každá stránka má jasný účel a optimalizovanou navigaci.
Nejdůležitější sekce webu
Každá sekce řešila konkrétní byznys problém a zvyšovala konverze
Hero, které se otevírá
Titulek „Nábytok vyrobený pre váš priestor.“ je rozdělený svislou fotografickou spárou přesně uprostřed. Při scrollování se spára rozevírá jako dvířka skříně, text se rozchází do stran a scéna končí širokým záběrem interiéru. Je to kulminace motivu: první pohyb na stránce je otevření nábytku.
Vitrína šesti kategorií
Kuchyně, obývací pokoje, ložnice, chodby a předsíně, atypická řešení a kompletní interiéry — v pořadí, které klient nadiktoval doslova. Pořadí a velikost dlaždice jsou záměrně rozvázané: prohození kategorie změní pořadí čtení, ale nezmění kompozici, takže „atypické riešenia“ si velký rám nesou s sebou, ať stojí kdekoli.
Archiv se šesti skutečnými projekty
Mezonet Bratislava Jarovce, Rodinný dům Slovenská Nová Ves, Dvoupokojový byt Millhaus, Třípokojový byt Palisády, Třípokojový byt Schurmannova Nitra a Rodinný dům Nitra s chodbou. Každý projekt nese seznam použitých materiálů a kování — dubová dýha, lakované fronty, skryté panty SIMONSWERK, kování Bonaini, výsuvy s tichým dovíráním. Vizualizace jsou od fotografií oddělené značkou.
Proces na jedné nepřerušené ose
Pět kroků „od návrhu po montáž“ je zavěšených na svislé měděné ose, která se překresluje podle pozice scrollu. Není to dekorace: osa je vizuální argument, že celý cyklus drží jeden tým a kroky na sebe navazují bez spár.
Materiály jako skutečné vzorky
Deskové materiály, dýhy, umělý kámen a kování jsou ukázané jako makrozáběry vzorků, ne jako ikony. Sekce jmenuje značky, které klient skutečně používá — Corian, Rehau, HI-MACS a panty Blum — a popis kování se změnil na „Blum pánty“ přesně podle jeho slov.
Kontakt a identifikační údaje
Kontakt stojí na obrovském e-mailu info@rmcustomdesign.sk a telefonu +421 951 262 496, v patičce jsou identifikační údaje podnikatele a odkaz na Instagram ateliéru. Řádek IČ DPH tam záměrně není — klient není plátcem DPH a vypisovat prázdné pole by bylo horší než ho neuvést.
Použitý stack
Frontend a designový systém
App Router a serverové komponenty, vlastní designový systém s nulovým radiusem a bez stínů. Fraunces nese nadpisy, Hanken Grotesk běžný text; měď je jediný akcent a nikdy nepřesahuje pár procent plochy obrazovky.
Tři jazyky bez CMS
Slovenština, angličtina a srbština v latince. Struktura webu — slugy, cesty k fotografiím, pořadí položek — žije odděleně od textů, takže překlad fyzicky nemůže přepsat cestu k obrázku ani adresu stránky. Srbština má hreflang `sr-Latn`, ne holé `sr`: bez podznačky písma by ji čtečky i Google standardně považovaly za cyrilici.
Hero jako filmová sekvence
První obrazovka je trojaktová sticky scéna: titulek rozdělený svislou spárou, která se při scrollování rozevírá jako dvířka skříně. Mezi zavřeným a otevřeným záběrem scrubuje sekvence 48 snímků. Když se klient rozhodl pro jediný dekorový variant, hero přestalo stahovat dvě sekvence namísto jedné — z přibližně 5,6 MB na prvním obraze se stalo 2,8 MB.
Nasazení, SEO a soulad
Ostrý web běží na sdíleném Apache hostingu klienta, kam se obsah exportu nahrává skriptem přes FTP; větev `main` se paralelně nasazuje na Vercel přes GitLab CI/CD jako náhled na kontrolu. Vyhledávače a AI asistenti dostávají robots.txt, sitemap, JSON-LD, llms.txt i llms-full.txt. Souhlas s cookies řeší self-hostovaný Silktide, identifikační údaje podnikatele jsou v patičce i v zásadách.
Frontend a designový systém
App Router a serverové komponenty, vlastní designový systém s nulovým radiusem a bez stínů. Fraunces nese nadpisy, Hanken Grotesk běžný text; měď je jediný akcent a nikdy nepřesahuje pár procent plochy obrazovky.
Tři jazyky bez CMS
Slovenština, angličtina a srbština v latince. Struktura webu — slugy, cesty k fotografiím, pořadí položek — žije odděleně od textů, takže překlad fyzicky nemůže přepsat cestu k obrázku ani adresu stránky. Srbština má hreflang `sr-Latn`, ne holé `sr`: bez podznačky písma by ji čtečky i Google standardně považovaly za cyrilici.
Hero jako filmová sekvence
První obrazovka je trojaktová sticky scéna: titulek rozdělený svislou spárou, která se při scrollování rozevírá jako dvířka skříně. Mezi zavřeným a otevřeným záběrem scrubuje sekvence 48 snímků. Když se klient rozhodl pro jediný dekorový variant, hero přestalo stahovat dvě sekvence namísto jedné — z přibližně 5,6 MB na prvním obraze se stalo 2,8 MB.
Nasazení, SEO a soulad
Ostrý web běží na sdíleném Apache hostingu klienta, kam se obsah exportu nahrává skriptem přes FTP; větev `main` se paralelně nasazuje na Vercel přes GitLab CI/CD jako náhled na kontrolu. Vyhledávače a AI asistenti dostávají robots.txt, sitemap, JSON-LD, llms.txt i llms-full.txt. Souhlas s cookies řeší self-hostovaný Silktide, identifikační údaje podnikatele jsou v patičce i v zásadách.
💡 Moderní tech stack = rychlý web + jednoduchá údržba + dlouhodobá podpora
Průběh realizace
Projekt běžel od 10. do 28. srpna 2026 ve dvanácti očíslovaných vlnách. Každá vlna začínala hovorem nebo zprávou na WhatsApp a končila nasazenou změnou — připomínky se nesbíraly do jednoho velkého kola, řešily se ten den, kdy přišly.
10.–13. srpna
Koncept, designový systém a první kompoziční vlna
2 dnyZ klientovy věty o symetrii vznikl signaturní motiv středové osy a celý designový systém — barvy, dvě písmové rodiny, nulový radius, motion slovník. Postavili jsme koncept webu pod pracovní značkou „Ateliér M“, doplnili kompoziční vlnu „os ako konštrukcia“ a registr realizací, a rovnou nastavili nasazení přes GitLab CI/CD.
15.–19. srpna
Tři jazyky, barevné schémy a revizní vlna
3 dnyWeb se rozdělil na strukturu a slovníky a dostal třetí jazyk — srbštinu v latince. Klient poslal přesné hodnoty dvou vlastních barevných schémat, takže na stránce běžel dočasný přepínač schémat A až G. Vlastní revizní vlna prošla přístupnost, sazbu i kontrast mědi na všech šířkách; nálezy jsme zapracovali týž den spolu s mobilním reportem.
22.–23. srpna
Příprava na předání a nasazení na hosting
2 dnyWeb dostal SEO a GEO/AEO vrstvu, cookies, statický export a skript na nasazení přes FTP. Identifikační údaje podnikatele byly potvrzené a doplněné do patičky i do zásad. První nasazení na Exohosting jsme doladili na míru sdílenému hostingu ještě týž den a rovnou ověřili vlastnictví domény v Search Console.
23.–26. srpna
Vlny 8 až 10 — hero, sekce a výměna dlaždic
3 dnyHero se několikrát překreslilo, dokud se křídla neotvírala dovnitř do pokoje přesně tak, jak si klient představoval. Sekce přišly o číslování, vitrína dostala název Kategórie a do materiálů se nasadila retušovaná fotografie pantu Blum. Ve vlně 10 z hovoru 26. srpna vypadla dlaždice obývacího pokoje, protože ukazovala stěnu podél, ne obývák — a město Bratislava zmizelo z oblasti působení včetně strukturovaných dat.
27.–28. srpna
Vlny 11 a 12 — poslední připomínky a předání
4 dnyKlient procházel web na notebooku a komentoval, co vidí. Rozhodl o olivových bočních dveřích, čímž se zavřela volba variant, vyžádal si pouze panty Blum a u mezonetu jsme se vrátili k jeho vlastní fotografii, která má užší spáry než jakýkoli překreslený záběr. Všechny čtyři připomínky poslední vlny se vyřešily týž den; jediné, co zůstalo otevřené, byl jeho vlastní slib dodat fotografie dílny. Projekt byl předán 28. srpna.
FAQ k projektu
Děláte nábytek na míru nebo interiéry?
Postavíme web, který vypadá jako vaše práce a ne jako katalog konkurence — s jedním signaturním motivem, archivem realizací a v tolika jazycích, kolik potřebujete. A nasadíme ho tam, kde už máte doménu, i kdyby to byl obyčejný hosting.
Nechte nám kontakt (stačí e-mail nebo telefon)
✨ Vlastní signaturní motiv • Tři jazyky • Nasazení na váš hosting