running words around
design education and visual communication
authored by chris m hughes

Improvising the Capital Grid

Wednesday, 4 February 2015

Karl Gerstner's  'Capital Grid' is a cornerstone of graphic design theory and practice. Devised by the Swiss designer in 1962 for Capital Magazine, this elegant blueprint of intersecting guides for print design is arguably the ultimate expression of the Swiss Style, emphasising clarity, proportional measure and functionality. It's a thing of beauty but is undeniably complicated, and in his book 'Designing Programmes', Gerstner admitted that "once the grid was constructed, it required considerable study before I could make free use of it in a creative sense".

Given its provenance and complexity, I was excited to see of my design students, Saulius Stebulis, experimenting with this grid as part of a typographically-based web design project for ISTD (International Society of Typographic Designers). I'd like to look at how he accomplished this, what kind of creative work it can facilitate, and the implications for digital design.

As a general rule, using a grid creates order, consistency and harmony. Designers employ specific grids for different formats, and the tension created by the restriction of a grid versus the energy of the idea is very often the key to a great layout. These days, as digital design appropriates more and more of its sensibilities from print, its a reasonable proposition to ask why print, tablet and web formats can't share a single basic grid system.  Some variation of Gerstner's grid may be a possible answer to this idea of a 'unified' single grid system. To see why this might be, we have to look at how it was constructed, bearing in mind that the end result was always envisaged as being designed for the printed page.

Using a square divided into 58 horizontal and vertical units, Gerstner came up with a set of guides that allowed print designers to create far more variations in layout than was possible with standard grids. The result is a 'compound' grid, comprising a number of sets of columns and rows. The grid looks like this -

The Capital Grid - a 58-unit square with 2,3,4,5 and 6 available columns.

Examples of 1,2,3,4,5 and 6 column layout using the Capital Grid.

The second diagram above shows the power of Gerstner's idea.  Here is a flexible 1,2,3,4,and 6 column layout which also includes the option of an asymmetrical 5 column layout, greatly increasing the possible variations.  This square grid is then placed in the middle of a page and scaled to fit the side margins, leaving equal header and footer spaces, producing the ultimate grid system for print design.

Translating this complex structure from print to web was therefore a big challenge, as Saulius explains -

"The concept I was working on was very personal - 'Pursuit Of Happiness' - and I wanted to be able to show scattered thoughts, diary entries and random incidents from my daily life anywhere on screen, in a vertical scrolling website. These random entries needed to fit into a definite geometry on the screen that could be easily followed by the viewer.  So I needed a grid that would return harmonious and well organised results, no matter where the information appeared on the web page. This need for harmony inspired me to experiment with the Capital Grid."

Despite numerous attempts to use the square shaped grid, Saulius eventually settled on a rectangular grid in portrait orientation, shown in the visual below.  The first set of guides is 3 horizontal and 4 vertical columns (i.e. 3x4, red lines). This is then overlaid with a 4 X 6 (green lines) and then a 6 X 8 (blue lines). The combination is then repeated sideways, like adding a facing page to a spread, to arrive at a grid that fits the full screen desktop proportions. Once complete, the new grid accommodates  2, 3, 4, 6, 8, and 12 column layouts. There are also four locations across the page that support half-unit increments.

This grid gives us a possible 192 different positions that an element can occupy (via 16 horizontal and 12 vertical intersection points per row or column respectively).  Elements can also be stacked on top of or nested inside of each other as well using this formula. The gutters can also be dispensed with unless multi-columned text is going to feature in the design. So there is an incredible amount of flexibility inside the screen.

With the grid in place, Saul then looked at the construction of the web page using semantic html5 markup.  Just like a typical scrolling website, the page is divided vertically into sections.  Each section is full desktop size (1920px X 1080px), and is overlaid with a div class which contains one instance of the grid. As we add sections down the page, the grid is repeated vertically.  This ensures that the vertical rhythm in each section is repeated down through the scrolling experience. In the css, elements inside each section are placed using absolute positioning.  The 192 positions in a section are each defined by a combination of two percentage values - left and top. The basic unit of increment is 8%, with subunits of 4% (horizontal) and 2.66% (vertical).

There are limitations (not least in terms of  responsive design), but at fullscreen the pattern or flow of elements on the page produces a harmonious result as long as elements are placed in one of the intersections -

Above : harmonious absolute positioning using percentage units on the grid. 
Below : sample sections using the grid.

Although this is still a work in progress, we can already see an original and unusual layout in this work. The arrangement seems simple, and communicates the concept clearly, but is held together by a complex geometric construction.  All the heavy lifting is done at the outset by the development of the grid.

