Origin

The old edition was published in 2012 and used Processing(Java) as the programming language. After 12 years, Daniel Shiffman rewrote the book in p5.js, with modified and new chapters. On one hand, he needed a modern and welcoming design for the printed book and the web version. And on the other, these designs have to be realized through code, an automated workflow that dynamically updates content from Notion, as opposed to the conventional way of book design.

My Role

As the designer engineer in the team, I provided first round of design mockups created in Adobe InDesign, Illustrator and Figma to gather feedback and refine. Once we have a winner, we implement the design through code, both in the PDF and on the website. I worked closely with a full-stack developer, to ensure visual coherence, navigate through the repository and refine CSS code. 

Process

For Coding Train, they value friendliness, accessibility, and open source. Our goal is to make education and creative coding available to as many people as possible. 

On one hand, there were many efforts that went into design details to achieve this. We worked with an illustrator, Zannah Marsh, to integrate delightful graphics and diagrams in the book. Additionally, we incorporated small emojis, friendly font, colors, and rounded corners of text boxes to further enhance the playfullness. On the website, the interactivity is one of the biggest feature - where the examples sketches run live, the exercise solutions be interactive, and attaching video tutorials along side the text copy. We provide all sorts of content formats so that different types of learners can pick a medium that suits them best. 

On the other hand, to democratize education and make this resource available to the public, this project lives in a public GitHub repo with documentations, so that this model can be adapted by any other educators.