RM design: a joinery atelier’s website built on a single axis

RM design — Miloš Ružičic

2026-08-28

RM design is a joinery atelier in Trnava that builds custom furniture across the whole cycle — measuring, design, production, installation — and works with architects. The project started with almost nothing: no confirmed brand, no domain, and not a single photograph of finished work. The client’s brief was essentially one sentence: “simple and elegant at the same time, the lines should be symmetrical to one another.” We turned that sentence into the signature motif of the whole site — a vertical centre axis and mirrored symmetry around it, the way a joinery drawing is set out and the way a cabinet’s doors meet. The site runs in three languages (Slovak, English, and Serbian in Latin script), carries an archive of six projects split across six categories, and ships as a static export to the client’s own hosting rather than a Node.js server. The project took 14 working days, went through twelve waves of client feedback from calls and WhatsApp, and cost €900.

Trilingual presentation website + project archive

Project type

Enquiries for custom furniture and work with architects

Main goal

€900

Project price

View live website

Selected screens and visuals

Visual project preview shows how the website looks on different devices. Responsive design ensures perfect display on mobiles, tablets and desktops.

The hero: the line “Nábytok vyrobený pre váš priestor.” split by a vertical photographic slit — the centre-axis signature motif.

The non-trivial parts of the project

Building the sections was the fast part. The demanding work sat around it: creating a visual language for a brand that did not exist yet, getting a modern framework onto hosting with no server, and holding every image on the site to a precision that survives a joiner’s eye. A joiner is measured by his joint gaps — and on this project that was literal.

Problem #1

The entire brief fit into one sentence about symmetry

The client described his taste precisely and briefly: “simple and elegant at the same time, the lines should be symmetrical to one another.” Plus the colour olive and an open contrast tone. In this niche six of seven competitors run the same hero and the same kitchen catalogue — without a visual idea of its own, this would have been the seventh.

Our solution

We turned that sentence into the signature motif: a vertical centre axis with mirrored symmetry around it — the way an axis is laid out on a joinery drawing and the way a cabinet’s doors meet. The motif lives at exactly six points: the split hero headline, every photograph opening by clip-path from the centre outward, the logo centred in the nav with items mirrored on either side, the vertical process axis, mirrored pairs in the archive, and a thin vertical rule in section headings. Six points, not every element — an overloaded motif stops being a motif. The contrast tone came from the atelier’s own material: copper is the colour of hardware and brass handles, so it does not chill the wood.

Technologies and implementation

The centre-axis motif at six points, clip-path axis reveals, copper as the only accent

1
Problem #2

The brand, the domain, and the project photographs did not exist yet

At the outset there was no confirmed name, domain, email, phone, or registration data — and not one usable photograph of finished work. Without those you cannot write a footer, a privacy policy, or structured data. Inventing them was out of the question: a footer with zeros instead of a company number is a false statement, and on a live site it reads as a broken page.

Our solution

We split the project into two layers: structure and design, which could be built immediately, and facts, which waited for confirmation and were tracked in a placeholder register throughout. While a value was missing, its line simply did not render — it was never filled with a stand-in. That let the site run and grow under a working brand, and when the client confirmed his own (RM design / RM Custom Design), the wordmark, domain, and contacts were swapped in. The registration details were verified from two independent sources before launch. The same rule governed the imagery: until a photograph exists, a category carries a visualization with a visible “koncept — vizualizácia” label, or an honest “photographs coming soon”.

Technologies and implementation

A placeholder register, conditional rendering, a mandatory concept label

2
Problem #3

A server framework had to run on hosting with no server

The client’s domain sits on shared Apache hosting and he had no reason to move it. Next.js cannot run there as an application — and with it goes everything a server normally handles: redirects, the canonical host, cache headers, and error handling.

Our solution

We switched the project to a static export: the build produces a directory that is the entire site, and a script uploads it over FTP. Server behaviour was replaced by a hand-written `.htaccess` with redirects, the canonical host, and cache rules — including an exception for the media directory, which is allowed to be overwritten and therefore has to be revalidated. The `main` branch also deploys to Vercel through GitLab CI/CD, so a review preview exists independently of the live site. The client lost nothing by it: he has a modern site on his own domain and no new subscription.

Technologies and implementation

Static export, .htaccess, an FTP deploy script, GitLab CI/CD, Vercel as preview

3
Problem #4

Every image had to survive a joiner’s eye

A joiner does not read a photograph as a picture — he looks at the joint, the alignment, and whether the hardware in the shot exists the way it exists in reality. At 1440 px wide, the difference between craft and botch-work on a vertical joint is about two pixels. An atelier site that sells precision cannot afford a single image where that does not hold.

Our solution

