{"id":429,"date":"2012-03-19T20:35:07","date_gmt":"2012-03-19T20:35:07","guid":{"rendered":"http:\/\/www.thisbloglife.com\/?p=429"},"modified":"2026-01-08T20:23:45","modified_gmt":"2026-01-08T20:23:45","slug":"white-space-is-not-a-lazy-designers-excuse","status":"publish","type":"post","link":"https:\/\/thatkeith.com\/articles\/white-space-is-not-a-lazy-designers-excuse\/","title":{"rendered":"White space is not a lazy designer&#8217;s excuse"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">There&#8217;s a handy saying that I learned many years ago: &#8220;when in doubt, leave it out&#8221;.<\/h3>\n\n\n\n<p>It was said about writing, encouraging people to cut out superfluous waffle, and it is something that&#8217;s well worth remembering. It could also be said about designing, particularly when it comes to page layout design.<\/p>\n\n\n\n<p>White space, sometimes called negative space (well, not all pages are white, right?) is the term for the empty parts of a layout. It isn&#8217;t just an excuse for some blank space that the designer couldn&#8217;t be bothered to fill; white space is used to make the visual impact of the visible design elements \u2013 text, pictures and other graphics \u2013 more effective. It helps control both the page entry points that a reader goes to when they first see a layout and the route they&#8217;re likely to take as they read.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft\"><a href=\"https:\/\/thatkeith.com\/articles\/wp-content\/uploads\/2012\/03\/1280px-Hasegawa_Tohaku_Pine_Trees.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"598\" src=\"https:\/\/thatkeith.com\/articles\/wp-content\/uploads\/2012\/03\/1280px-Hasegawa_Tohaku_Pine_Trees.jpg\" alt=\"\" class=\"wp-image-779\" srcset=\"https:\/\/thatkeith.com\/articles\/wp-content\/uploads\/2012\/03\/1280px-Hasegawa_Tohaku_Pine_Trees.jpg 1280w, https:\/\/thatkeith.com\/articles\/wp-content\/uploads\/2012\/03\/1280px-Hasegawa_Tohaku_Pine_Trees-300x140.jpg 300w, https:\/\/thatkeith.com\/articles\/wp-content\/uploads\/2012\/03\/1280px-Hasegawa_Tohaku_Pine_Trees-768x359.jpg 768w, https:\/\/thatkeith.com\/articles\/wp-content\/uploads\/2012\/03\/1280px-Hasegawa_Tohaku_Pine_Trees-1024x478.jpg 1024w, https:\/\/thatkeith.com\/articles\/wp-content\/uploads\/2012\/03\/1280px-Hasegawa_Tohaku_Pine_Trees-600x280.jpg 600w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>One of the instincts people have when they first start making layouts is to fill the page, almost no matter what. It takes a certain confidence to leave something empty and to use that as part of the design, but that\u2019s a skill that needs to be developed. It\u2019s hard to overemphasise the value of this ability. It makes it easier for readers to find their way through a page\u2019s content by giving a sense of hierarchy and relative importance to different elements, by adding visual dynamic tension and implied movement, and by providing a sense of pace and rhythm to the reading experience. So no, it isn\u2019t about designers being too lazy to bother filling up the page. Not as a rule, at least.<\/p>\n\n\n\n<p>Using layers in your DTP tool of choice can be useful, although we all know it takes effort to work that way too. If you put different elements onto different layers you can do the mental \u2018step back\u2019 and see how the overall arrangement hangs together by hiding and showing things. Use this to set up different treatments and do a bit of mixing and matching.<\/p>\n\n\n\n<div class=\"wp-block-group\" style=\"padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-689b0661 wp-block-group-is-layout-constrained\">\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-4232890097475869\"\n     crossorigin=\"anonymous\"><\/script>\n<!-- Display-full-width-responsive -->\n<ins class=\"adsbygoogle\"\n     style=\"display:block\"\n     data-ad-client=\"ca-pub-4232890097475869\"\n     data-ad-slot=\"5061467982\"\n     data-ad-format=\"auto\"\n     data-full-width-responsive=\"true\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n<\/div><\/div>\n\n\n\n<p>This idea of using space or emptiness as part of the overall structure isn\u2019t exclusive to page layouts. It is understood in photography and painting (themselves forms of two-dimensional layouts), architecture, and even music.<\/p>\n\n\n\n<p>In musical terminology \u2018white space\u2019 (no, not white noise) is sometimes used to describe silence in a composition. That\u2019s a fairly simple application of the idea. But if you stop to think about the layering of tracks in a mix and the regular procession of a simple beat, you could stretch the idea of negative space to include, for example, the rhythmic holes created in a musical pattern by syncopation or similar treatments. Take away some of those elements and you\u2019d end up with a structurally altered song &#8211; which can be sometimes good, sometimes bad, but always interesting.<\/p>\n\n\n\n<p>The first time I heard \u2018When Doves Cry\u2019 by Prince, back in 1984, it sounded to me like the song was missing part of the mix. I loved it, but the sparse production wasn&#8217;t like much else being released at that time. I was reminded about this stripped-back mix sound by a web site I came across recently. <a href=\"http:\/\/StudioMultitracks.com\" target=\"_blank\" rel=\"noopener\">StudioMultitracks.com<\/a> lists (or used to, at least) a number of different well-known songs from various genres, each split into the individual tracks that normally go together to make the complete song. Most of the time it isn&#8217;t done through mucking about with EQ sliders and squashing frequencies the way the now-dead Audion MP3 player worked. These often do seem to be the pre-mixed studio tracks from major singles such as David Bowie&#8217;s Golden Years and Outkast\u2019s Ms. Jackson. Listening to the isolated tracks is a sometimes spooky experience \u2013 utter silence where you\u2019d normally hear the rest of the mix \u2013 but it helps show exactly how they&#8217;re put together. Just as usefully, they show how a good song is more than just the sum of its parts. Play two parts together if you can get things synced well enough, and you\u2019ll hear the song in semi-finished but still cut-back form.<\/p>\n\n\n\n<p>The StudioMultitrack site doesn&#8217;t list these any more, so try searching on YouTube for &#8220;studio multitrack&#8221;. There&#8217;s even more there than had been listed in the StudioMultitracks site. Here are a couple to start with:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe loading=\"lazy\" class=\"youtube-player\" width=\"1290\" height=\"726\" src=\"https:\/\/www.youtube.com\/embed\/14is__Loi-w?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en-US&#038;autohide=2&#038;wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\"><\/iframe><\/span>\n<\/div><\/figure>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft\"><a href=\"https:\/\/thatkeith.com\/articles\/wp-content\/uploads\/2012\/03\/Cup-or-faces-paradox-small.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"147\" height=\"178\" src=\"https:\/\/thatkeith.com\/articles\/wp-content\/uploads\/2012\/03\/Cup-or-faces-paradox-small.gif\" alt=\"\" class=\"wp-image-777\"\/><\/a><\/figure>\n<\/div>\n\n\n<p>In life drawing, one technique that\u2019s taught is to look at the shapes made by the spaces left between and around the objects in the scene. Rather than just looking at the model&#8217;s arm, for example, also look at the empty shape between the arm and torso, and make sure that\u2019s drawn accurately. Learning to see and account for the empty spaces, looking at what&#8217;s not there as well as what is, can really improve your control over the drawing process. There&#8217;s a lot more to life drawing than that (frequent practise being the real secret) but this is one of the fundamental principles.<\/p>\n\n\n\n<p>But back to page layouts: how do you choose where to use white space in a design? That\u2019s something I can\u2019t tell you. It depends on a ton of different variables, from the content you have to play with through to the audience, and the tone of voice you want to present.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft\"><a href=\"https:\/\/thatkeith.com\/articles\/wp-content\/uploads\/2012\/03\/white-space-and-grids-WITH-GUIDES.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"295\" height=\"383\" src=\"https:\/\/thatkeith.com\/articles\/wp-content\/uploads\/2012\/03\/white-space-and-grids-WITH-GUIDES.gif\" alt=\"\" class=\"wp-image-778\"\/><\/a><\/figure>\n<\/div>\n\n\n<p>But there\u2019s one thing that will help you do this in a structured way: use grids. Don\u2019t just throw things onto the page and push them around without some kind of structural scaffolding set up to give it a bit of spatial logic. I wrote here about grids back in 2010, but the quick-fix secret is to set up more columns and rows than you think you\u2019ll need. Twice as many is a good start. A three-column grid may be what you want for the main content, but with a six-column grid you still have three to play with (by using two columns at a time) and you also have half-way choices for where things sit. And, just as importantly, where you might use a bit of emptiness. A nine or twelve-column grid may start to feel cluttered, but it gives you even more positioning choices without having things floating aimlessly \u2018off grid\u2019. One final thing to think about: if you use an odd number of columns you\u2019ll be forced into having an asymmetrical arrangement, which is often a good thing. That is a very simplistic thing to say, so please take it as something to experiment with rather than as hard-and-fast advice, but by using a grid with (a) more than the minimum required number of columns and rows and by (b) going for an odd number of columns you\u2019ll find white space easy to include in your designs. Making it work well is another thing. That\u2019s down to you.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u201cThirty spokes meet in the hub,<\/p>\n\n\n\n<p>but the empty space between them<\/p>\n\n\n\n<p>is the essence of the wheel.<\/p>\n\n\n\n<p>Pots are formed from clay,<\/p>\n\n\n\n<p>but the empty space between it<\/p>\n\n\n\n<p>is the essence of the pot.\u201d<\/p>\n\n\n\n<p>\u2014Lao Tse, Taoist philosopher &#8211; from the Tao te ching<\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-group\" style=\"padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-689b0661 wp-block-group-is-layout-constrained\">\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-4232890097475869\"\n     crossorigin=\"anonymous\"><\/script>\n<!-- Display-full-width-responsive -->\n<ins class=\"adsbygoogle\"\n     style=\"display:block\"\n     data-ad-client=\"ca-pub-4232890097475869\"\n     data-ad-slot=\"5061467982\"\n     data-ad-format=\"auto\"\n     data-full-width-responsive=\"true\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>There&#8217;s a handy saying that I learned many years ago: &#8220;when in doubt, leave it out&#8221;. It was said about writing, encouraging people to cut out superfluous waffle, and it is something that&#8217;s well worth remembering. It could also be said about designing, particularly when it comes to page layout design. White space, sometimes called&#8230;<\/p>\n","protected":false},"author":2,"featured_media":779,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[19],"tags":[],"class_list":["post-429","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/thatkeith.com\/articles\/wp-content\/uploads\/2012\/03\/1280px-Hasegawa_Tohaku_Pine_Trees.jpg","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8ooc8-6V","_links":{"self":[{"href":"https:\/\/thatkeith.com\/articles\/wp-json\/wp\/v2\/posts\/429","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thatkeith.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thatkeith.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thatkeith.com\/articles\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thatkeith.com\/articles\/wp-json\/wp\/v2\/comments?post=429"}],"version-history":[{"count":2,"href":"https:\/\/thatkeith.com\/articles\/wp-json\/wp\/v2\/posts\/429\/revisions"}],"predecessor-version":[{"id":1930,"href":"https:\/\/thatkeith.com\/articles\/wp-json\/wp\/v2\/posts\/429\/revisions\/1930"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thatkeith.com\/articles\/wp-json\/wp\/v2\/media\/779"}],"wp:attachment":[{"href":"https:\/\/thatkeith.com\/articles\/wp-json\/wp\/v2\/media?parent=429"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thatkeith.com\/articles\/wp-json\/wp\/v2\/categories?post=429"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thatkeith.com\/articles\/wp-json\/wp\/v2\/tags?post=429"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}