How to get references
Great work starts with great inputs, and the input is not a screenshot. It is the number behind the screenshot.
When I match a reference – an app, a screen, a motion – I read its computed styles: the font in pixels, the icon size, the row pitch, the padding, the duration and the curve. Then I apply them exactly. Matching by eye lands within ten percent, and ten percent is the difference between a thing that feels right and a thing that feels like a copy.
For this portfolio the references were archived whole: every page, every stylesheet, breakpoints at six widths, the motion of every element with a transition, hover before-and-after. The redesign was then built against the measurements, and deviations were written down as decisions rather than left as drift.
- Capture the reference offline so it cannot change under you
- Read computed values, not design-tool values; the browser is the truth
- Write every deviation down with the reason; a reference is a starting point, not a target
When not to: never ship the reference's assets. Fonts, code, imagery and data stay in the study folder, outside anything that deploys.