Whitespace in Web Design: What It Is and Why You Should Use It

Published February 14th ,2020 at 9:03pm  
General
 Comments made • 16      Read • 119

Tell your friends


Highlights

In a time when were sounded by information, it is extremely important for designers to think about being clear with their layouts. We must remember to deliver a page that will get viewers attention, whether theyre purchasing something from a e-commerce site, reading a blog or just browsing news. The design must be readable, easy to understand, and easy to like.

We need to remember that going for a simple layout instead of a complex one is the key to keeping readers interested. A lot of elements, images, colors and different shapes in a page can make your site look more like an infomercial and causes your readers to leave because they’re uncomfortable.

A good way to deliver an enjoyable experience on the web is to understand more about whitespace and how you can use it to create a nice, simple and elegant design. Whitespace is actually really important to web design because you can use it to improve readability and website performance. Not to mention, white space is part of the “less is more,” “make it simple,” mantra that has been proven to be effective when designing for the web.
There are some very simple ways of explaining what whitespace is, but my favorite one is a quote from Mark Boulton’s Whitespace article: “whitespace is empty space.”

What is Whitespace?

Whitespace, many times referred to as negative space, is the portion of a page left unmarked, the portion that is left blank, or (as Mark would quote) the empty space in a page. In web design terms, it’s the space between graphics, columns, images, text, margins and other elements. It is the space left untouched in order to smooth things out and transform a page into something elegant. It is also the blank space that reminds us that simpler designs are beautiful and that we don’t need to create a layout filled with text and graphical elements to deliver a clear and direct message.
Even though we call it white space, it doesn’t mean the actual space must be white. The blank space may be filled with any color as long as it is free of any elements like text or images. Whitespace is also associated with elegance and sophistication since it is a way to organize text, organize elements and guide users attention to certain elements.
An example of great usage of whitespace that we are all familiar with is Google. Their homepage is filled with whitespace so we can focus on what is important: search.



To include more whitespace in your designs and deliver a better result, start thinking about every detail of a page. Think about margins, header, footer, menus, images and captions, items in a list, words and letters. Think about all of these elements and start leaving more space between them, always keeping in mind that you want to create something elegant and clear while improving user experience. A good experience means having space to breathe between elements and letting your reader’s eyes relax. Placing text in an 11px font and cramming it into the bottom of the page just won’t deliver the experience your readers crave.

How to Use Whitespace?

Here is an example from Mark Buton’s article showing the difference between using more white space in a direct mail piece. As you can see, the result is nice and elegant.


Another good example of an interesting use of whitespace is the Made by Sofa website. Their website commands attention through its simple and clear design. Their site’s layout shows that you can get a nice result by tastefully positioning elements while leaving blank space between them.


Below you can find more examples of websites taking advantage of whitespace and that provide layouts which explore space between text, images, margins, menus and other elements:



Do you want to learn how to create web applications? Start today!



WRITTEN BY:

Kwame Duodu

Am a computer programmer

read more

More posts




ADD A COMMENT
16 comments made below

Load more comments


OTHER ARTICLES




  Press enter to search


ALL ARTICLES

See all articles


POPULAR ARTICLES



ADS


Courses Tutorials
RESULTS FROM SEARCH •
SEE MORE RESULTS  

SUBSCRIBE TO OUR
NEWSLETTER •


Dont miss! Stay updated with Us, new
courses, and trends in tech.

By providing your information and clicking "Subscribe", you consent and agree to receive marketing emails from CodeGaia, and that your information will be used in accordance with the CodeGaia Terms of Use and Privacy Policy.