Introduction

“We are now in transition from an object-oriented to a systems-oriented culture. Here change emanates, not from things, but from the way things are done.”

Jack Burnham (1968), Systems Esthetics

If I asked you to define the role of a graphic designer, what would it be? The answers to this question can vary widely, but my definition would be something like this: A graphic designer is someone who communicates a piece of content in shape and color. This work can take many forms, but up until recently, it mainly consisted of printed products in the form of posters, business cards, book covers, etc.

Today we find ourselves facing new challenges, not because this definition of design has changed much, but because the products we're required to build have changed. We now spend a majority of our time looking at screens instead of paper, and this has created a great need for designers who understand how to design for digital devices. But a digital product is not the same as a printed product. Digital products are displayed on screens of different sizes and with dynamic content. Digital products allow users to interact with their content, and take advantage of motion and animation. Furthermore, digital products often have temporal logic where a linear narrative is replaced by a set of complex states and transitions. All in all, digital products all share a common trait: They are created with programming languages.

For a field rooted in the fine arts, this has been a difficult transition. Many graphic design schools have resorted to teaching a waterfall philosophy where students are positioned to think of themselves as creatives who come up with ideas for others to build. After all, this is easier than adopting a whole new set of processes. However, the fundamental problem with this approach is that static design tools like Illustrator and Sketch fail at prototyping digital systems. Even in web design where the page metaphor is still prevalent, it seems limiting to define the design to just the styles of the page. Is google.com a good website because of the look of the search field? The traditions from the fine arts is a great positive, and this very book builds upon that foundation. However, there is a century-long bond between the field of design and new advances in technology, and if graphic designers do not become fluent in this new digital reality, they will become irrelevant. We now have the ability to write code that produces beautiful designs, and the designer of tomorrow will have to understand how to deliver on that promise.

This book is the result of a simple question: What happens when we try to redefine the graphic design curriculum using a programming language as the tool for the designer? There are several reasons why this is a powerful concept. First of all, graphic designers have always used systems in their work. We use grid systems to balance our layouts and color circles to pick colors with proper distance to each other. History has shown us that systems can cure the fear of the blank canvas, and it is a powerful concept to encode these ideas into actual software. Second, code enables designers to do things they couldn't do before. Variations of a design can be tested much faster during the prototyping phase, and randomization can be used to reveal designs that the designer would never have created with a pencil. Third, it enables designers to create dynamic systems that can change their designs based on time, place, or use. Throwing a design over the wall for production is a bad legacy of the printed page, and there is no reason for the design process to end with the birth of a product.

This book is structured like an introductory text about graphic design, focusing on the elements of visual design and how they relate to algorithmic design. The book is written for designers wanting to become better programmers and vice versa. As you go through the text, you will notice that it starts with the very basics. The code will be simple and the exercises will be very constrained. If this feels simplistic, keep reading. We will soon enough touch upon more challenging themes, but these basic concepts lay the foundation for some of the more complex ideas. At the end of the book, it is my hope that you have learned two new skills: How to use code to create new and interesting graphic designs, and how to evaluate whether these designs can be considered successful.

I have decided to use the P5.js JavaScript library for all examples in the book. It has proven to be a great programming environment for beginners while also being powerful enough for advanced users. I am aware that it is impossible to choose a single programming language that will work for everyone, and readers will probably need to port the ideas from this book to other languages and frameworks depending on the nature of specific projects. I have therefore tried to write the text to be as general as possible. It is also important to note that this is not a book about web design. Although the examples can be embedded on any web page, the techniques can be applied to both digital and print work. In fact, I have seen my students create a diverse range of designs over the years, including projects in sculpture, painting, fashion, photography, game design, web design, and printed matter.

The book is written for readers with an introductory knowledge of programming in JavaScript, which means that little time will be devoted to explaining concepts like variables, functions, and loops. For this audience, I highly recommend Daniel Shiffman's Coding Rainbow YouTube channel, where Dan does a much better job explaining these concepts than I ever could. These videos will also introduce the basic concepts of programming in P5.

I am not the first author to write about systems in graphic design, and this book uses ideas from many incredible authors who are too numerous to mention here. I am not the first to write about code and graphic design either, but I've been frustrated by books on the subject that seem to fall in two categories: Those with a focus on code and generative design that do not teach graphic design principles at all, and those celebrating computational design as a spectacle without identifying how projects are made or why they are successful. There is a need for educational material that teaches the fundamentals of graphic design in a modern way, especially if it also gives students mental models for critiquing digital design projects.

I have chosen to publish this book for free online without a publisher. The main reason for this is freedom. It allows me to write and design the type of book that I would read. This is reflected in the structure of the book, which consists of many shorter chapters that are easier to read on the web and straightforward for teachers to remix for use in classrooms (which is completely legal because of the Creative Commons license). I will be writing these chapters in a nonlinear fashion, working on topics that I find the most interesting at a given time. There is no concrete deadline for the finished book, although I am pursuing it as a full-time endeavor. The source code for the book is available on GitHub, and I encourage all readers to submit issues or pull requests with edits. To stay up to date with the progress of the book, you can subscribe to the newsletter.

I would like to thank a group of people without whom this book would never have existed. When I moved to New York in 2009 to study at The Interactive Telecommunications Program at New York University, I only had a vague notion of wanting to work in the intersection between art and code. As a Flash developer who primarily built banners for advertising, the two years at ITP completely changed my thinking. I would like to thank Dan O'Sullivan for his enormous support for this project, which started as a class at ITP, and is currently growing into a book while I'm a research resident there. This book would not exist without the help and mentorship of Daniel Shiffman, whose work has inspired thousands of students to learn code. I want to thank Stewart Smith, who taught the Visualizing Data class where the early ideas for this book began. My thanks go to all of the ITP faculty and alumni who helped shape these ideas, including Patrick Hebron, Greg Borenstein, Clay Shirky, Danny Rozin, Tom Igoe, David Nolen, Gabe Barcia-Colombo, and George Agudow. A special thanks go to Lauren McCarthy, the original author of P5.js, and to Casey Reas and Ben Fry for their work on Processing. I want to thank Chandler Abraham for his detailed edits in the chapter on color spaces, as well as Claire Kearney-Volpe for answering my numerous questions about accessibility. Now, let's begin.