Free: Assessment Does your website build trust with buyers and bring in revenue?

Score My Website

Free: Assessment

Does your website build trust with buyers and bring in revenue?
Take this free 6 question assessment and learn how your website can start living up to its potential.
Score My Website

Free: Assessment

Whitespace in Websites: 8 Stunning Examples That Prove Its Power

By Ashleigh Respicio

Whitespace in Websites: 8 Stunning Examples That Prove Its Power

One of the most important elements of design is having a pretty good moment and that’s whitespace.

More and more designers (and clients) are moving toward the direction of giving whitespace the appreciation it deserves and it’s with good reason.

Not only does whitespace give websites the simple, clean, minimalist look and feel that is so desirable in current design aesthetics but it also allows content to be more digestible and accessible to the user.

What is Whitespace?

Remember the days when best practices were to keep all of the content above the fold?

The content was often so crammed into that small amount of space,  that the page because extremely difficult to navigate and understand. Whitespace is the modern designer’s response to this.

Just in case this is your first time reading about whitespace, here’s a brief overview.

Whitespace (also called negative space) is the area between the elements on a web page (or physical page). These elements typically are images, typography, and icons.

It is often used to balance elements on a page by creating a natural flow for the user to navigate through the content. Thus, making the information easier to digest.

As web design has evolved, different types of whitespace have come about to allow elements to spread out and have moments of their own on the page.

Types of Whitespace

There are two main distinctions of how whitespace is used. These are macro vs. micro and active vs. passive. Let’s break those down:


Macro is the space between the elements of copy, graphics, images, etc. This is the most common distinction of whitespace.


Micro is the space between smaller elements such as letter spacing (kerning) and line height (leading). Although this distinction is not as directly apparent as macro whitespace, micro is just as important, if not more by improving readability for the user.


When a website flows well and guides the user down a page to a conversion point (call-to-action, form, etc), this is an excellent example of active whitespace. Active whitespace is an intentional use to create structure and flow of a page.


Passive whitespace occurs naturally in elements such as graphics or text.

The theory of whitespace has been implemented successfully using background imagery, videos, textures, and patterns of all kinds. Some of the examples below have an excellent representation of whitespace that isn’t white.

8 Stunning Examples of Effective Whitespace in Websites

1. Quip


On its website, Quip uses active whitespace in the most straightforward sense, but with purpose.

By its name, Quip, one would not automatically assume the company sells toothbrushes. Placing the toothbrush front and center surrounded by whitespace guides the user’s eye directly to the subject and without question, it’s clear what the company does.

While the toothbrush and centered text pull the user to the middle of the page for brand awareness it is also serving as a guide to direct the user to the strategically placed call-to-action (CTA).


2) Apple


Another beautiful example of whitespace use is Apple.

As one of the early adopters of using whitespace on the web to showcase a product, Apple set the standard for building breathing room into their design.

In this example, not only does Apple execute active whitespace throughout the website well by placing imagery strategically to draw the users eye to specific elements down the page,  but the company also uses passive whitespace to guide the user through the content without a hitch.


It’s no wonder why Apple repeatedly shows up in top website design lists!

3. Dropbox


In an ironic (and very unexpected move for its brand), Dropbox’s latest redesign uses color in its whitespace in a big way.


The color blocking is used as the whitespace (also called negative space) to group the content on the page from top to bottom.

The blocks help keep the copy contained while still providing ample breathing room for the content, you’ll see whitespace is also used on a micro-level through the line-height, font size, and kerning (spacing) of the text.

4) OwlLabs


Imagery is often used in the hero section of a website, however, selecting an image that works with your brand and doesn’t compete with your content can be challenging.

In other words, like elements on a page, you need to pay attention to the whitespace (negative space) within your imagery.

The image used in OwlLabs’ hero contains the right ratio of negative space to contain a strong value statement and CTA while still allowing the image to showcase the OwlLabs product.


The whitespace and lines in the image also help guide the visitor’s eye not only into the image but simultaneously towards the message. Smart!

5) Squarespace


Two column layouts are a common solution to displaying content and imagery at the same time. However, these sections have a tendency to become over-designed or too tight to sections above or below on many websites.

Squarespace, fortunately, took the opposite approach to its two-column to allow the imagery and copy to speak for itself.

Each section on this page fills the entire viewport (visible area of a webpage on a display device) which causes the user to pause and digest the information and perhaps select one of the two CTAs before scrolling.

The increased line height of each line allows for reading ease and the subtle movement of the image blocks helps the page to appear dynamic.


