White space in content design | Turtl Looking into an underrated approach to layout White space in content design <br/>Looking into an underrated approach to layout What is white space? Exploring the subtle art of 'nothingness' Absence forms presence White space, also referred to as negative space, is simply the empty space between objects in a design. Despite the term, white space does not need to be white, it just needs to be free of focal points like text or detailed imagery. One could describe it as ‘intentional nothingness’. It’s an important factor of composition in graphic design and can help to improve reader experience by reducing cognitive load and increasing the visual appeal of a layout. Design is as much an act of spacing as an act of marking Ellen Lupton | Cooper-Hewitt, National Design Museum, NYC Game of space Designers and clients are scarcely in agreement about the topic. Design theory promotes the use of white space for elegance and ensuring a quality reader experience. On the other hand, many customers and managers consider white space to be 'wasted space' and would rather it be populated with extra information or superfluous visual elements. This conflict has always existed in print design and traditional advertising where space comes at a premium. Luckily for modern marketers, digital ‘real-estate’ is free. Balancing act Finding the correct balance takes some practice. Using too little white space often results in clutter. Using too much can look sparse or 'unfinished'. I’d like the white space more, if there was more stuff in it clientsfromhell.net Why use it? Emptiness may be more valuable than you previously thought Counteracting clutter White space helps to ease the process of analysing graphics or content. The human eye is more receptive to an organised layout than one full of visual disturbances. When there's too much going on in a design, readers disengage - an example of this is that visual clutter has been linked to high bounce rates (source). A designer knows they have achieved perfection not when there is nothing left to add, but when there is nothing left to take away Antoine de Saint Exupéry Reasons to use it Prominence Strangely enough, the absence of content is what draws the eye towards content. Large spaces between graphic elements, also called macro white spaces, help greatly in guiding readers through a layout and clarifying focal points. Aesthetics White space undoubtedly enhances the aesthetic appeal of a layout. Healthy use of white space is one of the easiest ways to achieve a ‘sophisticated’ look, think Apple or Aesop. It’s as great for branding as it is for your audience. Comprehension As well as visual aesthetics, the correct use of white space has been proven to enhance readability and legibility (source). This is a particularly important finding for long-form content where the risk of reader disengagement runs high. B2B content We are bombarded with messages on a daily basis and have little patience for visual clutter. White space allows a reader to breathe, is non-intrusive and generally makes it easier to absorb information, so it should be considered as an important design element in the context of B2B content marketing. How to do it Tips and tricks to master the technique Getting it right Ten pointers for successful implementation of white space in your layouts Massimo Vignelli sketched his book layouts by hand because for him it was faster than using a computer 1. The Grid White space and grid systems go hand-in-hand. For inspiration check out Massimo Vignelli and Josef Mülller-Brockmann, two of the world’s most influential graphic designers who swore by their grid systems. 2. Create contrast The play between negative and positive space creates contrast and enhances visual appeal. 3. Restraint More often than not we are inclined to fill empty space in a layout. Be brave, resist this urge and reserve a portion of the layout to be free of any visual information. When done correctly, the results are stunning. 4. Balance Find the balance between sparse and crowded - practice makes perfect! 5. Start small Identify the minimum copy needed for the page and build the layout up from there. 6. Spread it out Spread the content over more pages instead of cramming it into as few pages as possible. 7. Visual storytelling A picture tells a thousand words. Pair striking visual elements with the copy to compliment the content and enhance reader engagement. 8. Focal point Leave a healthy amount of white space around elements that you wish to draw attention to, like a CTA or product offer. 9. Rule of thirds The rule of thirds principle works wonders in photography, but many forget it works wonders in design. Experiment by keeping 1 column blank. 10. Push boundaries Layouts that at first seem 'uneasy' often turn out to be the most effective of them all. White space is to be regarded as an active element, not a passive background Jan Tschichold Examples White space in the wild White space in Print The fixed size constraints of paper makes it easier to experiment with white space than in modern digital design environments where layouts shift according to device resolution. White space on the Web Here are some great examples of websites that make use of white space. Focal areas like headings and product graphics are surrounded by large empty margins that direct user attention. Wrapping up Concluding the case for white space White space is simply the empty space between objects in a layout. Correct use of it has been proven to enhance visual aesthetics, legibility and readability. It should be considered as an active design element. It can be achieved by paying attention to the grid and remembering to resist the urge to fill up empty spaces in a layout. With a little practice, you can achieve stunning and engaging layouts.
