Class 14: Composition

Daily Doodle

National
Dessert Day

Chocolate Covered
Insects Day

SFMOMA Free Day

Take advantage if you can! The San Francisco Museum of Modern Art will offer a free day on Sunday, October 3rd, 10am-5pm. Normally it's $25, $19 if your under 24, and always free if you're under 18.

Free Family Day 2019.

Worth extra credit if you bring me back a ticket stub

Composition

The main goals of composition:

Create visual interest
Clarify the content of the idea to be communicated

Definitions

Composition is the form, the whole spatial property and structure resulting from the intentional visualization and arrangement of graphic elements—type and visuals—in relation to one another and to the format, meant to visually communicate, to be compelling and expressive.

Even Margins

Larger Base Margin

Margins are the blank spaces on the left, right, top, and/or bottom edges of the rectangular space the composition lives inside of.

Side-Only Margins

Asymmetrical Margins

The Picture Plane is the flat surface plane of a print or digital single, static page.

In any case, it's important to think about how the composition relates to it's frame.

The Fundamentals of Composition

The Format

Almost all formats (books, billboards, business cards, website page, brochures, etc.) across media (print, smart phone, tablet, computer screen, outdoor screen) are rectangular.

Static Versus Active Composition

In static compositions, vertical and horizontal alignments are emphasized.

In active compositions, diagonal or curved movements—directions that contradict or are in counterpoint to the edges of the format—are emphasized.

Responding to the Edges of the Format

All visual elements must respond to (though not necessarily touch) the edges of the page.

The format is not merely the end of the picture plane, a format's boundaries fully participate in the compositional structure of the picture plane

Acknowledging the Midline

Envision an imaginary vertical line down the center of a page. As you position graphic elements, analyze how each element interacts with that midline

The Format: Closed Versus Open Composition

The terms closed and open refer to the way the graphic elements of a composition relate to the edges of a format.

If the internal elements' directions and orientations echo the format's edges to a great extent and the viewer's focus is kept tightly within the format, that composition is considered closed

If the major directions and orientations within the composition oppose the edges or direct our eyes past the boundaries of the format, that composition is considered open

The Illusion of Spatial Depth

A plane is a flat surface, and the picture plane is the blank, flat surface plane of a print or digital single, static page.

When you set out to compose on a two-dimensional surface, like a screen or a piece of paper, you begin with the picture plane

As soon as you make one mark on the surface, that mark interacts with the picture plane and perimeter of the format
The marks you make and composition you create can maintain the flat picture plane or can create the illusion of spatial depth, the appearance of three-dimensional space, where some things appear closer to the viewer and some things appear farther away—just as in actual space

Foreground, Middle Ground, Background

In pictorial space, the picture plane can be manipulated into the illusion of spatial planes. There are three main planes with many others in between:

Foreground, Middleground, and Background

The foreground (the part of a composition that appears nearest the viewer)
The middle ground (an intermediate position between the foreground and the background)
The background (the part of a composition that appears in the distance or behind the most important part)

Tilted Plane/Imitating the Recession of Space

If you draw a tilted plane on a surface, you create the illusion of three-dimensional space. The viewer understands the longer side of the plane to be closer in space and perceives the plane as receding.

Perspective

Perspective is based on the idea that diagonals moving toward a point on the horizon, called the vanishing point, will imitate the recession of space into the distance and create the illusion of spatial depth.

Perspective is a schematic way of translating three-dimensional space onto a two-dimensional surface

Depth Through Overlapping

When an opaque flat plane or form is placed in front of another, that overlap creates the illusion of spatial depth.

When you position one form or shape in front of another, that overlap suggests that one form is closer to the viewer than another
Overlapping also can be used to create fractured space, as in the Cubist style of fine art, where multiple viewpoints are seen simultaneously.

Depth Through Layering &Transparency

By overlapping parts of an image simultaneously or in a sequence, the illusion of space is created by layering.

Using transparency—making graphic elements transparent (see-through) and layering them or positioning a graphic element over or under another or between similar elements—can create the illusion of ambiguous spatial relationships, which tends to appear as shallow space.

Depth Through Volume

Volume on a two-dimensional surface can be defined as the illusion of a form with mass or weight, a shape with a back as well as a front.

Volumetric shapes, such as cubes, cones, and cylinders, create the illusion of depth

Volume thru shading and contours.

Depth Through Value Modulation & Atmospheric Perspective

