CP_Banner.png

Computational Posters

Zach Bachiri is an interaction designer on a mission to create social change through design and technology.

Computational Poster System


Context

Computational Design Thinking, 2 weeks

Team Members

Individual Project

Tools

Javascript, Basil.js, Indesign

poster mockup

 
 

During my Computational Design Thinking course at Carnegie Mellon, we explored a computational design process. We integrated analytical and procedural thinking in the making of visual systems. Through exploration of form through data and code, I completed various projects employing this process. For my final project, I generated a series of concert posters for Courtney Barnett, using data from the cities of the tour and from her website. The final code can be found on my Github.

 
 
 

Computational Design Process

Working within a computational process, the development of my design concept and the way I leveraged data worked hand in hand. I was first inspired by a data set on Courtney Barnett’s website, where fans can tell her how they “really feel“ (a play on her album title). I believed incorporating not only this text, but also using the sentiment as a design input would create an interesting space to explore.

website data source

I also wanted to incorporate data from the city of each poster as a way of creating variety from city to city. I grabbed information about population, land area, density, and weather. I began to explore various forms through scripting in Indesign, specifically looking to the relationship between image and typography. Initially working on a grid, I experimented with layering text over image, and offsetting the image based on text sentiment to reflect the intensity of the content in the visual form. Ultimately I moved away from the strict grid and created rows that rotate based on text sentiment, which I believe allows for more legibility of both the text and image, while keeping the intensity of the image manipulation.

 

form exploration

 
 

Final Series

After refining my concept through numerous iterations, I created a series of 9 posters, representing 9 different shows from Courtney Barnett’s Fall 2018 tour. The final series uses data in the following way: population density determines row density, message sentiment determines row rotation and typographic skew, and the city’s weather determines the background color from an predefined array of colors on a red-to-blue gradient.

 

basil.js script

script running in Indesign

 

Boston

Brooklyn

Chicago

Los Angeles

Nashville

Philadelphia

Pittsburgh

Portland

San Diego

 
 

Reflections

As I reflect on this project, I think about the ways in which a computational process differs from a traditional design process and what it affords. And while it takes some practice to get used to, and has a high barrier of entry (knowing how to code), I believe a computational process has a place in the future communication design, and potentially further. Here a some big takeaways I’ve identified:

  1. Due to the fact that design happens in an automated way, a computational process allows for quick, numerous iteration. This iteration allows new form to be quickly explored in a way that would have taken far too long manually to be feasible.

  2. A computational process also forces a designer to consider a wide range of output. Since data is determining the form of visual elements, it is key to consider the range of all possible outputs, whether they are infinite or discrete, and when to introduce randomness. And this also helps the designer better consider the connection between form and content.

  3. And finally, a computational process is great for creating visual systems, but I wonder how computation can be better integrated into interaction design processes. How can the interfaces we use be dynamic and responsive to various forms of data input, and how integrate data and code into the design of those systems? This is something I hope to continue exploring as I develop my own practice further.