Paula Scher once said "Less is more, unless it's less, and then maybe 'more' really is more". This improvisation of the Capital Grid illustrates the point perfectly.  In pursuing a really systematic approach to layout, its possible to create a structure that actually makes it easier to experiment and produce free-flowing, minimal layouts and arrangements that would have been unattainable otherwise.

Note: Saulius is submitting the finished design, including a full annotation, to ISTD's Student Assessment Project 2015.

Transmediale 2015

Sunday, 1 February 2015

As part of our annual study trip to Berlin, we attend Transmediale, Europe’s premiere festival of digital arts, culture and technology. Each year the programme features cutting-edge films, installations, performances, workshops, and other events at the impressive Haus der Kulturen der Welt (House of World Cultures) in central Berlin.

This year the theme at Transmediale was 'Capture All' - focussing on how we create, use, share and interpret digital media in all of its forms and how this is affecting our lives. The festival opened on Wednesday 28th with more than 1000 students, artists, technologists, educators and designers attending from all over the globe. As well as free access to the full festive exhibition and free wine, DJ Renaissance Man put on a two hour set running till 11pm as attendees networked and soaked up the atmosphere.

In past years Transmediale has tended to feature a lot of conceptual digital art, virtual interaction and installation work, so it was great for our design students to see what felt like a much more tangible exhibition this year, containing some stunning and original visual communication via print, screen and video, including the following highlights -

Main Exhibition : Jennifer Lyn Morone

In this standout piece, the artist turned herself into a real corporation called Jennifer Lyn Morone™, Inc.  As a commercial venture, she presents herself and her belongings as items in which you can buy shares.  In this way, as a direct attack on the culture of data-mining,  digital marketing and social media, none of her personal data can be shared, stored or accessed unless the viewer actually owns it. Morone explains this idea in a cool video, alongside documents detailing the incorporation, plus the terms and conditions of her personal data market. You can then use an iPad app to purchase Morone's email, mood, and location data, amongst other personal information. Check out her website at jenniferlynmorone.com for more on this project.

Main Exhibition : Networked Optimization

A collaboration by Silvio Lorusso and Sebastian Schmieg, this work uses digital publishing and access to reading materials to examine data interaction. The work presents a series of three crowdsourced versions of popular self-help books — The Seven Habits of Highly Successful People, The 5 Love Languages, and How to Win Friends and Influence People. Each book is available to read, displayed on a glass table, but when you pick one up and flick through it, almost all of the pages are empty. The cover artwork for each title is also devoid of text.

The only text that remains readable is a selection of popular highlights - passages which were underlined by Kindle users – together with the tally of highlighters who have read each title. Each time a passage is underlined, it is automatically stored by Amazon. The e-books can be downloaded, and paper copies are also available in the HKM bookshop.

Guest Exhibition : Ellie Harrison

For almost five years Glasgow-based artist Ellie Harrison recorded information about every aspect of her daily routine.  The result was a spectacular piece of work called 'Timelines', which documents everything she did, 24 hours a day, 7 days a week, for four weeks.

Each day the data about every activity was transferred into an excel spreadsheet. By the end of the four weeks it contained 2,297 entries, which were then transposed into a series of 28 colour-coded timelines.  This produced a dazzling infographic which allows the viewer to identify any activity from the artist's life, including eating, showering, commuting to work, buying food, using email, driving, socialising and so on.

Foyer Programme : Datafied Research

This panel-led event discussed the findings of a year-long project exploring Transmediale's theme of 'Capture All', and looked at issues surrounding the limits to how much personal information about us can or should be digitised. The panel featured participants from the Datafied Research PhD workshop between Aarhus University and the School of Creative Media, Hong Kong City University. The results were also published as a peer-reviewed newspaper, which was launched at the festival and exhibited in the foyer. All the double-page spreads were hung up in a flatplan sequence to create a huge single image as a landscape poster. On the other side of this were all of the findings, statistics and related articles, beautifully typeset.

Foyer Programme : Hybrid Publishing Toolkit

This workshop, held on Friday, was part of the Digital Publishing Toolkit research project, and featured a presentation by Florian Cramer, Patricia de Vries, Miriam Rasch and Margreet Riphagen, who described a set of tools for digital publishing. The Toolkit, available as an e-book, is aimed at anyone working in art and design publishing, providing hands-on practical advice and focusing on working solutions for low-budget, small-edition publishing.  Approaches for the use of the toolkit can include catalogues, magazines, research publications, and design or art-themed books. More can be found at the networkcultures.org, including a free download of the e-book.

Transmediale also runs in conjunction with the CTM Festival of experimental sound, with events held at world-famous clubs such as Berghain and Tresor.

Transmediale flickr stream
Transmediale facebook page
Transmediale website
CTM Festival website