Looking for a quick answer to your question? Click here...

WOO HOO! John and Bri are ready to help!

Just fill out the form below and we'll get back to you with some sound advice at the very least.

How can John & Bri help today?

You can read more about our privacy policy here.

Advantages of broken grid web design

web design manchester

In web design, the layout, the colour scheme and the visual design need to be effective, and match your company branding. One of the most common types of website layout is the grid design. This type of layout involves positioning elements like text and imagery into neat, well-organised and well defined blocks, which can be very logical and helpful for the user. However, this type of layout is not particularly memorable, and it might not be enough to help your website stand out from the crowd. Instead, you could consider a broken grid style of web design. But what are the advantages of broken grid web design? And how can you design this effectively? Well, here at Pumpkin Web Design Manchester, we are Manchester’s leading web design experts. We work with companies and businesses across Manchester, and the surrounding area, including Wigan and Southport, to provide web design solutions that can help businesses grow. As a result, we have produced this guide to everything you should know about broken grid web design.

What is broken grid web design?

Broken grid web design uses some of the same elements as a grid based website, including positioning text or image based content within well defined borders. However, this type of layout then involves breaking or smudging these well defined barrier to create a more visually interesting result. This can help attract attention to key points or elements, like the call to action button.

How to create a broken grid website layout

You can create a broken grid layout in a number of ways, including:

  • Overlaying elements- by overlaying content over the top of an existing content box or space, you can break the well defined grid pattern. This works with just one element overlaying several, or with each piece of content overlaying the next. Just make sure that each piece of content is easy to see and read on all screen sizes, using responsive web design.
  • Removing the space between elements- by removing the space you can create a collapsed grid style website. This allows each “box” or content container to run into the next. 
  • Content breaking borders- if you want a more subtle effect, you can simply allow some of your content to break the borders of the content area, to splash into the other spaces. This can be a risk though, as it can look like your web design is unprofessional, so you would have to create imagery that is designed for this purpose, rather than re-purposing old or generic content.

Advantages of broken grid web design

So, why should you opt for a broken grid layout for your website? Well, this is a website layout that can provide a range of advantages, including:

  • Promoting your company branding- if your brand or company persona is well defined, you need web design to match. And a broken grid can allow you to be more creative when expressing your company branding.
  • Increase sales and sign ups- the human eye is trained to spot imperfections, and this means that any break in the grid will draw attention. If this is well designed, it means that your users attention will then be focused on your call to action button, resulting in more sales and sign ups.

For more information, or for professional web design support in Manchester, get in touch with the experts today, here at Pumpkin Web Design Manchester.