Parametric Label Design
Tröegs redesign of their Scratch Beer Series
The objective of this project was to create a design system using the JavaScript library p5.js. This created system would produce at least 30 different designs, controlled by the variables and parameters that I define. The challenge was to incorporate large amounts of data using a CSV file and choose a pre-existing company that my system could create designs for. I chose the independent brewing company Tröegs. The main beer design label for the company is fantastic, and honestly, I wouldn't want to change their hand-drawn and unique approach to their main labels. However, they do have an experimental beer project called "Scratch Beer", where they test out different beer recipes weekly in their brewery with their local customers. Some of these batches are successful, and others fail, nonetheless it is an interesting platform which allows them to experiment, create, and have fun. However, because some of these creations only last for a week, they have no identifiable design, only a labeled "scratch number" (currently on #361).
My goal was to successfully code a program that would create a unique design for each scratch beer using the different variables such as ABV, IBU, Yeast, Hops, and Malt. This program was designed mainly for the brewery use, so when they created a new beer, they could just input the ingredients used and the stats into the program, and a design would be created at the push of a button. I wanted the feel of the designs to still capture the main essence of their inviting and hand-drawn brand identity, and the design elements be reflective of what was inside the bottle.
Designed labels using my created program based off of each beers variables
(starting from left to right) #204 Grapefruit IPA, #255 Red Steam Common Ale,
#203 Sour Wheat Ale Gose, #400 my own random variables, #353 Brut IPA.
Instead of coding everything out right off the bat, I jumped into Illustrator and tried to find a general idea of how my design theory would play out. I spent a good amount of time experimenting with how the labels would look, and as you can see I went through various stages of revisions.
(left) first draft (middle) second revision (right) third revision
Final Design Theory - ready to move on to coding it!
Each shape will stand for the different beer variables listed. Each shape was coded out with p5.js.
code experimentation with spirals and shapes. Each shape will be moved based off the variables or randomly.
Examples of completed code
Completed interface and finished code!
A short video showing how this program works!
Final deliverables of various scratch beer labels
Printed labels with Tröegs iconic logo and bottle
Cheers!
