Before-and-After Website Ideas for Interior Design Studios

Interior design portfolios are almost uniformly beautiful, and almost uniformly built the same way: a grid of finished rooms, professionally shot, with a project name underneath. It is an understandable choice. The photography is the most attractive asset a studio owns.

It is also the asset that says least about the work. Two studios can publish equally handsome photographs of a living room, and a prospective client has no way of telling that one of them moved a wall, relocated the kitchen and designed the lighting from scratch, while the other specified a sofa.

What the first screen has to settle

Before any of that matters, a visitor is deciding whether this is the right kind of studio for them. That means a point of view they can see rather than read about, the type of work — full renovation, new-build interiors, fit-out, styling — the scale and standard of project, roughly where the studio works, and an obvious way in.

Scope is the one that is most often missing and matters most. A client with a gutted apartment and a client who wants a room refreshed are looking for different practices, and neither can tell from a photograph which one they have found.

Why before-and-after carries the argument here

Most of what an interior designer produces never appears in the final image. The five phases the profession works in — programming, schematic design, design development, construction documentation and contract administration — generate layout options, floor plans, elevations, lighting plans, joinery details and specifications. All of that is spatial reasoning. A single photograph taken at the end flattens it into a mood.

The original space is what makes the reasoning legible. Put the two together and a viewer reads the decisions: the wall between kitchen and dining is gone, the window was always there but the room was arranged with its back to it, the ceiling height was never the problem — the lighting was. None of that is available from the after image alone.

Not every decision survives this. Acoustics, storage, whether the joinery was worth its cost — none of that photographs. But the spatial move usually does, and it is the part clients find hardest to imagine in advance.

Ways to show the change beyond a gallery

Shoot the before deliberately. The most common reason studios have no usable before image is that nobody took one on the day of the survey. A tripod, a wide lens and ten minutes at first visit produces an asset worth more than most of the shoot that follows, because it is the only one that can never be recreated.

Pair the plan with the room. A marked-up floor plan beside the finished photograph, with one line explaining what moved and why, communicates more design work than a second interior shot. Studios generate these drawings anyway.

Use detail comparisons where the whole room overstates. A joinery run, a bathroom niche, a lighting scheme — a tight pair can carry a specific decision honestly where a full-room before and after would imply more work than was done.

Say what the scope was. Full renovation, kitchen only, furniture and styling. Ambitious work is undersold when it sits in an undifferentiated grid.

Where interaction genuinely adds something

There is a specific reason a comparison in one frame works better than two photographs side by side, and it comes out of vision research rather than marketing. In the change blindness studies published by Rensink, O’Regan and Clark in Psychological Science in 1997, observers looked at two versions of a scene alternating with a brief blank between them. Even large changes — an entire aircraft engine removed — took a long time to find. The interruption wipes out the local signal that would otherwise flag the difference, so the viewer has to hunt for it.

Two photographs on a page are that experiment with extra steps. The eye moves between them, the geometry does not line up, and the difference has to be reconstructed rather than seen. A comparison that happens in one frame — a divider dragged across, a surface wiped through — removes the interruption. The change occurs where the viewer is already looking, and the part that moved announces itself.

That is a narrow claim about perception, not a promise about enquiries, and it does not mean every project needs one. A studio publishing forty projects should not ask a visitor to operate forty widgets. The interaction earns its place at the top of a page, on the one project chosen to represent the practice; beyond that it becomes texture rather than a point.

An example: Empty → Designed

This is the idea behind RevealCraft’s Interiors experience. The page opens on the room as it was: empty, unfurnished, the bare shell that a client would have walked through. The visitor works across it and the designed interior comes through underneath — same viewpoint, same geometry, the furniture, materials and light arriving in place rather than in a second photograph. Once enough has been uncovered, the completed room settles as the finished state of the page.

See the Empty → Designed Interiors experience→

The room in that demonstration is a demonstration. A studio would use its own project — its own survey photograph or render, its own finished shoot, its own typeface, palette, project name and enquiry route. The structure of the moment is what carries over, not the room inside it.

How the idea adapts across interior businesses

The same pattern makes different arguments depending on who is making it:

• Interior design studio: empty to designed — strongest on a new-build or stripped-back project, where the shell genuinely was empty.
• Renovation firm: dated to renovated, which needs the most care, because the before is usually a home somebody lived in and liked.
• Interior architect: plan or unfinished shell to completed interior, where the drawing is doing the arguing.
• Fit-out company: empty commercial space to finished fit-out — the clearest case of all, since a bare envelope needs no editorial help to look bare.
• Home styling: plain room to styled room, and worth labelling as styling rather than design, because the pair will otherwise be read as a renovation.

Keep the comparison honest

Interiors is the vertical where a before-and-after is easiest to exaggerate, because the before is somebody’s actual home. Shoot it on a grey afternoon with the curtains half drawn and the recycling in shot, and the finished image will look transformative regardless of what was designed.

The practical discipline is narrow. Match the camera position, or come as close as the furniture allowed. Keep the geometry recognisable, so the same window and the same corner appear in both. Do not stage the before badly. Do not use a wide-angle lens for one and a normal lens for the other. Where the after is a render rather than a photograph, say so.

There is a regulatory floor under this too. The US Federal Trade Commission judges advertising on its net impression, including images and graphics, treats implied claims as seriously as stated ones, and holds that fine print cannot correct a misimpression an ad has already created. A pair of photographs is a claim. Not that a studio is likely to be investigated over a portfolio page — but the standard is the one a sceptical client applies anyway.

The honest version is also the better sales tool. A before that looks like a perfectly decent room, transformed into something clearly better, is a stronger argument for design than a before that looks like neglect.

Keep the interface around it quiet

The comparison is a visual, not the whole message. It still needs the project name and location, a sentence saying what the scope was, one obvious call to action, and type that stays readable over a photograph. On a phone it has to work under a thumb and fall back to a strong still image for anyone scrolling past.

Give it a keyboard route and a description too. A transformation that exists only inside a drag gesture does not exist for someone assessing the studio without a mouse.

Have a space transformation worth showing?

Most studios already own everything this needs. The survey photographs are on someone’s phone, the plans are in the project folder, the finished shoot is already on the site. What is missing is the decision to put the first back in front of the last.

RevealCraft can adapt the Empty → Designed concept to your project, your brand and the site you already have. The same question comes up in architecture and development, where the drawing goes missing for the same reason.

Start a project→