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.

Using a grid based collage in web design

When creating any website, its important to balance structure, with creativity. One way to do this is through a grid design. The structure of the grid provides the outline for the creativity. And the grid doesnt just have to be a row of squares. It can instead be an irregular grid with unequal sections, or even a grid separated by curves, waves, or zig zags. In fact, a grid can even be used to create a collage. But how? And can this be useful for your web design? Well, here at Pumpkin Web Design Manchester, we are Manchester’s leading web design experts. We create stunning web design solutions, for businesses and companies across the North West. This includes Southport and Wigan. As a result, we have produced this guide to using a grid based collage in web design.

How to create a grid based collage

So, how can you create a grid based collage? Well, this can be created in a number of ways, including:

  • Using grid sections in a mosaic effect to create one larger image or abstract pattern collectively – this is a very creative way to use a grid based collage, and it is sure to draw attention. If you are using each grid section as buttons to another page, you might want to include a hover effect, so that when desktop users hover over one of the sections, they can see that it is interactive. Another thing to consider is using this design as a responsive website, as when mobile users load the website, the mosaic probably will not align correctly.
  • Using different sized sections with different images- if you are going to use different sized grid sections, you should make sure the page you definitely want users to click through too is the largest section. You should also consider having a common theme with the images, to tie the collage together effectively. This could be common colours, typography, or imagery itself. For example, a three section collage, each with the same shoe, photographed from a different angle, or in a different colour, would be a great addition for a company or business that sells shoes.
  • Using equal sections with different images- using sections that are the same size, and equal in every way will create a very structured style that doesn’t look as creative as the other options. However, you could add some creativity by separating each section with a curve, or a zig zag line instead of a simple straight line.

Using a grid based collage in web design

So once you have decided on how you want your grid based collage to look, you need to decide how to use this on your website. You could consider:

  • Above the fold- positioning your grid based collage above the fold. If this is a style that appeals to you, it might a good idea to remove the links to other pages, from each grid section, and simply create a mosaic style visual effect. This is because the above the fold content should be focused on drawing attention, and really wowing your users visually, instead of functionality.
  • As the main body- the main body of the landing page is a great place to position a grid based collage, as this will grab the attention of the user, after they have scrolled down your page, and this will really pique their interest. It also means each grid section can be used for navigation too, which could improve your sales and sign ups.

For more information or advice, get in touch with the team today, here at Pumpkin Web Design Manchester.