{"id":247,"date":"2020-10-24T20:49:01","date_gmt":"2020-10-25T01:49:01","guid":{"rendered":"https:\/\/wowfall2020.londietmartin.com\/?p=247"},"modified":"2020-11-01T18:41:38","modified_gmt":"2020-11-02T00:41:38","slug":"the-wonderful-world-of-whitespace","status":"publish","type":"post","link":"https:\/\/wowfall2020.londietmartin.com\/?p=247","title":{"rendered":"The Wonderful World of Whitespace"},"content":{"rendered":"\n

What is whitespace?<\/strong><\/p>\n\n\n\n

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. <\/p>\n\n\n\n

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. <\/p>\n\n\n\n

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. <\/p>\n\n\n\n

How do we create whitespace?<\/strong><\/p>\n\n\n\n

We can naturally create whitespace by following the four design principles talked about in Robin William\u2019s book, The Non-Designers Design Book. <\/em>These principles are contrast, repetition, alignment, and proximity. <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

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\u2019t 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. <\/p>\n\n\n\n

<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

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.  <\/p>\n\n\n\n

<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

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<\/a>.\u00a0<\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

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\u2019t 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. <\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

But first, we need to understand our audience<\/strong><\/p>\n\n\n\n

Before we can utilize whitespace to our advantage, we need to understand how people read websites. First, they don\u2019t 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. <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

What is even happening here?<\/strong><\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

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. <\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

Leave the madness behind<\/strong><\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

The MacBook<\/a> website is almost completely white except for the sprinkling of images and text. I\u2019m a PC person and this site makes me a MacBook believer. This site doesn\u2019t follow the F reading pattern from above since it is so simple, but the simplicity makes it eye catching and engaging.\u00a0<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

This image shows us how whitespace doesn\u2019t have to be white. The designer used the whitespace to create little faces in the mug handles. <\/p>\n\n\n\n


<\/p>\n\n\n\n

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. <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

<\/p>\n\n\n\n

What did we learn? <\/strong><\/p>\n\n\n\n

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. <\/p>\n\n\n\n

<\/p>\n\n\n\n

Sources:<\/strong><\/p>\n\n\n\n

Respicio, A., 2020. Whitespace In Websites: 8 Stunning Examples That Prove Its Power<\/em>. [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>.<\/p>\n\n\n\n

Segue Technologies. 2020. Why Whitespace Is So Important In Web Design<\/em>. [online] Available at: <https:\/\/www.seguetech.com\/whitespace-web-design\/>.<\/p>\n\n\n\n

Williams., R., 2008. Non-Designer’s Design Book, The<\/em>. Pearson.<\/p>\n\n\n\n

Image Sources:<\/strong><\/p>\n\n\n\n

Apple. 2020. Macbook Air<\/em>. [online] Available at: <https:\/\/www.apple.com\/macbook-air\/?ref=land-book.com>.<\/p>\n\n\n\n

David, G., 2020. Proximity Principle Of Design<\/em>. [online] Graphic Design Services In Kenya. Available at: <https:\/\/254-online.com\/proximity-principle-design\/>.<\/p>\n\n\n\n

Forrest, J., 2020. The Importance Of White Space<\/em>. [online] Digital Ink. Available at: <https:\/\/www.dgtlnk.com\/blog\/importance-white-space\/>.<\/p>\n\n\n\n

Inzone Design. 2020. The 6 Principles Of Design<\/em>. [online] Available at: <https:\/\/www.inzonedesign.com\/blog\/6-principles-of-design\/>.<\/p>\n\n\n\n

Laja, P., 2020. 10 Useful Findings About How People View Websites | CXL<\/em>. [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<\/em>. [online] Available at: <http:\/\/www.princeplasticsurgery.com\/>.<\/p>\n","protected":false},"excerpt":{"rendered":"

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…<\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_monsterinsights_skip_tracking":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1],"tags":[],"class_list":["post-247","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=\/wp\/v2\/posts\/247","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=247"}],"version-history":[{"count":5,"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=\/wp\/v2\/posts\/247\/revisions"}],"predecessor-version":[{"id":479,"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=\/wp\/v2\/posts\/247\/revisions\/479"}],"wp:attachment":[{"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}