Elements of visual design

Every photograph, film frame, poster and social media post is a flat rectangle filled with marks of light and colour. What makes some rectangles hold our attention, tell a story or move us, while others are confusing or dull, is largely composition: the arrangement of visual elements within the frame. Painters, photographers and cinematographers have studied composition for centuries, and psychologists have since explained much of why it works by studying how the eye and brain organize what they see. This course teaches composition as a practical toolkit. This first lesson introduces the basic building blocks, the elements of visual design, and the principles by which the brain groups them into meaningful wholes. Later lessons apply them to every part of composition; the section at the end of this lesson shows how the twelve lessons fit together.

Why composition matters

A viewer looks at an image for a short time: a few seconds for a photograph in a gallery, less than a second for a thumbnail scrolling past on a phone, and a fraction of a second for each shot in a fast-cut film sequence. In that time the image must communicate what it is about, where to look and how to feel. Composition does this work. It is not decoration added after the subject is chosen; it is how the subject is presented. The same person photographed small in a vast empty landscape and filling the frame in a tight close-up tells two different stories.

Composition is also a language shared by image makers and audiences. Viewers have absorbed its conventions from a lifetime of images, so they read a low camera angle as power, a tilted horizon as unease and empty space in front of a moving subject as anticipation, usually without noticing. Learning composition means making these choices deliberately instead of by accident.

The elements of visual design

Designers traditionally list a small set of elements from which any image is built:

• Point: a small, distinct mark, such as a distant figure, a star or a light. A single point in an empty field draws attention immediately; two points create a relationship and an implied line between them.
• Line: a mark longer than it is wide, or the edge where two areas meet. Lines have direction and character: horizontal lines feel calm and stable, vertical lines strong and upright, diagonal lines dynamic, and curves graceful or flowing. Lines can also be implied, by the direction of a gaze, a pointing finger or a row of objects.
• Shape: an enclosed two-dimensional area defined by edges, colour or value. Geometric shapes (circles, triangles, rectangles) feel constructed and ordered; organic shapes feel natural. A silhouette reduces a subject to pure shape.
• Form: the illusion of three-dimensional volume, created mainly by light and shadow on a subject. Side light reveals form; flat frontal light hides it.
• Space: the areas around and between objects. Positive space is occupied by the subject; negative space is the emptiness around it. Negative space is not wasted: it isolates the subject, gives it room to breathe and can carry meaning, such as loneliness or freedom.
• Texture: the surface quality of things, rough or smooth, that the viewer seems able to feel. Raking light, which skims across a surface at a low angle, emphasizes texture.
• Value: lightness and darkness, independent of hue. Value contrast is the strongest tool for separating a subject from its background and is what remains when an image is converted to black and white.
• Colour: hue, saturation and value together. Colour carries emotion and draws attention, and is studied in detail in VIS-110.

Value and contrast

Of all the elements, value contrast does the most to determine what the viewer sees first. The eye is drawn to the area of greatest contrast, usually where the lightest light meets the darkest dark. Painters such as Caravaggio and Rembrandt built their compositions on strong value contrast (chiaroscuro), and film noir and much modern cinematography do the same. A useful test of any composition is to squint at it, or view it in black and white: the arrangement of light and dark masses that remains is the image's underlying structure.

Contrast can be measured. For digital images, relative luminance \(L\) combines the red, green and blue channels weighted by the eye's sensitivity, which is highest for green and lowest for blue. The contrast ratio between two areas is then:

where \(L_1\) is the lighter area and \(R\), \(G\), \(B\) are linear (not gamma-encoded) channel values from 0 to 1. Accessibility guidelines for screen text (WCAG) require a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, standards that matter whenever images carry text, such as thumbnails, titles and posters.

Gestalt principles of perception

Early twentieth-century German psychologists of the Gestalt school ("Gestalt" means shape or whole) showed that the brain does not see an image as a collection of separate marks. It automatically groups elements into wholes according to consistent rules. These principles explain why compositions work:

• Figure and ground: we separate an image into a figure (the object of attention) and a ground (the background). Strong compositions make the figure-ground relationship clear; ambiguous ones, like the famous vase that can also be seen as two faces, let the two swap.
• Proximity: elements close together are seen as a group. Spacing controls grouping in layouts, crowds and still lifes.
• Similarity: elements that share colour, shape, size or texture are grouped. A single element that differs, such as one red umbrella in a crowd of black ones, stands out sharply.
• Continuity: the eye follows lines and curves smoothly and prefers continuous paths to abrupt changes, which is why leading lines work (Lesson 9).
• Closure: the brain completes incomplete shapes, filling gaps to see a whole circle or a face from a few marks. Cropping part of a subject relies on closure: viewers imagine the rest beyond the frame.
• Common fate: elements moving in the same direction are seen as a group, important for film and video.
• Prägnanz (simplicity): the brain prefers the simplest, most stable interpretation of an image.

Aspect ratio and the frame

Composition always happens inside a frame of a particular shape, given by its aspect ratio (width to height). Common ratios include:

The frame's shape suggests its content: wide frames suit landscapes, groups and horizontal movement, and emphasize the space around people; tall frames suit standing figures, buildings and single subjects. Because the same content must often be delivered in several ratios (a film in 2.39:1 for cinemas and 16:9 for television, a video in 16:9 and 9:16), image makers frequently compose with "safe areas", keeping essential elements where they will survive every crop.

Simplicity and the subject

The most common problem in beginners' images is not a lack of technique but a lack of a clear subject. Before composing, decide what the image is about. Then every element in the frame either supports that subject or competes with it. Practical steps include:

• Move closer, or use a longer lens, to fill the frame with what matters. The photojournalist Robert Capa's advice, "If your pictures aren't good enough, you're not close enough," still applies.
• Check the edges of the frame for distractions: bright patches, cut-off objects and lines that lead the eye out of the picture.
• Simplify the background by changing the angle, opening the aperture to blur it (Lesson 7), or waiting for distractions to move.
• Use value and colour contrast to separate the subject from its background.

Simplicity does not mean minimalism. A crowded street scene can be well composed if its many elements are organized by a clear structure; the goal is that the viewer can read the image, not that it contains little.

How this course is organized

The twelve lessons build a complete compositional toolkit:

• Lesson 1 (this lesson): the elements of visual design, value contrast, Gestalt principles, aspect ratio and simplicity.
• Lesson 2: line, shape, texture and pattern.
• Lesson 3: framing, the rule of thirds and related grids, shot sizes and camera angle.
• Lesson 4: composing people: portraits, groups, posing and ethics.
• Lesson 5: balance, symmetry, tension, rhythm and negative space.
• Lesson 6: colour in composition.
• Lesson 7: depth, perspective, focal length and depth of field.
• Lesson 8: light and shadow as composition.
• Lesson 9: leading the eye: focal points, hierarchy, leading lines and small screens.
• Lesson 10: typography and graphic layout.
• Lesson 11: composition in motion and sequence.
• Lesson 12: critique, style, ethics and a portfolio project.