Programming Design Systems

Programming Design Systems is a course focused on the intersection between graphic design and code. Class time is divided between design topics like color, grid systems, and typography, and more computational topics like randomization, repetition, transformation and generative form. The students work to write software that abstract these design theories into code, and show the work in class for design critique.

Weekly readings include relevant writings from the history of graphic design, articles from the history of computation, and everything in between. The class aims not only to teach the students how to create designs via code, but also to have something interesting to say about it.

Teacher Info

Introduction

Until recently, the term Graphic Designer was used to describe artists firmly rooted in the fine arts. Aspiring design students graduated with MFA degrees, and their curriculums were based on traditions taught by painting, sculpture and architecture. Paul Rand once famously said: "It’s important to use your hands. This is what distinguishes you from a cow or a computer operator". At best, this teaches the designer not to be dictated by their given tool. At worst, the designer is institutionalized to think of themselves as thinkers: the direct opposite to a technical person.

This has obviously changed with the advent of computers (and the field of web design in particular), but not to the degree that one would expect. Despite recent efforts in defining digital-first design vocabularies, like Google’s Material Design, the legacy of the printed page is still omnipresent. Even the most adept companies are organized around principles inherited from desktop publishing, and, when the lines are drawn, we still have separate design and engineering departments. Products start as static layouts in the former and become dynamic implementations in the latter. Designers use tools modeled after manual processes that came way before the computer while engineers work in purely text-based environments. I believe this approach to design will change in a fundamental way and, like Donald Knuth, I’ll call this the transition from design to meta-design.

So what is meta-design? In a traditional design practice, the designer works directly on a design product. Be it a logo, website, or a set of posters, the designer is the instrument to produce the final artifact. A meta-designer works to distill this instrumentation into a design system, often written in software, that can create the final artifact. Instead of drawing it manually, she is programming the system to draw it. These systems can then be used within different contexts to generate a range of design products without much effort.

Read more

Week 1: Hello World

Beauty is a function, after all, of any relevant visual message. Just as prose can be dull and straight-forward or well edited and lyrical, so too can a utilitarian object be designed to be more than just simply what it is.

Timothy Samara, Design Elements

In this class we'll introduce ourselves, and talk a little bit about the class, graphic design and computation. Please read these texts before coming to the first class.

Class Overview

Assignment for next week

Week 2: Form 1

Without aesthetic, design is either the humdrum repetition of familiar cliches or a wild scramble for novelty. Without the aesthetic, the computer is but a mindless speed machine, producing effects without substance. Form without relevant content, or content without meaningful form.

Paul Rand

This week we'll take our first step into design theory by looking at basic shapes. We'll talk about techniques for creating shapes in P5.js, look at examples from the history of graphic design, and introduce basic ways of using randomization and repetition.

Class Overview

Assignment for next week

Week 3: Form 2

This week we'll look at more complex shapes, and how you can use algorithms to generate a multitude of expressions.

Class Overview

Assignment for next week

Week 4: Color

In this class we'll dive into color theory and look at color handling in Processing. We'll talk about the history of color, the difference between RGB and HSB, and investigate how to generate color schemes in code.

Assignment for next week

Week 5: Typography

To create a typeface that is easily malleable in the computational medium, the constituent shapes must be reduced to compact numerical forms.

John Maeda

This week we'll look at typography. We'll go through the basic unit measurement that make up a typeface, and how we can manipulate these in P5.js.

Class Overview

Assignment for next week

Week 6: Grid Systems

A grid system is not just a set of rules to follow... but it's also a set of rules to play off of–to break, even. Given the right grid – the right system of constraints – very good designers can create solutions that are both orderly and unexpected.

Khoi Vinh, New York Times

In this class we'll look at grid systems and how to use them as guiding constraints for your designs. We'll go through different types of grids, implement these in code, and see how it translates to the world of computational design.

Class Overview

Assignment for next week

