RM design: web stolárskeho ateliéru postavený na jednej osi
RM design — Miloš Ružičic
RM design je stolársky ateliér z Trnavy, ktorý robí nábytok na mieru celým cyklom — od zamerania a návrhu po výrobu a montáž — a pracuje aj s architektmi. Projekt sa začal takmer bez podkladov: nebola potvrdená značka, nebola doména a neexistovala jediná fotografia hotovej práce. Zadanie klienta znelo v podstate jednou vetou: „jednoduché, a zároveň elegantné, čiary by mali byť symetrické medzi sebou“. Z tej vety sme urobili signatúrny motív celého webu — zvislú stredovú os a zrkadlovú symetriu okolo nej, tak ako na stolárskom výkrese a ako škára medzi dvierkami skrine. Web má tri jazyky (slovenčinu, angličtinu a srbčinu v latinke), archív šiestich realizácií rozdelený do šiestich kategórií a beží ako statický export na klientovom vlastnom hostingu, nie na serveri s Node.js. Projekt trval 14 dní práce, prešiel dvanástimi vlnami klientskych pripomienok z hovorov a WhatsAppu a stál €900.
Trojjazyčný prezentačný web + archív realizácií
Typ projektu
Dopyty na nábytok na mieru a spolupráca s architektmi
Hlavný cieľ
€900
Cena tohto projektu
Vybrané obrazovky a vizuály
Vizuálny náhľad projektu ukazuje, ako vyzerá web na rôznych zariadeniach. Responzívny dizajn zabezpečuje perfektné zobrazenie na mobiloch, tabletoch a desktopoch.
Hero: titulok „Nábytok vyrobený pre váš priestor.“ rozdelený zvislou fotografickou škárou — signatúrny motív stredovej osi.
Netriviálne úlohy projektu
Postaviť sekcie bola tá rýchlejšia časť. Náročnejšie bolo všetko okolo: vytvoriť vizuálny jazyk značky, ktorá ešte neexistovala, dostať moderný framework na hosting bez servera a udržať každý záber na webe v takej presnosti, aby obstál pred okom stolára. Stolár sa meria škárou — a na tomto projekte to platilo doslova.
Celý brief sa zmestil do jednej vety o symetrii
Klient opísal svoj vkus presne a stručne: „jednoduché, a zároveň elegantné, čiary by mali byť symetrické medzi sebou“. K tomu olivovú farbu a voľný kontrastný tón. V tejto nike má šesť zo siedmich konkurentov ten istý hero a ten istý katalóg kuchýň — bez vlastného vizuálneho ťahu by z toho vyšiel siedmy.
Z tej vety sme urobili signatúrny motív: zvislú stredovú os a zrkadlovú symetriu okolo nej — tak, ako je vedená os na stolárskom výkrese a ako sa stretávajú dvierka skrine. Motív žije presne v šiestich bodoch: rozdelený titulok hera, otváranie každej fotografie clip-pathom od stredu von, logo v strede navigácie s položkami zrkadlovo po bokoch, zvislá os procesu, zrkadlové dvojice v archíve a tenká zvislá čiara v nadpisoch sekcií. Šesť bodov, nie každý prvok — preťažený motív prestáva byť motívom. Kontrastný tón sme vybrali z materiálu ateliéru: meď je farba kovania a mosadzných úchytiek, takže drevo neochladzuje.
Technológie a implementácia
Motív STREDOVÁ OS v šiestich bodoch, axis-reveal cez clip-path, meď ako jediný akcent
Značka, doména aj fotografie realizácií ešte neexistovali
Na začiatku nebol potvrdený názov, doména, e-mail, telefón ani identifikačné údaje — a nebola ani jediná použiteľná fotografia hotovej práce. Bez týchto údajov sa nedá napísať pätička, zásady ochrany súkromia ani štruktúrované dáta. Vymyslieť ich neprichádzalo do úvahy: pätička s nulami namiesto IČO je nepravdivý údaj a na ostrom webe vyzerá ako rozbitá stránka.
Projekt sme rozdelili na dve vrstvy: štruktúru a dizajn, ktoré sa dali postaviť hneď, a fakty, ktoré čakali na potvrdenie a boli po celý čas vedené v registri placeholderov. Kým údaj chýbal, príslušný riadok sa jednoducho nevykresľoval — nikdy sa nenahrádzal výplňou. Web tak mohol bežať a rásť pod pracovnou značkou, a keď klient potvrdil svoju (RM design / RM Custom Design), vymenil sa wordmark, doména aj kontakty. Identifikačné údaje sme pred nasadením overili z dvoch nezávislých zdrojov. Rovnaké pravidlo platilo pre obrázky: kým fotografia neexistuje, kategória nesie vizualizáciu s viditeľnou značkou „koncept — vizualizácia“ alebo čestné „fotografie pripravujeme“.
Technológie a implementácia
Register placeholderov, podmienené vykresľovanie, povinná značka konceptu
Serverový framework mal bežať na hostingu bez servera
Klient má doménu na zdieľanom Apache hostingu a nemal dôvod ho meniť. Next.js tam nemôže bežať ako aplikácia — a s ním padá všetko, čo bežne rieši server: presmerovania, kanonická doména, hlavičky cache aj obsluha chýb.
Projekt sme prepli na statický export: build vytvorí priečinok, ktorý je celý web, a ten sa nahráva skriptom cez FTP. Serverové správanie nahradil ručne písaný `.htaccess` s presmerovaniami, kanonickou doménou a pravidlami cache — vrátane výnimky pre priečinok médií, ktorý sa smie prepisovať, a preto sa musí aj overovať. Vetva `main` sa zároveň nasadzuje na Vercel cez GitLab CI/CD, takže náhľad na kontrolu existuje nezávisle od ostrého webu. Klient tým nič nestratil: má moderný web na svojej doméne a bez nového predplatného.
Technológie a implementácia
Statický export, .htaccess, FTP deploy skript, GitLab CI/CD, Vercel ako náhľad
Každý záber musel obstáť pred okom stolára
Stolár nehodnotí fotografiu ako obrázok — pozerá sa na škáru, na zarovnanie a na to, či kovanie na zábere existuje tak, ako existuje v skutočnosti. Rozdiel medzi prácou a fušerinou je pri zvislej škáre asi dva pixely na šírke 1440. Web ateliéru, ktorý predáva presnosť, si nemôže dovoliť ani jeden záber, na ktorom to nesedí.
Zaviedli sme pravidlo, ktoré platilo do konca projektu: keď je predlohou skutočná realizácia, jeho fotografia je meranie, nie inšpirácia. Detail sa opravuje lokálnou retušou, celok sa neprekresľuje — a šírky škár sme kontrolovali priamo na skrínšotoch v cieľovej mierke. Rovnaká presnosť platí pre vzorky materiálov: dosku kovania sme nakoniec postavili ako pohľad do rohu otvorenej dubovej skrinky s dvierkami na sto stupňov a s celým pántom Blum CLIP top BLUMOTION, generovaným podľa katalógových fotografií Blum. Skrytý pánt je totiž definovaný tým, že z čela ho vidieť nie je — a presne tak ho vzorka ukazuje.
Technológie a implementácia
Lokálna retuš namiesto regenerácie, meranie škár na skrínšotoch, katalógová referencia Blum
Rozhodovanie o dekore nesmelo stáť rýchlosť webu
Hero je trojaktová scéna, v ktorej medzi zatvoreným a otvoreným záberom skrine scrubuje sekvencia 48 snímok. Klient sa rozhodoval medzi dvoma dekormi bočných dvier a chcel oba vidieť naživo na webe — „skúste aj tak, aj tak, uvidím“. Kým voľba bola otvorená, scéna musela niesť obe sady snímok, teda približne 5,6 MB na prvom obraze.
Variant sme spravili ako typovaný prepínač, takže si klient mohol obe verzie prezerať priamo na svojom webe namiesto statických náhľadov v správe. Keď sa rozhodol pre olivovú, variant sme z kódu odstránili — rozhodnutá voľba prestáva byť voľbou. Hero odvtedy sťahuje jednu sekvenciu namiesto dvoch, teda asi 2,8 MB, a spolu s variantom zanikla aj vetva priorít načítania. Médiá odmietnutého dekoru na disku zámerne ostali: statický export ich nikoho nestojí ani bajt prenosu a klient sa k nim môže kedykoľvek vrátiť.
Technológie a implementácia
Typový union variantov, sekvencie snímok, −50 % dát na prvom obraze
Srbčina bez podznačky písma je pre vyhľadávače nejednoznačná
Srbský obsah webu je písaný latinkou — tak sa klient rozhodol na hovore 15. augusta. Samotný kód „sr“ však necháva jazyk čítačkám aj vyhľadávačom nejednoznačný: väčšina jazykových dát ho predvolene považuje za cyriliku, takže by sa web srbskému návštevníkovi mohol ponúkať zle.
Rozlíšili sme dve veci, ktoré sa často zamieňajú: segment adresy ostáva krátky `sr`, pretože je v odkazoch a slugoch, ale značka jazyka v `<html lang>` a v hreflangu je `sr-Latn`. Stihli sme to ešte pred indexáciou webu, teda v poslednej chvíli, keď sa hreflang dal zmeniť bez straty v SEO. Recipročný hreflang vrátane x-default sme zároveň presunuli do jedného spoločného pomocníka, takže ho nemôže vynechať žiadna podstránka a pravidlo platí rovnako pre všetky tri jazyky.
Technológie a implementácia
BCP-47 sr-Latn, recipročný hreflang, x-default, per-locale Open Graph
Podobné problémy vo vašom biznise? Pomôžeme vám ich vyriešiť moderným tech stackom.
Výsledná štruktúra
Kompletná webová štruktúra navrhnutá pre maximálnu konverziu a user experience. Každá stránka má jasný účel a optimalizovanú navigáciu.
Najdôležitejšie sekcie webu
Každá sekcia riešila konkrétny biznis problém a zvyšovala konverzie
Hero, ktoré sa otvára
Titulok „Nábytok vyrobený pre váš priestor.“ je rozdelený zvislou fotografickou škárou presne v strede. Pri scrollovaní sa škára roztvára ako dvierka skrine, text sa rozchádza do strán a scéna končí širokým záberom interiéru. Je to kulminácia motívu: prvý pohyb na stránke je otvorenie nábytku.
Vitrína šiestich kategórií
Kuchyne, obývacie izby, spálne, chodby a predsiene, atypické riešenia a kompletné interiéry — v poradí, ktoré klient nadiktoval doslova. Poradie a veľkosť dlaždice sú zámerne rozviazané: prehodenie kategórie zmení poradie čítania, ale nezmení kompozíciu, takže „atypické riešenia“ si veľký rám nesú so sebou, nech stoja kdekoľvek.
Archív so šiestimi skutočnými projektmi
Mezonet Bratislava Jarovce, Rodinný dom Slovenská Nová Ves, Dvojizbový byt Millhaus, Trojizbový byt Palisády, Trojizbový byt Schurmannova Nitra a Rodinný dom Nitra s chodbou. Každý projekt nesie zoznam použitých materiálov a kovania — dubová dyha, lakované fronty, skryté pánty SIMONSWERK, kovanie Bonaini, výsuvy s tichým dovieraním. Vizualizácie sú od fotografií oddelené značkou.
Proces na jednej neprerušenej osi
Päť krokov „od návrhu po montáž“ je zavesených na zvislej medenej osi, ktorá sa prekresľuje podľa pozície scrollu. Nie je to dekorácia: os je vizuálny argument, že celý cyklus drží jeden tím a kroky na seba nadväzujú bez škár.
Materiály ako skutočné vzorky
Doskové materiály, dyhy, umelý kameň a kovanie sú ukázané ako makrozábery vzoriek, nie ako ikony. Sekcia menuje značky, ktoré klient skutočne používa — Corian, Rehau, HI-MACS a pánty Blum — a popis kovania sa zmenil na „Blum pánty“ presne podľa jeho slov.
Kontakt a identifikačné údaje
Kontakt stojí na obrovskom e-maile info@rmcustomdesign.sk a telefóne +421 951 262 496, v pätičke sú identifikačné údaje podnikateľa a odkaz na Instagram ateliéru. Riadok IČ DPH tam zámerne nie je — klient nie je platiteľom DPH a vypisovať prázdne pole by bolo horšie než ho neuviesť.
Použitý stack
Frontend a dizajnový systém
App Router a serverové komponenty, vlastný dizajnový systém s nulovým radiusom a bez tieňov. Fraunces nesie nadpisy, Hanken Grotesk bežný text; meď je jediný akcent a nikdy nepresahuje pár percent plochy obrazovky.
Tri jazyky bez CMS
Slovenčina, angličtina a srbčina v latinke. Štruktúra webu — slugy, cesty k fotografiám, poradie položiek — žije oddelene od textov, takže preklad fyzicky nemôže prepísať cestu k obrázku ani adresu stránky. Srbčina má hreflang `sr-Latn`, nie holé `sr`: bez podznačky písma by ju čítačky aj Google predvolene považovali za cyriliku.
Hero ako filmová sekvencia
Prvá obrazovka je trojaktová sticky scéna: titulok rozdelený zvislou škárou, ktorá sa pri scrollovaní roztvára ako dvierka skrine. Medzi zatvoreným a otvoreným záberom scrubuje sekvencia 48 snímok. Keď sa klient rozhodol pre jediný dekorový variant, hero prestalo sťahovať dve sekvencie namiesto jednej — z približne 5,6 MB na prvom obraze sa stalo 2,8 MB.
Nasadenie, SEO a súlad
Ostrý web beží na zdieľanom Apache hostingu klienta, kam sa obsah exportu nahráva skriptom cez FTP; vetva `main` sa paralelne nasadzuje na Vercel cez GitLab CI/CD ako náhľad na kontrolu. Vyhľadávače a AI asistenti dostávajú robots.txt, sitemap, JSON-LD, llms.txt aj llms-full.txt. Súhlas s cookies rieši self-hostovaný Silktide, identifikačné údaje podnikateľa sú v pätičke aj v zásadách.
Frontend a dizajnový systém
App Router a serverové komponenty, vlastný dizajnový systém s nulovým radiusom a bez tieňov. Fraunces nesie nadpisy, Hanken Grotesk bežný text; meď je jediný akcent a nikdy nepresahuje pár percent plochy obrazovky.
Tri jazyky bez CMS
Slovenčina, angličtina a srbčina v latinke. Štruktúra webu — slugy, cesty k fotografiám, poradie položiek — žije oddelene od textov, takže preklad fyzicky nemôže prepísať cestu k obrázku ani adresu stránky. Srbčina má hreflang `sr-Latn`, nie holé `sr`: bez podznačky písma by ju čítačky aj Google predvolene považovali za cyriliku.
Hero ako filmová sekvencia
Prvá obrazovka je trojaktová sticky scéna: titulok rozdelený zvislou škárou, ktorá sa pri scrollovaní roztvára ako dvierka skrine. Medzi zatvoreným a otvoreným záberom scrubuje sekvencia 48 snímok. Keď sa klient rozhodol pre jediný dekorový variant, hero prestalo sťahovať dve sekvencie namiesto jednej — z približne 5,6 MB na prvom obraze sa stalo 2,8 MB.
Nasadenie, SEO a súlad
Ostrý web beží na zdieľanom Apache hostingu klienta, kam sa obsah exportu nahráva skriptom cez FTP; vetva `main` sa paralelne nasadzuje na Vercel cez GitLab CI/CD ako náhľad na kontrolu. Vyhľadávače a AI asistenti dostávajú robots.txt, sitemap, JSON-LD, llms.txt aj llms-full.txt. Súhlas s cookies rieši self-hostovaný Silktide, identifikačné údaje podnikateľa sú v pätičke aj v zásadách.
💡 Moderný tech stack = rýchly web + jednoduchá údržba + dlhodobá podpora
Priebeh realizácie
Projekt bežal od 10. do 28. augusta 2026 v dvanástich očíslovaných vlnách. Každá vlna začínala hovorom alebo správou na WhatsApp a končila nasadenou zmenou — pripomienky sa nezbierali do jedného veľkého kola, riešili sa v ten deň, keď prišli.
10.–13. august
Koncept, dizajnový systém a prvá kompozičná vlna
2 dniZ klientovej vety o symetrii vznikol signatúrny motív stredovej osi a celý dizajnový systém — farby, dve garnitúry, nulový radius, motion slovník. Postavili sme koncept webu pod pracovnou značkou „Ateliér M“, doplnili kompozičnú vlnu „os ako konštrukcia“ a register realizácií, a rovno nastavili nasadenie cez GitLab CI/CD.
15.–19. august
Tri jazyky, farebné schémy a revízna vlna
3 dniWeb sa rozdelil na štruktúru a slovníky a dostal tretí jazyk — srbčinu v latinke. Klient poslal presné hodnoty dvoch vlastných farebných schém, takže na stránke bežal dočasný prepínač schém A až G. Vlastná revízna vlna prešla prístupnosť, sadzbu aj kontrast medi na všetkých šírkach; nálezy sme zapracovali v ten istý deň spolu s mobilným reportom.
22.–23. august
Príprava na odovzdanie a nasadenie na hosting
2 dniWeb dostal SEO a GEO/AEO vrstvu, cookies, statický export a skript na nasadenie cez FTP. Identifikačné údaje podnikateľa boli potvrdené a doplnené do pätičky aj do zásad. Prvé nasadenie na Exohosting sme doladili na mieru zdieľanému hostingu ešte v ten istý deň a rovno overili vlastníctvo domény v Search Console.
23.–26. august
Vlny 8 až 10 — hero, sekcie a výmena dlaždíc
3 dniHero sa niekoľkokrát prekreslilo, kým sa krídla neotvárali dnu do izby presne tak, ako si klient predstavoval. Sekcie prišli o číslovanie, vitrína dostala názov Kategórie a do materiálov sa nasadila retušovaná fotografia pántu Blum. Vo vlne 10 z hovoru 26. augusta vypadla dlaždica obývacej izby, pretože ukazovala stenu pozdĺž, nie obývačku — a mesto Bratislava zmizlo z oblasti pôsobenia vrátane štruktúrovaných dát.
27.–28. august
Vlny 11 a 12 — posledné pripomienky a odovzdanie
4 dniKlient prechádzal web na notebooku a komentoval, čo vidí. Rozhodol o olivových bočných dverách, čím sa zavrela voľba variantov, vypýtal si iba pánty Blum a pri mezonete sme sa vrátili k jeho vlastnej fotografii, ktorá má užšie škáry než akýkoľvek prekreslený záber. Všetky štyri pripomienky poslednej vlny sa vyriešili v ten deň; jediné, čo zostalo otvorené, bol jeho vlastný sľub dodať fotografie dielne. Projekt bol odovzdaný 28. augusta.
FAQ k projektu
Robíte nábytok na mieru alebo interiéry?
Postavíme web, ktorý vyzerá ako vaša práca a nie ako katalóg konkurencie — s jedným signatúrnym motívom, archívom realizácií a v toľkých jazykoch, koľko potrebujete. A nasadíme ho tam, kde už máte doménu, aj keby to bol obyčajný hosting.
Nechajte nám kontakt (stačí e-mail alebo telefón)
✨ Vlastný signatúrny motív • Tri jazyky • Nasadenie na váš hosting