6) Lyra


To fully utilize the power of whitespace, designers often pull in one or two concepts in order to tell a story on the page.

While the screenshot below is not the full site (you’ll need to click on the link above to see the full version) we can see from simply viewing the hero section the concepts used.


These concepts include the use of negative space in imagery, color to add depth to the page while containing the content, and ample spacing between sections to allow each section to fill the viewport at a time.

Also, although not a whitespace concept, by placing an image with the subject gazing in the direction of copy, brands and designers can help guide the user toward the message/next step you wish them to take.


7) WealthSimple


Not only is WealthSimple’s homepage a pleasure to navigate from top to bottom, but it is also an excellent example of how to use whitespace to tell a story and engage the user through the use of movement.

The angles of each image (surrounded by generous whitespace) draws the user’s eye onto the page with the coin animation taking over to continue to move the user down the page, pausing at the various text and CTA sections.

If you didn’t click on a CTA at the top, chances are pretty high that you will click on one down the page!


8) Stanford D.School


When considering the types of whitespace for a website design, the rule of thumb is to lean on the side of less is more.

Choose one or two types and carry them throughout the entirety of the website. There are few instances when applying several different principles comes together in a cohesive, well-executed site.

Stanford’s Design School site is one of the few executed exceptionally well.


With a subtle pattern throughout, micro whitespace in the typography, movement with scroll, and strategic placement of content, the user is guided down the page experiencing each section at a time. This implementation of these types of whitespace helps the user to navigate the rather lengthy homepage with ease.

Just as an added bonus, the interactive hero can be mesmerizing which I am sure increases the sites on page analytics!

The above eight examples provide a diverse display of how whitespace can be used effectively in website design. As you can see, whitespace is integral in designing a website that executes strategy while at the same time being aesthetically pleasing to the user.

Need help redesigning your website? Talk to us!

Free: Assessment

Does your website build trust with buyers and bring in revenue?
Take this free 6 question assessment and learn how your website can start living up to its potential.


Web Design
User Experience
Published on December 5, 2018

Recent Articles

Website Conversions in 2023 — STOP, START, KEEP
January 25, 2023 • 5 min read
How Much Does a Website Design or Redesign Cost in 2023?
November 21, 2022 • 9 min read
8 of the Best Business Website Designs to Inspire You in 2023
November 17, 2022 • 7 min read
Take It From an Expert: You Probably Don’t Need a New Website
November 16, 2022 • 4 min read
What Does a Great Inbound Marketing Website Look Like in 2023?
November 14, 2022 • 12 min read
Your 2023 Website Strategy Must Include These 6 Things
November 4, 2022 • 9 min read
4 Ways To Recession-proof Your Website In 2023
November 1, 2022 • 5 min read
8 Best Content Management Systems for Digital Marketing in 2023
October 1, 2022 • 9 min read
12 Essential Tips for Improving Your Web Design in 2023
September 13, 2022 • 16 min read
What Is a Learning Center and Why Does My Website Need One?
July 28, 2022 • 6 min read
23 of the Best Examples of Business Blog Design
May 30, 2022 • 13 min read
5 Prep Secrets for a Smoother, More Successful Website Project Plan (+ Infographic)
May 16, 2022 • 8 min read
Website Redesign Checklist: The 12 Crucial Steps You Need To Be Successful
February 22, 2022 • 17 min read
11 Pricing Page Examples for Business Websites (Updated for 2023)
January 18, 2022 • 10 min read
8 Crucial Elements Every Homepage Design Should Have [+Video]
January 15, 2022 • 6 min read
What Makes a Good Website Design? 7 Award-Winning Examples To Be Inspired By
December 18, 2021 • 9 min read
7 Self-Service Tools on Business Websites to be Inspired By
September 29, 2021 • 7 min read
Google Shares New Tools to Audit Website User Experience
August 12, 2021 • 3 min read
New HubSpot CMS Hub Starter Tier Released for Growing Businesses
August 6, 2021 • 4 min read
Too many internal links in content can confuse Google about site structure
July 9, 2021 • 5 min read
Google July 2021 core update rolling out over next 2 weeks
July 2, 2021 • 4 min read
6 tips for building a great diversity and inclusion page (+examples)
June 29, 2021 • 7 min read
Google punts third-party cookie ban to 2023 for 'responsible planning'
June 25, 2021 • 6 min read
8 types of website performance metrics you should look at on a monthly basis
June 24, 2021 • 11 min read
Finally, Google page experience core update is rolling out
June 18, 2021 • 3 min read