{"id":159,"date":"2017-05-09T11:08:53","date_gmt":"2017-05-09T11:08:53","guid":{"rendered":"https:\/\/www.codeandco.ae\/blog\/?p=159"},"modified":"2024-04-06T06:54:49","modified_gmt":"2024-04-06T06:54:49","slug":"importance-of-white-space-in-web-design","status":"publish","type":"post","link":"https:\/\/www.codeandco.ae\/blog\/importance-of-white-space-in-web-design","title":{"rendered":"The importance of white space in web design"},"content":{"rendered":"<p>White space is the most underrated parameter of <span style=\"text-decoration: underline;\"><span style=\"color: #993300;\"><a style=\"color: #993300; text-decoration: underline;\" href=\"https:\/\/www.codeandco.ae\/web-design-development-branding-services.php\">web design<\/a><\/span><\/span>. That\u2019s why when web design company or developer create white space between elements of a webpage or in a layout; most of us seem to think that\u2019s a waste of space estate. As a result, we often call it \u201cnegative space\u201d.<\/p>\n<p>But what if white space is an important part of promoting your brand to your target segment of the audience? What if we tell you that back in 1930, Jack Tschichold wrote that \u201cwhite space is to be regarded as an active element, not a passive background\u201d? You may seem to be more curious, right?<\/p>\n<p>So, let\u2019s go back and understand \u201cwhite space\u201d from the beginning\u201d.<\/p>\n<p><strong>What is \u201cwhite space\u201d?<\/strong><\/p>\n<p>First, have a look at the following picture and then we will talk more about it.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-160\" src=\"https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/vase.png\" alt=\"vase\" width=\"620\" height=\"400\" srcset=\"https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/vase.png 620w, https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/vase-300x194.png 300w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/p>\n<p>By looking at the picture, what do you think is more important? Two faces or the vase made of the \u201cwhite space\u201d? Here lies the value of \u201cwhite space\u201d. If the \u201cwhite space\u201d were not being used, it would\u2019ve not been existent.<\/p>\n<p>So whenever you are creating a design or trying to <strong><span style=\"text-decoration: underline;\"><span style=\"color: #993300;\"><a style=\"color: #993300; text-decoration: underline;\" href=\"https:\/\/www.codeandco.ae\/web-design-development-portfolio-dubai.php\">promote your brand<\/a><\/span><\/span><\/strong>, use the \u201cwhite space\u201d in the website appropriately.<\/p>\n<p>Here\u2019s more on \u201cwhite space\u201d so that after reading this article, you can go ahead and implement the \u201cwhite space\u201d the right way.<\/p>\n<p><strong>Types of \u201cwhite space\u201d<\/strong><\/p>\n<p>In web design, there are two types of \u201cwhite spaces\u201d.<\/p>\n<ul>\n<li><strong>Macro: <\/strong>The white space you leave between the core elements in your website is called macro white space.<\/li>\n<li><strong>Micro:<\/strong> The white space between the smaller elements of your website is called micro white space.<\/li>\n<\/ul>\n<p>For example, go to google.ae and you would see the following \u2013<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-167\" src=\"https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/Example.of_.macro_.micro_.jpg\" alt=\"Example of macro-micro\" width=\"620\" height=\"329\" srcset=\"https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/Example.of_.macro_.micro_.jpg 620w, https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/Example.of_.macro_.micro_-300x159.jpg 300w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>As Google is a famous populariser of white space in their web design, you can see that the white space between Google and search bar; that we would call \u201cmacro white space\u201d. And the white space between \u201cFarsi\u201d and \u201cEnglish\u201d, we would call \u201cmicro white space\u201d.<\/p>\n<p><strong>White space increases readability<\/strong><\/p>\n<p>If you build websites or own one or <strong><span style=\"text-decoration: underline;\"><span style=\"color: #993300;\"><a style=\"color: #993300; text-decoration: underline;\" href=\"https:\/\/www.codeandco.ae\/blog\/hiring-web-design-firm-dubai\">hire a web design company<\/a><\/span><\/span><\/strong>,\u00a0you want people to read your content. If your content is not being written using the right amount of \u201cwhite space\u201d, people would visit your site and bounce back to other sites where the readability is good.<\/p>\n<p>If your design and content are cluttered and there is too little space in between, then it would be difficult for you to convert better. That brings us to the brand promotion and ad campaign.<\/p>\n<p><strong>White space enhances brand value<\/strong><\/p>\n<p>Take an analogy. Let\u2019s say you went to your friend\u2019s house and you found that the home is neat and clean and there is only one or two furniture in the room. A lot of spaces have been kept blank. How would you feel? You would feel expansive.<\/p>\n<p>Similarly, if you go to your friend\u2019s home and find that the whole room is cluttered with many, different things, you would immediately feel confined.<\/p>\n<p>The website works the same way. When you leave the appropriate space blank, readers can take their time and read through whatever you have put up as content and advertising material. With proper use of white space, your readers feel expanded and thus, love to be in your website. And thus, your brand value increases and more and more people start to visit your site.<\/p>\n<p>Yes, I agree that you need proof.<\/p>\n<p>So here are the evidence shown below about \u201cwhite space\u201d to convince your left brain that \u201cwhite space\u201d matters more than you think.<\/p>\n<p><strong>An interface designer\u2019s view on &#8211; Importance of \u201cwhite space\u201d<\/strong><\/p>\n<p>Luke Wroblewski, an interface designer mentions that for designers who create the web designs, white space is as important as the content. He also goes on to say that if the web designers change the padding and alignment (if there is less white space in between); it impacts readability and affects the visual acceptance of readers.<\/p>\n<p>Here\u2019s the proof \u2013<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-162\" src=\"https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/dev_invisibile1.jpg\" alt=\"dev_invisibile1\" width=\"474\" height=\"317\" srcset=\"https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/dev_invisibile1.jpg 474w, https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/dev_invisibile1-300x201.jpg 300w\" sizes=\"auto, (max-width: 474px) 100vw, 474px\" \/><\/p>\n<p>In the above example, you can see the actual design on the left side and the implementation of the design on the right side. Clearly, while implementing the padding and alignment, the web designers changed them and see what happened. It has reduced the readability and visual representation.<\/p>\n<p><strong>How white space affects brand positioning?<\/strong><\/p>\n<p>Talking about white space, Mark Boulton wrote an entire article on it. He says that white space is one of the great tools for web designers. They use this tool to enhance the sophistication and elegance of a brand.<\/p>\n<p>Here\u2019s an example which proves how white space affects a brand and its positioning.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-163\" src=\"https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/figure3_luxury_direct.jpg\" alt=\"figure3_luxury_direct\" width=\"540\" height=\"406\" srcset=\"https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/figure3_luxury_direct.jpg 540w, https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/figure3_luxury_direct-300x226.jpg 300w\" sizes=\"auto, (max-width: 540px) 100vw, 540px\" \/><\/p>\n<p>If you look at both of these direct mails, you would see that content and photography are absolutely similar in both the cases. But on the left side there is less white space and the right side there is more white space. Clearly, we can see that \u201cless white space\u201d means \u201ccheap\u201d and \u201cmore white space\u201d means \u201cluxury\u201d.<\/p>\n<p><strong>\u00a0<\/strong><strong>Importance of Active and Passive White Space<\/strong><\/p>\n<p>Most of the web designers are eager to talk about active white space, but even passive white space matters. Mark Boulton says that if passive white space is not given importance, it\u2019s a bad design.<\/p>\n<p>Let\u2019s look at an example through which we can understand the importance of active white space and passive white space.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-164\" src=\"https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/figure4_nowhitespace.gif\" alt=\"figure4_nowhitespace\" width=\"540\" height=\"406\" \/><\/p>\n<p>This piece needs active white space without which it won\u2019t be possible to read it through.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-165\" src=\"https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/figure5_passivewhitespace.gif\" alt=\"figure5_passivewhitespace\" width=\"540\" height=\"406\" \/><\/p>\n<p>Now the piece looks much better. And by changing the line space, margin, type family and weight, we have this neat looking piece. All of these are called \u201cpassive whitespace\u201d.<\/p>\n<p><strong>In the final analysis<\/strong><\/p>\n<p>Visit your website or the website you are designing. Because if you are not paying attention to the white space, chances are you are losing out on a lot of potential customers and a lot of revenue for your business.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>White space is the most underrated parameter of web design. That\u2019s why when web design company or developer create white space between elements of a webpage or in a layout; most of us seem to think that\u2019s a waste of space estate. As a result, we often call it \u201cnegative space\u201d. But what if white &hellip; <a href=\"https:\/\/www.codeandco.ae\/blog\/importance-of-white-space-in-web-design\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">The importance of white space in web design<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":175,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-159","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design"],"acf":[],"yoast_head":"\n<title>The Importance of White Space in Web Design of Your Company Site<\/title>\n<meta name=\"description\" content=\"Web design Company or not, everyone should use white space in their web designing and development. Let&#039;s know why it is important to implement.\" \/>\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.codeandco.ae\/blog\/importance-of-white-space-in-web-design\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Importance of White Space in Web Design of Your Company Site\" \/>\n<meta property=\"og:description\" content=\"Web design Company or not, everyone should use white space in their web designing and development. Let&#039;s know why it is important to implement.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codeandco.ae\/blog\/importance-of-white-space-in-web-design\" \/>\n<meta property=\"og:site_name\" content=\"Code and Co\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-09T11:08:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-06T06:54:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/blog-image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"613\" \/>\n\t<meta property=\"og:image:height\" content=\"459\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"code\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"code\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codeandco.ae\/blog\/importance-of-white-space-in-web-design\",\"url\":\"https:\/\/www.codeandco.ae\/blog\/importance-of-white-space-in-web-design\",\"name\":\"The Importance of White Space in Web Design of Your Company Site\",\"isPartOf\":{\"@id\":\"https:\/\/www.codeandco.ae\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codeandco.ae\/blog\/importance-of-white-space-in-web-design#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codeandco.ae\/blog\/importance-of-white-space-in-web-design#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/blog-image.jpg\",\"datePublished\":\"2017-05-09T11:08:53+00:00\",\"dateModified\":\"2024-04-06T06:54:49+00:00\",\"author\":{\"@id\":\"https:\/\/www.codeandco.ae\/blog\/#\/schema\/person\/683686c2aea027386872ffc5cf6859a0\"},\"description\":\"Web design Company or not, everyone should use white space in their web designing and development. Let's know why it is important to implement.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codeandco.ae\/blog\/importance-of-white-space-in-web-design#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codeandco.ae\/blog\/importance-of-white-space-in-web-design\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codeandco.ae\/blog\/importance-of-white-space-in-web-design#primaryimage\",\"url\":\"https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/blog-image.jpg\",\"contentUrl\":\"https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/blog-image.jpg\",\"width\":613,\"height\":459,\"caption\":\"web design company in dubai uae\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codeandco.ae\/blog\/importance-of-white-space-in-web-design#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codeandco.ae\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The importance of white space in web design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codeandco.ae\/blog\/#website\",\"url\":\"https:\/\/www.codeandco.ae\/blog\/\",\"name\":\"Code and Co\",\"description\":\"Digital Strategy, Design and Innovation - Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codeandco.ae\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codeandco.ae\/blog\/#\/schema\/person\/683686c2aea027386872ffc5cf6859a0\",\"name\":\"code\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codeandco.ae\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3d455e50d1511f12024d19b513feddd2fd972b216114af9ea14fb61524bb82fe?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3d455e50d1511f12024d19b513feddd2fd972b216114af9ea14fb61524bb82fe?s=96&d=mm&r=g\",\"caption\":\"code\"},\"url\":\"https:\/\/www.codeandco.ae\/blog\/author\/code\"}]}<\/script>\n","yoast_head_json":{"title":"The Importance of White Space in Web Design of Your Company Site","description":"Web design Company or not, everyone should use white space in their web designing and development. Let's know why it is important to implement.","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.codeandco.ae\/blog\/importance-of-white-space-in-web-design","og_locale":"en_US","og_type":"article","og_title":"The Importance of White Space in Web Design of Your Company Site","og_description":"Web design Company or not, everyone should use white space in their web designing and development. Let's know why it is important to implement.","og_url":"https:\/\/www.codeandco.ae\/blog\/importance-of-white-space-in-web-design","og_site_name":"Code and Co","article_published_time":"2017-05-09T11:08:53+00:00","article_modified_time":"2024-04-06T06:54:49+00:00","og_image":[{"width":613,"height":459,"url":"https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/blog-image.jpg","type":"image\/jpeg"}],"author":"code","twitter_card":"summary_large_image","twitter_misc":{"Written by":"code","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.codeandco.ae\/blog\/importance-of-white-space-in-web-design","url":"https:\/\/www.codeandco.ae\/blog\/importance-of-white-space-in-web-design","name":"The Importance of White Space in Web Design of Your Company Site","isPartOf":{"@id":"https:\/\/www.codeandco.ae\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codeandco.ae\/blog\/importance-of-white-space-in-web-design#primaryimage"},"image":{"@id":"https:\/\/www.codeandco.ae\/blog\/importance-of-white-space-in-web-design#primaryimage"},"thumbnailUrl":"https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/blog-image.jpg","datePublished":"2017-05-09T11:08:53+00:00","dateModified":"2024-04-06T06:54:49+00:00","author":{"@id":"https:\/\/www.codeandco.ae\/blog\/#\/schema\/person\/683686c2aea027386872ffc5cf6859a0"},"description":"Web design Company or not, everyone should use white space in their web designing and development. Let's know why it is important to implement.","breadcrumb":{"@id":"https:\/\/www.codeandco.ae\/blog\/importance-of-white-space-in-web-design#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codeandco.ae\/blog\/importance-of-white-space-in-web-design"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codeandco.ae\/blog\/importance-of-white-space-in-web-design#primaryimage","url":"https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/blog-image.jpg","contentUrl":"https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/blog-image.jpg","width":613,"height":459,"caption":"web design company in dubai uae"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codeandco.ae\/blog\/importance-of-white-space-in-web-design#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codeandco.ae\/blog"},{"@type":"ListItem","position":2,"name":"The importance of white space in web design"}]},{"@type":"WebSite","@id":"https:\/\/www.codeandco.ae\/blog\/#website","url":"https:\/\/www.codeandco.ae\/blog\/","name":"Code and Co","description":"Digital Strategy, Design and Innovation - Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codeandco.ae\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.codeandco.ae\/blog\/#\/schema\/person\/683686c2aea027386872ffc5cf6859a0","name":"code","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codeandco.ae\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3d455e50d1511f12024d19b513feddd2fd972b216114af9ea14fb61524bb82fe?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3d455e50d1511f12024d19b513feddd2fd972b216114af9ea14fb61524bb82fe?s=96&d=mm&r=g","caption":"code"},"url":"https:\/\/www.codeandco.ae\/blog\/author\/code"}]}},"_links":{"self":[{"href":"https:\/\/www.codeandco.ae\/blog\/wp-json\/wp\/v2\/posts\/159","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codeandco.ae\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codeandco.ae\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codeandco.ae\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codeandco.ae\/blog\/wp-json\/wp\/v2\/comments?post=159"}],"version-history":[{"count":12,"href":"https:\/\/www.codeandco.ae\/blog\/wp-json\/wp\/v2\/posts\/159\/revisions"}],"predecessor-version":[{"id":623,"href":"https:\/\/www.codeandco.ae\/blog\/wp-json\/wp\/v2\/posts\/159\/revisions\/623"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codeandco.ae\/blog\/wp-json\/wp\/v2\/media\/175"}],"wp:attachment":[{"href":"https:\/\/www.codeandco.ae\/blog\/wp-json\/wp\/v2\/media?parent=159"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codeandco.ae\/blog\/wp-json\/wp\/v2\/categories?post=159"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codeandco.ae\/blog\/wp-json\/wp\/v2\/tags?post=159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}