pbloem/former

Question about the tool used to make the figures in the blog post

Opened this issue · 2 comments

Hello, first thank you very much for the awesome post and the code. Clearly explained and illustrated.

I must say, the illustrations in the blog post are beautiful, I was wandering what tool you have used to make them.

Sorry for this unrelated question, feel free to close this issue if this is not the place to ask it.
Thanks.

Hi yassoulali,

Thanks very much! The diagrams were drawn in keynote (Apple's version of powerpoint). I mostly use it because I'm very familiar with it (I make a lot of slides), not because it has very special features. Other diagram drawing programs will probably let you do the same thing.

To be honest, I think the key to drawing an effective diagram is not the tool itself but what you bring to the tool. Off the top of my head, the following are the most important things to keep in mind:

  • Keep a consistent color scheme with maximum five basic colors
  • If you need more variety, vary the saturation of the basic color, or the brightness.
  • Give the most important parts of the drawing high contrast
  • Make things align, and try to use (multiples of) the same height and width for all rectangular elements. (Graphic designers call this using a grid)
  • Remove everything that doesn't convey information.
  • Work out the drawing with pen and paper first. Try a few different approaches.
  • Obsess over the details (for instance, I export to PDF and then convert to SVG so that the diagrams look sharp).

These are all pretty standard graphic design/user experience principles. If you read up on those and put in a little practice, the tool you use doesn't make that much difference.

Thank you very much !