acrStudio
Teaching home

Design 4: Visual Organization and Information Design
Introduction
Reading
Class Project
Week 1: Jan 28
Week 2: Feb 4
Week 3: Feb 11
Feb 18
No Class President's Day
Week 4: Feb 19
Tuesday make up class
Week 5: Feb 25
Week 6: Mar 3
Week 7: Mar 10
Mar 17
No Class Spring Break
Week 8: Mar 24
Week 9: Mar 31
Week 10: Apr 7
Week 11: Apr 14
Week 12: Apr 21
Week 13: Apr 28
Week 14: May 5
Week 15: May 12

Week 3: Grids, Ratios and Typography

  • Critique
  • Class work create a modular grid based on principles of ratios.
  • Save all your electronic source files for the class activity into a folder and place them in the class drop box on the network before you leave today. Remember to use the naming conventions outlined in the introduction section about How to prepare your work for submission.

Working with Grids

Why do compositions "feel" right?

The Golden Ratio

Many theories on aesthetic measurement have their basis in numerical patterns that occur naturally such as the proportions of the human body, for example the distance between your elbow and the tip of your fingers compared to the distance between your elbow and your wrist. Renaissance artists such as Leonardo da Vinci used these ideas when addressing proportion in architecture, painting and sculpture.

The golden ratio is the ratio between two segments such that the smaller (bc) segment is to the larger segment (ab) as the larger is to the sum of the two segments (ac), or bc/ab=ab/ac=0.618 The golden ratio is irrational (never-ending decimal).

Theories, such as the golden ratio (also known as the golden mean, golden number, golden section, golden proportion, divine proportion and section aurea) arise from natural patterns and they are applied in the visual and creative fields to create "beauty" by way of considered composition. The Golden Section is found throughout nature, mathematics, architecture, art and design. It is derived from a naturally occurring number, called Phi (1.618), which has intrigued humanity for thousands of years.

How do you use Golden Ratio in your work?

For the sake of discussion, let’s say that you have an area of 10 inches by 14 inches within which to compose a design.

If we multiply the width by the number associated with the golden ratio .618 then you may identify how to apply the golden ratio to a two column modular typographic grid.

10” X .618 = 6.18”

You can also use this technique to locate an important focal point within a grid by multipling the height by .618. The intersection point of the two perpendicular lines will reveal an important focal point within the golden ratio of the design area.

14” X .618 = 8.65”

This was used often in portraits where the center of the face or one of the eyes of the subject would fall on this point. It can be a very arresting visual tactic. Here is an example of how it might be approximately applied to a painting by Gian Lorenzo Bernini "Self-Portrait as a Young Man" circa 1623, Oil on canvas, Galleria Borghese, Rome.

 

Grids and the rule of thirds

Grids have long been used by designers to aid and measure composition and to create a framework with which to construct the design.

Grids come in many shapes and sizes, and generally they're not much to look at, just a bunch of lines. But it's the relationship a designer has with this grid that makes them so much more than just lines. They are the framework of possibility. It's only when a designer sits down and correctly designs a grid that these possibilities reveal themselves.

One of the most effective principles in grid design is called the Rule of Thirds, also known as the golden grid rule. The Rule of Thirds is a technique which is applied by dividing a space into thirds, both vertically and horizontally, creating a grid of rectangles. It is perhaps most widely used as compositional theory in photography and film.

 

Anatomy of a Typographic Grid

Recto vs. Verso - Right vs. Left

Manuscript Grid

Modular Grid

Examples of Grid Systems

A chart illustrating some of the American National Standards Institute paper sizes.

Jimmy Kontomanolis: Museum of Modern Art - Fall 2005

Brietta M. Yung: South African National Foundation
for the Conservation of Coastal Birds - Fall 2005

 

Rachael E. Szporn: MAC Cosmetics for AIDS - Fall 2005

Sophia L Campana: Keith Haring Foundation - Fall 2005

Ely Latner-Assaraf: My Skinny Black Jeans - Fall 2006


Paula Scher's poster for Bring in ’Da Noise, Bring in ’Da Funk for the Public Theater, ’95 season. Note you can see this poster at the Museum of Modern Art design gallery.

Jessica Meek

Andrew Nilsen

Michael Ruehlman

 

Process

