The secret of grid layouts, and the mistake you’re probably making

I mentioned the “Swiss School” and “the grid” layout in another article and while most comments were positive about the article, there were a number of people who asked if the grid was even still alive. I assure you the grid layout is alive, well, and used all the time. Those who never learned it just don’t realize the rules of the grid and how one can use or even bend, or break those rules for success in designing incredible layouts.

Firstly, using a grid layout isn’t something assigned to print or digital exclusively. Layout is layout and design is a method to convey a message using multiple elements. Naturally, those elements work in harmony when consideration for how the human eye sees the layout and how the brain processes it. Make the brain work too hard at deciphering the message and it shuts off synapses to the layout completely.

Why the grid is misunderstood

There’s a very good, basic lesson on how to use the grid system on DesignersInsights.com. Using Layout Grids Effectively is a sound lesson for those who have never heard of the grid in art school, or other life lessons. It covers the use of columns as well as other elements, the rule of thirds, and the golden ratio. It just doesn’t go past common sense into why some designers are great and others just mediocre.

Imagine every designer learned layout from this Designers Insights article. We would all be churning out the same designs. It’s the ones who see the grid, almost like idiot savants, and use it as no others can — or rather, as others would do if they could see it — that produce the best design work.

The easiest way to explain how the grid is almost boundless when it comes to layout possibilities, is to think of it with this odd sounding example: Chances are, you’ve seen one of those “how many squares do you see” tests that pop up on Facebook. So, how many are there? Did you count the four or eight that are formed by the singular squares? There are squares within squares, making more squares, and so on. That is grid layout!

The how and why

As designers, we may be familiar with the Swiss school of design from basic design 101 class. Some call it the evolution of modern design. Others may think of it as just a step to where design style is now. Both may be correct.

In a spotlight on Josef Müller-Brockmann I wrote for another blog, it detailed how he and his contemporaries evolved the design rules we still adhere to today:

Josef Müller-Brockmann (May 9th, 1914 – August 30th, 1996) is considered one of the key players in the Swiss School of international Style. When one considers the time of his career, which included the Second World War, the Cold War and the growing influence of a Europe on the mend from destruction and fear, he certainly informed a design style that influenced designers on a global scale.

Müller-Brockmann was more than just a man who sought to form what is now labeled the Swiss School; Constructivism, De Still, Suprematism and the Bauhaus, all of which pushed his designs in a new direction that opened doors for creative expressions in graphic design. Among his peers he is probably the most easily recognized when looking at that period.

His design sense of the 1950s aimed to create posters that communicated with the masses. This was no small feat as the pieces had to communicate across a language barrier, with English, French, German and Italian speaking populations in Switzerland alone. It was the harmony and simplicity of these pieces that influenced a post-war world that had lost the sense of central nationalism and gained a lesson in the need for globalization. Müller-Brockmann was soon established as the leading practitioner and theorist of the Swiss Style, which sought a universal graphic expression through a grid-based design, purged of extraneous illustration and subjective feeling.

The grid was the prioritization and arrangement of typographic and pictorial elements with the meaningful use of color, set into a semblance of order, based on left-to-right, top-to-bottom. According to Wikipedia, the grid system is:

“a two-dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content. The grid serves as an armature on which a designer can organize text and images in a rational, easy to absorb manner.”

Now, if left on one’s own to learn about layout and design, it would seem rational that the grid system was strictly left-to-right, top-to-bottom. everything boxed in, with mathematical precision. But looking at Müller-Brockmann’s work shows a successful use of design and illustrative elements that fall together but are not bound by the same layout you see in every blog and website. Left-to-right, top-to-bottom, every image being boxed in. But some aren’t!

Müller-Brockmann, despite what you might think from the primer of what the grid layout allows, the very man who drove the practice knew how to use it. Not everything is horizontal or vertical. The lines are not to follow, or color within—they are areas that accentuate the elements within them.

WordPress themes, for one, are evolving their design capabilities along with whatever coding can supply. Newspaper style has become magazine layouts with movement, parallax scrolling and animation. The web is changing and design will have to change along with it but, the principles of the grid will continue because they are the foundation, the starting point, the framework that holds elements together. And there will be those that rebel.

“Among the few I have indicated, is there no dynamic man of action, the rebel who will help determine the aspect of the collective expression of tomorrow? Ponder this question and know that to make beautiful creations for the sake of their aesthetic value will have no social significance tomorrow, will be nonsensical self-gratification. Every era contains the conditions for providing a rebel.” – Piet Zwart

