Ask HN: Examples of 'hand drawn' animations in blog posts?

12 pointsjmheinkle6y ago11 comments

I want to write articles. They have technical content, so they benefit from explanatory diagrams.

I don't want to use formal diagramming tools to make the diagrams, I want to draw them instead.

Does anyone know of any tasteful examples where people use digital drawing tools to do this?

11 comments

echeese6y ago

I like Lin Clark's drawings on the Mozilla Hacks blog: https://hacks.mozilla.org/author/lclarkmozilla-com/

boltzmannbrain6y ago

These are great. Are they done by hand, or with a drawing tool?

jmheinkleOP6y ago

Thanks, this is a fantastic example.

open-source-ux6y ago

This is not quite what you asked, but still worth taking a look...

Children's publisher Usborne have made available for free some classic computer books from the 1980s aimed at kids. The books use illustrations extensively to explain concepts.

These books have been discussed a few times before here on Hacker News. Scroll down to the bottom of the link below for the free PDFs.

https://usborne.com/browse-books/features/computer-and-codin...

Don't be put off by the fact the books are aimed at kids. I'll repeat what I said about these guides in a previous Hacker News discussion: Not only are these books well written with clear, concise explanations, they are also more readable and enjoyable than many programming books published for adults today.

I've often wondered why programming explanations don't use simple graphics or diagrams to illustrate programming concepts. Anyone writing a technical guide (of any kind) would benefit from reading these as a source of ideas and inspiration.

eb0la6y ago

I really like hand-drawn diagrams from Apache Kafka and Confluent blogs and slides.

Most of them are done with a tablet without "fancy" software.

To do something similar in my presentations, I used an old DIN A4 Samsung tablet with Autodesk Sketchbook with good results.

I found very useful to be able to worki with layers, so I could draw the diagram on the top layer, and fill the shapes with colour in a layer underneath.

But the best part is I could focus on the storytelling, not in redoing again, and again the diagram in Powerpoint. With a hand drawing, you can iterate fast the concepts until you find it good enough.

kaushikt6y ago

I've been fiddling with figma lately for this purpose but I do like some of the examples here.

I will be seeking inspiration from paras Chopra's https://invertedpassion.com

Quite well done.

reverentgeek6y ago

About 4 years ago, I started creating hand-drawn illustrations for all my tech presentations and blog posts. There are lots of benefits, including being unique and engaging. I've written on the subject many times. Here's the most recent post: https://reverentgeek.com/how-to-be-a-superhuman-communicator...

Ask me anything ;)

blcArmadillo6y ago

Is it the look of hand drawn you're after or is that you feel it will be easier to just draw with your hand? If it's the former you could use something like inkscape to draw the diagrams as SVGs and then use rough.js [1] to render them in a hand drawn way.

[1] https://roughjs.com/

jmheinkleOP6y ago

Thanks for the response.

It’s primary because it’s easier and more natural.

I’m worried about seeming “unprofessional” or to a lesser extend unorthodox so I’m looking for examples and guidance.

swaggyBoatswain6y ago

John Papa draws it by hand

https://medium.com/the-node-js-collection/having-fun-with-no...

jmheinkleOP6y ago

Self comment: in addition to echeese's suggestions, found this great blog post

https://jvns.ca/teach-tech-with-cartoons/

j / k navigate · click thread line to collapse

11 comments

echeese6y ago

I like Lin Clark's drawings on the Mozilla Hacks blog: https://hacks.mozilla.org/author/lclarkmozilla-com/

boltzmannbrain6y ago

These are great. Are they done by hand, or with a drawing tool?

jmheinkleOP6y ago

Thanks, this is a fantastic example.

open-source-ux6y ago

This is not quite what you asked, but still worth taking a look...

Children's publisher Usborne have made available for free some classic computer books from the 1980s aimed at kids. The books use illustrations extensively to explain concepts.

These books have been discussed a few times before here on Hacker News. Scroll down to the bottom of the link below for the free PDFs.

https://usborne.com/browse-books/features/computer-and-codin...

eb0la6y ago

I really like hand-drawn diagrams from Apache Kafka and Confluent blogs and slides.

Most of them are done with a tablet without "fancy" software.

To do something similar in my presentations, I used an old DIN A4 Samsung tablet with Autodesk Sketchbook with good results.

I found very useful to be able to worki with layers, so I could draw the diagram on the top layer, and fill the shapes with colour in a layer underneath.

kaushikt6y ago

I've been fiddling with figma lately for this purpose but I do like some of the examples here.

I will be seeking inspiration from paras Chopra's https://invertedpassion.com

Quite well done.

reverentgeek6y ago

Ask me anything ;)

blcArmadillo6y ago

[1] https://roughjs.com/

jmheinkleOP6y ago

Thanks for the response.

It’s primary because it’s easier and more natural.

I’m worried about seeming “unprofessional” or to a lesser extend unorthodox so I’m looking for examples and guidance.