The Guide to Understanding Micro and Macro White Space in Web Design

Digital interface design follows many of the same rules as print design. Composition refers to the overall layout and white space plays a big role. Many things help to define a composition, but white space is one of the most important concepts to understand.

Learning to use white space is more about hands-on practice and experience. But you can absorb plenty of great ideas by studying how other websites are put together. I’ve organized some tips and general ideas to clarify the overall picture of white space and how it defines composition for website layouts.

The Basics of Composition

To understand white space, you really need to understand composition. In web design, this refers to the whole layout as it appears as one object. In fine art, the term gestalt is used to describe how a composition is often seen as more than the sum of its parts.

This change in perception occurs when page elements stack together in just the right way so as to create the illusion of interconnectivity. The sum of the parts gives you a series of elements on a website. But the composition includes the relationship between these parts and how they look together.

If you want to understand composition for the web, you need to think in terms of content. Every website is meant to display content, and the layout should behave more like a wrapper.

Strive to make content your prime directive, and you’ll find yourself with some fascinating compositional ideas. Take for example the agency website for Lift Interactive. The homepage uses plenty of white space around the header to place a heavier focus on company branding.

Other pages on the site place a heavy focus on content and how it’s structured. People visit websites for information, and this needs to be displayed in a way that’s both easy and fun to consume.

When talking about macro and micro white space we get onto the subject of differing viewpoints. Overall composition refers to the whole page, but you can also discuss the composition of a website’s header or footer as a sole entity.

The Stripe Connect landing page has alternating content sections laid horizontally. Page sections rely on background colors and white space to create separation. Individual sections of the page use compositional spacing on the micro scale, which then affect things on the larger macro scale.

Creating Rhythmic Structure

In music, there is something called a meter which defines the rhythmic structure. The meter is created by accented sounds that repeat or recur in a similar fashion. Graphic design relies on similar principles of rhythm and meter.

White space should help to define this rhythm, especially on a macro scale. When viewing a full layout mockup, it should be obvious where content sections break apart. This rhythm creates structure and reliable patterns for content consumption.

Take a look at the homepage for Nucleo. The top portion of their site uses a fullscreen header with content on the left and right side. As you scroll down, you’ll notice a 2-way split appears multiple times. It actually seems like an alternating pattern of centered content followed by two side-by-side content blocks.

Space and content structure are used to define this rhythmic pattern. As visitors scroll down the page, they subconsciously learn to expect content in a certain format. Great compositions are both overt and subtly intuitive.

Storyland Studios is another great example with naturally occurring splits in content. The site both feels and reads like an agency layout because of how content is organized. Remember that content reigns king and should be used as a guide for planning white space.

Symmetry and Asymmetry

The topic of rhythm naturally brings us to symmetry and asymmetry. Both are useful in design, and both can even be used in the same design. The vast majority of macro layout compositions are symmetrical with repeating patterns and rhythmic structure.

But as you look into the nitty-gritty details, you’ll notice asymmetrical design choices. Asymmetry stands out and should be used with elements that need to stand out.

Weightshift is another design agency with a crafty layout. Their work is showcased via thumbnails on the homepage which are laid in a grid pattern. The pattern itself embodies both symmetry and asymmetry together.

One side of the grid has a large thumbnail, and the other side has 4 smaller thumbnails. This pattern repeats to create a sense of symmetry, but the thumbnail size relationship is asymmetrical.

In the case of a wine travel site named Into The Vineyard, asymmetry is found on a larger scale. The layout itself plays with a vibrant header contrasted against a simplistic body area.

Page content is defined by space where paragraphs are spaced evenly and sequentially. But the overall page body seems to fit into its own section compared to the header. This design choice makes the header stand out which is the exact reason to use asymmetry.

Implicit Content Relationships

The interesting thing about white space is that it’s not directly noticeable. Visitors can point out paragraphs on the page, but it’s unlikely that they’ll notice the space between those paragraphs.

Macro and micro-relationships are developed via space whether intentional or not. This implicit relationship is defined by how much space exists between two objects compared to everything else on the page. This is why you need to practice and put white space to good use in your own design workflow.

Let’s take a peek at the Chatrify homepage for some content relationships. The small block of icons represent features of the application, and they’re all listed in unison. Both the micro space between icons and the macro space between other elements play a role in relationship development.

This same effect can be seen on the features page with individual features streaming vertically down the site.

I also really like the footer design on Search for Energy. The far left side is mostly empty with the exception of a logo. The rest of the footer is filled out with columns and link lists.

Just by looking at the footer, you should be able to recognize relationships. The site could be in an alien language and you’d still recognize relationships based on colors and spatial features. Also, try resizing your browser to see how this footer maintains clarity while being completely responsive.

In regards to content, have a look at Michi Ramen’s website. You will notice that space and typographic styles are used to define levels of importance. Relationships are implicit, meaning they can be felt before they’re understood.

Great designers learn how to mold the big picture by focusing on the little details. The parts do make up the whole, and when the parts are expertly put-together, they can even exceed the whole.

Putting it All Together

White space defines rhythm, balance, relationships, and ultimately composition. This holds true for painting and print design and definitely web design. By now, you should understand these principles of white space, but you really need to build designs to fully internalize them. Practice designing lots of websites, and over time, you will notice a difference in your thought patterns and skill set.

Want More Design Techniques?

• Is There a Sense of Visual Balance in Your Web Design?
• 5 Brilliant Examples of Effective Contrast in Web Design
• 25 Beautiful Minimalist Websites