On Grid-Based Design | Elegance, Whimsy, and Criminality

Dieter Rams 'Ten Principles of Good Design' Poster
elegant, grid-based design

This poster, designed by British firm Bibliothèque, dynamically employs grid-based design. The graphic summarizes Dieter Rams’ Ten Principles for Good Design and showcases various products created by the iconic industrial designer. The minimalist poster is comprised of large numerical typeface, a sans serif font (with regular and bolded styling) and high-resolution images. The dominant black-and-white palette is punctuated by veins of color, such as the radio’s red channel lines.

While the written copy is conformed to one-column width, the size and orientation of each image differs. In two cases, the photographs are square, while the remaining eight images are precise cutouts with unique dimensions. The lilt of the numerical arrangement –– cascading downward, jutting upward, then progressively descending –– and the surprising, asymmetrical white space create a natural organizational system that offsets the poster’s brutalism. This grid-based design delights both the rational and arational sides of my brain, as it communicates a controlled chaos.

Image of Paria Radikal Landing Page
whimsical, grid-breaking design

Paria Radikal, a self-identified “experimental and progressive” graphic design firm breaks the grid through cacophonous image placement and layering. The site represents the Paria Radikal portfolio, comprised of upside-down numbers and letters, hand-drawn and digital works, artifacts, indiscernible art, and a spectrum of clashing colors set against a black background. They applied a bolded sans serif font (with all caps and lowercase styling).

Overall, the design conveys a wackiness I enjoy. It communicates a frenetic creative urgency that makes me want to become familiar with the designers’ processes, influences, and sources of inspiration. The live site is comprised of GIFs, which convey a randomized Christmas light effect. This playful touch invites the visitor to explore the landing page in its entirety.

Image of Angren.net Landing Page
grid-based design criminality

Arngren is a Norwegian commerce site dedicated to all-terrain and military vehicles, motorized bikes, drones, robots, and science fiction-inspired products. While the landing page utilizes a grid-based design, the absurd combination of haphazardly applied product outlining, myriad background and font colors (the live site includes a Christmas animation), unnecessary product details, and chaotic navigation are panic inducing. The hyperactive layout and accidental palette make me feel as though I am trapped in a toy store moonlighting as a confectionary (get me out of here, please).

The site was neither engineered in concert with human-centered design principles nor visual discipline. Despite the application of grid-based design, the landing page presents far too much information in a uncategorized and dizzying manner.

Leave a Reply

Your email address will not be published. Required fields are marked *