Design Process — A case study
Selling a room nobody has stood in
How do you sell a luxury events house on the web when the whole point is that no two rooms it builds are ever the same — and there is no photography at all? This is the thinking behind Adom & Co.: the brief, the rejected directions, and the trade-offs.
The client & the brief
Fictional brand — concept project. Adom & Co. does not exist. Every client, quote and event named on this site is invented for the purpose of this portfolio study. No client results are claimed anywhere.
The imagined client: a luxury events house in Accra — "Adom" is Twi for grace — designing weddings, corporate galas and cultural ceremonies (outdoorings, engagements, durbars) for clients who want the register of a five-star hotel and the warmth of a family friend. The deliverable was the house's digital front door: an arrival worthy of an actual invitation, three chapters of work shown as scenes rather than a portfolio grid, the craft behind the scenes, and a way to begin an enquiry that felt like replying to an invitation rather than filling out a lead form.
Within the portfolio collection this is the Tier C motion-and-light study: the site where the signature technique is candlelight itself — a canvas ember field, a stagelight that dims between chapters, a seal that opens like wax breaking — built entirely without a single photograph.
The problem
Events businesses sell atmosphere, and atmosphere is normally sold with photographs of past events — string lights, real flowers, real faces. Remove photography and you remove the entire conventional toolkit. The real problem statement had three edges:
- Atmosphere without a camera. Candlelight, fabric, chandeliers — the site had to feel warm and lit from within using only line, gradient and canvas.
- Three very different registers, one house. A wedding, a corporate gala and a cultural ceremony each carry a different emotional temperature; the site needed to hold all three without flattening any of them into "generic luxury."
- An enquiry that doesn't feel transactional. A visitor deciding whether to trust someone with their wedding day should not be handed a SaaS contact form.
Success meant a visitor who scrolls the three chapters believes the house has genuinely built rooms like these — despite never being shown one.
Directions considered — and rejected
Rejected: a WebGL candle-flame shader
A real fluid-simulation flame (fragment shader, GPU-driven) was tempting as a technical centerpiece, but it would have made candlelight the site's flex rather than its atmosphere — and it would have competed for GPU budget with nine gallery scenes and a particle field already running. The canvas ember field carries the same warmth at a tenth of the complexity and stays legible as "background," which is the correct register for atmosphere.
Rejected: a single infinite lookbook (all nine scenes in one strip)
Following the collection's couture site would have meant one long horizontal reel of all nine scenes. But Adom & Co.'s three chapters are emotionally distinct occasions, not looks in one collection — collapsing them into one continuous strip would have erased that distinction. Three separate galleries, each introduced by its own chapter and closed by its own narrative line, keep Weddings, Galas and Cultural ceremonies legible as three different promises.
Rejected: autoplaying chapter transitions
An earlier idea had the stagelight and even the gallery auto-advance on a timer, "like a slideshow of a real event." Foundation's own rule against unrequested autoplay motion was the deciding factor, but the design reason was stronger: a couple deciding on their wedding designer should control the pace, not be rushed by one. Every transition in the shipped site is scroll- or interaction-driven.
Chosen: the invitation, opened once, then three candlelit chapters
A skippable wax-seal arrival sets the tone once; three chapters each get a drag-to-pan gallery of scenes and a closing line in the founder's voice; a single craft timeline explains the process behind all three; real (labeled fictional) voices close the trust loop; and the enquiry form is styled as the RSVP card it emotionally is.
Key decisions & trade-offs
Four inks, each with exactly one job
Noir, champagne, candle, velvet — no fifth color anywhere on the site. Velvet is spent entirely on one section (Voices) so its appearance reads as a mood shift rather than becoming wallpaper; candle is rationed to flames, seams and calls-to-action so it keeps its "lit" meaning. The discipline costs some conventional UI variety (no separate error/warning colors, for instance) and buys total coherence.
Nine hand-drawn scenes over a stock icon set
Arches, tablescapes and chandeliers as single-stroke SVG cost real drawing time — each of the nine scenes is bespoke geometry, not a repeated template with swapped colors. The trade-off was worth it because the whole thesis (luxury without photography) collapses if the "photography substitute" looks like clip art.
A stagelight, not a full page repaint
Rather than hard-cutting the page background per chapter (which would read as a template switching state), a soft fixed radial-gradient layer shifts hue and briefly dims between chapters — closer to how a lighting designer actually changes a room's mood mid-event. It costs one always-mounted fixed element and a small IntersectionObserver, and buys a transition that feels designed rather than switched.
Native scroll for the galleries, not a custom carousel
The galleries use the browser's own horizontal scroll (with snap points) enhanced by pointer-drag, rather than reimplementing scrolling from scratch. It costs a slightly less exotic mechanism than a fully custom carousel; it buys correct behavior for trackpad, touch, mouse wheel and keyboard with a fraction of the code — and one fewer thing to get subtly wrong on someone's phone.
Intended impact
Framed as design goals, since a fictional house has no metrics to claim:
- Prove atmosphere can be built, not captured. If a luxury events house — a category almost entirely sold on photographs — can feel warm and trustworthy through code-drawn light alone, the collection's "every visual is code" rule holds even at its most photography-dependent edge case.
- Hold three distinct emotional registers in one system. Show that a single palette and layout language can flex from a wedding's tenderness to a gala's grandeur to a ceremony's gravity without becoming three different sites.
- Make the signature interaction feel inevitable, not decorative. The ember field, the seal, the stagelight and the drag galleries should all read as the same idea — warmth, arrival, candlelight — expressed four ways, not four separate demos bolted together.
How it was built — the ember math, the seal sequence, the stagelight system — is documented generously in the build guide. Or return to the invitation and begin again.