Composition
The invisible architecture that makes the eye move, linger, and return
The Golden Ratio
φ = 1.618… is the ratio where the whole is to the larger part as the larger is to the smaller. It appears in nautilus shells, flower spirals, and the proportions of classical art. Whether its perceptual primacy is cultural or universal remains debated — but its compositional utility is unquestioned.
φ = 1.6180…
The golden ratio as a proportion: a/b = (a+b)/a. Irrationally beautiful — its continued fraction is [1;1,1,1,…].
Fibonacci Sequence
1, 1, 2, 3, 5, 8, 13, 21… Adjacent ratios converge on φ. Sunflower heads pack seeds in 34/55 spiral arms.
Golden Rectangle
A rectangle whose sides are in ratio 1:φ. Remove a square → another golden rectangle. Infinite recursive subdivision.
In Practice
Photographers and designers use the ratio to place subjects: horizon at 0.618, subject at 0.382 — close to, but not identical with, rule of thirds.
Rule of Thirds
Divide the frame into a 3×3 grid. Place subjects and horizons along the lines; place key points of interest at the four intersections (power points). Placement away from center creates dynamic tension and visual movement the eye must resolve.
Power Points
The four intersections of thirds lines attract maximum visual weight. A subject placed here reads as intentional and grounded.
Horizon Placement
Landscape photographers place the horizon at the upper or lower third — rarely centered — to emphasize sky or ground.
Eye-Line Rule
In portrait composition, the subject's eyes typically fall near the upper-third line, creating natural headroom.
Breaking the Rule
Centering a subject creates isolation, confrontation, or sacred stillness. Break the rule deliberately, not accidentally.
Color Harmony in Composition
Color weight directs the eye as powerfully as shape. A small patch of saturated crimson will anchor a large field of muted ochre. Color temperature creates depth: warm colors advance, cool recede. Complementary tensions create vibration; analogous schemes create unity.
Simultaneous Contrast
Adjacent colors shift each other's perceived hue, value, and saturation. Grey appears warm on a cool ground, cool on a warm ground.
Color Weight
Warm, saturated, dark colors feel heavier than cool, desaturated, light ones. Balance large light areas against small saturated accents.
Depth Cues
Atmospheric perspective: distant objects are cooler, lower contrast, more blue. Use warm-to-cool gradients to create pictorial depth.
Dominant Color
One hue should dominate (60%), one support (30%), one accent (10%). This 60-30-10 rule applies to interior design, fashion, and graphic design.
Cinematic Framing
Cinema codified compositional grammar into shot vocabulary: extreme wide shots establish space; close-ups create intimacy; Dutch angles signal psychological instability. The frame edge is not a boundary but an active compositional element — what is excluded shapes meaning as much as what is included.
Extreme Wide Shot
Establishes geography, dwarfs characters, creates epic scale. Often an establishing shot opening a scene.
Medium Shot
Waist-up framing. Conversational distance. The workhorse of narrative cinema. Balances character and environment.
Close-Up
Face fills frame. Emotional intimacy. Forces the viewer into the character's interiority. Bergman's preferred register.
Two-Shot
Two subjects in frame creates relationship, power dynamics. Eyeline matches and frame thirds choreograph dominance.
Gaze Flow & Visual Path
The eye is not passive — it moves through an image in a directed sequence. Designers create invisible paths: leading lines, directional lighting, implied motion vectors, and the gaze direction of depicted figures all guide attention. Eye-tracking studies confirm that skilled compositions create predictable, intentional viewing sequences.
Leading Lines
Roads, rivers, fences, architectural edges guide the eye along their trajectory. Diagonal lines are more dynamic than horizontal or vertical.
Figure-Ground
The eye first resolves what is figure and what is ground. Strong figure-ground contrast = immediate readability. Ambiguity creates tension.
Implied Motion
A sprinting figure facing left implies motion leftward. Lead room (empty space ahead of motion direction) gives the eye somewhere to go.
Z-Pattern / F-Pattern
Viewers scan printed pages in F-shapes; display ads in Z-shapes. Place key information at entry points and terminus of these paths.
Dynamic Tension
Tension is the felt potential for movement or resolution. A perfectly centered, symmetrical composition has zero tension — stable but inert. Asymmetry, diagonal orientation, near-collision of elements, and figure-ground ambiguity all generate productive tension that keeps the eye engaged and returning.
Asymmetric Balance
Large + near-center weight balanced by small + far-from-center. The eye resolves the asymmetry by integrating visual mass and lever distance.
Near-Miss
Two elements almost touching creates tension. The gap charges with potential energy. Used in type, in photography, in film cutting.
Diagonal Thrust
Diagonals imply arrested motion. A falling object, a leaning tower, a diagonal stripe — all carry kinetic potential the eye must resolve.
Rudolf Arnheim
Art and Visual Perception (1954) formalized psychological theories of compositional tension using Gestalt principles and field theory.
Artists & Designers
These practitioners elevated composition from technique to philosophy — each producing a body of work that remains a primary reference for anyone studying visual structure.
Henri Cartier-Bresson
The "decisive moment" — geometric intuition applied at 1/500th of a second. Founded Magnum Photos, codified photographic composition.
Ansel Adams
Zone System for tonal control. Large-format compositions of the American West with mathematical precision and vast tonal range.
Dorothea Lange
Migrant Mother (1936): triangular figure composition, direct gaze, contextualizing background — a masterclass in documentary framing.
Edward Weston
Reduced natural forms to pure abstraction. Pepper No. 30 (1930) demonstrates how lighting and framing can transform object into form.
Saul Bass
Title sequence compositions for Hitchcock, Preminger, Scorsese. Reduced complex narratives to single bold compositional ideas.
Massimo Vignelli
Helvetica, NYC subway map, American Airlines. Rigorous grid-based composition reduced design to its irreducible structural logic.
Josef Müller-Brockmann
Grid Systems in Graphic Design (1981). Formalized the mathematical grid as the rational basis for typographic and visual composition.
Paul Rand
IBM, UPS, ABC, NeXT logos. Demonstrated that compositional rigor and commercial function are not in conflict but mutually reinforcing.
Glossary
Core vocabulary of compositional theory and practice.
- Rule of Thirds
- Compositional guideline dividing the frame into a 3×3 grid. Key elements placed at grid lines and intersections.
- Golden Ratio (φ)
- 1.618… proportion found throughout nature and art. Approximated by Fibonacci ratios; used for placement and proportion.
- Negative Space
- Empty areas around and between subjects. Negative space is not absent but actively compositional — it breathes, weights, and frames.
- Leading Lines
- Lines within the image that direct the viewer's eye toward the main subject or through the compositional space.
- Figure-Ground
- Gestalt principle describing the perceptual separation of a primary subject (figure) from its surrounding context (ground).
- Visual Weight
- The perceived heaviness of compositional elements based on size, color saturation, value contrast, texture, and position.
- Balance
- Distribution of visual weight. Symmetrical balance is stable; asymmetrical balance is dynamic and requires deliberate calibration.
- Depth of Field
- The range of distances in sharp focus. Shallow DoF isolates subject; deep DoF integrates subject and environment.
- Framing
- Using elements within the scene (doorways, foliage, arches) to create a secondary frame that draws attention to the subject.
- Decisive Moment
- Cartier-Bresson's term for the instant when visual elements align to create perfect compositional and emotional meaning.
- Gestalt Principles
- Proximity, similarity, continuity, closure, common fate. Describe how the visual system groups elements into perceived wholes.
- Vanishing Point
- In linear perspective, the point where parallel lines converge. Placement of the vanishing point controls the drama of depth.
- Dutch Angle
- Camera tilted on the lens axis. Creates psychological unease, instability, menace. Associated with expressionist and noir cinema.
- Headroom
- Space between the top of a subject's head and the frame edge. Too much reads as awkward; too little reads as claustrophobic.
- Lead Room
- Space in front of a moving or looking subject. Gives the eye a destination; absence creates unease and implied obstruction.
- Cropping
- Deliberate exclusion of parts of a scene. A close crop increases intimacy and tension; a wide crop contextualizes.
- Grid System
- Mathematical division of the composition plane into columns and rows. Foundation of Swiss typographic style and systematic design.
- Rhythm
- Repetition of visual elements (shape, color, value) at regular or irregular intervals creating a beat the eye follows.
- Contrast
- Difference in value, hue, size, or texture between elements. High contrast = drama and clarity; low contrast = subtlety and ambiguity.
- Symmetry
- Mirror reflection across an axis. Creates formality, grandeur, and stillness. Broken symmetry creates interest and movement.