Getting over the grid — Making Web Design Different

by Joe Mitchell

The hottest new trend in Web design — the exploded grid — seems to be a direct result of the backlash against the classic ‘full width hero banner and three column grid’. But what is it? Where did it come from? And why is it making such a big impact with designers at the moment? I reached out to a pioneer in the system, Ben Johnson from Elegant Seagulls, for his thoughts.

  • What is the exploded grid?

  • Grid systems have become a hallmark of web design in recent years, with their importance in responsive design and ease of use in creating a visually pleasing layout.

  • In its simplest form the exploded grid takes a normal grid system (960, 1280 e.t.c.) and purposefully breaks it. By placing elements outside of the grid, across grid lines and behind each other, we attempt to create more interest and bring a design to life. When talking to Ben, he describes it as:

    “Breaking the grid vertically and/or horizontally to create more interesting negative space.”

  • Where did it come from?

  • The style itself has been around for a few years, however until now it was used very sparingly and implemented rarely on the web. The name was given to it by Ben, during his project “Jack Dusty” (http://imjackdusty.com/).

    “I have always used a more freestyle swiss grid structure and I think this led to the natural progression of an exploded grid. This exploration was more about just trying to do something different, breaking the grid, and experimenting with negative space. Selective Few’s landing https://dribbble.com/shots/1151798-Selective-Few-Full and my Couple.Me https://dribbble.com/shots/1171264-Couple-Full-Concept done mid 2013 are some of my earlier explorations. It was not until this year that I put an actual name to the style, but I by no means think I created it. It was just a natural evolution of designers pushing what they thought the Web could be.”

  • Why is it becoming so popular?

  • There have been a number of articles written this year (http://www.novolume.co.uk/blog/all-websites-look-the-same/, http://klare.io/everything-looks-the-same.html, https://medium.com/matter/the-web-we-have-to-save-2eb1fe15a426) asking if website designs are becoming stale, repetitive and near identical to each other, and we have to agree. Ben’s ‘Jack Dusty’ project has created a big impact on one of the leading community websites — Dribbble.com — and the trend is now regularly featuring in designs across the Web. It has been encouraged by top designers from the community and is frequently a hot topic here at Thompson HQ. All of this has been a large driving force in bringing the exploded grid style to fruition.

  • 1 2 3 4

  • I asked Ben about his thoughts on the style becoming popular.

    “I love seeing the design community continue to push boundaries. My hope is that this style is not used for every project just because it is trendy vs thinking about what is right for the client, goals, and audience. It is most successful when used sparingly and mixed with other design best practices. The exciting part will be seeing the next evolution.”

  • Are there any negatives to this style?

  • As with any design trend, there will always be negatives to breaking the mould. The most obvious of these being:

    • Challenging to turn designs responsive.
    • Extended development time
    • CMS driven content and repeatable blocks are troublesome..
    I posed these questions to Ben.

    “We have built a handful of sites that utilise an exploded grid here at Elegant Seagulls […] but it does provide a challenge for developers. Our goal is to make sure the final deliverable is manageable and flexible for the client whilst still being unique.”

    The results are clear, utilising the exploded grid can leave you with a unique design adored by creatives and clients worldwide, but it is certainly not a style to lean on for your basic everyday designs. Done badly it can leave your users confused and clients struggling to make updates to their websites.

    Instead of just following a trend blindly, at Thompsons we believe the key to successful web design is taking the needs of each client, their audience and objectives into consideration and providing them with a design suited to their business.

    Thanks to Ben Johnson for talking to me, you can check out more of his work at http://www.elegantseagulls.com/.

  • To make sure you don’t miss out on our best ideas, news and insights, or if you’d like to receive invites to events that you really shouldn’t miss, you can subscribe to our mailing list here .

Hide comments >
comments powered by Disqus