Annotated Screenshot
A browser mockup with numbered marker dots decoded by a sticky legend list.
A browser mockup with numbered marker dots decoded by a sticky legend list.
The Marketing Collection unlocks the source for every Marketing block. All Access unlocks every Collection.
Already purchased? Log in
Annotated Screenshot explains one screen properly. A browser mockup of the dashboard carries three numbered marker dots pinned to its regions, sidebar, chart, and an anomaly row, and a sticky legend beside it decodes each number with a title and sentence. The markers sit on the mockup edges like documentation callouts, and the legend order matches the visual flow.
The annotations are one array, and each Marker is positioned with a class string on the region it labels. Redraw the mockup to your actual money screen and move the markers to whatever earns the explanation. Three callouts is the budget, five turns the screen into a diagram of itself.
Reach for this block when one screen carries the product and deserves a guided reading, dashboards, editors, inboxes. It answers what am I looking at faster than a video and deeper than a bare mockup. Use tour-steps-with-screens when the story is a sequence, this block when it is a place.
A natural flow around it on a Marketing Pro page:
Before
After
One strong use is the daily dashboard with its three load bearing regions. Other annotated screens:
Tip: annotate behaviors, not furniture, the anomaly flag earns a marker where the navigation bar never will.