Image

Why We Love Grids

Why We

Love

Grids
Is good design invisible? That's a topic of some debate among designers but nearly all agree that bad design sticks out like a sore thumb. Whether it's a product, an advertisement, a logo, or a website, when design doesn't work it is immediately apparent. Bad design is usually born of carelessness, inexperience, or disinterest in the end user (though sometimes bad design is hilariously intentional).
Image
"The Uncomfortable Key" is an intentionally bad design prototype by Athens-based architect Katerina Kamprani. Bad design is infinitely more obvious than good design and this example does, in fact, make me a little uncomfortable.
If a designer gives little thought to their end user, there's not much hope for them ever producing good work - design is all about dialogue and if you're not listening to and engaging with your audience then you are shouting into a void. But if a designer just needs to better understand theory and get more hands-on time with fundamental principles, there's no better place to learn than that endlessly joyful playground of design, the grid.

The grid has been at the heart of graphic design since the 13th century and there is perhaps no better evidence for the good-design-is-invisible camp than this dead-simple but (clearly) timeless system. Maybe you haven't given much thought to it but the next time you engage with any sort of graphic design, see how many times you encounter the grid. It's probably staring you right in the face - when you're checking your calendar, scrolling social media, reading a newspaper or magazine, whether it's digital or print, the grid is simultaneously everywhere and invisible (until you make a point of recognizing it). And despite it's seemingly precise and rigid formality, the grid is amazingly adaptive.

Designers have been doing incredible things with and to the grid since it's inception (here's a good history of the grid in graphic design). You may think that working within a formal structure would stifle creativity but sometimes the challenge of working within a framework can spark the most creative thinking - if I gave you four sheets of paper and asked you to write for ten minutes, I bet I'd get two pages from you. If I did the same thing but, this time, asked you to write about the most memorable birthday you ever had, I bet you'd be asking for more paper. Structure can drive innovative thinking because it present us with a challenge to overcome.

Image
Image
The grid inspired designers like Armin Hofmann (left) to work within its structure and pushed designers like Wolfgang Weingart (right) to subvert it.
So, what's the big deal? The grid is great, it's been around a long time, why did I feel the need to write a blog about it? Well, dear reader, it's because I am a web designer and, in the wide world of web, the grid has only recently become a stable feature! Traditionally, web designers have been shackled to layouts of row and columns - yes, technically there are tables but using tables and cells as a system for visual design is akin to using a power drill to hammer a nail - using the wrong tool for the job might get the work done but it's probably going to be ugly and it's definitely more trouble than it's worth. But now web designers can rejoice: the CSS grid is well-established across browsers and devices, it's inherently better-suited for responsive layouts and proper html hierarchy, and it opens up a new world of possibilities that have only begun to be explored.
Dutch design master Wim Crouwel's calendar design, reproduced with the CSS grid.
I relied heavily on the grid for our recent website update, using it to establish a consistent visual system across our pages. I used it on our work for the Williamsburg Collection to create a vibrant, dynamic series of layouts that break away from the everyday rows-and-columns designs of the past. In fact, this whole page is laid out in the grid and the grid image at the top is actually a responsive CSS grid itself resize your browser to see how the layout adapts to different screen widths!
Image
Image
I'm eager to continue exploring the possibilities of the CSS grid on future projects, and excited to see what other creative designers are doing with this new-to-web tool. Perhaps the most exciting part of the CSS grid, and what makes it so special as a (web developer's) unique creative outlet, is that our grid is interactive and responsive - it can change and be rearranged and adapt in real time. I'm already working on some projects that take advantage of this unique function and I'll be sharing them with you soon. Until then, I encourage you to continue to identify the grid in your daily life and marvel at both its subtly and its strength.

Imagine What We Can Do For You

Check out more news from Tangram 3DS and sign up for our newsletter to stay up to date with all of our latest work and insights.