Organize Interface References by Pattern and Context

A screenshot records a visible state, not a complete interaction or a usability result. Keep notes about what happened before and after it, the device context, and the date you observed it. Do not infer that a pattern works well solely because a familiar product uses it.

Keep the collection useful

Organize source sets by product or research session. With the refern browser clipper, region capture (Alt+Shift+S, or the button beside Save) saves just the part of a page you select, such as one component. Tag patterns such as navigation, empty-state, or form-error, plus platform when useful. Search aspect:portrait to find most phone screenshots and aspect:landscape for most desktop ones. Preserve the source and distinguish your own annotations from text actually shown in the interface.

Build the working selection

On a refern canvas, compare several states or solutions against the same question. Keep screenshots at readable sizes and annotate the relevant detail. A palette match is not evidence that the patterns have equivalent behavior.

Find and use the references

Use tags and source metadata for retrieval. Color or similarity search can suggest related screenshots, but inspect them in context. Refer to a recorded clip or your own flow notes when a still image cannot explain the transition.

Check the handoff

Use the design and research tools for prototypes, evaluation, accessibility checks, and collaboration. refern does not turn screenshots into editable interface components or establish usability. Keep outside product references separate from approved assets in the delivery.

Normal refern workspace indexing reads existing files in place. Imports and file actions can create or change files. Back up the source media and workspace data that preserves your organizing work.

Continue with Tag Reference Images So You Can Find Them Again.