For next week you'll design a cover for a book of your choice. You can use form, color and typography, but not images. The main constraint is that you need to use a grid system to place elements on the page.

The most important thing is that you think in systems. What happens if you randomize the grid? What happens when you rotate it? What happens when you overlay multiple grids? Come up with an idea first, and then implement it step by step. Think about all the things we've learned and bring to class a simple design your book cover.

To make a well-designed logo requires skills in form, color, type and grid. We'll look at everything from traditional logos to organic, computational logos, and we'll go through different techniques for making generative logos in Processing. This week's assignment is a 1 week midterm project.

Class Overview

Assignment for next week

For next week write a sketch that outputs a logo for a specific entity, that being a person, group, company, etc. If in doubt, design a logo for IMA. The logo needs to be a dynamic design system. This doesn't mean that it needs to be completely random every time you run the sketch, but it needs to be able to have a range of expressions that can easily be tweaked by changing the variables in the sketch.

Bring to class a design with the same logo show in 3 different variations. For example, if you're designing a logo for IMA, you could have a variation for IMA, one for the IMA Show, etc. Or you could a different logo for 3 different IMA show years. These would all look different, but be the output of the same code. Think about form, color, typography and grids before you start coding, and make a strategy. Think. Keep it simple. You only have one week. This is a great time to find something in the real world that needs a redesign (your friends' band, a festival, etc.

Week 8: Midterm Presentations

This week will be midterm presentations.

Assignment for next week

Week 9: Randomization

Randomization is about letting the computer choose for us. This week we'll look at ways to create programs that create unique graphics. We'll look at basic randomness, Perlin noise, and how a simple thing like randomness can help you create unexpected things.

Class Overview

Assignment for next week

For next week pick an existing piece of visual art (painting, ad, etc) that uses randomization as a key design principle, and recreate it in code. If in doubt, get inspired by some of these famous Olivetti posters. You should use at least some randomization concepts from this week's lecture in your sketch, in order to make the sketch dynamic. This means that it needs to look different every time it runs, but still have the visual style of the original work. Come to class prepared to show your design + to share how your sketch uses randomization. I'm looking for the simplest possible implementation, which means that it's up to you to set goals that are simple enough for you have time to code the assignment.

Week 10: Repetition

Repetition is highly computational, still human beings have created patterns as long as we have known creative expression. In this class we'll focus on the use of patterns in graphic design, and look at different repetition techniques and ways of creating custom patterns.

Class Overview

Assignment for next week

From now on and until the end of the semester, we will be working on final projects. For next week, pick a real-world design problem that you will tackle for your final. This can be an event poster, an album cover, a logo re-design, a full company identity, a book cover, or something else completely. It's all up to you, and there are no constraints. Make a short presentation about your final project that speaks to:

The presentation can only have 3 slides, with answers to these questions. You do not need to actually code or design anything. Remember, you cannot change your final project once you've given this presentation.

Week 11: Transformation

How can we manipulate pixels in code? Can we still preserve meaning while creating beauty with algorithms? This week we'll look at different techniques for manipulating pixel arrays. We will look at examples of transformation in graphic design even before the computer, compare these to recent examples of transformation in graphic design products, and go through different image filter algorithms.

Class Overview

Assignment for next week

For next week, I want you to approach your final as a one-week project. Come to class with a design that implements your final idea, and be ready to discuss what works or doesn't work in your implementation.

Week 12: Motion

Can a still image have movement? In this class we'll experiment with animation and movement in graphic design. We'll see what happens when we introduce physics in our graphic designs. Like a photograph is a snapshot of a moving world, so too can a desgins be a snapshot of a moving virtual world.

Class Overview

Assignment for next week

Finals!

Week 13: Work on finals

Today we'll just be working on finals.

Week 14: Final Presentations

I will invite critics from the design, coding, and curating world, and you will each do a 6-8 minute presentation, followed by a short discussion.

These books might come in handy before, during or after the semester. You will not need to purchase or read these, but all of them are highly recommended reading.

Studios / People