Contemporary screen interpretation
Conceptual Sketch
A deliberately unfinished visual treatment that makes ideas and relationships easy to discuss. Sketchiness can communicate a draft state, but should not conceal the status of real functionality.
What defines it
- Loose line
- Annotations
- Visible structure
What it asks of the project
- Reading & layout
- Compact spacing for scanning
- Visual emphasis
- quiet · structural
- Implementation
- Mostly standard CSS; imagery may still need preparation.
- Images & assets
- Original annotations or a simple diagram can supply the sketch layer.
Color in use
A product concept page with an annotated flow and clearly marked open questions.
Accent labelOpaque text/surface: 20.78:1 · Text/accent: 7.35:1.
These pairs meet the normal-text minimum; check other surfaces separately.
Context
Look at the loose drawings and informal annotations. Much of this board is finished poster art using sketch-like marks, which differs from an actual early-stage wireframe.
View collected reference imagesBuild it
- Use annotations to explain actual decisions
- Keep labels typeset and readable
- Mark unfinished or hypothetical features explicitly
Typography
Use typeset annotations or highly legible handwriting. Labels should explain the diagram without requiring deciphering.
Watch out for
Presenting an incomplete workflow as working or making every line so irregular that relationships become ambiguous.
A working interpretation
Original CSS composition with the same content and controls used in every direction. Image-led styles need additional artwork for their full expression.
Open the full example →Hand it to an agent
Point your agent at this guide, or save the files below.
Check the result
- Confirm: use annotations to explain actual decisions.
- Confirm: keep labels typeset and readable.
- Confirm: mark unfinished or hypothetical features explicitly.
- Review specifically for: Presenting an incomplete workflow as working or making every line so irregular that relationships become ambiguous.