{"id":14093,"date":"2018-01-09T11:00:35","date_gmt":"2018-01-09T11:00:35","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=14093"},"modified":"2020-12-14T11:39:59","modified_gmt":"2020-12-14T11:39:59","slug":"the-power-of-whitespace","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/the-power-of-whitespace\/","title":{"rendered":"The Power Of Whitespace"},"content":{"rendered":"

Whitespace (or \u201cnegative space\u201d) is an empty space between and around elements of a page. Although many may consider it a waste of valuable screen estate, whitespace is an essential element in design:<\/p>\n

<\/div>
<\/svg><\/div>

\u201cWhitespace is to be regarded as an active element, not a passive background\u201d \u2014 Jan Tschichold<\/p><\/span><\/blockquote>\n

Today, I\u2019ll cover how you can use whitespace in your designs to give it a clean, uncluttered feel.<\/p>\n

Whitespace And Negative\u00a0Space<\/h2>\n

The term \u201cnegative space\u201d originates from traditional art where it used to capture the shape of the object more accurately. Actually, space doesn\u2019t actually need to be colored white \u2014 any type of blank space that isn\u2019t in competition with the focus content can be classed as \u201cwhitespace.\u201d Since there\u2019s no real connection to the actual color white the terms \u201cwhitespace\u201d and \u201cnegative space\u201d can be used interchangeable.<\/p>\n

<\/p>\n
\"\"<\/a>

\u201cSuprematist Composition: Airplane Flying\u201d by Kasimir Malevich. \u201cNegative space\u201d is the space between elements in a composition.<\/p><\/div>\n

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

Whitespace In Graphical User Interfaces<\/h2>\n

Same as traditional art, objects in graphical user interfaces also require negative space \u2014 text, buttons, logos and other objects need room to breath. All good user interfaces incorporate proper whitespace values into all page elements from top to bottom. Elements of whitespace in GUI are:<\/p>\n