The Grid Bootcamp Parsons The New School For Design

Topics What is the grid? Why use a grid? How do I use a grid? Grid resources Breaking the grid

What is the grid? “The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.” Josef Müller-Brockmann (via thegridsystem.org) A grid is a network of lines. The Lines in a grid typically run horizontally and vertically in evenly paced increments, grids can be angled, irregular, or even circular as well. They establish a system for arranging content within the space of a page, screen, or the built environment. Designed in response to the internal pressure of content (text, image, data) and the outer edge or frame (page, screen, windwo), an effective grid is not a rigid formula but a flexible and resilient structure, a skeleton that moves in concert with the muscular mass of information.

Anatomy of a grid Column - space where the content will go Gutter - the space in between columns Margin - the edge of an element Slug - in print, the portion to be cut away from the larger piece of paper. Can also be thought of as extra screen space around a website or application.

Why use a grid? Grids often serve as a crucial bridge between the blank surface (eg. a 24x36-inch sheet of paper, a 1280x1024-pixel monitor, a 10,000-sq. ft. parking lot), and the information to be communicated to the user or viewer. Grids impose order and hierarchy on content, which helps a user or viewer understand the structure of your designs. Layout becomes a breeze when you incorporate the grid, in most any medium.

How do I use a grid?

How to work with grid systems A few things to note first: The grid is a set of guidelines, not a rigid rule set to be adhered to religiously (more on this later). It is not always horizontal and vertical only. There is no single grid system for any situation. Often, the appropriate grid is determined by the medium. Knowledge of the right grid for the right project is more important than knowing how to create one. The grid is not just used for laying out text and imagery, it can become a form of art in and of itself. There are many templates for grid systems of all kinds, most of them are available for free, others can be created in CS.

The rule of thirds The rule of thirds is a compositional rule of thumb in visual arts such as painting, photography and design. The rule states that an image should be imagined as divided into nine equal parts by two equally-spaced horizontal lines and two equally-spaced vertical lines, and that important compositional elements should be placed along these lines or their intersections. Proponents of the technique claim that aligning a subject with these points creates more tension, energy and interest in the composition than simply centering the subject would.

The Golden Ratio is also known as the Golden Mean, Golden Section and Divine Proportion. It is a ratio or proportion defined by the number Phi ( = ) It can be derived with a number of geometric constructions, each of which divides a line segment at the unique point where: the ratio of the whole line (A) to the large segment (B) is the same as the ratio of the large segment (B) to the small segment (C). In other words, A is to B as B is to C. This occurs only where A is times B and B is times C. At least since the Renaissance, many artists and architects have proportioned their works to approximate the golden ratio, believing this proportion to be aesthetically pleasing. The golden ratio in grids

Depiction of the proportions in a medieval manuscript. According to Jan Tschichold: "Page proportion 2:3. Margin proportions 1:1:2:3. Text area proportioned in the Golden Section.

Grid Index, is a “ visual dictionary on two dimensional grids and geometric tilings ” by Carsten Nicolai, co-founder of Raster Noton.

Grids in Adobe Creative Suite Adobe Creative Suite has a range of grid options. These options tend to vary across programs. Photoshop Manual guides; automatically- generated grids (preferences or double-click the ruler) Illustrator Manual guides; automatically- generated grids (preferences); Object>Path>Split Into Grid InDesign Manual guides; automatically- generated grids (preferences); Layout>Margins and Columns AfterEffects Manual guides; automatically- generated grids (preferences)

Grid resources There are tons of grid templates, articles, and tutorials out there for free. The Grid System (Articles, Template files, Links, Inspiration) The Design Grid (Links, Articles, Inspiration) Grid System (Template files, Links, JavaScript/CSS tools) 65 Resources for Grid-Based Design (Links)

Breaking the grid As mentioned earlier, the grid is not the end-all be-all of your design. Not all content will fit your grid, your grid may not accommodate your content. Adjust your grid carefully, know when breaking it is the solution but do not use it as an excuse to be lazy with your design. Some artists consciously reject or break the grid, but you have to know how to use the grid in order to break it.