One Year of Excalidraw(blog.excalidraw.com)
blog.excalidraw.com
One Year of Excalidraw
https://blog.excalidraw.com/one-year-of-excalidraw/
19 comments
My favorite part of excalidraw over any other drawing tool is the messiness. With regular line and shape tools I end up obsessing over geometric precision and symmetry, with excalidraw it’s impossible to create “perfect” drawings, so I don’t worry about it (within reason). I wonder if this phenomenon has been named or observed in UX/game design because it’s so darn effective at making me productive when drawing.
It's called artists impression in building architecture. good enough to give you an impression of what it will become, without the suggestion of 100% correctness. You can see the same technique being used in UX, but it also works for IT architecture drawings.
Powerpoint comes with an option to draw sketched lines, i have large decks drawn in this way. See: https://pptcrafter.wordpress.com/2019/09/24/hand-drawn-style...
Powerpoint comes with an option to draw sketched lines, i have large decks drawn in this way. See: https://pptcrafter.wordpress.com/2019/09/24/hand-drawn-style...
I think it's what attracted people to Balsamiq vs. Axure and other products as well.
Because it kinda looks like a child's work it takes off the edge of noticing useless details and carries the intent better.
The same can be said about Lorem Ipsum vs. "real text". If you put real text, whoever is looking at it analyses things beyond the point you're trying to get across. People notice unbalanced text and typos and all you wanted to say was "there is going to be text here."
Because it kinda looks like a child's work it takes off the edge of noticing useless details and carries the intent better.
The same can be said about Lorem Ipsum vs. "real text". If you put real text, whoever is looking at it analyses things beyond the point you're trying to get across. People notice unbalanced text and typos and all you wanted to say was "there is going to be text here."
I do something similar with laptop stickers; it’s hard to place a sticker horizontally or vertically centered with no “tilt” so I’ll intentionally put it off center with some tilt.
I have heard of quite a few people who write with their font set to comic sans to get this effect...
Super happy to see they're doing well and growing - so far the best collaborative whiteboard tool I've come across.
A few reasons:
1. No account needed, just send a link.
2. Speedier than alternatives.
3. Some kind of magic making it so that quickly drawn curves come out smooth and nice looking rather than jagged.
4. Open source!
5. A good UI, when so many other projects manage to screw it up.
A few reasons:
1. No account needed, just send a link.
2. Speedier than alternatives.
3. Some kind of magic making it so that quickly drawn curves come out smooth and nice looking rather than jagged.
4. Open source!
5. A good UI, when so many other projects manage to screw it up.
if you're interested in the curve algorithm, the author wrote about it https://shihn.ca/posts/2020/roughjs-algorithms/ he's here on HN and on Twitter in case u have follow up qtns
That's for drawing the sketchy style. Smoothing a hand-drawn shape is something different, I guess.
Actually there is some connection in rough.js' sketchy curve rendering and the way excalidraw smooths the hand-drawn shape. That is the Ramer–Douglas–Peucker algorithm https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93...
The way excalidraw does it, it collects all the points from mouse-move events, then uses the algorithm to take those points and reduce the number of points. The reduction is done by a 'distance' parameter in the algorithm. So instead of `n` points, you now have `m` points. m < n. Then excalidraw fits a rough curve through those `m` points. This fitting is automatically done in roughjs. Fewer points and curve fitting gives the effect you mentioned.
(The reduction algorithm is implemented and used from this package: https://github.com/pshihn/bezier-points) p.s. thanks for the shoutout @swyx
The way excalidraw does it, it collects all the points from mouse-move events, then uses the algorithm to take those points and reduce the number of points. The reduction is done by a 'distance' parameter in the algorithm. So instead of `n` points, you now have `m` points. m < n. Then excalidraw fits a rough curve through those `m` points. This fitting is automatically done in roughjs. Fewer points and curve fitting gives the effect you mentioned.
(The reduction algorithm is implemented and used from this package: https://github.com/pshihn/bezier-points) p.s. thanks for the shoutout @swyx
I'm a product designer, and I've adopted Excalidraw as a daily tool in my workflow. It's wonderful for quick iterative exploration and collaboration with the rest of my team. Like another commenter mentioned, the messiness—or rather, variability—of the lines makes it much easier to focus on the ideas, concepts, and relationships over any level of refined design.
I've been doing this for more than 10 years and it's the first tool that achieves the same exploratory and collaborative outcomes as an actual whiteboard.
I'm a happy monthly contributor!
I've been doing this for more than 10 years and it's the first tool that achieves the same exploratory and collaborative outcomes as an actual whiteboard.
I'm a happy monthly contributor!
Ok I learnt something today and that's pretty cool:
https://blog.excalidraw.com/end-to-end-encryption/
https://blog.excalidraw.com/end-to-end-encryption/
I love Excalidraw for rough mockups; I didn't even know it was collaborative, that's even better.
If you can't use online hosted tools (e.g. using it for work) there is a VSCode extension that embeds this which is pretty great. The latest version is actually broken but you can just install the previous one.
Love this tool! Discovered it just before the lockdown started and have used it as a collaboration tool in 100+ software engineering interviews since then.
This sounds like it has a community support trajectory sort of like bevy. Cool stuff.