Darker cells mean a higher score for this topic on that metric.
LessMore
Last reviewed Sources & creditsMedia creditsMethodology
Quick answers
When should I pick Rough.js annotation?
When the story is: explainer highlights, ad concept frames, teaching callouts.
When should I avoid Rough.js annotation?
Skip it in cases like: dense quantitative comparison that needs precise lengths.
Who invented or popularised it?
Rough.js brought controllable sketch rendering to the open web
What does it encode?
imperfect strokes and fills as attention cues
Is it OK in ads?
Yes if one claim is visible at a glance in Meta, Google and retail print; otherwise link to a full figure.
Will a teacher accept it?
Yes for lab reports and poster boards if axes, units and a source line are present.
Rough.js annotation encodes values as imperfect strokes and fills as attention cues. Rough.js brought controllable sketch rendering to the open web.
In reports, ads and assignments it fits explainer highlights, ad concept frames, teaching callouts. Skip it when dense quantitative comparison that needs precise lengths.
Make shapes, diagrams and charts in the browser. Download SVG or PNG — nothing is uploaded.
Work
- Work 1 — PowerPoint weekly: Rough.js annotation for explainer highlights, ad concept frames, teaching callouts.
- Work 2 — One Rough.js annotation on a quarterly bridge or KPI tile — not four.
- Work 3 — Build in Excel or Google Sheets, export SVG/PDF rather than a screenshot.
Ads
- Ads 1 — Meta, Google and retail print: one number, one shape, one arrow.
- Ads 2 — Keep callouts inside safe zones. No type in cropped corners.
- Ads 3 — If Rough.js annotation will not fit a banner, keep the number and show the chart on the landing page.
School
- School 1 — lab reports and poster boards: does Rough.js annotation answer the rubric?
- School 2 — Axis names, units, a source line. Markers read them.
- School 3 — Start with a mind map if you must; submit a figure that reads like Rough.js annotation.
Steps
- Steps 1 — Write the claim in one sentence.
- Steps 2 — Check that Rough.js annotation fits the claim. If not, switch.dense quantitative comparison that needs precise lengths
- Steps 3 — Draw it flat in Excel or Google Sheets or PowerPoint.
- Steps 4 — Direct labels, faint grid, claim-title.
- Steps 5 — Check greyscale and a color-blind simulator.
- Steps 6 — Add source, period, units; export SVG/PDF.
Rough.js annotation: honour imperfect strokes and fills as attention cues, and switch when dense quantitative comparison that needs precise lengths.