Annotated Screen Case
A single product screen as a Placeholder with numbered markers keyed to a side list naming the design decision behind each area.
A single product screen as a Placeholder with numbered markers keyed to a side list naming the design decision behind each area.
Search blocks by description or jump to a page.
The source for every Portfolio block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Annotated Screen Case pairs one large Placeholder standing in for the key screen with four numbered markers dropped onto it, matched by a keyed list beside it that explains the specific design decision behind each marked area: comparison rail, metric families, compact rows, and deferred filters. Each note ties the visible choice back to a reason, a research ask or a usage figure.
The annotations are one array, each a number, a title, a body, and an absolute position for its marker. Anchoring every claim to the exact spot on the screen is the distinctive move, it turns a wall of design rationale into a guided read that a hiring manager can follow in seconds.
Reach for this block when one screen carried most of the work and the interesting decisions all live on it. It sits well after the process and near the results. The installer drops in their own screenshot, repositions the markers, and rewrites each keyed note for their real decisions.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the dashboard or app screen where every layout call needs a defense. Other annotated shapes:
Tip: keep the marker count to four or five, a screen covered in numbers stops reading as annotation and starts reading as clutter the eye wants to skip.