← Field notes

Real screens only

Every image on this portfolio is a capture of the real, live product. No mock-ups, no generated placeholders — and when a project has nothing to show yet, the page says so.

Real screens only — cover

When I rebuilt this portfolio, I set one rule before designing anything: every screen you see is a real capture of the live product. No device mock-ups with invented content, no AI-generated "website" images, no beautiful screens that never shipped.

It sounds obvious. It made a lot of decisions harder — and the site better.

Why it matters

A portfolio is a promise about what working with someone looks like. If the screens are idealised, the promise is too. A client who later opens the live site and finds something different has learned something about you, and it isn't good.

Real captures also show things mock-ups hide: how a page handles real copy, real photography, a real product catalogue, a cookie banner, a language switch. That's where most of the craft actually is.

What the rule changed

Galleries are captured, not composed. Each case study shows the desktop and mobile screens of the live site at their true proportions, uncropped. When a site changes, the screens get re-captured.

Thumbnails follow one style. Some early previews were framed cards on a grey background, others were full-bleed captures. They now all use the same full-bleed 16:10 crop of the real page, so the index reads as one system.

Weak captures get replaced, not retouched. If a capture shows an age gate, a loading state or an empty hero, the fix is a better real screen — another section of the same site — never an edit.

Before and after
Top: the old framed previews. Bottom: the same real pages as full-bleed captures.

When there's nothing to show

Some projects are still in development, and some are private. The easy move is a placeholder that looks like a screenshot. I don't do that.

Instead, those pages show a simple typographic card: the project name, its status, what's being built, and a way to ask about it. It's honest, and it still looks intentional.

Status card
A project in development gets a status card — never a fake screenshot.

The same rule for words

The text follows the same principle. Case studies describe what was built and why, and they don't invent metrics, quotes or results. If a number isn't known, it simply isn't claimed.

Real screens turn a portfolio from a showcase into evidence.

Worth it

Real screens take longer: capturing, choosing, re-capturing when a site changes. But they turn a portfolio from a showcase into evidence — and evidence is what people are actually looking for when they decide who to work with.

— Serhii Rohachov, Kyiv