What is white space?
:quality(75))
Learn the meaning of the design term white space and how it can be used in graphic design.
The term white space signifies the white, empty space between design elements in layouts and page illustrations and the distance between single readable letters and characters. In some cases, the white Space is called Negative Space. The term was derived from print design projects, where white paper was used to print the design campaigns.
It might initially seem strange that the empty white background is considered a design element. Still, the strategic placement of white space can dramatically improve the composition of a campaign or design. The white space lets the eye and brain of the viewer process and rest from the onslaught of information and visual content.
Jumpstart your ideas with Linearity Curve
Take your designs to the next level.
The implementation of white space reduces the cognitive load of the viewer significantly. It organizes large blocks of information so that they are still easily digestible by the viewer by dramatically optimizing the legibility of the content.
The strategic implementation of white space is the ideal tool to direct the eye of the viewer; this is not a waste of space!
White space is not just an insignificant blank space; it can become an important design element used strategically. The average attention span of the viewer is getting progressively shorter, which makes the clever use of white space essential!
:quality(75))
The different types of white space:
Within the umbrella term of white space, there are four defined sub-categories:
The macro whitespace:
Macro white space is the space between the design elements, such as the text body, images, and graphic design elements. The primary purpose of macro white space is to improve the layout of your website and make it easier to understand and navigate. A substantial amount of macro space surrounding a design element can magnetically force the viewer to look at that design element.
Examples of macro white space can be found:
• In the margins of a website
• Around the logo in the icons
• In hero images
• In Separation of the main content and sidebar
• Around CTA buttons
The micro whitespace
The micro white space is the space between more minor layout elements, such as the space between letters, the distance between paragraphs, the space between lines (kerning), and line height (leading).
The primary purpose of micro white space is to improve the legibility and readability of your content. The importance of micro white space in letter spacing should not be underestimated, as the aspect of kerning and line height of the text body and the individual letters are of great importance for the general legibility of a text. A mixture of lower and upper case letters, f.ex. is much easier to read than only upper case letters due to the variation of negative space between them.
The active white space
Active white space means that the content of a website or print campaign flows well, the reader is easily directed to all the CTA (Call to action) elements and the reader's focus is steady and well-directed.
The passive white space
Passive white space is the space that is an automatic consequence of the placement of graphic elements or text. Letters and design images need a certain distance. Otherwise, these elements would overlap and render the campaign or website unreadable.
:quality(75))
What's the difference between white space and negative space?
To answer the question, there is no difference; these two terms can be used interchangeably.
The term white space is derived from printed campaigns or layouts. The parts of the white paper that remained unprinted were called the white space. The Whitespace space is not limited to the white coloring and can consist of every color perceivable to the human eye.
The term negative space comes from photography. Defined as positive space are objects that catch the attention, the negative space consists of the background elements.
Looking for more cool drawing ideas?
Check out our list of 25 easy tutorials.
How to use white space
The strategic use of white space can change the visual focus and direction of the viewer. Plenty of white space around a design element, a text body, or a single letter can isolate the element visually and thus catch the viewer's immediate attention.
A white space can be essential to a company's branding or most luxury brands. Websites, layouts, or advertisement campaigns f.ex. that include generous white space, are perceived as clear, sophisticated, and luxurious.
In the next part of this Design Tip, we will show you some prime examples of the strategic use and placement of white space in layouts, lettering, and logo design, the so-called white space logos.
Why white space is used in design:
To highlight hidden elements within logos
White space is a design element that can be used in logo design, too; here are a few brilliant examples:
One of the most famous uses of negative space is the logo of FedEx. The negative space between the “d” and the “E” letter is a strategic design element. The negative space between the letters “E” and “x” creates a right-pointing arrow.
:quality(75))
Image source: vaccodadesign.com
Another brilliant design of a white space logo is the one of the WWF (World Wildlife Fund). The eyes immediately form the panda in the visual perception; the white space is so brilliantly implemented that you almost overlook that it’s created with negative space.
:quality(75)){kind=logo}
Image source: Inspirationfeed.com
To drive the attention of the user to certain objects
Below, you can see two examples with a truly masterful use of white space.
:quality(75))
Image source: impactplus.com
Here, you can see a massive amount of white space surrounding the product and its name, leaving the viewer with absolutely no other choice than to admire the design of the new MacBook Air. The white space gives the captivating hero image center stage and replaces the horizontal lines of the letters “A” and “R.”
:quality(75))
Image source: Pinterest.co.uk
To make the text more readable
Disorganized layouts suck the joy out of every reader. Take a look at the cramped, cluttered magazine layout page below. Does this look like an enjoyable read to you? Looking at it makes you tense, and you would rather throw the magazine in the trash than read the article.
:quality(75))
Image source: barnyardmarketing.com
Now take a look at the organized white space layout of the identical content:
:quality(75))
Image source: barnyardmarketing.com
Aaahh, so much better; you immediately want to fish the magazine out of the trash, sit down and read the article, which perfectly illustrates the incredible power of good white space design! The visual weight and chaos have been lifted! The content becomes immediately appealing and digestible!
:quality(75))
:quality(75))
The visual hierarchy
Visual hierarchy is a term that describes how the eye of the viewer travels. The idea of visual hierarchy is based on the Gestalt Principles. The first Gestalt Principles were devised in the 1920s by German psychologists Max Wertheimer, Kurt Koffka, and Wolfgang Kohler—who wanted to understand how humans generally gain meaningful perceptions from the chaotic stimuli around them.
The Visual Hierarchy is a composition technique that systematically directs the eye of the viewer.
Learn more about the aspect of visual hierarchy in Lettering and design layout in this video with Designer Will Paterson.
Visual hierarchy can direct the viewer through white space, color, symmetry, movement, grouping, contrast, and many more design aspects.
Read more on our Blog about how Designers can use Visual Hierarchy strategically in Graphic Design.
Ready to create brand assets that pack a punch?
Visit our Academy for free marketing design courses.
The law of proximity
The law of proximity is one of the Gestalt Principles and states that objects close to each other are perceived as more related than objects far apart.
In this case, the systematic use of white space helps to group related content elements to ease the orientation and navigation of the content for the viewer.
This theory should be considered especially in the white space implementation in UX And UI Design and information visualization. Using the white space technique to group UX and UI-related elements improves overall legibility and navigation. Using this technique, you help the viewer connect the dots by grouping the connected dots (aka design elements) closer together.
Read more on our blog about the Gestalt Principles and the Law of proximity.
Conclusion
White space is a crucial design element to direct the eye of the viewer, organize content, and for the cognitive rest of the viewer. The aspect of white space improves the overall legibility of the content, sets the tone of the design and branding, and generates focus and attention.
Before we can make information digestible, we must understand the meaning and appropriate use of the white space. The systematic use of white space can be viewed as the “art of optical spacing.”
Don’t be afraid of space; use it to your advantage!
:quality(75))
Jumpstart your ideas with Linearity Curve
Take your designs to the next level.
Marion Gerlinger
Contributing Writer
Marion is a contributing writer to the Linearity Blog.
:quality(75))
:quality(75))
:quality(75))
:quality(75))
:quality(75))