Using grid systems to create pace in your layouts

On Wednesday the bcs design team took a trip to DXN event, a monthly meetup about web design. Andy Clarke talked about Imaginative Grid Systems which really challenged our thinking and approach to web layouts.

Andy raised the concern that products such as Bootstrap are killing creativity on the web and contributing to a sea of same-iness. If you want a giggle then check this out to see if you recognise what he’s referring to. It’s quite interesting how much the following tweet from Jon Gold has resonated with web professionals in the industry…

"Which one of the two possible websites are you currently designing?"
Jon Gold
(https://twitter.com/jongold/status/694591217523363840) 

Whilst I recognise that there is currently a wave of similar websites emerging across the web, I still feel that the internet is in a much better state than ever before. At the end of the evening I chatted with a few young designers in the audience who were new to web design, and it startled me how they had interpreted Andy’s opinions. They felt that they were doing something wrong and ultimately producing bad designs just because they were similar to bootstrap layouts.

I agree that we continually need to be challenging ourselves creatively to move the web forwards, but at the same time, these popular layouts work for a large majority of clients and content.

So, how can we disrupt the way we approach layouts?

The highlight of the talk was when we looked to comic strips for direction and inspiration.

Comic books commonly use grid sizings to establish pace in their stories. Smaller grid spaces are used in succession to create a faster pace whilst larger grid blocks help to slow down the storytelling. Readers will naturally spend longer on the larger blocks of content. Take a look at this example to see how the Concrete comic book series uses this grid system to assist pace…

We can easily transfer this approach to the layouts we design for the web. In fact, you're probably already doing it, to an extent, without realising it. Take a look at the bcsagency blog page and notice how the ‘Featured’ blog post spans over two of the three columns. We want readers to slow down, take notice of and spend more time on this featured content.

Let’s start consciously practicing this technique to evolve the web into a place where layouts are challenged and variety exists. I will certainly be considering this in my designs, watch this space!

If you'd like some advice on creating imaginative layouts in your next project then please get in touch!