Graphic Design: The New Basics: Second Edition, Revised and Expanded (2015)
Rules and Randomness
The idea becomes a machine that makes the art. Sol LeWitt
Designers create rules as well as finished pieces. A magazine designer, for example, works with a grid and a typographic hierarchy that is interpreted in different ways, page after page, issue after issue. If the rules are well planned, other designers will be able to interpret them to produce their own unique and unexpected layouts. Rules create a framework for design without determining the end results.
Style sheets employed in print and web publishing (CSS) are rules for displaying the different parts of a document. By adjusting a style sheet, the designer can change the appearance of an entire book or website. Style sheets are used to reconfigure a single body of content for output in different media, from printed pages to the screen of a mobile phone.
Rules can be used to generate form as well as organize content. In the 1920s, the Bauhaus artist and designer László Moholy-Nagy created a painting by telephoning a set of instructions to a sign painter. In the 1960s, the minimalist artist Sol LeWitt created drawings based on simple instructions; the drawings could be executed on a wall or other surface anywhere in the world by following the directions. Complex webs of lines often resulted from seemingly simple verbal instructions.
Designers produce rules in computer code as well as natural language. C. E. B. Reas, who co-authored the software language Processing, creates rich digital drawings and interactive works that evolve from instructions and variables. Reas alters the outcome by changing the variables. He explains, “Sometimes I set strict rules, follow them, and then observe the results. More frequently, I begin with a core software behavior, implement it, and then observe the results. I then allow the piece to flow intuitively from there.”1 Reas and other contemporary artists are using software as a medium unto itself rather than as a tool supporting the design process.
Designing rules and instructions is an intrinsic part of the design process. Increasingly, designers are asked to create systems that other people will implement and that will change over time. This chapter looks at ways to use rule-based processes to generate unexpected visual results.
Cell Phone Symphony In the project shown here, students were given a list of phone numbers from which to generate visual imagery for a poster. The posters promote a “cell phone symphony,” featuring music composed via interaction among the audience’s cell phones.
Each poster suggests auditory experience as well as ideas of social and technological interaction. The students took numerous different approaches, from turning each phone number into a linear graph to using the digits to set the size and color of objects in a grid.
Designing the system is part of the creative process. The visual results have an organic quality that comes from random input to the system. The designer controls and manipulates the system itself rather than the final outcome. Graphic Design II. Ellen Lupton, faculty.
Numbers are replaced with icons from different symbol fonts. Marleen Kuijf.
Strange hieroglyphs are created by doubling and flipping each numeral. Katie Evans.
Numbers are used to set the color and size of dots on a grid. Hayley Griffin.
Each ten-digit number is a linear graph. Martina Novakova.
Each phone number is a twig that sprouts marks for its digits. Martina Novakova.
Computer code is used to create a spiraling path for each number. Jonnie Hallman.
Audio Waves Captured from an audio editing program, the lines represent different voices speaking a list of phone numbers. Sisi Recht.
Photoshop Actions To create this series of posters, the designer recorded actions in Photoshop. Each time the action runs using different parameters, the system generates different results. Lolo Zhang, DesignLanguage Studio. Kiel Mutschelknaus, faculty.
Motion Prompt How can time and motion be represented on a flat surface? Designers created a series of “gesture studies” in InDesign based on provided templates and using fifty-five frames from an animated shapes project they were already working on. Each template contained a prompt (such as morph, deface, contain, clone, pulverize), a series of constraints (such as copy, paste, cut, and position), and a time limit (one minute to several minutes). Each designer sought to capture the spirit of the prompt within the set constraints. They were asked to embrace motion graphics software not just as a way to generate animations, but as a way to generate material for developing two-dimensional imagery. Graphic Design III. Jason Gottleib and Kristian Bjørnard, faculty.
Moultrie Tisdale
Rene Arvizu
Michael Auer
Nick Fogarty
Jeff Mills
Haeun Ro
Repeat and Rotate
Repeating and rotating forms are universal principles of pattern design. The designs shown here were created in the Processing software language. By altering the input to a set of digital instructions, the designer can quickly see numerous variations of a single design. Changing the typeface, type size, type alignment, color, transparency, and the number and degree of rotations yields different results.
for(int i=0;i<12;i++){
fill(0,0,0);
textAlign(CENTER);
pushMatrix();
rotate(PI*i/6);
text(“F”,0,0);
popMatrix();
}
}
Similar effects can be achieved by rotating and repeating characters in standard graphics programs such as Illustrator. Working in Processing or other code languages allows the designer to test and manipulate different variables while grasping the logic and mathematics behind pattern design.
Yeohyun Ahn
Giulia Marconi
Giulia Marconi
Rotated Letterforms A simple code structure is used to generate designs with surprising intricacy. New designs can be quickly tested by changing the variables. Graphic Design II. Ellen Lupton and Yeohyun Ahn, faculty.
Jonnie Hallman
Jessica Till
Shin Hyung Choi
Adam Okrasinski
Repeat and Random One or two simple elements are repeated using a “for” statement. The transparency, size, or x and y coordinates are randomized to create a sense of natural motion. Graphic Design II. Ellen Lupton and Yeohyun Ahn, faculty.
Abstract Alphabet The Latin alphabet is an inherently abstract code. To create this minimal typeface, the designer replaced letterforms with dots of varying size. Although rendered illegible, the resulting texts maintain a familiar sense of rhythm. Kirby Matherne, Design Language Studio. Kiel Mutschelknaus, faculty.
Museum of Insider Art To create a visual brand for an imaginary museum, the designer created a code in Processing that converts alphabetic characters into abstract shapes. The shapes become a private code. Wenjie Lu, MFA Studio.
1. C. E. B. Reas, “Process/Drawing,” (Statement for the exhibition at the bitforms gallery, New York, March 4-April 2, 2005).