Screenshots for a case study and portfolio

A case study sells the work, and screenshots sell the case study: the text gets skimmed, the images get looked at. Yet a typical portfolio looks like a Downloads folder — shots at different sizes, some on white, some with half a taskbar cropped in, and somewhere a stranger's name in the corner. Here is how to put together screenshots for a case study that work for the impression rather than against it.

Which shots a case study needs

The beginner's mistake is dumping everything captured during the project. A reader spends about ninety seconds on a case, and ten near-identical screens eat exactly that. What works is a different set: three to five frames, each with a job.

• The overall result. The main frame of the case — what it became. Usually doubles as the cover.
• The key detail. The fragment the work existed for: a new block, a rebuilt form, a data screen. Close-up, without surroundings.
• Before and after. A pair, when the project involved a rebuild. The most convincing format there is — if it is done honestly.
• Context of use. How the result looks in the wild: a post in a feed, an email in an inbox, an interface on a phone.

Everything else — intermediate versions, utility screens, directions that were dropped — stays out. Those are interesting to the author, not to the client.

The before-and-after pair

A comparison only works under one condition: both frames captured the same way. Same zoom, same window width, same fragment, same frame and background. The moment the before is a full screen and the after is a close-up on a gradient, the comparison stops being readable — it is unclear whether the product changed or only the presentation did.

Practical rules: identical aspect ratio for both shots, identical padding, the “Before” and “After” labels in the same position, frames side by side for wide interfaces and stacked for mobile. If the old interface is gone and the before had to come from an archive at a different quality, say so in the caption — that reads far better than a doctored frame.

One consistent style

A portfolio is judged as a whole, not case by case. When every project has its own treatment — a frame here, none there, white background in one, a gradient in another — the portfolio looks assembled from scraps even when the work behind it is strong. The reverse holds too: consistently dressed screenshots suggest a systematic approach before the reader has read a word.

Technically this is easy. Pick a set of parameters once — browser frame (light or dark), background, shadow, corner radius, padding — and apply it to every screenshot in every case. If you have a brand color, set it as the background by HEX and the portfolio starts reading as one body of work rather than a list of links.

What to strip from the frame

A portfolio is a public document and a screenshot in it lives for years. Check every frame before publishing, not after the first client question.

• Personal data. Names, emails, phone numbers, addresses — of clients and of the product's users. Replace them with plausible placeholders rather than covering them with black boxes: a clean substitution looks more professional.
• Real figures and internal metrics. Revenue, conversion, unit costs — only with the client's approval. Numbers usually belong in a case, but cleared ones.
• Test accounts with other people's names. A classic: a case study running for years with a former colleague's name in the profile header.
• Staging links and tokens. Internal domains, links to private boards, session parameters in the address bar — all of it ships to the public along with the picture.

Formats for portfolio platforms

Every platform has its own grid, but the useful set is small: 16:9 for covers and wide interfaces, 4:5 or 1:1 for gallery cards and mobile screens, and 1.91:1 (1200×630) for the link preview when the case is shared in a messenger or a social network. That last one is the most frequently forgotten, and it decides how the case looks in the chat where it was passed along.

If the portfolio lives on your own site, put the case cover in og:image so the link unfurls with a picture instead of bare text. A transparent background helps when the screenshot sits on a designed page: a PNG with an alpha channel keeps the frame and shadow without a white rectangle around them.

FAQ

How many screenshots does a case study need?

Three to five: the overall result, one or two key details, and a before-and-after pair when the work involved a rebuild. Ten similar screens dilute the case rather than strengthen it.

How do I show a before-and-after result?

Capture both frames under identical conditions — same zoom, same fragment, same frame and background — and place them in the same aspect ratio. Otherwise it is unclear whether the product changed or only the presentation.

What should I strip before publishing?

Personal data, uncleared figures, test accounts with other people's names, staging links and tokens. Check the NDA separately — some projects cannot be shown even blurred.

Why should portfolio screenshots share one style?

So the portfolio reads as one body of work. The same frame, background and padding move attention to the content and suggest a systematic approach.

Which formats should I use?

16:9 for covers and wide interfaces, 4:5 and 1:1 for cards, 1.91:1 (1200×630) for link previews. All three can be produced in the screenshot editor .

Wrapping up

Screenshots in a case study do three jobs: show the result, prove the change, and keep the author out of trouble. The first is solved by selection — three to five frames instead of a gallery. The second by an honest before-and-after captured the same way. The third by checking each frame for personal data, figures and NDA terms.

Dressing sits on top of that: one frame, one background, one set of padding turns scattered screens into a coherent body of work. Pick the settings once and reuse them across every case — you can assemble the set in the Flagram screenshot editor , with no sign-up and nothing uploaded to a server.