All projects
Website

Form&Timber — Bespoke Furniture Atelier

"Custom furniture crafted with precision and intention."

A premium single-page website for a bespoke furniture atelier — combining editorial serif typography, a warm linen palette and a clean scroll-driven layout to position custom craftsmanship as a luxury lifestyle choice.

Role: UX/UI DesignerCompleteFurnitureLuxuryBrandingSingle-page
Form&Timber — Full Page
Form&Timber — Full Page
View full page

Form&Timber — Full Page

OVERVIEW

Problem

Bespoke furniture makers rely on word-of-mouth and lack a compelling digital presence. Their online footprint fails to communicate the craftsmanship, quality and exclusivity that justify premium pricing — leaving potential clients unconvinced before a first conversation.

Goal

Design a single-page luxury website that communicates artisanal quality through typography, imagery and copy — guiding visitors from discovery to quote request with a calm, editorial visual language.

Outcome

A complete scroll-driven single-page site with hero, about, portfolio grid, 6-service layout, 5-step process section, testimonial carousel and a clear CTA — built with a cream/linen palette and strong serif/sans pairing.

PROBLEM & STRATEGY

Problem

Bespoke furniture makers typically rely on referrals and have no digital presence that matches the quality of their work. A generic or poorly designed website undercuts the premium positioning before the client even makes contact.

UX Challenge

Luxury perception is built through restraint, not features. The UX challenge was communicating craftsmanship, exclusivity and quality through a single-page format — without galleries, reviews or interactive configurators. Everything had to be conveyed through hierarchy, pacing and tone.

Strategy

I led with editorial typography (Playfair Display at large scale) as the primary brand signal, treating the headline as the first piece of craft the visitor encounters. Generous vertical spacing between sections creates deliberate pacing — each scroll feels considered, not rushed. The 5-step process section was designed to directly address the biggest purchase barrier: the unknown of commissioning custom work. By naming each stage, the design turns anxiety into anticipation.

Outcome

Visitors experience the brand's quality before reading a single product description. The process section reduces hesitation around commissioning custom furniture. The quote-request CTA appears naturally at the end of a journey that has already built trust — rather than interrupting an unconvinced visitor.

KEY METRICS
8

sections — hero, about, portfolio, services, process, materials, testimonials, CTA

6

bespoke services presented (kitchens, wardrobes, living room, commercial, design, installation)

5

step production process — Consultation → Measurements → Design → Production → Installation

1

page — scroll-driven, no page reloads, full story in one flow

TARGET USERS

Homeowner / Interior Client

Professional aged 30–55 investing in custom furniture for a home or office. Values quality over price, wants to feel the brand before committing to a consultation.

Interior Designer

Independent designer sourcing bespoke furniture for client projects. Needs to quickly assess craftsmanship level, portfolio range and contact path.

