{"id":122,"date":"2012-09-25T12:35:57","date_gmt":"2012-09-25T20:35:57","guid":{"rendered":"https:\/\/blogs.ubc.ca\/kathylin\/?p=122"},"modified":"2012-11-13T23:54:16","modified_gmt":"2012-11-14T07:54:16","slug":"122","status":"publish","type":"post","link":"https:\/\/blogs.ubc.ca\/kathylin\/2012\/09\/25\/122\/","title":{"rendered":"Exploring White Space"},"content":{"rendered":"<p>After browsing through the <a href=\"http:\/\/www.webpagesthatsuck.com\/worst-websites-of-2011.html\">Worst Websites of 2011<\/a>, I noticed that they are all very\u00a0similar\u00a0in that\u00a0they cannot stand to waste a single pixel available on screen. So with that,\u00a0I&#8217;d like to present a simple concept that could greatly impact the look and feel of these websites.<\/p>\n<p>&#8220;White space&#8221; aka &#8220;negative space&#8221; is the space between objects in a composition where no text, images, or other visible elements occupy the space.\u00a0You may be thinking, &#8220;If the space is there, why not make use of it and fill it with as much information as possible?&#8221; To convey the concept I&#8217;ll be using examples from print.<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/blogs.ubc.ca\/kathylin\/files\/2011\/03\/Nescafe-Coffee-Ad-1987-xx.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-129 aligncenter\" title=\"Nescafe Coffee Ad 1987  xx\" src=\"https:\/\/blogs.ubc.ca\/kathylin\/files\/2011\/03\/Nescafe-Coffee-Ad-1987-xx-300x207.jpg\" alt=\"\" width=\"300\" height=\"207\" srcset=\"https:\/\/blogs.ubc.ca\/kathylin\/files\/2011\/03\/Nescafe-Coffee-Ad-1987-xx-300x207.jpg 300w, https:\/\/blogs.ubc.ca\/kathylin\/files\/2011\/03\/Nescafe-Coffee-Ad-1987-xx.jpg 400w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/blogs.ubc.ca\/kathylin\/files\/2011\/03\/Mcdonalds_coffee_stains1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-132\" title=\"Mcdonalds_coffee_stains\" src=\"https:\/\/blogs.ubc.ca\/kathylin\/files\/2011\/03\/Mcdonalds_coffee_stains1-300x214.jpg\" alt=\"\" width=\"300\" height=\"214\" srcset=\"https:\/\/blogs.ubc.ca\/kathylin\/files\/2011\/03\/Mcdonalds_coffee_stains1-300x214.jpg 300w, https:\/\/blogs.ubc.ca\/kathylin\/files\/2011\/03\/Mcdonalds_coffee_stains1-1024x730.jpg 1024w, https:\/\/blogs.ubc.ca\/kathylin\/files\/2011\/03\/Mcdonalds_coffee_stains1.jpg 1200w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p style=\"text-align: left;\">On top is a 1987 Nescafe Coffee ad whose designer seems to believe that no matter how much content they cram on there, people will read it. The creator of the Swedish McDonald&#8217;s ad took a different approach, really making use of the white space, leaving only faint coffee stains on the corners of the page and the product, price, and logo on the bottom right; in this case, it turned out to be highly effective in promoting the chain&#8217;s extra large coffee.<\/p>\n<p>The amount and use on white space is a key component of a page&#8217;s readability and legibility in graphic design. Even in our daily newspaper, the micro white space between each letter makes a difference! For example, The Economist newspaper was slightly redesigned in this way and it resulted in &#8220;the content [being] more legible, and the overall feeling of the newspaper lighter, yet the amount of content remained the same.&#8221;<\/p>\n<p style=\"text-align: left;\"><a href=\"https:\/\/blogs.ubc.ca\/kathylin\/files\/2011\/03\/figure3_luxury_direct.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-138 aligncenter\" title=\"figure3_luxury_direct\" src=\"https:\/\/blogs.ubc.ca\/kathylin\/files\/2011\/03\/figure3_luxury_direct-300x225.jpg\" alt=\"\" width=\"300\" height=\"225\" srcset=\"https:\/\/blogs.ubc.ca\/kathylin\/files\/2011\/03\/figure3_luxury_direct-300x225.jpg 300w, https:\/\/blogs.ubc.ca\/kathylin\/files\/2011\/03\/figure3_luxury_direct.jpg 540w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p style=\"text-align: left;\">Last but not least I&#8217;d like to leave you with one last thought: less white space=cheap; more white space=luxury. This is one of the many tactics used in brand positioning. See in this example above, both contain the exact same content but stand on opposite ends of the spectrum. Check out these websites:\u00a0<a href=\"http:\/\/oldnavy.gap.com\/browse\/home.do?ssiteID=GAP\">Old Navy<\/a>, <a href=\"http:\/\/www.gap.com\/browse\/home.do?ssiteID=ON\">Gap<\/a>, and <a href=\"http:\/\/bananarepublic.gap.com\/browse\/home.do?ssiteID=ON\">Banana Republic<\/a>;\u00a0notice the difference?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>After browsing through the Worst Websites of 2011, I noticed that they are all very\u00a0similar\u00a0in that\u00a0they cannot stand to waste a single pixel available on screen. So with that,\u00a0I&#8217;d like to present a simple concept that could greatly impact the look and feel of these websites. &#8220;White space&#8221; aka &#8220;negative space&#8221; is the space between [&hellip;]<\/p>\n","protected":false},"author":5954,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-122","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/blogs.ubc.ca\/kathylin\/wp-json\/wp\/v2\/posts\/122","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ubc.ca\/kathylin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ubc.ca\/kathylin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/kathylin\/wp-json\/wp\/v2\/users\/5954"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/kathylin\/wp-json\/wp\/v2\/comments?post=122"}],"version-history":[{"count":35,"href":"https:\/\/blogs.ubc.ca\/kathylin\/wp-json\/wp\/v2\/posts\/122\/revisions"}],"predecessor-version":[{"id":306,"href":"https:\/\/blogs.ubc.ca\/kathylin\/wp-json\/wp\/v2\/posts\/122\/revisions\/306"}],"wp:attachment":[{"href":"https:\/\/blogs.ubc.ca\/kathylin\/wp-json\/wp\/v2\/media?parent=122"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ubc.ca\/kathylin\/wp-json\/wp\/v2\/categories?post=122"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ubc.ca\/kathylin\/wp-json\/wp\/v2\/tags?post=122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}