ACC - MAIN PAGE | VISCOM HOME | COMPUTER ANIMATION - SARA FARR

Elements & Principles of Design: the "short" list

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

VW Bug:
cute & friendly

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)

Empire Strikes Back | Balance using Value Empire Strikes Back | Balance using Numbers

Empire Strikes Back | Balance using Size & Numbers & Value

Pattern (repeating)

Empire Strikes Back | Balance using Value

Movement (direction)

Empire Strikes Back | Movement

Rhythm (sequences)

Empire Strikes Back | Rhythm