The History Of The Grid System

Published Date: 02 Nov 2017

The Grid System is a self-initiated project started by the american designer Antonio Carusone on 2008. The project is a website that shows articles and essays, provides tutorial and tools for anybody who wants to improve in the using of grids in visual design.

essential information on the designer/studio

Antonio Carusone is associate creative director at the New York based agency AKQA where he focus on inter­ac­tive, and mobile design. After studing art and design since at the high school and college, he worked for several big advertising agencies in US.

During is career he also started various self initiated projects like The Grid System (the one we are analyzing, AisleOne, Antoniocarusone.com, Year of the Sheep, Vetted and Millimetr.

His main interests deal with 3D animation, web design and typography and grids and layout.

His approach to design is tightly close to the Swiss and International Style but transferred also in the field of web design and new digital technologies. For Carusone good design always needs strong background and clearness.

"Any design that uses a grid system as a foundation. Any design that exhibits good typography. Any design that communicates the message clearly. Any design that makes me wish I had done it.": this is the definition of good design in Carusone’s opinion (www.designfeast.com/designer-quest/entry/antonio-carusone).

essential information on the client

(where, when, field of activity, approach)

Self initiated.

theme and goal

The "About" section of the website tells very clearly the aim of this project:

"Made popular by the International Typographic Style movement and pioneered by legends like Josef Müller-Brockmann and Wim Crouwel, the grid is the foundation of any solid design. The Grid System is an ever-growing resource where graphic designers can learn about grid systems, the golden ratio and baseline grids."

The idea born from the author’s consciousness that the grid, a fondamental tool for any designers, is not well known or well teached, even in design schools. Many young designer still don’t have clear ideas about the purpose

of the grid. "I wanted to create a sort of hub for grid education, that offered articles, books and templates that have been vetted to guarantee quality. I noticed that a lot of designers, especially students, don’t fully understand the purpose of a grid or how to design and use one, so hopefully The Grid System can help them"

(www.designmadeingermany.de/magazin/5/the-grid-system).

In an article published on his personal website Carusone speaks about some of the main misunderstandings about grid systems (www.aisleone.net/2009/design/myths-misconceptions-about-grid-systems/).

In his opinion even now many designers think that grids impede creativity or generate static and fixed layouts. From his point of view grids are foundamental tools for any kind of design, from books to responsive websites. Creativity

is always helped by a clear design, a hierarchy

of informations and a solid structure. Expecially in the new responsive web design grids are necessary to manage a fluid layout that goes from the screen of a mobile phone to the widest monitors available.

Carusone’s inspiration is obviously the swiss graphic design and his masters such as Josef Muller-Brockmann, Wim Crouwel and Otl Aicher. These designers, after the second world war, spread a new approach to graphic design based on clear sans serif typography, structured layout and the finalization of the grid, that became the main tool to give order and clearness to any kind of visual communication.

From this source of inspiration Carusone has built a sort of on-line container focused on the use of grids expecially in web design, a field in which grids are extremely useful. A website usually has a very structured layout according to the limits and the tools that html, css and the other languages provide to designers and developers. The attention and passion of the author are driven onto the field of the webdesign because the standardization of this language required a sort of universal design thinking.

The grid is the ideal tool to develop this universal language. Carusone wants the designer to be aware that good design always requires rules and structure. Many articles, templates and tools show how to use the grids, the divine proportions, the Fibonacci numbers or the Rule of the Thirds to well design and develop websites. Attentions is also given to the

design for printing.

description of the design solution (and technical characteristics if relevant)

The Grid System is a website based on Wordpress technology, one of the most popular CMS (Content Management System) in world wide web.

According to the inspiration of this project, the visual guidelines follow closely the rules and trends of swiss graphic design.

All the website is based on a grid of 960 pixel width divided in 6 columns. This width is extremely useful in webdesign because from this size is very easy to divide space in proportional parts. We can have different arrangements according to the layout and the specific needs

of a project. In this case each column is 145 pixel wide and the gutter is 15 pixel, as well as the baseline grid.

The texts, moreover, are alligned to this baseline grid. As we can easily see, the swiss typographyc grid is adapted for living in the digital environment.

To underline the importance of the grid,

a button on the header allows users to switch

on and off the visualization of the structure

in the background.

All the texts are setted in Helvetica (Regular, Bold or Italic), that is still one of the most representative aspect of the swiss style.

The colors used are only black and white, without pictures. Thin grey lines in the background suggest to the users the grid that structures the contents and the main sections of the website.

There are eleven sections that start just below the header. The main are: Articles, Tools, Books, Templates, Blog and Inspiration that contain links, articles, contributes about the use of the grid in graphic design. So the website is structured as a collector or a "meeting point"

of all the discussions and news about this issue.

Other sections are About, Subscribe, Archives, Colophon, Goodies, that deal with the site itself and not the argument of the project.

critical evaluation: why is this project interesting? what can we learn from it? relevance of the design solution for the given theme

As Carusone often says, grids are not a trend. They have been used for centuries in different ways. Any page, printed or digitalized, has a structure, a hierarchy of informations. This is the reason why Carusone considers grids as a law of visual design in general.

Designing with grids is "a fun­da­men­tal skill that design­ers should pos­sess" (www.aisleone.net/2009/design/myths-misconceptions-about-grid-systems/).

Grid System is an interesting way to make designers aware of the basic laws of design expecially in the fluid and changing panorama of the new digital technologies. Many developers or digital designers are often not very confident with grids, a tool that comes from the world of printing. This project is an attempt to spread the concept of the grid systems in an area that really needs a structured approach. As we all know html and web are a worldwide language and technology, that require standardization and clearness in order to be accessible everywhere in the world. In this environment programmers and designers should work together to find the best solutions and rules. Design can make technology understandable and friendly thanks to its language and rules that have been established during the last decades. "The rise of the Internet has rekindled interest in universal design thinking" (Ellen Lupton, Thinking with type, pag. 174. Princeton Architectural Press, New York). This means that we probably have to go back to a way of thinking that is closer to the utopic approach of the swiss design. Carusone is very conscious of this, infact the connection to that period and that approach is easily recognizable in the concept and in the design of Grid System.

The relevance of Grid System is not only in its design technics and solutions (even if a proper grid is not easy to build) but in the attempt of stimulate a debate about the good design focusing on a big issue of the contemporary world: the web and its challenges.

After the Postmodernism and its rejecting of the swiss rationalistic approach, The Grid System is a way to reaffirm that design is based on shared rules and these rules don’t enchain creativity.

"I do believe that designs not created on a grid are fundamentally flawed. Imagine a song written without a tempo or a tall building constructed without a foundation. They’re both vital parts of the process and without them the end product will exhibit problems" (www.designmadeingermany.de/magazin/5/the-grid-system/). This statement can be shared or not but we understand that for the author grids are not simply a stylistic element of the swiss approach but they are the foundations of any kind of design, something necessary to convey ideas and information in the clearest way.

The Web standards renaissance has ignited interest in grids among innovators in the community, and a whole slew of CSS-based grid frameworks have emerged and gained popularity, claiming to greatly reduce development time, all the while providing the same structure and unity that grids have afforded print layouts for so long.

In conclusion The Grid System can be considered an important starting point for a deep discussion about designing in the age of Internet. New and flexible systems are necessary to design for all the existing devices and grids are powerful enough to face these problems.

connections – if any – with other historical or contemporary projects

On internet is possible to find several projects or blogs dedicated to the use of grids, expecially in webdesign. Wether they could be useful for designers and developers, no one of them have the same ambition to become the "ultimate resourse in grid systems" (Grid System’s payoff). The purpose of Grid System is not be a tool for building grids but to stimulate discussions and awareness about grids. Carusone shows a big theoretical consciousness about the role of the grid system in graphic design. He often underlines is preferences for the swiss graphic design and for designers like Brockmann, Aicher, Vignelli and Crouwel.

Among the works of these designers is possible to choose same examples that in my opinion can be considered the most interesting for the recent development of grid systems.

When swiss graphic design rised (after 1950)computers and digital technologies were not used but some pieces of design could remind closer than others the flexible grids for web Carusone often speaks about.

Unigrid, Massimo Vignelli, 1977

The first example is suggested by the author himself during an interview: The Unigrid by Massimo Vignelli. "The Unigrid by Massimo Vignelli is pretty damn perfect. It was designed in 1977 and is still in use today"

(www.designmadeingermany.de/magazin/5/the-grid-system).

In 1977, Mas­simo Vignelli designed the Uni­grid Sys­tem for the National Park Ser­vice. The mod­ule grid sys­tem sized at ISO A2 (420 × 594 mm) allowed the company to cre­ate brochures in ten basic for­mats and to keep a con­sis­tent, rec­og­niz­able struc­ture across all it’s mate­ri­als. The Unigrid System solves two primary problems of folder planning. First, it organizes the editorial and graphic components within a format. Second, it quickly helps determine how a folder will be printed (the inks, the paper, and the sheet size). The solution adopted by Vignelli shows how grids can ensure flexibility, consistency and clearness without compromising creativity. Grids are tools for a creative standardization.

This is a main feature of a grid system applied to the internet applications that must work on several standard sizes.

Boite a Musique, Karl Gerstner, 1959

An other very relevant example is taken from one of the most representative designer of the International Style, Karl Gerstner. In addition to being an influential designer, he is famous for his theoretical work, explained in his "Designing Programmes" edited and published in 1964 and become a milestone in graphic design theory.

In this book Gerstner says that design basically deals with building a programme. This means that the designer needs a systemathic approach instead of instinct to the design problems in order to achieve a flexyble solution that allows the use of several variations according to the different contexts. His approach is understandable analyzing one of his best known works: the identity for Boite a Musique designed in 1959 for a record shop in Basel.

This work is really important for his flexyble and dynammic approach to the identity. Flexible identity solves problems associated with multi-channel, multi-lingual brands by allowing them to flex and adapt to different circumstance. Is not easy today to know before where a design piece, a logo or a website will be spreaded. This force designers to project and imagine a dynamic solutions. Boite a Musique is a flexible identity, able to be fitted to many different paper sizes.

This method, that Gerstner tends to apply to any design problem, is very close to the new developing techniques in responsive design.

We can find the same need for flexible solutions.

So The Grid System and these two projects (many others could be found) share the same attention for a new approach to the design in which the function and the flexibility are the main goals. The grids are the way to achieve this results and tools that are still necessary for all the designers, expecially for those who face the new problems of the digital technologies.

Davide Vignes

scuola politecnica di design

visual design: history and critical views

2012-2013

25/02/2013