A gradual or progressive change from one color to another or a progressive shift in tone or value, from dark to light or light to dark, can contribute to the illusion of spatial depth or motion
The atmosphere affects how we perceive hues and tones seen in the distance. The interposition of the atmosphere between the thing seen and us changes how we perceive form and color. Pictorially, this effect is called atmospheric perspective (also called aerial perspective).

Depth Through Movement

In print and on any static digital page, motion is an illusion created through skillful manipulation. Giving an object apparent motion forces the object into a kind of three-dimensional space.

A composition can look still, suggest motion, or even suggest intervals of stillness and movement.

The illusion of movement can be suggested through active relationships such as diagonal counterpoints, acute shifts in scale, extreme value contrasts, and more
In time-based media, such as motion graphics and animation, motion occurs from frame to frame over time

Depth Through Contrast

To differentiate between graphic elements in a design, you must establish a difference between two or more. You must make distinctions.

Through variation and contrast, you establish visual interest
Johannes Itten’s theory of structural compositional oppositions, which he referred to as "polar contrasts," has the potential for visual drama, enabling the viewer to better understand each graphic element through comparison:

big/small
long/short
straight/curved
pointed/blunt
much/little
light/heavy
hard/soft

Our text adds more, can you think of any? [expand]

Differentiation Through Grouping

The Gestalt principles of perception—similarity, proximity, continuity, and closure—explain how people tend to understand what they see by grouping, by visually assembling images and how they relate to one another into groups.

Grouping is a fundamental Gestalt concept, proposing that when graphic elements appear similar—share characteristics, are arranged close together, are connected, or are enclosed in a common spatial area—people perceive them as belonging together
If you understand how grouping functions, you can more easily create visual emphasis in a composition through differentiation.

The Compositional Process

Composing is a process where one achieves a desired result by repeating a sequence of steps and successively getting closer to that result.

You can get there by spontaneous means, by using proportional systems or compositional structures.

Spontaneous methods for composing (and visualization) include but are certainly not limited to:

Spontaneous composing: mostly unplanned visualization and structuring, with the design concept driving the visualizing and composing
This type of composing is usually for a single surface and therefore does not utilize formal structural devices or systems, such as a grid, which is necessary and utilized for multiple pages or screens
The best way is to start sketching, to think with a pencil, marker, or stylus in your hand. Sketching is thinking

Composing for a Single Static Surface Format

When composing for a single surface format such as a poster, book or magazine cover, mobile ad, or website landing page or ad (as opposed to multi-page formats, such as book interiors or websites), consider the roles and interrelationships of type and images as a whole.

Consider one of the following ways to drive the communication:

Type-driven: emphasis on type and de-emphasis on images, where type is the dominant force with images as secondary
Image-driven: emphasis on image and de-emphasis on type, where image is the "hero" and type is subordinate to the image
Visual-verbal synergy: a synergistic relationship between verbal message (the title or headline) and the primary image

Our Poster Project will be built around these three concepts

Arranging Type & Image

When you compose type and image (the two main graphic components), you arrange them to respond to one another and to the shape and edges of the format.

You can think of these juxtapositions in several broad categories:

Type and image are fused: type is inseparable from the image, often positioned inside the primary image, creating a conjoined relationship
Type runs across image: type runs across the image(s)
Type is positioned outside the image or adjacent to image: type is not placed inside the main image, does not run over the main image, but is placed outside the image within the remaining pictorial space of the format

Integrating Type And Image

A graphic design problem can be solved typographically or with images alone. But when type and images interact, then you have to determine how they will interact.

Will the form of type and images share characteristics?
Will the type and images work in opposition, be contrasted in style of visualization and/or form?
Will the type drive the composition? Will the image drive the composition?
Will the type and images be organically intertwined?
Will they touch, overlap, be juxtaposed, fuse? Will they be words that incorporate images or be images that incorporate words?
Will one be the star and the other the supporting player?

Supporting Partner Type and Image Relationships

In the supporting partner relationship, a classic "neutral" typeface works cooperatively with the image, which has the starring role.

For the sake of clarity and visual interest, the tendency is to allow either type or image(s) to be the star, with the other component acting in a more neutral fashion.
If both type and image attract our attention due to equal prominence, then focus is diffused or lost. Here type is purposely understated in contrast to a strong visual statement, where the visual is the "big idea."

Lab

Start thinking about the Poster project.