If you like this, be sure to check out Wired Elements - a set of 20+ fully working, wire-frame style web components built with Rough.js (by the author of Rough.js): https://wiredjs.com/
Rough.js + WE look awesome. I love that you can hand craft UI ideas in the same style if needed. Just curious - do you use any drag & drop tool with it for prototyping?
I’ve found sketchy styles to be immensely useful in getting clients to focus on UX and structure rather than getting stuck on minor irrelevant details. My background is construction, and architects do the same thing with initial concepts.
Yep, it's super common that when you show a UX prototype to a client they'll hyperfocus on things you don't want them to focus on right now like the font choice or button colors. Making it look rough and muted can help.
I’m using this in a scientific drawing tool that I put together - it was remarkably easy to integrate, and the sketch aesthetic is great for presentations or when you wish to convey uncertainty.
There is some code [0] for generation of coastal lines in cartographic maps (text in french, code in JavaScript). It's kind of similar.
The blog post [1] about fiziko describes how it calculates parallel bezier curves using line intersection and curves of varying thinkness. The code about the coastal lines also uses a similar technique and describes how to get the result step by step.
If you have another library that builds SVG charts or diagrams, Rough.js is really fun and usually very simple to include.
When combined with a handwritten font like humour sans[0] You can instantly turn a chart into something that looks more like an XKCD drawing.
No idea why, but I find the hand-drawn look is universally more engaging for charts and diagrams, causing people to actually pay attention and ask questions. It looks like some of the example links[1] need updating. But the WiredJS[2] site is a good demo of the look I am describing.
I've just been toying with an idea of a canvas-based game and wanted to use hand-drawn graphics style – and with this library, it looks like I can save money on the art and have animations for free, too! Thanks so much for posting this.
It would be nice if I didn't have to have html elements for this, but instead it would be a js or css that you applied and all the normal elements would be automatically rendered in sketchy style.
They're great for rapid wire-frame prototyping.
It’s dynamically rough so it’s different each time, but it’s not over done
I’m still hanging out for a browser implementation of Fiziko (https://news.ycombinator.com/item?id=21651240) though, which would be a whole other cool aesthetic.
The blog post [1] about fiziko describes how it calculates parallel bezier curves using line intersection and curves of varying thinkness. The code about the coastal lines also uses a similar technique and describes how to get the result step by step.
[0] https://observablehq.com/@linard-y/chemin-decale-offset-path... [1] https://habr.com/en/post/454376/
[1] https://www.getpapercss.com/
When combined with a handwritten font like humour sans[0] You can instantly turn a chart into something that looks more like an XKCD drawing.
No idea why, but I find the hand-drawn look is universally more engaging for charts and diagrams, causing people to actually pay attention and ask questions. It looks like some of the example links[1] need updating. But the WiredJS[2] site is a good demo of the look I am describing.
[0] https://github.com/shreyankg/xkcd-desktop/blob/master/Humor-...
[1] https://github.com/pshihn/rough/wiki/Examples
[2] https://wiredjs.com/
https://excalidraw.com/