Lecture Notes
Design can be thought of as a “visual language”. The Elements and Principles of design were created to help form this language. Traditionally they are thought of in terms of two-dimensional design, but they also apply to three-dimensional design. And, until you start working with 3-D projected virtual reality, you are ultimately creating a 2-D experience for the viewer (rendered movie, web page, or game display screen).
Elements of Design: Line, Shape, Form, Space, Value, Color & Texture
Principles of Design: Contrast, Unity; Dominance, Balance; Movement, Pattern, Rhythm
Elements |
The visual vocabulary used to express contrast, unity, dominance, balance, movement, pattern and rhythm. Good or bad - all designs will contain most (if not all) of the seven elements of design. |
Line (actual & perceptual)
 |
 |
 |
 |
| Gericault_raft-of-the-medusa_1819_COLOR |
Gericault_raft-of-the-medusa_1819_VALUE |
Lines - major implied & actual lines |
Lines - secondary lines |
Shape (2D: circle, square, equilateral triangle - silhouette)
Form - 3D (sphere, cube, equilateral-3-sided pyramid)
Sphere |
Cube |
Equilateral Pyramid |
|
|
|
soft, round, friendly, cute, comical, global, sweeping, unbounded, non-directional, ditzy |
strong, sturdy, authoritarian, rigid, conservative, conventional, stuffy, straight, boring |
angular, pointy, pokey, sharp, dangerous, aggressive, arrow-like, directional, fast |
|
|
|
|
Volvo:
boxy, but good |
Batmovile:
fast & dangerous |
Space (Deep [3D: distant, disconnected] vs. Flat [2D: close, connected])
Compare the relationship of the two people at the train station in each image.
 |
 |
Deep Space (sitting in different depth planes; in front of & behind -- lots of differences or CONTRAST)
- overlapping shapes/volumes
- different silhouettes
- different levels
- different sizes
- different amount of atmosphere (foggy/hazy)
- different depth of field focus (fuzzy)
|
Flat Space (sittig in the same depth plane; side by side -- lots of sameness or UNITY)
- no overlapping shapes/volumes
- same silhouettes
- same level
- same size
- no atmosphere (clear)
- no depth of field focus (sharp)
|
-- THE NEXT 3 ELEMENTS ARE ONLY USED WITH LIGHTING AND SURFACING --
Value (lightness and darkness)
 |
 |
Contrasting Value
Values sit appart within a grayscale; full range from back to white |
Unity in Value
gray
& gray |
Color (hue and saturation)
Expressing SAMENESS through line (curved | curved), line (thick | thick), line (broken | broken), shape (round | round), form (soft | soft), space (deep | deep), value (light | light), color saturation (intense | subdued) color hue (red-warm | red-warm), texture (smooth-simple | smooth-simple)
 |
 |
 |
Contrasting Color-Hue
blue & red; Cool | Warm |
Contrasting Color-Hue
blue & red; Cool | Warm |
Unity in Color-Hue
cyan
& blue; Cool | Cool |
Contrasting Color-Saturation
low, subdued blue | high, intense red |
Unity in Color-Saturation
low, subdued blue & red |
Unity in Color-Saturation
high, intense cyan | high, intense blue |
Texture (smooth and rough)
RMB (Right Mouse Button) on the image and choose "View Image" to see it at its original size
 |
 |
| Smooth (Polished) Wood Table |
Rough (Hewn) Wood Table |
|
Principles |
The “visual grammar” used to create strong visual language. |
Contrast (differences)
 |
 |
| Russel = Round; Egg-like | Carl = Boxy & Round |
Russel = ROUND; Egg-like | Carl = Rounded BOXES |
Unity (same)
 |
 |
 |
| Mushroom group |
NYC Brownstone apartments |
US Congress Building |
Dominance (greater than)
 |
 |
 |
| Star Trek 2009: Narada chasing Enterprise |
Narada
Giant | dark | jagged-knife-like | lots of parts |
Enterprise
Small | white | smooth-rounded | 3 parts |
Balance (equality)
Pattern (repeating)
 |
| Empire Strikes Back | Balance using Value |
Movement (direction)
 |
| Empire Strikes Back | Movement |
Rhythm (sequences)
 |
| Empire Strikes Back | Rhythm |
|
|
