{"id":2411,"date":"2021-06-21T16:00:05","date_gmt":"2021-06-21T15:00:05","guid":{"rendered":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/?p=2411"},"modified":"2023-07-17T17:32:14","modified_gmt":"2023-07-17T16:32:14","slug":"using-a-grid-based-collage-in-web-design","status":"publish","type":"post","link":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-a-grid-based-collage-in-web-design\/","title":{"rendered":"Using grid based imagery in web design"},"content":{"rendered":"<p>Here at <a href=\"https:\/\/www.pumpkinwebdesign.com\/website-designers-manchester\/\">Pumpkin Web Design Manchester,<\/a> we are Manchester&#8217;s leading <a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-typography-as-a-decorative-website-feature\/\">web design<\/a> experts, and we provide high quality, effective, <a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-different-types-of-typographical-emphasis-in-web-design\/\">web design <\/a>solutions for a range of local companies and businesses across Manchester, and the surrounding area. This includes <a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-blackburn\/\">Blackburn<\/a> and <a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/web-design-stockport\/\">Stockport.<\/a> As a result, we have produced this guide to everything you should know about designing grid based imagery for your website.<\/p>\n<h2>How to use grid based imagery effectively?<\/h2>\n<p>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:<\/p>\n<ul>\n<li><em><strong>Using grid sections in a mosaic effect to create one larger image or abstract pattern collectively &#8211;<\/strong><\/em> 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.<\/li>\n<li><em><strong>Using different sized sections with different images-<\/strong><\/em> 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.<\/li>\n<li><strong><em>Using equal sections with different images-<\/em><\/strong> using sections that are the same size, and equal in every way will create a very structured style that doesn&#8217;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.<\/li>\n<\/ul>\n<h3>Different options for using grid based imagery in web design<\/h3>\n<p>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:<\/p>\n<ul>\n<li><em><strong>Above the fold-<\/strong><\/em> 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.<\/li>\n<li><strong><em>As the main body-<\/em><\/strong> 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.<\/li>\n<\/ul>\n<p>For more information or advice, get in touch with the team today, here at <a href=\"https:\/\/www.pumpkinwebdesign.com\/website-designers-manchester\/\">Pumpkin Web Design Manchester.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here at Pumpkin Web Design Manchester, we are Manchester&#8217;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 [&#8230;]\n","protected":false},"author":2,"featured_media":2286,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[17],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.10 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Using grid based imagery in web design - Pumpkin Web Design Manchester<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-a-grid-based-collage-in-web-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using grid based imagery in web design - Pumpkin Web Design Manchester\" \/>\n<meta property=\"og:description\" content=\"Here at Pumpkin Web Design Manchester, we are Manchester&#8217;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 [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-a-grid-based-collage-in-web-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Pumpkin Web Design Manchester\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-21T15:00:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-17T16:32:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-content\/uploads\/2019\/05\/ipad-820272_1920.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1280\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Pumpkin Web Design Manchester\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pumpkin Web Design Manchester\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-a-grid-based-collage-in-web-design\/\",\"url\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-a-grid-based-collage-in-web-design\/\",\"name\":\"Using grid based imagery in web design - Pumpkin Web Design Manchester\",\"isPartOf\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website\"},\"datePublished\":\"2021-06-21T15:00:05+00:00\",\"dateModified\":\"2023-07-17T16:32:14+00:00\",\"author\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-a-grid-based-collage-in-web-design\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-a-grid-based-collage-in-web-design\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-a-grid-based-collage-in-web-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using grid based imagery in web design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website\",\"url\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/\",\"name\":\"Pumpkin Web Design Manchester\",\"description\":\"Full service digital agency\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28\",\"name\":\"Pumpkin Web Design Manchester\",\"description\":\"Providing top notch web design, across Manchester, since 2009\",\"url\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/author\/g4oyprjmpvh3epn\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using grid based imagery in web design - Pumpkin Web Design Manchester","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-a-grid-based-collage-in-web-design\/","og_locale":"en_GB","og_type":"article","og_title":"Using grid based imagery in web design - Pumpkin Web Design Manchester","og_description":"Here at Pumpkin Web Design Manchester, we are Manchester&#8217;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 [...]","og_url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-a-grid-based-collage-in-web-design\/","og_site_name":"Pumpkin Web Design Manchester","article_published_time":"2021-06-21T15:00:05+00:00","article_modified_time":"2023-07-17T16:32:14+00:00","og_image":[{"width":1920,"height":1280,"url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-content\/uploads\/2019\/05\/ipad-820272_1920.jpg","type":"image\/jpeg"}],"author":"Pumpkin Web Design Manchester","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Pumpkin Web Design Manchester","Estimated reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-a-grid-based-collage-in-web-design\/","url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-a-grid-based-collage-in-web-design\/","name":"Using grid based imagery in web design - Pumpkin Web Design Manchester","isPartOf":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website"},"datePublished":"2021-06-21T15:00:05+00:00","dateModified":"2023-07-17T16:32:14+00:00","author":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28"},"breadcrumb":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-a-grid-based-collage-in-web-design\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-a-grid-based-collage-in-web-design\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-a-grid-based-collage-in-web-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/"},{"@type":"ListItem","position":2,"name":"Using grid based imagery in web design"}]},{"@type":"WebSite","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website","url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/","name":"Pumpkin Web Design Manchester","description":"Full service digital agency","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28","name":"Pumpkin Web Design Manchester","description":"Providing top notch web design, across Manchester, since 2009","url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/author\/g4oyprjmpvh3epn\/"}]}},"_links":{"self":[{"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts\/2411"}],"collection":[{"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/comments?post=2411"}],"version-history":[{"count":3,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts\/2411\/revisions"}],"predecessor-version":[{"id":12179,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts\/2411\/revisions\/12179"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/media\/2286"}],"wp:attachment":[{"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/media?parent=2411"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/categories?post=2411"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/tags?post=2411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}