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
Web Design  |   User Experience

Whitespace in Websites: 8 Stunning Examples That Prove Its Power

Ashleigh Respicio

By Ashleigh Respicio

Dec 5, 2018

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.

Related Articles

Can I Use AI Tools To Build My New Website?

September 18, 2023
Vin Gaeta Vin Gaeta

What Is a 'Learning Center' and Why Does My Website Need One?

September 14, 2023
John Becker John Becker

How Much Does a Website Redesign Cost in 2023?

July 20, 2023
Vin Gaeta Vin Gaeta

Do You Need a New Website? Maybe Not

July 19, 2023
Vin Gaeta Vin Gaeta

14 Award-Winning Website Designs (& What They Did Right)

July 17, 2023
Christine Austin Christine Austin

What a New Self-Selection Tool for Your Website Will Cost

July 13, 2023
John Becker John Becker

9 Self-Selection Tools to Inspire Your Business Website

July 10, 2023
John Becker John Becker

Website Conversions in 2023 — STOP, START, KEEP

January 25, 2023
Vin Gaeta Vin Gaeta

8 of the Best Business Website Designs to Inspire You in 2023

November 17, 2022
Ramona Sukhraj Ramona Sukhraj

What Does a Great Inbound Marketing Website Look Like in 2023?

November 14, 2022
Ramona Sukhraj Ramona Sukhraj

Your 2023 Website Strategy Must Include These 6 Things

November 4, 2022
Mary Brown Mary Brown

4 Ways To Recession-proof Your Website In 2023

November 1, 2022
Marcus Sheridan Marcus Sheridan

Website Mastery: A better redesign process for your business website

November 1, 2022
John Becker John Becker

8 Best Content Management Systems for Digital Marketing in 2023

October 1, 2022
Ramona Sukhraj Ramona Sukhraj

12 Essential Tips for Improving Your Web Design in 2023

September 13, 2022
Christine Austin Christine Austin

23 of the Best Examples of Business Blog Design

May 30, 2022
Christine Austin Christine Austin

5 Prep Secrets for a Smoother, More Successful Website Project Plan (+ Infographic)

May 16, 2022
John Becker John Becker

Website Redesign Checklist: The 12 Crucial Steps You Need To Be Successful

February 22, 2022
Joe Rinaldi Joe Rinaldi

11 Pricing Page Examples for Business Websites (Updated for 2023)

January 18, 2022
Liz Murphy Liz Murphy

8 Crucial Elements Every Homepage Design Should Have

January 15, 2022
Ramona Sukhraj Ramona Sukhraj

What Makes a Good Website Design? 7 Award-Winning Examples To Be Inspired By

December 18, 2021
Kimberly Marshall Kimberly Marshall

Why Homepage Carousels Are Bad (& 3 Alternatives to Try Instead)

August 26, 2021
Joe Rinaldi Joe Rinaldi

Google Shares New Tools to Audit Website User Experience

August 12, 2021
Paul D. Grant Paul D. Grant

New HubSpot CMS Hub Starter Tier Released for Growing Businesses

August 6, 2021
Paul D. Grant Paul D. Grant

Too many internal links in content can confuse Google about site structure

July 9, 2021
Liz Murphy Liz Murphy