Design

Why Grids Matter: A Review From Chaos to Order

For ages, grids have hung prose on pages to the benefit of humanity and to its curse at times. The topic of grids is lost to some, especially in a world that moves so fast. Designers have to, at times, initiate the creative process on a computer without even so much as a sketch. On the other hand, grids are held as the construct of beauty by many. Yet, we as designers must know the limits of our craft before limits can be broken the right way.

If you have no idea what I am talking about, let me try to explain. Grids make sense out of nonsense. In a world that seems chaotic and void of order, if you look closely at nature and ourselves we can see a mysterious link through the prism of a grid.

Grid Systems are everywhere. Look in the mirror, your face is a grid (of sorts). Look at the Parthenon – it’s a grid though not completely as some say. Look at the Mona Lisa – there’s a vanishing point. Look at a magazine or a car, all of which have grid like measures and with all the same “limitations” we so often complain about.

What you’ll read here will be more for art than science, more history than future, more vegetable than cupcake. There are plenty of resources to the latter with snippets galore and with much needed code monkey snark.

By definition grid systems are limited to the graphic design world and world of design. In this post I want to share how there are shared qualities in the natural world and the digital one. Here my goal is to sharpen our craft by sharing my own experiences with grids and it’s cousins like the Golden Ratio or Fibonacci number, etc.

Chaos

This is not a post to dictate to others that using a grid is the only way to success. Because, it is not. Rather, this is a post to cultivate an appreciation for grid-driven design, while taking from the natural world. Even if you don’t leverage grids, there is a historic and mysterious value.

Graphic Designer - David Carson
Graphic Designer – David Carson

I write and ponder this as a humble designer that started without using grids in the late 80’s. David Carson believes a good designer should bring in who he or she is, what shaped them, and their history. David was my hero at the time.

I emulated his approach to design / life and the time he spent surfing appealed to me. So in the 90’s that is exactly what I did. I rejected a scholarship to a prestigious art school and learned from life. These experiences are adventures that my midwestern wife appreciates and shakes her head. I surfed for a better part of a decade and designed for clients like United Colors of Benetton. I was in the apparel industry as a creative director for a now defunct jean company. It was a good time for me. That’s where I am coming from – a life rich in experience and endeavoring in the arts.

David Carson doesn’t depend on grids so much, but depends on intuition and I completely agree with this approach. I prefer to call it intelligent intuition as “gut feeling” seems to create risk aversion from even the most adventurous among us. A lot more emphasis should be based on intelligent intuition when designers are trained. Yet, higher schools of learning turn away from intuition as having any real measurable value. The funny thing is these gut feelings a lot of times are based on what the designer has seen and experienced which are Grid Systems. Intrinsically, I believe all artists and designers are skewed by grids even while not knowing it.

Within every human living in what seems to be a chaotic universe there is an underlying order. This is a bit philosophical, but I want to emphasize designers have to develop a taste for appreciation of art with critical thinking.

  Via Creative Bloqfibonaccispiral

It’s believed that the Golden Ratio has been in use for at least 4,000 years in human art and design, but it may be even longer than that – some people argue that the Ancient Egyptians used the principle to build the pyramids. In more contemporary times, the Golden Ratio can be observed in music, art, and design all around you.

You may say that the Golden Ratio or Fibonacci numbers don’t mean anything to web designers’ work or are not even related to grids, but it really does and they are. I make no claims that I totally understand what I am so humbly trying to communicate. In fact, it’s overwhelming to me. But, I can observe this world, I see patterns therein, and for our purposes observe grids.

I consider Golden Ratio, Fibonacci number, Golden Mean, Golden String, Grids, Grid Systems, are different yet the same. They are locked in place in the natural world and if done right on your next WordPress theme, which is hopefully created by WebDevStudios.

Design without grids can be wonderful. Having experienced it first hand professionally, it was then and is now fun. But, there is more to the grid (order) story.

Order

For ages designers (whatever the label) have been tasked with creating on pages that are limited by page edges. Think from book spine to bleeding page edge. The measure and the page are set and it’s values are simple for the implementation of any design works. That is to say, we design limited by the width, height, and page content of the work to be delivered. Simple right?

