Objectives Gain knowledge of mathematical ratios and proportional systems Learn about the use of the grid

Definitions Proportion is the comparative size relationships of parts to one another and to the whole. Harmony is agreement within a composition, where elements are constructed, arranged, and function in relation to one another to a congruent effect. A module is a self-contained, fixed unit that is combined with others to form a larger foundational structure composed of regular units. Chunking is a technique where content is split or information is grouped into chunks. A grid is a guide—a compositional structure made up of verticals and horizontals that divide a format into columns and margins. A spatial zone is a distinct field formed by grouping several grid modules together used to organize the placement of various graphic elements.

Mathematical Ratios and Proportional Systems Since the time of ancient Greece, artists, architects, and musicians have been interested in ideal proportions. Some looked to math for a system of creating ideal proportions that could be applied to the visual arts, music, and architecture. Most designers prefer to rely on their learned and innate sense of proportion. Others employ graphic devices that can aid in establishing harmony. Proportion Proportion is the comparative size relationships of parts to one another and to the whole. Elements or parts are compared to the whole in terms of magnitude, measure, and/or quantity.  For designers, there is an additional implied meaning to proportion. It is an aesthetic arrangement—a harmonious or agreeable relationship of parts or elements within a whole.

Mathematical Ratios and Proportional Systems Fibonacci Numbers Fibonacci numbers are a numerical sequence used as a model for constructing proportion. They constitute a numerical sequence where each subsequent number in the sequence is the sum of the two preceding numbers.  Fibonacci squares have sides with lengths that correspond to the numbers in the Fibonacci sequence.  By drawing quarter circles through a set of Fibonacci squares, you can create a Fibonacci spiral.

Mathematical Ratios and Proportional Systems The Golden Ratio The golden ratio, commonly denoted by the Greek letter phi (φ) refers to a geometric relationship in which a longer length a is to a shorter length b as the sum of the lengths (a 1 b) is to a. A golden section is a line segment sectioned into two unequal parts, a and b, such that the total length (a 1 b) is to the longer section a as a is to the shorter section b.  Graphic designers utilize the golden section for grid systems and page formats. A golden section seen in the format of an 8 1⁄2” x 11” page

Mathematical Ratios and Proportional Systems Rule of Thirds The rule of thirds is an asymmetrical compositional technique often used by painters, photographers, and designers to create visual interest and balance.  It involves overlaying the format with a grid and positioning or aligning the focal point or primary graphic elements of the composition along these grid lines or especially on the intersections of the grid lines.  Although the intersections provide guidelines for the placement of primary elements, when working with asymmetry, you still need to make judgments involving balance and counterpoint.

Mathematical Ratios and Proportional Systems Modularity In graphic design, modularity is a structural principle employed to subdivide a format into manageable smaller parts.  A module is a self-contained, fixed unit that is combined with others to form a larger foundational structure composed of regular units. A module is also defined as any single fixed element within a bigger system or structure. Chunking Chunking is a technique related to modularity in graphic design, where content is split or information is grouped into chunks. Modular Grids: Graph Paper and Modular Grid

The Grid A grid is a guide—a compositional structure made up of verticals and horizontals that divide a format into columns and margins.  Grids underlie the structure of books, magazines, brochures, desktop websites, mobile websites, and more.  Grids organize type and images. They help you build pages, print or digital. Single-Column Grid A single-column grid is the most basic page structure; it is also called a manuscript grid. This structure is defined by a single column or block of text surrounded by margins, the blank space on the left, right, top, or bottom edge of any printed or digital page. Margins function as the proportional frame structure around visual and typographic content.

The Grid Designing Single-Column Margins  When you design the width of the single column, you are designing the proportions of the margins.  Base the design of the margins on function and aesthetics.  Functional considerations include: shape of the single-column, accommodating marginalia or notations, and determining where the reader’s thumbs will hold the page or tablet.  Determine whether symmetrical or asymmetrical margins and wide or narrow margins would best present the content. Margins/Single-Column Grids Even Margins (top) Asymmetrical Margins (bottom)

The Grid Multicolumn Grids Depending on the size and proportions of the format, determine the number of columns and whether columns can be combined to accommodate headings and large visuals or be divided to accommodate captions and smaller visuals. A column grid can also be designed with dedicated columns for text and large visuals. Columns can be even or uneven depending on content and function. Column Grids: Print Magazine One-column (top) Two-column (middle) Four-column (bottom) © Steven Brower, Designer

The Grid Columns and Column Intervals Columns are vertical alignments or arrangements used to accommodate text and images.  In any grid, the number of columns depends on several factors, mainly the concept, purpose, and how the designer wants to present the content. The spaces between columns are called column intervals.

The Grid Grid Anatomy

The Grid Flowlines Flowlines establish horizontal alignments in a grid and can aid visual flow. When flowlines are established at regular intervals, a regular set of spatial units called modules is created. Grid Modules Grid modules are the individual units created by the intersection of the vertical column and horizontal flowlines.  A text block or image is placed in a grid module. Spatial Zones A spatial zone is a distinct field formed by grouping several grid modules together used to organize the placement of various graphic elements.  Spatial zones can be dedicated to text, to image, or either.

The Grid Modular Grids A modular grid is composed of modules, individual units created by the intersection of columns and flowlines. Information can be chunked into individual modules or grouped together into zones.  The zones should be designed to produce a clear visual hierarchy. A modular grid is very flexible, allowing for greater variety.  An award-winning example of a modular grid is the Unigrid designed by Massimo Vignelli. Unigrid © Massimo Vignelli

Summary Artists, architects, and musicians have always been interested in ideal proportions. Some looked to math for a system of creating ideal proportions that could be applied to the visual arts, music, and architecture. Most designers prefer to rely on their learned and innate sense of proportion. Others employ graphic devices such as Fibonacci numbers, the golden ratio, and the rule of thirds that can aid in establishing harmony. A grid is a guide—a compositional structure made up of verticals and horizontals that divide a format into columns and margins. Grids underlie the structure of books, magazines, brochures, desktop websites, mobile websites, and more. Margins function as the proportional frame structure around visual and typographic content.