Before we even put pen to paper, let us ask ourselves some questions about the project, the answers to which will inform the grid and our design.

  1. Content: Familiarize yourself with the content as much as you can. If you are designing a book, try to read the manuscript if you have the content or if you are researching the content then know what the over all message you are trying to deliver.. The content can always inform the grid design.
  2. Audience: Consider what the audience will be using the book or design for. If it is a guide book they will no doubt be using it for quick reference and will be task focused. Guide books are not coffee table books. Grid design can help increase legibility and the access structure.
  3. Illustrations / Photography / Icons: Does the book make use of a wide variety of illustrations and photographs? What about icons? If this is a guide book there will probably be maps and associated icons. The grid must be designed to make sure they are as usable as possible.
  4. Format: Once you have a good idea of the content, photographs and intended audience you can begin to make informed choices about the format of the book. You should also consider the usage of the book. A guide book will be carried around in a backpack or a pocket. It should be easily handled and not too large, comprehensive, but not expensive.
  5. Typography: Typography is another important consideration. Clear, concise typography using legible typefaces is extremely important in any book design. The typography shouldn't get in the way of the word. For example the reader shouldn't notice the typography in the book, the typography exists purely to help separate and categorize the information. A well designed book, doesn't look designed.
  6. Grid Structures: Once you have answered most of the questions regarding the content, format and typography, you should begin sketching out grid structures based on the appropriate page sizes and formats. You should first begin by defining the Type Area. The Type Area is the area where your grid will be contained. It is surrounded on all sides by margins and in some cases running heads and page footers, numbers, marginalia, etc.

 

Assignment: Neighborhood Patterns and Type

Part A

Visit your neighborhood and take sketchs and photographs which illustrate a visual grid systems in the environment.

  1. Find and document examples of grid systems that you find in your neighborhood. Examples include a patten of multiple windows in a building facade, the step and repeat pattern in brick, stone and tile work, areial view of the road system within your neighborhood, chain link fences, wood floors or shingles, the patterns of scales in a pine cone, the viens in a leaf, etc. Look for patterns which reveal a grid or can work within a grid.
  2. Choose one of the images for inspiration and create one modular typographic grid system based the image. Use the principle of thirds and/or the golden ratio in your gird system.

Example: a door way in Gowanus Brooklyn offers a perfect model for a typographic grid.

Part B

Visit your neighborhood and take sketchs and photographs which illustrate examples of typography in the neighborhood.

Examples of typography in your neighborhood may include Advertising, Signage, Building or House numbers, Graffiti, etc.

Research and find three different fonts which are visually related to the ethos of the typographic examples you document in your neighborhood.

Example: Typography from signage in Gowanus, Brooklyn

If I wanted to find a type that was related to the type in the signage sample for:

For "RAKE" I might consider using the font ITC Newtext. from Fonts.com

For "WOOD" I might consider using the font MN Franklin Gothic. from Fonts.com

"Petroleum" I might consider using the font Fenway Park. from Veer.

Look at the Fonts available on the Parsons network in the computer labs. You can also look online at various type foundaries. I've listed some in the related resources below. Also try www.identifont.com a useful resource to view various types of fonts and also to identify a font by answering a few simple questions.

Part C

Using the text that you researched about an event in your neighborhood create three different pages using the same grid you designed in part A above.

Each of the three different layouts should use one of the three fonts so that you will have three different documents each with a different font.

Show the range of the the font families and the flexibility of your grid system. See how different each of the three layouts can be while using the same underlying grid system.

You may also include some images from your research or graphical elements but the grid should be supporting type as the dominant elements of the design.

File Specifications
  • Your modular grid layout should be developed using Adobe Indesign
  • Your page dimensions should be 8.75" x 11.25" (22.2cm x 28.6 in centimeters; 2625 x 3375 in pixels)
  • You do not need to mount these designs for next class.
  • Print out the three files in color and also bring with you all of the electronic source files.
Considerations
  • Keep it Consistent: Grids, Typographic Choices, Body Copy Justification - Left, Right, Centered, or Justified.
  • Consider your negative space. Remember that negative space becomes an active component of any composition.
  • This assignment should be driven by content and meaning.
  • Think about typography as image.
  • Consider the impact of the typeface you choose and the typesize, weight, color, texture, focus, orientation, location of the type headlines, sub heads, body copy. Also consider the grid composition and the visual entrance, performance and exit; think about how the type and grid can establish a visual rythem, sequence, speed, pacing, transition, transformation, time to the "reading" of the design. Consider the tone of voice, emotion, feeling, atmosphere, interpretation of the content in your design.

Research/Journal:

Readings

Articles about the practical use of grid systems by Mark Boulton

Journal

Collect ten examples of "subjectivity" in editorial design. You may look at books, news, magazines, websites, posters, brochures, etc. Look for how the designer is using design to emphasize a feeling, emotion, bias, belief system, and/or point of view.

Related Resources

Andrew Cornell Robinson acrStudio © 2009

Sources: