Why Does White space Matter?
White space is the fundamental building block of good design. When designers talk about whitespace, they actually mean negative space, the space between elements in a composition. It is the portion of the page left unmarked; the space between graphics, margins and gutters. It is the space between columns, between lines of type or figures that provides visual breathing room for the eye.
The Advantages of Using White space
Increased Content Legibility: When users are on your site, they should be able to see where they are going and be given a reason to keep reading. Believe it or not, whitespace between paragraphs and around blocks of text and images actually helps people understand what they are reading and adds up to a better user experience overall.
More Interaction: Let’s face it, visitors are always in a hurry when browsing through sites, and having a good amount of whitespace will increase interaction by preventing distractions that slow the visitor down. Even a slight padding around objects will help draw attention to a specific area on your site. According to research conducted by Human Factors International, whitespace increases comprehension by almost 20%.
Ability to Highlight Call to Actions (CTAs): At times, the most obvious way to make something stand out is to make things bigger. You can make images bigger or buttons bigger. However, surrounding the item with whitespace can be just as effective.
Creating Balance: Too little whitespace leads to confusion, disorganization and unreliability – qualities you don’t want associated with your site’s brand. On the other hand, too much whitespace could highlight a lack of content and a lack of user guidance. The key is to balance your designs and let whitespace act as a great tool to separate chunks of content for easy accessibility and improved user experience.
Acts as a Separator: White space separates unrelated elements in a design. It can be used to separate images/graphics from each other and improves your overall visual layout. The use of proper whitespace paves the way to a clearer communication of ideas and effective designs
Macro white space
Macro white space is the large space between major layout elements, and the space surrounding the design layout. You’ll find macro white space to the right and the left of most websites’ content, and in the space between a website’s content blocks. Unlike micro white space, macro white space acts as a container of the overall design. It’s “big picture” white space – easier to notice.
The use of both macro and micro spaces depends on the following factors:
Content – With more information in the layout, fewer amounts of macro white space will be available. In contrast, the volume of micro white space will increase. This compromise is vital; otherwise, pages would be solid chunks of data: extremely difficult to read!
Design – The user interface design influences the ratio between micro and macro white spaces in the layout. The designer chooses the design style. This can bias the layout to one type of white space over another.
User – User research (including demographic information) can be used to determine the right balance of macro and micro white spaces for that specific audience. There is no rule to apply consistently between audiences.
Branding message – Using white space can suggest a company’s budget and thus the quality of the product.
Active vs. passive: Another way to approach the usefulness of white space
The example illustrates negative (or white space) on a product page. This Active white space, enhances page structure and help guide the user through the content.
Passive white space – applied to improve the aesthetics of the layout without guiding the user through a specific reading, flow, or content order. For example, the white space between font glyphs and paragraph lines functions in this way.
