How I learnt to love grids

I had a love/hate relationship with grids during my Graphic Design/Art studies, I wasn't the only one. Nowadays my relationship with grids is much more love than hate. A grid of course is just a tool, and learning not to be robotic and mixing things up takes time when working a layout with a grid in mind. Grids are extremely flexible but because they can technically impose order, they can feel like they hamper the freedom of creative flow. This however is only a perception, grids are not meant to be a rigid formulaic mill-stone around your neck but can allow an infinite amount of creative expression when used as a tool. It's that age old maxim: Learn the 'rules' before you are allowed to break them. There's another reason I like working with grids, it's one of my only opportunities to use those Math skills I spent all that time learning over my school career. I find it refreshing to use Math skills in design. The only way to get grids to work for you has very much to do with getting the numbers right, and make sure that the developer you're handing over to understands the dimensions or ratios you have built your design on.

There are many different kinds of grids: single-column, multiple column, modular and Hierarchical grids. They all have contexts where one is better suited to a design than the others. They can be used in almost any project from posters, books, exhibition graphics to websites. So whether in print or on screen, grids are awesomely helpful in creating order and Unity. I've placed the grid and high fidelity design side by side for a proper look at the two. After orientation, research and analysis - as always I begin a design, illustration or animation on paper, thumbnails and sketches. After this conceptual stage, visual designs begin their digital life in their primary transition off of the paper page as a wireframe or low-fidelity version of the design. Iteration towards a high-fidelity design and hand-off depends on what kind of workflow I'm involved in, but the usual deliverables are often involved. Style sheets, marked up designs or elements in a pattern library.

The landing page below is a hierarchical or horizontal grid with the hierarchical groupings in a multicolumn or modular arrangement. If you know what you're looking for you can see the underlying structure. Designers are aware of these tell-tale signs, but most users experience the page sub-consciously, being led or disrupted by the designer's cues. Check out the screen capture to see the page elements up close.