We adopted a rule that held for the rest of the project: when the source is a real installation, his photograph is a measurement, not a reference. A detail gets fixed by local retouching, the whole is never redrawn — and joint widths were checked directly on screenshots at final scale. The same precision governs the material samples: the hardware plate was ultimately built as a view into the corner of an open oak cabinet, the door at a hundred degrees, showing the complete Blum CLIP top BLUMOTION hinge, generated against Blum’s own catalogue photography. A concealed hinge is defined by not being visible from the front — and that is exactly how the sample shows it.

Technologies and implementation

Local retouching instead of regeneration, joint measurement on screenshots, Blum catalogue reference

4
Problem #5

Deciding on the finish must not cost the site its speed

The hero is a three-act scene in which a 48-frame sequence scrubs between the closed and open states of a cabinet. The client was choosing between two finishes for the side doors and wanted to see both live on the site — “try it both ways, I’ll see”. While the choice stayed open, the scene had to carry both frame sets, roughly 5.6 MB on first paint.

Our solution

We built the variant as a typed switch, so the client could compare both versions on his own live site instead of static previews in a message. When he chose olive, we removed the variant from the code — a decision that has been made is no longer a choice. Since then the hero downloads one sequence instead of two, roughly 2.8 MB, and the loading-priority branch went with it. The rejected finish’s media deliberately stayed on disk: in a static export it costs nobody a byte of transfer, and the client can go back to it at any time.

Technologies and implementation

A typed variant union, frame sequences, −50% first-paint payload

5
Problem #6

Serbian without a script subtag is ambiguous to search engines

The Serbian content is written in Latin script — the client decided that on the call of 15 August. But the bare code “sr” leaves the language ambiguous to screen readers and search engines alike: most locale data defaults it to Cyrillic, so the site could be served wrongly to a Serbian visitor.

Our solution

We separated two things that are routinely conflated: the URL segment stays the short `sr`, because it lives in links and slugs, while the language tag in `<html lang>` and in hreflang is `sr-Latn`. We did it before the site was indexed — the last moment hreflang can change without an SEO cost. At the same time the reciprocal hreflang, x-default included, moved into one shared helper, so no sub-page can omit it and the rule holds identically across all three languages.

Technologies and implementation

BCP-47 sr-Latn, reciprocal hreflang, x-default, per-locale Open Graph

6

Similar problems in your business? We will help you solve them with modern tech stack.

Final structure

Complete web structure designed for maximum conversion and user experience. Each page has clear purpose and optimized navigation.

Home
Projects — archive
Kitchens
Living rooms
Bedrooms
Hallways and entryways
Bespoke solutions
Complete interiors
Cookie policy

Most important website sections

Each section solved specific business problem and increased conversions

1

A hero that opens

The line “Nábytok vyrobený pre váš priestor.” is split by a vertical photographic slit dead centre. On scroll the slit opens like a pair of cabinet doors, the text moves outward, and the scene resolves into a wide interior shot. That is the motif at full volume: the first movement on the page is furniture opening.

2

The six-category showcase

Kitchens, living rooms, bedrooms, hallways, bespoke solutions, and complete interiors — in the order the client dictated word for word. Order and tile size are deliberately decoupled: reordering a category changes the reading order but not the composition, so “atypické riešenia” carries its large frame with it wherever it sits.

3

An archive of six real projects

Mezonet Bratislava Jarovce, a family house in Slovenská Nová Ves, the Millhaus two-room flat, the Palisády three-room flat, the Schurmannova three-room flat in Nitra, and a family house in Nitra with its hallway. Each project lists the materials and hardware used — oak veneer, lacquered fronts, concealed SIMONSWERK hinges, Bonaini handles, soft-close runners. Visualizations are separated from photographs by a label.

4

The process on one unbroken axis

The five steps of “od návrhu po montáž” hang from a vertical copper axis that draws itself in step with the scroll. It is not decoration: the axis is the visual argument that one team holds the whole cycle and the steps meet without a gap.

5

Materials as real samples

Board materials, veneers, solid surface, and hardware are shown as macro shots of real samples rather than icons. The section names the brands the client actually uses — Corian, Rehau, HI-MACS, and Blum hinges — and the hardware caption was changed to “Blum pánty” in exactly his words.

6

Contact and registration details

Contact is built around a huge info@rmcustomdesign.sk address and the phone number +421 951 262 496; the footer carries the trader’s registration details and a link to the atelier’s Instagram. There is deliberately no VAT-number line — the client is not VAT-registered, and printing an empty field would be worse than omitting it.

Project stack

Frontend and design system

The App Router and server components, plus a custom design system with zero radius and no shadows. Fraunces carries the headings and Hanken Grotesk the body copy; copper is the only accent and never covers more than a few percent of the screen.

