DES 150 Digital Media Design I/Final Project
University of Illinois at ChicagoCollege of Architecture, Design, and the ArtsSchool of Design
DES 150Digital Media Design I
Generative & Interactive Systems
In both cases, the designer sets variables and parameters that shape iterations (possibilities).
Deciding what those variables and parameters are, then selecting, and possibly modifying,
which iterations will produce an effective artifact or series are the significant design decisions.
This concept applies to all forms of procedural thinking and iterative processes—whether or not
computers or software are involved.
UIC / School of Design DES 150 / Digital Media Design I
“In this capacity, the designer is no longer making choices about a single, final object but creating
a matrix encompassing an entire population of possible designs. This is a move from thinking
about an object to thinking about a field of infinite options. This involves searching for and exploring
a population of designs that meet certain requirements, behave in particular ways, or fit the
desires of the designer.”
Form + Code (Parametrize), Casey Reas & Chandler Williams
UIC / School of Design DES 150 / Digital Media Design I
Generative Design
Parameters and variable that define the visual possibilities of a system through iteration;
selecting and producing a meaningful artifact or series from those iterations.
Interaction Design
Parameters for viewer-participant input and visual feedback that allows “drawing” of iterations;
selecting and producing a meaningful artifact or series from those iterations.
UIC / School of Design DES 150 / Digital Media Design I
Assignment 04: Generative/Interactive Poster Series
problem: Create a successive series of 3 posters that together visually demonstrate a behavior or
movement concept from the provided list. Use any combination of line, dot, geometric forms,
or letter forms. The series should demonstrate a clear grid and successive structure. May include
black, white, grey, and one color. Each poster has a trim size of 18” x 18”
Begin with a 9 x 9 grid.
note: You do not need to fill each position on the grid in order to articulate the grid.
—
Behavior & Movement Concepts: Grow / Shrink, Expand / Contract, Advance / Recede,
Float / Drop, Cluster / Scatter, Accumulate / Disperse, Drift, Flow, Decay, Mutate, Zoom, Spin.
UIC / School of Design DES 150 / Digital Media Design I
Successive Series
UIC / School of Design DES 150 / Digital Media Design I
The series creates a successive relationship. Shared visual elements unite them.
Each change to an element happens successively. It is a gradation of compositions.
All compositions must:
_ stand on their own as well composed (rhythm, tension, & balance)
_ share a distinct visual language (the elements you used)
_ create a sense of rhythm (use extra space to create pace, not fill it up)
UIC / School of Design DES 150 / Digital Media Design I
Rhythm Tension Balance
UIC / School of Design DES 150 / Digital Media Design I
Frider Nake, 1965
UIC / School of Design DES 150 / Digital Media Design I
Hartmut Bohn
UIC / School of Design DES 150 / Digital Media Design I
Hartmut Bohn
UIC / School of Design DES 150 / Digital Media Design I
Frances Hewitt, 1967–68
UIC / School of Design DES 150 / Digital Media Design I
Hans Neuburg, 1965
UIC / School of Design DES 150 / Digital Media Design I
Bridget Riley
UIC / School of Design DES 150 / Digital Media Design I
Anni Albers
UIC / School of Design DES 150 / Digital Media Design I
Victor Vasarley
UIC / School of Design DES 150 / Digital Media Design I
Dieter Roth
UIC / School of Design DES 150 / Digital Media Design I
Max Bill
UIC / School of Design DES 150 / Digital Media Design I
Mathis Goeritz
UIC / School of Design DES 150 / Digital Media Design I
Hansjörg Mayer
UIC / School of Design DES 150 / Digital Media Design I
Hansjörg Mayer
UIC / School of Design DES 150 / Digital Media Design I
Manfred Mohr
UIC / School of Design DES 150 / Digital Media Design I
Josef Albers
UIC / School of Design DES 150 / Digital Media Design I
Josef Albers
UIC / School of Design DES 150 / Digital Media Design I
Josef Albers
UIC / School of Design DES 150 / Digital Media Design I
Andreas Gottschalk
UIC / School of Design DES 150 / Digital Media Design I
Andreas Gottschalk
UIC / School of Design DES 150 / Digital Media Design I
Andreas Gottschalk
UIC / School of Design DES 150 / Digital Media Design I
Variables
Conditionals (if/then)
Loops
Nested Loops
Graphic Primitives
(line, ellipse, rectangle, triangle...)
Vector Shapes (svg file)
random
mouseX, mouseY,
dist
gradation (position & size)
mousePressed
color & transparency (alhpa)
PShape
modulo*
UIC / School of Design DES 150 / Digital Media Design I
Generative Design
Parameters and variable that define the visual possibilities of a system through iteration;
selecting and producing a meaningful artifact or series from those iterations.
Interaction Design
Parameters for viewer-participant input and visual feedback that allows “drawing” of iterations;
selecting and producing a meaningful artifact or series from those iterations.
UIC / School of Design DES 150 / Digital Media Design I
Behaviors
Grow / Shrink
Expand / Contract
Advance / Recede
Float / Drop
Cluster / Scatter
Accumulate / Disperse
Drift
Flow
Decay
Mutate
Zoom
Spin
Materials
lines
ellipses/circles
recetangles/squares
triangles
letters
UIC / School of Design DES 150 / Digital Media Design I
Slightly different rules may apply.
Examples
UIC / School of Design DES 150 / Digital Media Design I
26Assignment 04Composition 1
Instructions for Drawings Sol
LeWitt
Grow
27Assignment 04Composition 2
Instructions for Drawings Sol
LeWitt
28Assignment 04Composition 3
Instructions for Drawings Sol
LeWitt
UIC / School of Design DES 150 / Digital Media Design I
26
LeWitt
Sol
Instructions
Drawings
for
Assignment 04Composition 1
Cluster
27
Sol
LeWitt
Instructions
Drawings
for
Assignment 04Composition 2
28
LeWitt
Sol
Instructions
Drawings
for
Assignment 04Composition 3
UIC / School of Design DES 150 / Digital Media Design I
26Sol
Instructionsfor Drawings
LeWitt
Assignment 04Composition 1
Accumulate
27
Instructionsfor Drawings
Sol LeWitt
Assignment 04Composition 2
28Sol
Instructionsfor Drawings
LeWitt
Assignment 04Composition 3
UIC / School of Design DES 150 / Digital Media Design I
26
Instructions
for
Drawings
Sol LeWitt
Assignment 04Composition 1
Expand
27
Instructions
for
Drawings
Sol LeWitt
Assignment 04Composition 2
28
Instructions
for
Drawings
Sol LeWitt
Assignment 04Composition 3
UIC / School of Design DES 150 / Digital Media Design I
26
Instructions
for
Drawing
LeWittSol
Assignment 04Composition 1
Expand
27
Instructions
for
Drawing
LeWittSol
Assignment 04Composition 2
28
Instructions
for
Drawing
LeWittSol
Assignment 04Composition 3
UIC / School of Design DES 150 / Digital Media Design I
26
Sol Lewitt
InstructionsFor
Drawing
Assignment 04Composition 1
Expand / Float
27
Sol Lewitt
InstructionsFor
Drawing
Assignment 04Composition 2
28
Sol Lewitt
InstructionsFor
Drawing
Assignment 04Composition 3
UIC / School of Design DES 150 / Digital Media Design I
26
Sol LeWitt Instructions for Drawings
Assignment 04Composition 1
Drift
27
Sol LeWitt Instructions for Drawings
Assignment 04Composition 2
28
Sol LeWitt Instructions for Drawings
Assignment 04Composition 3
UIC / School of Design DES 150 / Digital Media Design I
26
Instructions for Drawings
Sol LeWitt
Assignment 04Composition 1
Drop
27
Instructions for Drawings
Sol LeWitt
Assignment 04Composition 2
28
Instructions for Drawings
Sol LeWitt
Assignment 04Composition 3
UIC / School of Design DES 150 / Digital Media Design I
26Assignment 04Composition 1
Sol LeWitt
Drawings
Instructions
for
Flow / Drift
27Assignment 04Composition 2
Drawings
Sol LeWitt
Instructions
for
28Assignment 04Composition 3
Sol LeWitt
Drawings
Instructions
for
UIC / School of Design DES 150 / Digital Media Design I
Questions?
UIC / School of Design DES 150 / Digital Media Design I