White space, also referred to as whitespace or negative space represents the area between different design elements. It’s everything from the line and letter spacing to the space surrounding text and images, to margins and gutters.
From the first glance, white space is a design technique so simple that many might underrate it. Yet so powerful that it alone can improve your website’s conversion rates by drawing users’ attention to certain focus points.
This technique gives “a room to breathe” for each single graphic element on the web page. Thus, elements can have their own visual focus.
It is not necessarily white or empty, it can be any color, pattern, background image or even a background video – as long as it directs users’ attention to your prefered Call-to-Action (CTA).
Research confirms: white space can help your conversion rate
Some clients think that white space is unnecessary and prefer to fill it with additional information. As a result, too much information may create cognitive overload.
On the contrary, leaving some air on the page helps to avoid attention leaks and increases visibility of your preferred CTA. Here’s why.
The recent study from Prezi revealed that attention spans are not shrinking but rather evolving to be more selective.
Respectively, having clear navigation on the page is extremely beneficial. Adjust your layout so that the CTA button can take full advantage of the negative space.
Another research conducted by Wichita State University confirms that increasing white space can improve readability and focus on CTA. Both of these aspects have a direct link to higher conversion rate.
Your users prefer these two types of whitespace
There are two types of white space that you should consider for your advantage – micro and macro.
Micro whitespace is a space between text lines, paragraphs and letter spacing. In contrast, macro whitespace is the distance between major elements in a composition. It also refers to paddings and margins.
Both types complement each other and are equally important. Adding micro whitespace to your design by increasing a space between lines and paragraphs improves readability, legibility and comprehension.
On the other hand, macro whitespace can help users’ eyes to scan a design effortlessly. It also makes your page look more sophisticated and aesthetic.
- Dmitry Fadeyev, Author at Smashing Magazine mentions a study in his article which found that “good use of white space between paragraphs and in the left and right margins increases comprehension by almost 20%”.
- Another study by Barbara Chaparro – “A Comparison of Four White Space Layouts”, adds that readers not only comprehend a text with margins better but also a staggering 80% of readers prefer more white space versus less.
As you can see, micro and macro whitespace not only improves design but it’s what users fancy!
White Space Test on Apple, Samsung and Huawei Landing Pages
Let’s see how the most influential brands in the smartphone industry – Apple, Samsung and Huawei use whitespace to deliver the main message in their landing pages.
We are going to use Attention Insight platform to compare designs in order to find out which key objects attract the most attention.
Apple is definitely the winner in terms of attention attracted towards their main message. Landing page delivers one clear message and attracts an impressive 81% of attention – 2 times higher than Samsung and 4 times higher than Huawei.
This enormous difference is due to the fact that Apple really seems to be using white space to the fullest – wide margins, spacing between the lines.
Most importantly, there are no other objects or messages around the main headline and sub-headline that could distract the user.
Even the iPhone’s image is placed so delicately that it is hardly noticed and only creates extreme minimalistic feeling. Classic Apple, isn’t?
Samsung also uses a lot of white space, however, in a form of background image versus blank space used in Apple’s landing page. As a result, due to lack of contrast and visual hierarchy, attention towards the main message is only 38%.
As you can see, 10% of attention is leaked due to the image of the person. Moreover, the face is looking towards the user. For images of people, try to get the eyes looking in the direction you want the user to look, for example, the headline. It really makes a difference.
Another significant portion of attention is directed towards information related to COVID-19. Since, online sales have been booming during the health crisis, this information is necessary and can be justified.
As mentioned before Huawei’s main message attracted 4 times less attention than Apple’s.
It is clearly visible that the landing page has less white space in comparison to others, especially below the main message. Even if attention towards the camera (14%) is added to the total which might have been the designer’s goal, the difference is still really significant.
The main reason for this is that too many objects, sections and messages are included in the landing page. Spreading out user’s attention towards all sections equally might have been an objective.
However, it’s clear that this landing has no CTA that is instantly noticeable. On the contrary, the user’s focus is shifting from one item to another with no particular end goal.
Conclusion
Although to some it might seem as empty and unnecessary, white space is an extremely valuable and powerful tool.
You can use micro whitespace to improve comprehension and macro whitespace to emphasize CTA and increase conversion.
Prioritize the balance between white space and your content, so you can direct users’ attention to your call to action and increase conversions.
What is White Space, and Why Is It Important? A Glance of White Space
White space is not a foreign term for a layout designer. However, what about white space for the layman? What is white space, and why is it important?
White space is very much needed in design because it can help make it easier for the target reader to capture the information conveyed. Here’s a quick look at what white space is and why it’s important in design.
What is white space, and why is it important?
White space is one of the crucial compositions in design in the form of empty space around page design elements, so white space is important to note in design. White space can include space around graphics and images, margins, space between columns, and space between row types. Therefore, white space can exist in many other compositions in a page design.
White space can also be referred to as negative space, so it can imply that not only white can be used to apply white space in making designs. However, there are also other colors that are flexible in applying.
In addition, white space does not categorize colors but only refers to any space that does not contain or is intentionally left empty in the design. Therefore, you can apply white space with black, green, blue, or red colors as long as it is empty without text and images.
Why is White Space Important?
The presence of white space is very important in making designs because it can help give pause to the eyes, so they don’t get too tired looking at designs that are too dense. Apart from that, there are other uses that make white space important to use.
Some of these uses include helping to improve readability on a landing page, creating a neat information structure, creating a balanced page composition, helping to make the design look more elegant, and being able to emphasize urgent information that you want to convey first.
Apart from that, good white space implementation can be seen in several designs that are currently often used by many people, namely minimalist designs. This design model generally has empty space in several parts to suppress important information so that it is conveyed clearly.
What is White Space? Helping Your Conversion Rate
Currently, one of the most effective mediums for conveying information is design because people tend to be more easily interested if the information can be focused on a proportional position. Hence, white space is needed to help present this proportionality so that it can increase landing page conversions.
What Is White Space?
So, what is white space? White space or negative space is the empty space between and around layout design elements or pages. Through white space, people who see and read the information on the design can focus on the main elements around them.
What is white space, and does it have to be white? Even though it’s called white space, white space doesn’t have to be “white” because white space only refers to empty space, not “white.” The application of white space can use in any color as long as it helps separate different elements and must contrast with the main element that is highlighted.
How Does White Space Affect People Psychologically?
Applying white space to designs has many advantages. As well as increasing conversions, white space can also reduce page clutter so people can grasp information clearly. Moreover, there are several other functions of implementing good white space, such as increasing the readability of information, increasing focus, providing a broader understanding of the offering, and providing a better reader experience.
Additionally, white space can help avoid cognitive fatigue for readers when processing the information on a landing page. This is because there is a visual break that allows the reader to properly absorb the information on the landing page, especially the information on the main elements.
How About a Landing Page that Doesn’t Implement White Space?
If a landing page does not apply white space, then the information presented will be redundant, which will prevent the reader from clearly capturing important information. In addition, landing pages that do not have white space will not be able to help readers to understand the important things and information offered.
White space has a crucial role in helping increase the conversion rate on landing pages, especially on important things like CTA or Call to Action, which is easier to see when there is white space around them.
Here Are Some Functions of Applying White Space in Design
Design is an art production that helps to communicate information to
audiences through the use of several elements such as photography, typography, and illustrations. Moreover, there are three core elements in the design, such as text, images, and white space.
White space is one of the core elements because it has a crucial influence on a design. So, what is white space? White space is empty space that is deliberately created around a design composition to provide distance to each composition in a design. Hence, the text and images in the design can be conveyed clearly through the use of good white space.
Here are some functions of good white space in the design.
Helps create focus
A design aims to communicate information to the audience. Therefore, a good focus is needed to make the audience get important information.
In order for the reader to focus on receiving information, the design must be able to navigate the audience to obtain important information. White space plays a role in helping this focus because people can have a visual break in processing the information presented so that they can focus on receiving information.
Helps provide a balanced layout composition
Audiences are often tired of reading too much information with an unbalanced layout composition design. Avoid using a large number of images. There are several things that need to be considered to make a balanced layout composition, such as the distance between each text, the symmetrical position of images and text, and the use of white space in making designs.
Increases readability
Having white space in the design will help increase the readability of information for the audience because the layout of the design is tidier. In addition, applying white space proportionately to text and image elements can increase readability for audiences.
Helps make the design look more elegant and professional
White space in design will make the design look more elegant and professional because negative space can give a simple, minimalist, and cleaner impression to the design layout. Hence, it will affect the audience’s perception of designs that apply white space in their creation.
The functions of white space in design can make the design more interesting and livelier. Hence, apply white space proportionately to make the audience grasp the information properly and effectively.
Micro White Space in Design
White space has an important role in designing so that the information conveyed can be well understood by the target audience. In addition, the presence of white space in the design can also help emphasize some important information that should not be missed through visual breaks in the design.
However, when viewed based on its type, white space can be divided into two types, namely macro white space and micro white space. The two types have significant differences depending on their uses.
The macro white space refers to larger elements in design composition, such as graphics or columns. Meanwhile, micro white space refers to smaller elements such as text, lines, icon paragraphs, and dots in a design.
So, what is the application of micro white space in design? Here are some things related to micro white space.
Micro White Space
Micro white space is the small space between small elements of a design, such as lines of text, letters, paragraphs, icons, and buttons. This type of white space is usually suitable for a content design that conveys more information. Through the detailed information in design, usually the display will look stiff so that it is ineffective to read. Having micro white space can help break down this information density by adding small spaces between small elements in the design.
Benefits of Applying Micro White Space
Micro white space is often found in designs that present a lot of detailed information. Apart from helping to describe the density of information that is difficult for readers to understand, the application of micro white space also has other benefits.
Some of these benefits include helping to improve the readability of content so as to enable readers to be able to read text faster, helping readers to get a much better understanding due to the addition of empty space to some elements in the design composition.
Micro white space can be adjusted based on the type of design and any information that will be loaded. If the information is detailed enough, micro white space can be the right choice so that readers can understand the information conveyed through the design.
8 Responses