Over the years, we've seen articles over and over with titles like, “The Power of the Grid,” and “35 of the Best Grid Templates that Will Blow Your Mind,” and “This Grid is Your Best Friend,” etc. Well, if you think that the grid template is truly your best friend, you may want to reconsider.
Time to find a new BFF!
In Webflow’s Design Trends for 2018 article, you’ll find Broken grid layouts at the top of the list. They start out by stating, “In designers’ never ending quest for more creative and engaging layouts, the grid we’ve always relied on to bring harmony and logic to our layouts has itself become a kind of constraint.”
That's right—the convenience of the grid template comes with the cost of creativity and originality. Woof.
Think outside the grid.
As a developer, I’ve been determined to get designers and developers to “think outside the grid” for a few years now. With a mobile-first mindset and the power of modern CSS, we can start moving into more visually-enticing designs while remaining user-friendly. Contrary to what some developers may think, we don’t need several lines of code and an endless array of breakpoints. I’ve gone so far as to eliminate breakpoints altogether (with the exception of the singular desktop to mobile breakpoint) with great success. In a way, for the design, this means freedom from the grid. This doesn’t mean that the “grid is not still a staple for design harmony,” but it does mean that a designer isn’t forced into the grid by a developer’s table constraints and breakpoints.
No, really. Think outside the grid.
This also doesn’t mean that there aren’t a wealth of front-end developers that cringe at the idea of a less grid-ish layout. Old-school developers have lived within tables that forced design into a grid for years. This translated into a variety of bootstrap grid systems that a front-end developer and designer could settle into and hammer out site after site, following the same constraints and standards as the next guy. This also means we have a bajillion WordPress themes based on the bootstrap grid and all of the themes look the same. I’ve never been big on what the next guy is doing and absolutely find that kind of repetition boring.
As a developer, and at one time a designer/animator, my goals have always been to achieve a level of custom design/development that creates a unique experience for the client and their users. This once meant big budgets and heavy coding, but that’s not the case anymore: developers can write CSS in a fraction of the time with modern SCSS, we can utilize the animate features to bring a page to life, and we can code outside of the grid with minimal stress. Pretty neat, huh?
Don't be afraid to work outside the grid.
One of the side effects of the recurring theme based on the “greatest grid system you’ve ever used” is user blindness. Failing to find a creative way to lead a user to your call to action can prevent users from even looking at the page. By designing with an open approach, you are forced to think outside of the grid—possibly coming up with something great.
When we think about web design moving toward a more organic design aesthetic as well as keeping up with the advanced designs of mobile apps, not being limited by the grid seems even more enjoyable. We can think of the box (you know, the one you are supposed to think outside of) as limitless to design and development. Our client's story can be told as a user’s journey through an environment that depends solely on a vision. It can reflect the standards set forth by the joy of use. It can be… whatever we want it to be.
