Skip to content
Critical Web Design Wiki

4.0 Context

Overview
Chapter 4 introduces readers to grid-based design, starting with a historical overview of the use of grids in printing with moveable type and concluding with grids for responsive design. The modules put this context into practice, introducing frames and layout grids for desktop, tablet, and mobile devices in Figma, discussing content hierarchy using display and body type, and coding a simple responsive layout with the Bootstrap framework using lorem ipsum placeholder text to work across all devices.

On the Grid

Section titled “On the Grid”

Jan Robert Leegte Internet artists have long embraced the grid as a defining feature for commentary and aesthetic disturbances. Jan Robert Leegte, Scrollbar Composition, 2000 website collection Stedelijk Museum Amsterdam http://www.scrollbarcomposition.com/

An example of Swiss design with bold headings and organized columns. The text and graphic elements of the grid form invisible “leading lines” that move viewers’ eyes around the page in our reproduction of a poster by Josef Müller-Brockmann, 1959.

DevTools revealing the underlying grid of HTML elements in the Apple Watch Ultra page. DevTools revealing the underlying grid of HTML elements in the Apple Watch Ultra page.

Wireframes demonstrate changes, especially noticeable in column number and width, in a responsive layout across device sizes. These wireframes show how a responsive layout changes across device sizes.

A four-column spread across two pages with illustrative flourishes in the gutter and margins on parchment. A spread from the Gutenberg Bible, c.1450s.

Case Study

Section titled “Case Study”

Does Data Die? Jan Diehm’s design for The Pudding’s “Does Data Die?” incorporates an interactive grid and explosive image boxes that follow the cursor as the viewer scrolls through the article. The text consistently flows in an easy to read, high contrast single column on the right while graphics animate throughout the page. Just as pixels combine to form an image, the reader combines these elements to understand the history of Lenna’s image. Read and interact with this piece at https://pudding.cool/2021/10/lenna/

Screenshot of the article showing the data visualization as the primary page content. Article text appears below the chart, centered on the page in a single column. Jan Diehm’s skateboard chart graphic for The Pudding’s “The Good, The Rad, and The Gnarly” appears in an evenly-spaced 8-column grid to visualize music genres that appear in skate company commercials. https://pudding.cool/2018/06/skate-music/

Screenshot of The Pudding with a yellow background and graphic scrolling vertically on the right side of the page. Jan Diehm’s design for The Pudding’s “I Kissed a Girl to Call Me By Your Name” featuring Lil Nas X sliding down a pole as a scrolling interaction. https://pudding.cool/2021/06/same-gender-lyrics/