Tool / Live-page annotation
DevNotes
A visual note carries the browser context needed to find the same thing again.
- Direction
- Krystian Fernando
- Scope
- Tool / Live-page annotation
- Stage
- Working local annotation notebook
01 / The story
The note is already on the thing.
While refining a page, an arrow and a short observation can communicate a relationship directly. DevNotes lets that mark stay connected to the live page, selected text and surrounding context.
A person can work in visual terms while a coding agent receives the information needed to inspect the same place.
02 / The story
From a mark to a notebook.
The local notebook autosaves notes, edits and replies. One observation can hold several selections, and named snapshots preserve the state of the discussion.
Restoring a snapshot first preserves the current working state. The page’s source stays separate from the annotation layer.
03 / The story
A different question emerges.
Marking the page raised another possibility: sometimes the useful next step is to move the captured element and see what happens. That experiment became Devsigner.
DevNotes keeps its own focus on observation and communication. Its research note holds the live-page captures and the details of the annotation workflow.
Contribution
Interaction direction, requirements, visual feedback and acceptance. Implementation developed with beabpossible.
Working local annotation notebook
Explore the existing research ↗Next project
Devsigner
Try the shape before code.