CODING TRAIN | The Nature of Code

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

In this project, we value friendliness, accessibility, and open source. Our goal is to make education and creative coding available to as many people as possible. 

To achieve friendliness and accessibility, there were many efforts that went into design details. 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 main features - not only does the website has to meet accessibility standards, we provided various media types to help with all kinds of learners, ie. video, interactive exercises, live sketches, text. 

The book is not only a p5.js tutorial on physic simulations, but also an open source project to help educators build tutorial books with accessibility. Not only does the project lives in a public GitHub repository with documentations, we also integrated other open source libraries as technical support, such as magicbook.js, OpenMoji, etc.