2D Design

Week 4: Composition

view slides

Composition is the placement of elements on the page and the impression that the combination of elements makes upon the reader or viewer.

Composition elements include the typography, photographs, illustrations, color blocks and the white or blank space around those elements. An appealing composition can involve some degree of discord or tension but that tension is balanced by an overall cohesion of elements including lights and darks, colors, shapes and spaces. Good compositions are balanced. They attract the eye, and keep it exploring within the frame for as long as possible. Most designers have an intuitive sense of composition and balance but there are some guidelines rooted in mathematics that can help you make successful choices in organizing elements on a page.

Grids underly most well-designed websites and publications. A grid provides the reader with a clear sense of order and hierarchy and gives the designer a system for placing elements on the page.  Grids are often determined by two factors. Line length readability is an important consideration in creating an effective grid and, for commercial work, the size of the advertising unit is usually a factor. Mark Boulton has an excellent post describing how to construct an adaptive gird and provides the css to make it happen.

The National Parks brochures are an excellent example of an effective use of girds. Designed over 40 years ago by Massimo Vignelli, the unigrid system elegantly organizes and systematizes a huge array of park service paper publications. The module grid system sized at ISO A2 (16.5″ × 23.4″) allowed the National Park Service to create brochures in ten basic formats and to keep a consistent, recognizable structure across all it’s materials. The grid is flexible enough to allow for variations as dictated by the editorial needs, but maintains a standard that has a clear visual identity. The use of the grid is cost effective. NPS can buy paper in large quantities, and save on productions costs. Editors and designers can focus on the content and not reinvent the wheel with every brochure.

Inherent balance can be achieved by applying the golden ratio.  The golden ratio appears consistently in nature and artists and designers have for centuries emulated a proportion called the “Golden Mean” or “Golden Ratio”. The proportions in Stonehenge, the Pantheon and Da Vinci’s Last Supper painting all exhibit a proportion of 1:1.618. Abstracting the golden ratio to a rule of thirds is a basic design technique that can add symmetry, beauty, and balance to your visuals. The rule of thirds is often used by photographers when framing their shots.

References and Resources related to composition.

Assignment

Design a business card for yourself. Consider typography and layout carefully. Post a digital copy (front and back) to your blog but also bring 17 actual-size, physical cards to distribute to the class. Card size is 3.5″ x 2″, unless there is a good argument for a different size or format. Please use both sides of the card. Some inspiration here and some die cut inspiration here. Here is a jpeg template that you can use as a base if you are working in photoshop. Illustrator or InDesign is a better software tool for this assignment but photoshop is just fine if that is the tool you are comfortable with. The Illustrator help session will cover the set-up for Illustrator. What not to do.
A scene from American Psycho to inspire you.