medium bookmark / Raindrop.io |
Industrial designer that mostly flogs bits instead of atoms. Co-creator of @subformapp. Find me @ryanlucas.
In 1928, German typographer Jan Tschichold published the modernist graphic design manifesto Die Neue Typographie. Initially inspired by a Bauhaus exhibit on Russian constructivism, Tschichold believed that effective communication design could be codified into formal, standardized rules for typography and page layout:
“The function of printed text is communication, emphasis (word value), and the logical sequence of the contents. Every part of a text relates to every other part by a definite, logical relationship of emphasis and value, predetermined by content.”
This concept was enormously influential on the post-war generation of Swiss designers, including heavyweights like Max Bill, Emil Ruder, Armin Hofmann, Karl Gerstner, and Josef Müller-Brockmann. In what eventually became known as the International Typographic Style, these designers built on Tschichold’s work with page layouts based on strict, mathematical principles of uniformity and proportion.
But it was Müller-Brockmann who was first to formalize and document a grid system as a controlling principle for page layout. His work in the Neue Grafik design journal (1958–1965), The Graphic Artist and His Design Problems (1961), and the seminal Grid Systems in Graphic Design (1981) introduced practices for grid-based layout that became the modern standard.
Müller-Brockmann’s grids are modular. The designer first segments the page into 2, 3, or more columns, then further divides the page horizontally into 2, 3 or more rows. The heights of the rows should be determined by the type size and leading, so that the baselines of the text always align evenly with the horizontal divisions.
Each of the rectangles inside of this grid are known as modules. Content can then be aligned and sized to these modules in any configuration.
For modernists like Tschichold and Müller-Brockmann, the industrial age demanded a dramatic shift in the role of the designer. To produce effective work in the age of mass-production, they felt that designer must understand and embrace the systematic, functional language of engineering:
“Distinguishing marks of [the engineer’s] work: economy, precision, use of pure constructional forms that correspond to the functions of the object.”
—Jan Tschichold, Die Neue Typographie, 1928
“This is the expression of a professional ethos: the designer’s work should have the clearly intelligible, objective, functional, and aesthetic quality of mathematical thinking.”
—Josef Müller-Brockmann, Grid Systems in Graphic Design, 1981
This was the zeitgeist that gave birth to the grid — and it’s easy to hear echoes of it today. Designers are wrestling with their roles in the digital product development process. Designing with programmatic and systematic approaches is becoming essential to manage the inherent complexity in creating software interfaces.
While the sociopolitical and aesthetic motivations of the modernists may be outdated, the practical advantages of grid systems are more relevant than ever:
320px, 375px, or 750px, depending on the device and screen density. In a 6 column grid, however, a full width element can always be described as span-6.It’s easy for the designer, having fallen in love with the grid’s simplicity and flexibility, to seek to apply it everywhere: “if one has a hammer, one tends to look for nails.” But Müller-Brockmann’s recommendations in Grid Systems in Graphic Design are fairly rigid prescriptions. Attempting to follow them literally in digital work — where precise control is rarely available — can be an exercise in futility.
When creating printed matter, for example, the graphic designer generally knows the parameters of the final output medium — things like page size, reading distance, and print resolution. Müller-Brockmann’s advice reflects this: he encouraged designers to base grids on standard paper sizes, noting that “most printed matter adheres to [these] sizes.” His column configurations and typographic scales are rooted in the assumption that printed matter is “generally read with the eye at a distance of 30–35 cm.”
A DIN paper size illustration from Müller-Brockmann. Print designers know their output dimensions.
Digital designers can’t make these assumptions. Users interact with software on all kinds of devices — smartphones, tablets, wearables, laptops, desktops, TVs, and more. An interface design might have to be responsive to several (or perhaps even all) of these devices.
Screen resolutions aren’t standardized like paper. (Source data: Google device metrics)
Moreover, these devices vary not just in physical size, but rendered screen resolutions, physical screen resolutions, pixel densities, reading distances, orientations, and contexts of use. (For an overview of device resolution and pixel density, see Sebastien Gabriel’s Designer’s Guide to DPI.)
A book or magazine designer knows their content before the reader sees it, so they can be sure that the grid system accommodates the specific layout needs of that content.
Digital products, though, are often built around dynamic data — the content that is displayed to the user may never have been seen by the designer. The designer can try to work with representative data, but edge cases are common. A single UI design can also have to account for content in different languages and scripts, right-to-left orientations, and so on.
Content that fits nicely into the grid in English doesn’t work so well in French.
Additionally, the full layout of the content is often not entirely visible to the user. The grid’s rationality and hierarchy may be perfectly evident to the reader when gazing upon a poster or flipping through a magazine spread. But what about on a smartphone, where most of the content is hidden behind a long, scrollable web view?
Lastly, the perfect horizontal and vertical rhythms of Müller-Brockmann’s modular grids are based on the metrics of the typography: font family, size, leading, words per line, and so on. In print, these are absolutes. But in digital, they are variables:
In his essay The New Web Typography, Robin Rendle wrestles with a similar disparity between print typographic tradition and the practical realities of web font rendering. He notes that “we ought to use and/or make tools that reveal the consequences of typographic decisions.”
The same holds true for grid systems. The unique challenges of screen design don’t mean that grid systems are outmoded. But designers do need visual tools that make it easier to evaluate grid design decisions, when both the output media and content are highly variable.
In the second part of this article, “Better Grid Systems in UI Design Tools,” I take a look at the tactical pain points of working with grids in current design tools. And because making things is more useful than complaining about them, I demo some potential solutions from Subform, our upcoming UI design tool. Read Part 2 of this article now.
If you’re interested in learning more about Subform, our UI design tool, check out the website. And be sure to join our waiting list to get early access and receive occasional updates like this article. ✌️
AI-driven updates, curated by humans and hand-edited for the Prototypr community