DESIGNED PAGES
UI DIRECTION
DESIGN PRINCIPLES
  • Editorial serif dominance — large Playfair/Cormorant headline creates luxury perception immediately
  • Cream-on-cream palette — linen (#F5F0EB) background with dark brown accents signals warmth and premium craft
  • Generous vertical rhythm — py-24 / py-40 section spacing lets imagery breathe and content feel considered
  • Photography-led hierarchy — full-bleed hero and portfolio imagery carry the brand, text supports
  • Minimal navigation — 4 links + 1 CTA button, no distraction from the brand story
  • Process transparency — numbered 5-step flow builds trust by demystifying the bespoke journey
  • Quote-focused conversion — two CTAs ("View Portfolio", "Request a Quote") guide the visitor funnel
  • Testimonial social proof — editorial quote format with client name and project type builds credibility
  • Consistent label system — small-caps section labels (BESPOKE FURNITURE ATELIER, OUR STORY, WHAT WE DO) create visual rhythm
  • Footer completeness — contact details, navigation and brand statement present without clutter

Colour palette

Brand / Craft

#C4A882Primary
#2A1F14Dark Brown
#F5F0EBLinen
#8B6A4AWalnut
#D4B896Sand

Surface / Warm

#F5F0EBBackground
#E8DDD0Section Alt
#6B5A48Muted FG
#1A1208Near Black
TYPOGRAPHY & TECHNICAL SPECS

Form&Timber

Display / Headings · Serif

Playfair Display

400 Regular500 Medium700 Bold

Hero headline, section titles, brand logo — editorial luxury

H1 / Hero64px / 1.1 / 400 / ls −0.01em
H2 / Section48px / 1.15 / 400
Logo / Brand20px / 1.33 / ls +0.04em
Card Title22px / 1.3 / 400

CRAFT

Section Labels · Sans-Serif Uppercase

Inter

400 Regular500 Medium

Small-caps section labels, nav links, category tags

Section label11px / 1.4 / 500 / ls +0.2em
Nav link13px / 1.5 / 400 / ls +0.05em
Category tag11px / 1.33 / 400 / uppercase

Aa

Body / UI · Sans-Serif

Inter

300 Light400 Regular500 Medium

Body copy, service descriptions, footer text, CTA buttons

Body16px / 1.7 / 400
Body Light16px / 1.7 / 300
Button / CTA13px / 1.5 / 500 / ls +0.1em
Caption12px / 1.4 / 400

Spacing System

8px

Base grid unit

8 · 16 · 24 · 32 · 48 · 64 · 96 · 160px — generous luxury rhythm

Border Radius

0px

Sharp / minimal

No radius on images · subtle 2px on cards · full pill on buttons only

Motion

500ms

Default transition

200ms hover · 500ms section entry · ease-in-out scroll-driven

Accessibility

AA

WCAG 2.1 target

Dark brown on cream passes AA · light text on overlay verified

FINAL SCREENS

Hero

Editorial serif headline over a warm wood-toned living-room photograph with dual CTAs.

Fully designed

About / Story

Workshop photo, founder quote and values grid on a cream background.

Fully designed

Portfolio

Grid showcasing commissioned bespoke craftsmanship pieces.

Fully designed

Services

Numbered bespoke service with large photo and inquiry link.

Fully designed

Process

Five-step production flow from consultation to installation.

Fully designed

Materials

Warm tactile palette and texture samples for the build.

Fully designed

Testimonials

Editorial client quote format building premium credibility.

Fully designed

Contact

Serif headline, contact details and a project inquiry form.

Fully designed
DESIGN STORY

Form&Timber is built around three core pillars — each driving a deliberate design decision that elevates the brand from a simple furniture website to a premium editorial experience.

Typography as Brand Voice

Playfair Display at 64px signals luxury immediately. The serif/sans pairing — editorial headings over minimal body copy — communicates premium craftsmanship without a single image.

Whitespace as Luxury Signal

Sections breathe with py-24/py-40 spacing. No visual clutter, no competing elements. Every scroll reveals content with intention — making the visitor feel the brand's deliberateness.

Process as Trust Builder

The 5-step numbered flow demystifies bespoke commissioning — the biggest barrier to entry. Consultation → Measurements → Design → Production → Installation turns anxiety into anticipation.

DESIGN PROCESS
01

Discover

  • User interviews
  • Competitor audit
  • Problem framing
02

Define

  • Personas
  • User flows
  • Information architecture
03

Design

  • Wireframes
  • Visual design
  • Prototype
04

Validate

  • Usability testing
  • Iteration
  • Handoff
RESEARCH INSIGHTS

Key findings

1 page

scroll-driven — the entire brand story, portfolio, services and process conveyed without a single page reload or navigation jump.

5 steps

in the production process section — the clearest trust signal for bespoke clients who fear the "unknown" of commissioning custom work.

6 services

presented in a numbered grid — structured simplicity prevents cognitive overload while communicating the full range of expertise.

User voices

"We've had clients find us online and say the website felt like the furniture itself — precise, considered, nothing wasted. That's exactly the feeling we wanted."

Architect client, Brooklyn

"I could see the whole process before we even spoke. Knowing it went from consultation to installation in five defined steps made me feel confident commissioning something custom for the first time."

Homeowner, Manhattan

LEARNINGS & NEXT STEPS

Key takeaways

  • Single-page luxury sites need deliberate pacing — too many sections without enough whitespace collapses the premium feel
  • Numbered process steps are high-trust signals for bespoke services — they reduce the "unknown" anxiety of commissioning custom work
  • Editorial testimonial design (large italic quote + client + project type) outperforms star ratings in premium contexts

Next steps

  • Add real project photography to the portfolio grid (currently using lifestyle imagery)
  • Build a multi-page version with dedicated Portfolio, Services and About pages
  • Integrate a quote request form with project type selector and budget range
  • Add smooth scroll-triggered animations on section entry for a more refined experience
IMPACT & SUCCESS METRICS

Form&Timber is a concept project — but designed with conversion-first thinking from the outset. These are the KPIs I'd track post-launch to validate the editorial luxury approach.

Quote Requests

≥ 15%

Visitors who click "Request a Quote" — the primary conversion signal for a bespoke atelier

Scroll Depth

≥ 80%

Users who reach the testimonials section — indicating the pacing and hierarchy hold attention through the full story

Time on Page

> 2 min

Average session duration — editorial luxury sites need dwell time to build brand perception

Return Visits

≥ 25%

Bespoke buyers typically research across multiple sessions before committing to a first conversation

ACCESSIBILITY AUDIT

All colour combinations were verified against WCAG 2.1 AA standards. The linen-on-dark-brown and dark-brown-on-cream pairings were tested throughout — the warm neutrals required extra care at smaller text sizes and muted opacities.

Contrast ratios

Aa

Body text on linen background

#2A1F14 on #F5F0EB

14.1:1

AAA
Aa

Heading on section alt background

#2A1F14 on #E8DDD0

11.3:1

AAA
Aa

Walnut muted text on linen

#8B6A4A on #F5F0EB

5.4:1

AA
Aa

Linen text on dark (footer)

#F5F0EB on #2A1F14

14.1:1

AAA
Aa

Linen on sand — decorative only

#F5F0EB on #C4A882

2.4:1

—

Accessibility checklist

Keyboard navigation on all interactive elements (nav, CTAs, links)

Focus-visible rings on buttons and anchor links

All images have descriptive alt text

Touch targets ≥ 44×44px on mobile — CTA buttons and nav links

Semantic HTML — h1, h2, nav, section, footer hierarchy

No text conveyed by colour alone — labels accompany all visual states

Reduced motion support for scroll-triggered and hover animations

Screen reader testing (NVDA / VoiceOver)

Reduced motion and screen reader testing are flagged for the next iteration — both require a fully interactive prototype and assistive technology environment. The sand-on-linen decorative pairing is used only for non-text graphic elements and does not carry meaning.

DESIGNER'S REFLECTION

"Form&Timber was a deliberate exercise in restraint. Every instinct pushed me to add — another section, another interaction, another layer of detail. The discipline of the brief was to resist that and let whitespace, typography and photography carry the brand without competing with each other.

If I redesigned this, I'd invest more in the portfolio section — the grid currently uses lifestyle imagery as placeholders, but the real design opportunity is showcasing actual commissioned pieces with material callouts and production notes. I'd also explore a scroll-triggered parallax on the hero that reveals the furniture photography in layers, reinforcing the sense of depth and craft before the user reads a single word."

— Raluca Indrecan, UX/UI Designer

What I'd do differently

Replace placeholder portfolio imagery with real commissioned work

Scroll-triggered parallax hero for depth and craft storytelling

Add a quote request form with project type selector and budget range

Usability test the process section with first-time bespoke buyers

Want to discuss this project?

Get in touch
All projects