{"id":7310,"date":"2021-07-08T11:10:24","date_gmt":"2021-07-08T10:10:24","guid":{"rendered":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/?p=7310"},"modified":"2023-07-17T17:27:23","modified_gmt":"2023-07-17T16:27:23","slug":"size-considerations-for-modular-grids-in-web-design","status":"publish","type":"post","link":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/size-considerations-for-modular-grids-in-web-design\/","title":{"rendered":"Size considerations for modular grids 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\/contact-page-web-design-mistakes\/\">web design <\/a>experts. We create stunning <a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-monotone-colours-for-web-design\/\">web design<\/a> solutions, for businesses and companies across the North West. This includes <a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-southport\/\">Southport<\/a>\u00a0and\u00a0<a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-wigan\/\">Wigan<\/a>. As a result, we have produced this guide to everything you should know about modular grids in web design.<\/p>\n<h2>What is a modular grid?<\/h2>\n<p>A modular grid is a layout that involves using individual, square or rectangular modules that sit together within a grid. This differs from other grid layouts, as each module will be the same size and shape, creating a perfect grid design.<\/p>\n<h3>What are the important size considerations for modular grids in web design?<\/h3>\n<p>When using a modular grid for your website, there are a number of important considerations to take into account, including the colour, the imagery, and responsive design. But one of the biggest considerations is the sizing of the modular grid. When deciding on this, there are two things to consider:<\/p>\n<ul>\n<li>The size of the grid boxes<\/li>\n<li>The width between grid boxes<\/li>\n<\/ul>\n<h3>Modular grid box sizes<\/h3>\n<p>In a modular gird, all the boxes need to be the same size so that they can stack horizontally and vertically with each other to create the equal grid. But you can choose the size of these boxes, from small squares of six across, to large squares of just two or three, a modular grid allows you to divide the space in a way that will be most effective for your website content.<\/p>\n<p>For minimalist web design, you should consider using a two by two modular grid, to reduce the visual clutter on the page, and to streamline your design. This can be perfect for combining text based content with visual imagery for a stunning website layout that really grabs attention.<\/p>\n<h3>Inter-grid width sizes<\/h3>\n<p>The second important factor to consider is the width between the modular boxes. This width will be even throughout the page, and the space tends to be filled with a standard background colour. Using a wide width can help to clearly divide the content in each box, and separate the content visually. Using a thinner width does mean that the boxes will be closer together, but this is a design style that can be more effective for minimalist web design.<\/p>\n<p>When choosing a background colour, be sure to consider the contrast this will create between the modular grid boxes. Websites with a heavy contrast can be designed to strike interest, while designs with less contrast can have a softer overall design.<\/p>\n<p>For more information or advice about professional web design solutions for your company, get in touch with the experts 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. We create stunning web design solutions, for businesses and companies across the North West. This includes Southport\u00a0and\u00a0Wigan. As a result, we have produced this guide to everything you should know about modular grids in web design. What is a modular grid? A [&#8230;]\n","protected":false},"author":2,"featured_media":3337,"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>Size considerations for modular grids 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\/size-considerations-for-modular-grids-in-web-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Size considerations for modular grids 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. We create stunning web design solutions, for businesses and companies across the North West. This includes Southport\u00a0and\u00a0Wigan. As a result, we have produced this guide to everything you should know about modular grids in web design. What is a modular grid? A [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/size-considerations-for-modular-grids-in-web-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Pumpkin Web Design Manchester\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-08T10:10:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-17T16:27:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-content\/uploads\/2020\/06\/computer-1867758_1280.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"853\" \/>\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=\"2 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\/size-considerations-for-modular-grids-in-web-design\/\",\"url\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/size-considerations-for-modular-grids-in-web-design\/\",\"name\":\"Size considerations for modular grids in web design - Pumpkin Web Design Manchester\",\"isPartOf\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website\"},\"datePublished\":\"2021-07-08T10:10:24+00:00\",\"dateModified\":\"2023-07-17T16:27:23+00:00\",\"author\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/size-considerations-for-modular-grids-in-web-design\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/size-considerations-for-modular-grids-in-web-design\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/size-considerations-for-modular-grids-in-web-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Size considerations for modular grids 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":"Size considerations for modular grids 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\/size-considerations-for-modular-grids-in-web-design\/","og_locale":"en_GB","og_type":"article","og_title":"Size considerations for modular grids in web design - Pumpkin Web Design Manchester","og_description":"Here at Pumpkin Web Design Manchester, we are Manchester&#8217;s leading web design experts. We create stunning web design solutions, for businesses and companies across the North West. This includes Southport\u00a0and\u00a0Wigan. As a result, we have produced this guide to everything you should know about modular grids in web design. What is a modular grid? A [...]","og_url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/size-considerations-for-modular-grids-in-web-design\/","og_site_name":"Pumpkin Web Design Manchester","article_published_time":"2021-07-08T10:10:24+00:00","article_modified_time":"2023-07-17T16:27:23+00:00","og_image":[{"width":1280,"height":853,"url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-content\/uploads\/2020\/06\/computer-1867758_1280.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":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/size-considerations-for-modular-grids-in-web-design\/","url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/size-considerations-for-modular-grids-in-web-design\/","name":"Size considerations for modular grids in web design - Pumpkin Web Design Manchester","isPartOf":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website"},"datePublished":"2021-07-08T10:10:24+00:00","dateModified":"2023-07-17T16:27:23+00:00","author":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28"},"breadcrumb":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/size-considerations-for-modular-grids-in-web-design\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/size-considerations-for-modular-grids-in-web-design\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/size-considerations-for-modular-grids-in-web-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/"},{"@type":"ListItem","position":2,"name":"Size considerations for modular grids 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\/7310"}],"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=7310"}],"version-history":[{"count":2,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts\/7310\/revisions"}],"predecessor-version":[{"id":12166,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts\/7310\/revisions\/12166"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/media\/3337"}],"wp:attachment":[{"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/media?parent=7310"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/categories?post=7310"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/tags?post=7310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}