Piet Zwart was born on May 28th, 1885 in Zaandijk, North Holland (died on September 27th, 1977 at the age of 92). From 1902 until 1907 he attended the School of Applied Arts in Amsterdam where it is said there was little division between several disciplines as drawing, painting, architecture and applied arts. Zwart and fellow students developed by themselves with little interference from above, as teachers weren’t always present. “A smashing school with no idea of a program,” as Zwart recalls.

It was this lack of formal classroom training that led him to approach his design, especially typography in a fresh and non-traditional way. While the purely horizontal grid design of straightforward type and images was the norm, leading to the Swiss School of Design in the 1940s and 1950s, Zwart felt his designing from his gut.

As with most geniuses, there was a self-initiated method that broke the very same rules he had never learned, or, as I suspect, he cared nothing for and wanted to break. He also experimented in the use of photography incorporated into his designs, leading to photomontages. Still, with all the rule breaking and experimentation, Zwart was concerned with readability, feeling that typography should be clear and functional. If any influence must be assigned, he used the basic principles of constructivism and “De Stijl” in his commercial work.

Zwart, although the rebel of design, still needed to keep the design from overpowering the message. In his most commercial work (bottom) he broke with any sense of what a cable manufacturing company would ever do to sell different kinds of power cords. He also used the grid to organize the elements for an easier understanding of the target audience.

The message often beats down the design when it comes to layout. An article about using the “Z” layout, Focal Points in Design Layout, talks about how society is ruled by reading left-to-right, then scanning down to the right and then left-to-right again (naturally, the “Z” will get flipped in cultures that read right-to-left and turned for those that read up-to-down). There is no choice unless you want to muddle the message of the design by making people work to interpret your design! But within what some see as limitations, there are really endless possibilities.

A former illustration teacher of mine showed me a handy tool for identifying the main focus points on a page. First, draw a diagonal line from the top left corner to the bottom right corner (reverse if designing for a country that reads right to left). Next, draw a line from each other corner to join the previous diagonal line at a right angle. The point the lines join is the area of maximum attention.

Designer and educator, Ed Fella, referred to his work as stylistically “getting it wrong.” His work is raw and obsessive. It has power and spontaneity. Born from the knowledge of layout, typography, design and theory, he seems to have ended up getting it very, very right. He has inspiring words every designer should read:

“I am interested in graphic design as art,” he says. “This is a kind of art practice that uses forms that come out of graphic design, decorative illustration, and lettering, all mixed together-forms that come out of Twentieth Century art, out of Miró and Picasso — all of it has a genealogy and a certain look — in the same way that artists today use comic books and graphic novels. I was an illustrator, so you see endless styles popping in and out of the books. The drawings are an unconscious discharge of all the styles and forms that I used as a commercial artist for 30 years — that was my profession — I did it every single day. So, my unconscious has all this stuff in it, and now, because I don’t have to make meaning anymore, I can just use the techniques, like a machine that has long ago stopped making widgets, but the machine is still running. I’m still making stuff. I love the craft of it — of carefully making some little thing.”

Fella is definitely a rule breaker but he maintains a discipline with his designs, keeping the message at the forefront, using the grid to its fullest extent—maybe taking it even further!

The grid layout is not some obsolete design principle and whether it’s for print or the web, it is a design strength that broke ground decades ago but still rings true with basics of great design. It is the foundation on which all design is built.

I was never one to follow the rules but teachers and great artists have some memorable quotes on the subject. “Before you can break the rules, you have to know the rules” and “to create your own world you must first understand the real world.”

If you study the rule breakers, you can see they all had a basis of learning the real world, the basics and evolving from there. The rules are the basic understanding of layout, type, elements of color, illustration and photography and how the eye views them and the brain deciphers it all when put together.

Featured image/thumbnail, grid image via Shutterstock.

Speider Schneider

Speider Schneider is a former member of The Usual Gang of Idiots at MAD Magazine and has designed products for Disney/Pixar, Warner Bros., Harley-Davidson, ESPN, Mattel, DC and Marvel Comics, Cartoon Network and Nickelodeon among other notable companies. Speider is a former member of the board for the Graphic Artists Guild, co-chair of the GAG Professional Practices Committee and a former board member of the Society of Illustrators. Follow him on Twitter @speider or add him on Google+