What is White Space in Web Design? How To Use it and Examples

by on June 4, 2016

Attractive Web Design

What is White Space in Web Design? How To Use it and Examples

  •  
  •  
  •  
  •  

What is white space in Design? White space in graphic and web design is simply the places in between elements or objects on a page or website.

Does white space have to be white? No. It can be any color as long as it’s uncovered with other objects or elements in that area of the page.

Why does white space matter in design composition? By allowing elements to not cover the whole page and to allow space between them you’re creating the appearance of order, neatness and quality. White space can be used to emphasis certain elements that remain as is the case with one of the most frequently used websites in the world, Google.

The Importance of White Space in Design, why does it matter. Example: Google digital marketing budget calculator

What does all of the space do for the main elements in the middle of the page? It puts all of the emphasis on them. Although most websites don’t have such a singular purpose as Google (just search for something), you know that wielding the power of space around the elements on websites you might be working on can create emphasis for those elements that remain.

Let’s look at a couple killer examples of White Space used for emphasis

Furnde. Theme by Enes Dal on Behance

White Space in WordPress Theme - White Space in Web Design, how to

As you can see the white space in the above design creates an impression of importance for the elements that remain. Is the whitespace pure white? Not always, it can be a light grey or any color you really want but it creates that high end feel by not neurotically covering every inch of the page. White space in the above design allows for a sense of peace and wholeness that is also heightened by the clean Gotham typeface and the stylish high-end photography.

 

Free Creative Branding Template by Tomasz Mazurczak

White Space in Web Design - Does it have to be white?

This free minimalist template is a prime example of ‘White Space in web design‘  not needing to be white. We have dark grey and a more mid-tone grey up at the top in large amounts, un-covered by any other elements. With dramatic photographic elements, and the use of centering, a certain amount of importance is assigned to the remaining elements. With the lack of bright or complex color patterns there is a sense of the intellectual in this design.

Rock Group Infographic Theme – ThemeRex

Rock Group Infographic Theme - White Space in Web design

 

White space, red space, green space. Still we might say this theme is both brightly colored, ‘fun’ and full of life  – though it is using ‘white space’ extremely well. In web design and in infographics we can create a sense of quality by focusing on less. Make the things you do include amazing, and cut out the rest.


Part Two: The magic of negative space, and using white space as a thing of it’s own


What happens when you use white space in such a way that it actually creates a shape and becomes an object of it’s own? Well I don’t see many people using this in web design, it’s a tried and true way to delight viewers of a composition.

I remember some of my first painting classes in College and how the teacher turned me on to creating a figure or covering the whole canvas in layers of paint and then challenged us to using white over the top of our other colors to represent light and to give the painting depth. The same goes for graphic and web design – try to ‘use white as a color.’ Perhaps some of these compositions will spark an idea of how you could do this tastefully.

Kiwi Triangle – Things Organized Neatly 

Kiwi Triangle - Negative space and design

The mix of food and design, kiwi’s which I love, and the ‘things arranged neatly’ style makes this a delicious combination for me. Recognize how the shapes within your your composition create other shapes and the way that effects that overall effect. I was recently talking with another designer and I explained my thought process on the neatly arranged things as well when I showed her this Tumblr (Things organized neatly). ‘By creating a sense of order out of the objects pictured, it makes the overall feel of quality heightened as well being that one senses an intention, a wholeness, and it tends to leave a positive impression. Order eases anxiety.’ Just like when you clean your house and ‘Cleanliness is next to Godliness’, feels too real. The same thought process goes into the delicate preparation of Japanese Bento boxes, like this one pictured below.

Japanese bento box

In a traditional Japanese Bento Box great deal of care is spent on making sure to
achieve not only a visual balance but a flavor and aromatic balance as well. 

 

Graphic Responses – John Gravdahi for Colorado State University

Negative space as an object

The beauty of using white like a piece of paper with a cut out, and a pencil coming out brings the feeling of a physical space into the art of white space. Negative space is now an object to be interacted with – you can even see it seems to have a shadow on the pencil, heightening the sense of it’s realness as an object.

 

Don’t Text and Drive Ad – Fiat

Designing with Negative Space

‘You either see the letter or the dog’ – Quite an ad that makes an impression.

The classic cut out of an object in another object. Either the dog or the N could be the negative space or the ‘white space’ as we have been using it. In this creative ad, it’s not just for the cuteness of the interplay between dog and letter, it helps call attention to the tagline.

 

The Voice of the Light – Francesca Pavese

Negative Space and Design

 

When used in a certain way, the white space can cover up an object, reveal an object, or show a distinctly new element on your design. Though I couldn’t find many places ‘in the wild’, where this technique was being used for web design perhaps that’s an opportunity for experimental and ambitious designers out there to perhaps challenge themselves to take this concept into user interface design.

 


Part Three: The rule of thirds, and the beauty of wide horizontally shot photography for the web.


 

One way to delight a web designer is to show them a photograph that is laid-out horizontally because of course we know these are the types of photographs that work well within web UI because of the rectangular shape of the screen. Even more delightful? A photograph that has space for text to be overlayed over the top! Enter the rule of thirds. A photograph that is broken up into thirds allows a particular balanced impression on the viewer and makes it a lot more easy to interplay text with photograph.

Berger – Mind Sparkle Mag

Rule of Thirds - Web Design White Space

 

Sometimes the rule of thirds moves into the vertical dimension, not just the beautiful horizontally laid out photography that make or break a website. In the below example the ‘predominant’ two/thirds section wraps around a one/third element that’s essentially outlined in yellow. The whitespace is more like ‘open space’, or ‘open air’ in which some objects do occupy but don’t overwhelm.

 

National Geographic Concept – Gajan Vamatheva

National Geographic redesign concept, rule of thirds, white space

 

Ideally, before you create a web layout you have a ‘big idea’ to define and be your north star during the project. What kind of big idea demands white space? Well architectural, interior design, and fashion oriented websites might lend themselves to white space, and the big idea might be ’embrace freedom,’ ‘develop peace of mind,’ ‘sophistication through simplicity.’ Every single one of these photos below are utilizing the rule of thirds and white space to create a high end feel through sophisticated simplicity. If you take photos over a flat color or fairly simple texture – you can always extend the background further with a little photoshop action.

Abani – Found on Design School by Canva

 

Rule of Thirds

 

The centered third – Just like this gorgeous supercut of Wes Anderson, centering can be just the trick to give an intentional balanced feel if it’s used right.

 

You can use centering with the figure in the photo within your web UI, to excellent effect. In the example below the rapper Wale is almost perfectly one third of the photo with a gold circle to complete the symmetry and the balance.

 

Rick Ross Design – Ben Johnson

Rick Ross - Web Design Centered with two-thirds

 

White, gold and black of course, which always catches my eye and is so ridiculously gorgeous. I also love this weathered badge and signature at the bottom of the design – this is just a concept, but I’d be interested to see how it would break down on mobile.

Good times. Thanks for reading. I created this three part post because it seems like a recent post on ‘Examples of Great Web Design Color Schemes with Hex Codes‘ seemed to hit the sweet spot for a lot of people. I love curating web design inspiration and looking for what makes these designs so striking, and it helps me stoke the sensibilities and comprehension of the concepts I’m sharing. If you’ve enjoyed it share with your friends on Twitter!


  •  
  •  
  •  
  •  

Free Web Design Audiobook

Ready to get started?

Get a free consultation now