So works like typographically heavy invitations, photography, or paintings can use grids in a broad sense. We won’t ponder the immense mystery of Golden Ratio and a like, but to me these are all linked under a purposeful creative order with beauty as the goal. It’s also worth noting that there is a lot of debate and misconceptions on related subject matter.

I am not here to blaze a trail and solve those misconceptions. Here I will just observe, know, and  communicate what I think I know. For example, the Parthenon does share the golden ratio, but not totally. You get the point.

Having said that, I have never met someone that didn’t love beautiful things and those beautiful things are naturally suspended in order.

Hey, Grid Face

Look in the mirror and there is a grid staring back at you. All faces are different, but there is an intrinsic order that is undeniable. As a trained illustrator we were taught to start with boxes – grids. That isn’t something that is asymmetric or totally unique just to you. We can observe there are faces of varying sizes on a grid like there are also pages of different sizes using a grid. This is amazing! Consider for a moment that there is a grid that we all share – our face.

Via Golden Number

Does the human face reflect golden ratios in its proportions? Not everyone will agree, but there is much evidence to demonstrate that the answer is ‘Yes.’”

We love beauty and by extension order not chaos.

Grid Zen

I recall discussing design with a new business school graduate. He told me in no uncertain terms, “design means nothing”. In other words, what he meant to say was that design as a part of a business strategy is not a driving factor in it’s success. That’s quite a claim.

Consider Nike for a moment. Does design matter for them? Are they just an outlier? Well, maybe Apple doesn’t need design. I guess Microsoft’s brand refresh was for not? The real truth is some companies are successful despite not having any taste to begin with, but that doesn’t mean design doesn’t matter. That means some companies are just lucky.

Today we have a set of viewports that are changing and iterating over time. So a work may require you to design for responsive design with no limit on height most times.

Many say that there are no longer page edges or grids just content driving the design of a grid – inward to outward. I would disagree about edges, but agree on content. Of course, content or in marketing parlance “value”, should always drive work and I think in a sense successful initiatives always do.

The real difference now is there are just more edges. Not only are there still the same edges in a book, but now there are more edges in the form of viewports. There are more edges, not less. There are more opportunities, not less.

All paths lead to Grids.

The paths of designers are varied as shells on a beach. Some have been trained from print forward and some straight into web design from other mediums. Some couldn’t draw to save their life. We are different in the design universe, yet we are the same.

Some designers design by intelligent intuition and some don’t. Yet we can observe, that while some are outwardly grid agnostic, they subconsciously design with Grid Systems pointed towards a greater order with beauty as the goal.

As a trained artist I can tell you that my process for illustrating isn’t so different when I am creating a website design. I start with a draft and using boxes I illustrate a human face. In web design I start with sketches, then finalize the work from sketch to grid.

If you were to (without mortal limitations) travel in one direction forever into space you would be limited by direction but not the destination. Design is similar. The design life is a paradoxical one. Because, we are limited. But, only because of ourselves and what we think we know.

I hear many times from colleagues that grids are useless and mean nothing. I think they are speaking on the actual code with which they are frustratingly trying to theme a design. I get that. However, grids and all it’s related cousins hold immense hidden value to those designers especially. And, it should be an arrow in your quiver too. If it isn’t, maybe you should look in the mirror. Because, looking back at you is a beautiful grid.

Comments

1 thought on “Why Grids Matter: A Review From Chaos to Order

  1. Grid lines are a necessity when designing, but I’ve left the 960 grid behind when designing websites. I find them sort of limiting and subconsciously constraining, especially as the screens/devices we view sites on are evolving. I set up edge lines and a center line and will work around those, but the days of using a grid template for me are personally over. Simple ratios for font sizes etc… still work obviously.
    Thanks for the provocative and interesting post!

Have a comment?

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

accessibilityadminaggregationanchorarrow-rightattach-iconbackupsblogbookmarksbuddypresscachingcalendarcaret-downcartunifiedcouponcrediblecredit-cardcustommigrationdesigndevecomfriendsgallerygoodgroupsgrowthhostingideasinternationalizationiphoneloyaltymailmaphealthmessagingArtboard 1migrationsmultiple-sourcesmultisitenewsnotificationsperformancephonepluginprofilesresearcharrowscalablescrapingsecuresecureseosharearrowarrowsourcestreamsupporttwitchunifiedupdatesvaultwebsitewordpress