{"id":3483,"date":"2020-08-13T11:08:50","date_gmt":"2020-08-13T10:08:50","guid":{"rendered":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/?p=3483"},"modified":"2023-07-27T15:15:20","modified_gmt":"2023-07-27T14:15:20","slug":"using-rectangles-in-web-design","status":"publish","type":"post","link":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-rectangles-in-web-design\/","title":{"rendered":"Using rectangles in web design"},"content":{"rendered":"<p>Shape is an important factor in web design. From visual design, to psychology, choosing the right shapes can have a big influence on the overall quality and style of your web design, as well as a real impact on conversions and profits. Rectangles are a popular choice, but what makes these so effective? And what should you consider when using rectangles in web design? Well, 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-angles-as-a-web-design-feature\/\">web design<\/a> professionals. We work with a variety of companies across Manchester, and the North West, including\u00a0 those in <a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-blackburn\/\">Blackburn<\/a>\u00a0and\u00a0<a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-chorley\/\">Chorley<\/a>, to provide high quality web design solutions. As a result, we have produced this guide to everything you should know about rectangles in web design.<\/p>\n<h2>Different options for rectangles in web design<\/h2>\n<p>So what are the different options for rectangular shapes in web design? Well, there are several ways to use rectangles throughout your website, including:<\/p>\n<ul>\n<li><strong><em>As part of a grid design-<\/em> <\/strong>grid design usually uses squares positioned next to one another, to create a grid. These are all individual boxes that are well defined, and each may contain different content. However, using rectangles instead allows you to create a more visually interesting design pattern, with larger &#8220;boxes&#8221; for your content, and this can be very effective.<\/li>\n<li><strong><em>For call to action buttons-<\/em><\/strong> call to action buttons need to be well defined, and stand out from the rest of the page. One of the most effective ways to do this is by using a rectangular shape for the button, that is filled in a different or contrasting colour to the background.<\/li>\n<li><em><strong>For content columns-<\/strong><\/em> using two or three content columns next to one another can be very effective, and makes it much easier to compare and contrast information, particularly about your products or services. A rectangular design for these types of columns can be useful, as they fill the screen and allow each piece of content to be visually separate from another, so the information is easy to skim or scan.<\/li>\n<\/ul>\n<h3>What are the advantages of using rectangles in web design?<\/h3>\n<p>Rectangles can be very effective for any website. There are a number of advantages to using these, including:<\/p>\n<ul>\n<li><strong><em>Designing for the screen-<\/em><\/strong> the chances are that your potential customers or clients will be viewing your website on a rectangular screen. Using rectangular layouts and shapes for your content areas can help to fill this screen effectively, ensuring each piece of content has it&#8217;s own space, without appearing disjointed.<\/li>\n<li><strong><em>Responsive design-<\/em> <\/strong>designing for mobile users, as well as desktop users, is now more important than ever. And this means that your website needs to be responsive. Rectangular design can be the most effective option for responsive design, as each box will stack neatly on top of one another, on a mobile screen. This can ensure a positive user experience for your users, no matter which device they use.<\/li>\n<\/ul>\n<p>For more information or advice, or for high quality, professional web design solutions, 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>Shape is an important factor in web design. From visual design, to psychology, choosing the right shapes can have a big influence on the overall quality and style of your web design, as well as a real impact on conversions and profits. Rectangles are a popular choice, but what makes these so effective? And what [&#8230;]\n","protected":false},"author":2,"featured_media":762,"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 rectangles 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-rectangles-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 rectangles in web design - Pumpkin Web Design Manchester\" \/>\n<meta property=\"og:description\" content=\"Shape is an important factor in web design. From visual design, to psychology, choosing the right shapes can have a big influence on the overall quality and style of your web design, as well as a real impact on conversions and profits. Rectangles are a popular choice, but what makes these so effective? And what [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-rectangles-in-web-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Pumpkin Web Design Manchester\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-13T10:08:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-27T14:15:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-content\/uploads\/2018\/05\/shutterstock_430087837.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"698\" \/>\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-rectangles-in-web-design\/\",\"url\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-rectangles-in-web-design\/\",\"name\":\"Using rectangles in web design - Pumpkin Web Design Manchester\",\"isPartOf\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website\"},\"datePublished\":\"2020-08-13T10:08:50+00:00\",\"dateModified\":\"2023-07-27T14:15:20+00:00\",\"author\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-rectangles-in-web-design\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-rectangles-in-web-design\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-rectangles-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 rectangles 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 rectangles 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-rectangles-in-web-design\/","og_locale":"en_GB","og_type":"article","og_title":"Using rectangles in web design - Pumpkin Web Design Manchester","og_description":"Shape is an important factor in web design. From visual design, to psychology, choosing the right shapes can have a big influence on the overall quality and style of your web design, as well as a real impact on conversions and profits. Rectangles are a popular choice, but what makes these so effective? And what [...]","og_url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-rectangles-in-web-design\/","og_site_name":"Pumpkin Web Design Manchester","article_published_time":"2020-08-13T10:08:50+00:00","article_modified_time":"2023-07-27T14:15:20+00:00","og_image":[{"width":1000,"height":698,"url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-content\/uploads\/2018\/05\/shutterstock_430087837.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-rectangles-in-web-design\/","url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-rectangles-in-web-design\/","name":"Using rectangles in web design - Pumpkin Web Design Manchester","isPartOf":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website"},"datePublished":"2020-08-13T10:08:50+00:00","dateModified":"2023-07-27T14:15:20+00:00","author":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28"},"breadcrumb":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-rectangles-in-web-design\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-rectangles-in-web-design\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-rectangles-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 rectangles 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\/3483"}],"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=3483"}],"version-history":[{"count":2,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts\/3483\/revisions"}],"predecessor-version":[{"id":12419,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts\/3483\/revisions\/12419"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/media\/762"}],"wp:attachment":[{"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/media?parent=3483"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/categories?post=3483"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/tags?post=3483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}