Zero radius and no shadows anywhereFraunces · Hanken Grotesk, latin-ext subsetprefers-reduced-motion respected
Next.js 16
React 19
TypeScript
Tailwind CSS v4
Motion 13
Lenis

Three languages without a CMS

Slovak, English, and Serbian in Latin script. The site structure — slugs, image paths, item order — lives separately from the copy, so a translation physically cannot overwrite an image path or a page address. Serbian carries the `sr-Latn` hreflang rather than a bare `sr`: without the script subtag, screen readers and Google both default it to Cyrillic.

3 languages × 4 page typesStructure separated from translationsReciprocal hreflang including x-default
Typované slovníky
hreflang sk / en / sr-Latn
Open Graph per locale

A hero built as a film sequence

The first screen is a three-act sticky scene: the headline is split by a vertical slit that opens on scroll like a pair of cabinet doors. A 48-frame sequence scrubs between the closed and the open still. Once the client settled on a single finish variant, the hero stopped downloading two sequences instead of one — roughly 5.6 MB on first paint became 2.8 MB.

48-frame sequence, scroll-scrubbed−50% first-paint payload after the client’s decisionA static branch for reduced motion
Motion
clip-path reveal
SVG line-draw
Frame sequence

Deployment, SEO, and compliance

The live site runs on the client’s shared Apache hosting, where the export is uploaded by an FTP script; the `main` branch also deploys to Vercel through GitLab CI/CD as a review preview. Search engines and AI assistants get robots.txt, a sitemap, JSON-LD, llms.txt, and llms-full.txt. Cookie consent is a self-hosted Silktide install, and the trader’s registration details appear in the footer and in the policy.

Static export + hand-written .htaccessllms.txt and llms-full.txt for AI answersVerified ownership in Search Console
Statický export
Apache .htaccess
GitLab CI/CD
Vercel (náhľady)
JSON-LD
llms.txt
Silktide Consent Manager

💡 Modern tech stack = fast website + easy maintenance + long-term support

Delivery process

The project ran from 10 to 28 August 2026 in twelve numbered waves. Each wave began with a call or a WhatsApp message and ended with a shipped change — feedback was not pooled into one big round, it was handled the day it arrived.

10–13 August

Concept, design system, and the first composition wave

2 days

The client’s sentence about symmetry produced the centre-axis signature motif and the whole design system — colour, two typefaces, zero radius, a motion vocabulary. We built the concept site under the working brand “Ateliér M”, added the “axis as structure” composition wave and the project register, and set up deployment through GitLab CI/CD.

15–19 August

Three languages, colour schemes, and a review wave

3 days

The site split into structure and dictionaries and gained a third language, Serbian in Latin script. The client sent exact values for two colour schemes of his own, so a temporary A-to-G scheme switcher ran on the page. Our own review wave went through accessibility, typesetting, and copper contrast at every width; the findings were folded in the same day alongside a mobile report.

22–23 August

Handover prep and deployment to hosting

2 days

The site got its SEO and GEO/AEO layer, cookies, the static export, and an FTP deployment script. The trader’s registration details were confirmed and added to the footer and the policy. The first deployment to Exohosting was tuned to the specifics of shared hosting the same day, and domain ownership was verified in Search Console right away.

23–26 August

Waves 8 to 10 — hero, sections, and tile swaps

3 days

The hero was redrawn several times until the leaves opened inward into the room exactly as the client pictured it. Sections lost their numbering, the showcase was renamed Kategórie, and a retouched photograph of the Blum hinge went into materials. In wave 10, from the call of 26 August, the living-room tile was dropped because it showed a wall lengthwise rather than a living room — and Bratislava disappeared from the service area, structured data included.

27–28 August

Waves 11 and 12 — final feedback and handover

4 days

The client walked through the site on his laptop and commented on what he saw. He settled the olive side doors, which closed the variant choice, asked for Blum hinges only, and for the mezonet we went back to his own photograph, whose joints are tighter than any redrawn frame. All four items in the final wave were resolved the same day; the only thing left open was his own promise to supply workshop photographs. The project was handed over on 28 August.

Project FAQ

Case study summary

This case study shows a specific problem, solution, and outcome. It helps you compare your project to a similar scenario.

Definition: a case study describes a real project with clear inputs and outcomes.

Do you build custom furniture or interiors?

We build sites that look like your work rather than your competitors’ catalogue — one signature motif, a project archive, and as many languages as you need. And we deploy it where your domain already lives, even if that is ordinary shared hosting.

Leave your contact (email or phone is enough)

Write on WhatsApp

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

✨ Your own signature motif • Three languages • Deployed to your hosting