Stop screenshotting your case studies

I rebuilt every wireframe in this portfolio as a React component. Here is why, and what it cost.

The case studies on this site used to be PNGs. Old Sketch exports, flattened Figma frames, screenshots of products that no longer exist. The galleries looked fine. They were dead.

Screenshots rot

A wireframe trapped in an image is unkillable. You cannot retype a label. You cannot adjust a stat. You cannot fix a typo without firing up the source file. Half the time the source file is in a tool you no longer pay for. The other half, the file references fonts your machine does not have. The case study freezes at whatever quality you exported five years ago.

React components are case-study artifacts

Pogo, SmartView, Apple, the THEFT research deliverables, all rebuilt as small React components. Each one is dumb. Takes data. Renders flat boxes, lines, labels. Uses the site type system. No SVG. No Figma export. JSX and CSS variables. Lives in the repo. Ships with the site. Stays in sync with the rest of the visual language automatically.

The trade is real

A code-rendered wireframe takes me four to six times longer to build than dropping in a PNG. Real cost. I made the trade for three reasons. The wireframes read as part of the case study, not artifacts of a different decade with their own typography. When I evolve the visual system, the wireframes update with it. And I get to demonstrate the thing the case study is claiming, that I can build the design as well as draw it.

When not to do this

Photographs of physical work, screen captures of a live product, anything that is genuinely a record of a moment, leave it as an image. Wireframes are different. Wireframes are diagrams. Diagrams should be code.