The grid. What is it and why should you care?

Simply put, grid-based design is used to distinguish specific ratios between quadrants in a layout; ultimately delivering cohesiveness. Thus, grid-design often yields a pleasurable experience for the viewer because things are proportional; whether it’s magazine layouts or digital website designs, we encounter grid-design layouts on a regular basis.

Let’s break it down

I absolutely love Breathe Magazine. This “mindfulness mag” is designed to incorporate meaningful grid layouts to showcase the articles, illustrations, and typography in a way that successfully implements the core-values (fluidity and ease) that the magazine stands for itself. Brilliant!

Whether you enjoy being on or off the grid, Breathe Magazine reliably offers aesthetically pleasing content delivered through creative quadrant-ratio consideration. Notice the white space left at the top of the text page, or the page-break between the text and illustration, as well as the two column article layout; each of these choices display grid-design layout in action!

Using grid-designs, the compositions of each section within the magazine – well-being, living, mindfulness, creativity and escape – are tailored to showcase beautiful illustrations that inspire the reader, which ultimately keeps them engaged. This investment of time that the reader offers is fully recognized and honored by the magazine itself. For example, a simple design element that the magazine utilizes are full-page color blocks between each section. When the reader sees a “blank” color-blocked page it offers a moment for pause, or “breathing room”. In this way those behind Breathe Magazine treat their readers like people, rather than “users”. This deliberate choice of foregoing ad-space nods to the commitment Breathe Magazine has towards instilling their “time for yourself” motto.

But what about being “too square”?

It’s true. At times even the best designers get caught up in symmetry and proportion which can lead to stagnant or boring-feeling layouts. Breaking out of the box, or the grid for this matter, is encouraged when done right! Using typography or overlapped images for example, to “break the grid” are eye-catching techniques that create interesting ways for content to be experienced. Layouts that break out of the grid still follow some cohesion within the design, but they are specifically designed to be different.

Take doyouspeakhuman.com for example. This website is an interactive “playful research” project by SPACE 10, IKEA’s research and design lab. Its purpose is to collect data; it does this by posing questions in the form of a survey that is designed to resemble a chat-box. The results are continuously updated which allows the research team to gain more insight in how to “democratize” Artificial Intelligence, (AI).

In their own words:

“the idea is to listen to people, open up the design process and take people’s wishes, concerns and aspirations into account before even deciding how this topic [AI] should be explored further.”

The layout of the website itself it stark; using only a black and white color palette and a series of overlapping boxes, SPACE 10 utilizes this unconventional grid design as a way to promote interaction. The boxes shift when the participant clicks different buttons, thus changing the grid-layout. Plus, an audible aspect accompanies the clicks as well that compliments their interactive design. What do you think? Do you like this layout example of breaking the grid? I am still on the fence.

Let’s consider something more apparent.

I am sorry (but not sorry) to use Media Art Net as an example of a grid-layout design that falls flat. This website design is a prime example of information overload while perplexingly enough – is also simultaneously boring. How do they do it? Well at first glance, the site-map is nestled into a grid that is strangely only inhabiting the left side of the browser window; when I first used this database I thought that perhaps the website simply wasn’t updated to be “adaptive”, but no. Even when I shrink my window to a smaller size, the content still stays firmly smashed on the left side of the window only. Secondly, the use of blue tiny text against a white patterned background makes the information difficult to read. The viewer strains to compute how to navigate the website, which ultimately defeats its purpose.

It’s truly a shame. Media Art Net offers a database for global art; housing credible and obtuse examples of both old and new age mediums, including immersive to performance art pieces (two of my personal favorites). There is a plethora of inspiration to be found, but the grid-design used makes the website feel too tight where the user can end up feeling lost. If only the website design would be revamped and updated to the 21st century to be more user-friendly. I am sure many media design students such as myself would aptly utilize it as a resource.

Alas, we find ourselves within the space between the lines, analyzing how best to utilize the never-ceasing grid. Drawing hard lines between good and bad design can be tricky, but in the end the user-experience of said design will dictate whether it’s something that will last. For now, it seems safe to conclude that grid-based design is on-trend and in-demand, and perhaps one of the few spaces within the art world where being square is where it’s at.