The elusive white space in digital design

This landing page is defined by white space. The brand logo is featured in the center of a full color gradient screen, and one actionable button sets the content hierarchy, to scroll down.

White space is defined as the space on a page without information or data

Conceptually, it is also referred to as negative space. Contrary to its name, white space can be any color, any gradient, or even a full-screen picture, or movie.

How white space impacts information architecture

Making use of white space can be an impactful design strategy, especially when applying a column grid to the information architecture concept.

White space first = Less is more

White space is used to set the mood and tone of the brand. Less information but more space creates greater awareness of what’s to come

Utilizing white space, or open space, either for a hero image or a color, will emphasize the brand and the brand experience.

A look at real-world designs

In example 1, a minimal hierarchy defines this home page for Brand X. The brand logo is displayed as an animation, creating movement and fluidity. A definitive call-to-action with one single click to Scroll-Down-to-Product-Page sets the content hierarchy. The user is guided to the next level of engagement, rather than having to search for the navigation or item-specific content.

Example 1: A product site’s home page. See the real-world example here (off-site link).

White space focuses the user to click on the call-to-action link

The brand X logo animation provides visual eye candy while the user takes in the background visual, to then proceed to the scroll-down button.

Example 2: From a minimal home page to a brilliant white space strategy to build a product-specific navigation

After the user clicked on the scroll-down button, a simple grid-system of product tiles sets the focus on the Brand X’s product inventory.