Improve your Squarespace designs by learning from Karl Gerstner (part one)
When you look around the web, you’ll see that so many designs look exactly the same. This isn’t just incredibly boring; it’s a massive missed opportunity to create something that reflects a client’s distinctive personality.
So many designs look exactly the same
In this article, I discuss Karl Gerstner’s work and how he used grids to create consistent yet creative layouts. I talk about how he inspired the “Gerstner” Premium Squarespace template.
Grids have had a long and varied history in design, right up to today’s platforms like Squarespace. Your first thought might be how you’ve aligned content to a 12-column grid, but they can do much, much more than align content.
Gerstner’s grid
Swiss artist and typographer Karl Gerstner was one of the first designers to exploit the creative flexibility of using grids, and it’s the compound grid Gerstner designed in 1962 for Capital magazine has become one of his best-known creations. However, Gerstner had been doing interesting work in the Swiss style before he was commissioned to design Capital.
Capital Magazine inspired my “Gerstner” Premium Squarespace template.
Gerstner became a freelance designer at Geigy Pharmaceutical Company in 1949. These are some of my favourites from Gerstner’s catalogue of work. Gerstner left Geigy in 1953 and set up the Miro Basel design studio. By a strange coincidence, I discovered that Gerstner’s agency created advertisements for Sinar, the Swiss large-format camera maker I worked with during the early 1990s.
Gerstner’s agency created advertisements for Sinar
Given Capital's potential variety and unpredictability, Gerstner needed a grid to help him lay out content consistently and without restrictions. His agency had designed what they called a “mobile grid”—although it’s not the type of mobile you and I are used to—and Gerstner used this compound grid for his famous design of Capital Magazine. Search for “compound grid”; this is what you’ll probably find first. It’s also the most likely to baffle you when you first see it.
Gerstner’s “Mobile” compound grid
But why so complex? Well, to explain how he created it—and how you can use it—I’ll break Gerstner’s grid down into its constituent parts. His mobile grid has 58 columns and rows, but he started with just one. Content in this single module fills the entire width.
Then Gerstner divided his single module into two columns and rows. This method of using two columns results in a reassuring, symmetrical design.
That large module can also be subdivided into three columns and rows. Have you noticed how the gutters between the divisions in Gerstner’s grid are always the same size?
By splitting the large module into four, these content columns feel formal, and the overall impression is that this design is serious.
Dividing the page into five or six columns and rows enables an incredible variety of layout options. A compound grid's flexibility comes from the interplay of two or more grids and how that affects the position and size of elements. This often makes a compound layout far more interesting than one grid in isolation.
This grid allowed Gerstner to arrange content on Capital’s pages rapidly and in a structured manner. It was flexible and allowed him to be creative when laying out his pages. It helped him solve design problems without dictating the final result.
Premium Squarespace templates by Andy Clarke, Stuff & Nonsense
You can find out more about how learning from Karl Gerstner can improve your Squarespace website design in part two.
