Using grid based imagery in web design

Here at Pumpkin Web Design Manchester, we are Manchester’s leading web design experts, and we provide high quality, effective, web design solutions for a range of local companies and businesses across Manchester, and the surrounding area. This includes Blackburn and Stockport. As a result, we have produced this guide to everything you should know about designing grid based imagery for your website.

How to use grid based imagery effectively?

So, how can you create grid based imagery and apply this to your website effectively? 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 grid based imagery, 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 imagery 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.

Different options for using grid based imagery in web design

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

  • Above the fold- positioning your grid based imagery 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 grid based imagery, 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.