I’ve made plenty of illustrated notes for egghead courses.
On everything from Building Custom React Hooks

Building Custom React Hooks

They’ve always been artefacts made in post-production. I draw them after the course has already been planned, and the videos are all recorded. Over the last month I’ve been experimenting with a more collaborative approach.

Rather than treating our illustrations as a shiny add-on made by one person, I wanted to directly involve our course instructors and figure out how to directly pair their expertise with my visual thinking skills. So I started running visual workshopping sessions.

We hop on a Zoom call and open up a shared canvas in Miro or Excalidraw. They’re both great and do the trick for the task at hand. I recommend playing with both! We pick out a few of the toughest concepts, and begin making extremely rough diagrams. Experimental ugliness is the whole point.

We just did our first trial of this with Tomasz Lakomy’s new course on AWS Cloud Development.

Here’s Tomasz thinking very hard about API Gateways and Lambda Functions

The Process

The visuals we made during the workshopping session were mostly made of boxes and arrows and labels like this:

It’s all you really need to establish the basics. Nouns (things) are boxes, and verbs (actions and events) are arrows.

After the workshopping call I looked back over the diagrams, and sketched out an illustrated version that adds a bit more clarity and dimension to the scene:

I ran the sketch by Tomasz to make sure all the technical details were correct. Then did a final linework pass over the top to neaten everything up:

We ended up with five of these illustrations that cover all the main concepts of the course

The Whole Series

If you’re just here for all the gritty details of AWS you might want to check out the course itself. If you’re here for the visual process, I popped a few more thoughts below..

https://egghead.io/courses/build-an-app-with-the-aws-cloud-development-kit

Collaborative Minds > Beginners Mind

I may know a few things about how to visually explain ideas, but I usually know next to nothing about the topic of any given course.

There are some advantages to this. Beginners mind is a beautiful thing.

But it has it’s limitations. Because in order to visually explain something well, you need to truly understand it.

When we draw there are no vague relationships or fuzzy edges.
You have to make clear how all the parts of a system are related.
What’s above and below. What’s a container and what’s a substance.
What actions and events are happening between elements.

It requires a nuanced understanding of the material.

My old beginners notes are still useful - they make the implicit explicit. They explain concepts the expert would never think to.

But they also fall short in lots of ways. I make mistakes. I skim the surface of material. I can’t dive deep on technical details.

Collaborative workshopping gives us the best of both worlds. I still get to ask dumb questions (purposefully), like “is the React app above or below the GraphQL request?” or “does an S3 bucket have a lid?”

It’s the Socratic method for visual thinking.

Asking these odd questions helps us establish a vocabulary of shapes, sizes, colors, metaphors, and spatial relationships.

Our instructors have the deep context to answer these kind of questions well, and reason through why certain visual arrangements make more sense than others.

I’m just there to prod them in certain directions, and add a bit of polish afterwards.

We’re doing plenty more of these. I can’t wait 🤓