The Wonderful World of Whitespace
What is whitespace?
Whitespace is exactly what it sounds like, the whitespace around text or images on a page. The name could be misleading because whitespace does not have to be white at all.
The two main types of whitespace are macro and micro. Macro whitespace is the space between the elements such as, the copy, the text, and the images. Micro whitespace is the space between smaller elements such as letter spacing and line height.
Macro whitespace is intentionally used to create structure and lead the reader’s eyes where you want them. Micro whitespace improves readability. This is important because you want readers to be able to easily digest what you have written.
How do we create whitespace?
We can naturally create whitespace by following the four design principles talked about in Robin William’s book, The Non-Designers Design Book. These principles are contrast, repetition, alignment, and proximity.
Proximity just means grouping related items together. In the image above, we see the proximity in the first grouping forming a line. We can see the proximity used in the second grouping to form a triangle with the white space. The third grouping looks as though the images aren’t related at all even though they are the same shapes. The first and second grouping are visually pleasing while the third grouping makes us wonder what is going on.
The principle of alignment tells us that every element should have some visual connection to the other elements on a page. While the above image shows different alignments of objects near each other, we can also place items far away from each other and they will still be aligned. We do not have to fill in every space with items to connect them, in turn creating whitespace.
The principle of repetition tells us that repeating visual designs throughout the piece will unify and strengthen the work by tying everything together. This can be as simple as carrying the same headings throughout: the same font, size, color. Using the same color scheme throughout your work will also bring a cohesiveness to your work. The above website uses repetition in its color scheme and through the pink colored box on the right. The entire site can be seen here.
The last design principle is contrast. This tells us to use different elements to draw the eye. The different elements have to be different enough to be seen. Using similar colors or fonts won’t provide enough contrast to be effective. Contrast works in two ways. First to draw interest, and second, to aid the organization of the page. When the elements are organized, whitespace will naturally occur. This image shows us how one different item, color, font, size, etc. will naturally draw the eye.
But first, we need to understand our audience
Before we can utilize whitespace to our advantage, we need to understand how people read websites. First, they don’t read, they scan. We need to know the areas that are scanned to place the important information there. The following image shows how people read websites. People start in the top left corner, and read in an F pattern. The first two lines are read, then the left side is scanned down. This will help us in designing our layout.
What is even happening here?
The website above has packed information and images into every inch of space on the page. Your eye does not know where to start. This design will exhaust your readers and they will look elsewhere for what they need.
Leave the madness behind
The MacBook website is almost completely white except for the sprinkling of images and text. I’m a PC person and this site makes me a MacBook believer. This site doesn’t follow the F reading pattern from above since it is so simple, but the simplicity makes it eye catching and engaging.
This image shows us how whitespace doesn’t have to be white. The designer used the whitespace to create little faces in the mug handles.
Above and below we can see how whitespace in text works. In the top image, there is no space, forming a wall of text that no one wants to read. Below the only things that have changed are some indentations and space between the paragraphs, but it makes it easier to read.
What did we learn?
Whitespace should never be considered just blank space, especially blank space that needs filling. Whitespace is an important element of the overall design of our pages, whether in print or on the web, and can easily be achieved by following the four principles of design: contrast, repetition, alignment, and proximity.
Sources:
Respicio, A., 2020. Whitespace In Websites: 8 Stunning Examples That Prove Its Power. [online] Impactbnd.com. Available at: <https://www.impactbnd.com/blog/examples-whitespace-in-websites#:~:text=It%20is%20often%20used%20to,their%20own%20on%20the%20page>.
Segue Technologies. 2020. Why Whitespace Is So Important In Web Design. [online] Available at: <https://www.seguetech.com/whitespace-web-design/>.
Williams., R., 2008. Non-Designer’s Design Book, The. Pearson.
Image Sources:
Apple. 2020. Macbook Air. [online] Available at: <https://www.apple.com/macbook-air/?ref=land-book.com>.
David, G., 2020. Proximity Principle Of Design. [online] Graphic Design Services In Kenya. Available at: <https://254-online.com/proximity-principle-design/>.
Forrest, J., 2020. The Importance Of White Space. [online] Digital Ink. Available at: <https://www.dgtlnk.com/blog/importance-white-space/>.
Inzone Design. 2020. The 6 Principles Of Design. [online] Available at: <https://www.inzonedesign.com/blog/6-principles-of-design/>.
Laja, P., 2020. 10 Useful Findings About How People View Websites | CXL. [online] CXL. Available at: <https://cxl.com/blog/10-useful-findings-about-how-people-view-websites/>.
Princeplasticsurgery.com. 2020. Plastic Surgery Little Rock, Arkansas | Melanie Prince MD. [online] Available at: <http://www.princeplasticsurgery.com/>.
This is very well written and was fun to read. I am blown away by your ability to make something as mundane as whitespace into an interesting topic. I tend to focus on flashy colors, but this article reminded me of the importance of whitespace as well. The sleek and simple designs that Apple uses are great examples that you included. Great post!
White space is key when designing websites. Like the example you presented if information is to cluttered or disorganized it make it impossible for the user to follow. After working with a few clients though I have had quite a few as for less white space to it is important to not add to much white space.
I enjoyed your post. I think most people are generally familiar with the idea of whitespace in art/design by now, but they may not be fully aware how to utilize it for themselves. Loved your inclusion of visual images, especially that you included some from our class texts (like the F reading patter); very helpful for such a visually oriented topic.
Wow! What a clear and simple statement of so much about whitespace. I love it and it is a good refresher course even for me who has lived this for some time. Thank you for making this a resource.