{"id":62864,"date":"2019-04-02T04:15:45","date_gmt":"2019-04-02T11:15:45","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2019\/04\/how-to-use-spaces-in-web-design-with-gestalt-principles\/"},"modified":"2019-04-02T04:15:45","modified_gmt":"2019-04-02T11:15:45","slug":"how-to-use-spaces-in-web-design-with-gestalt-principles","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2019\/04\/how-to-use-spaces-in-web-design-with-gestalt-principles\/","title":{"rendered":"How To Use Spaces In Web Design With Gestalt Principles"},"content":{"rendered":"<link rel=\"canonical\" href=\"https:\/\/www.smashingmagazine.com\/2019\/04\/spaces-web-design-gestalt-principles\/\"><title>How To Use Spaces In Web Design With Gestalt Principles<\/title><\/p>\n<article>\n<header>\n<h1>How To Use Spaces In Web Design With Gestalt Principles<\/h1>\n<address>Ayesha Ambreen<\/address>\n<p>                  <time datetime=\"2019-04-01T12:30:41+01:00\">2019-04-01T12:30:41+01:00<\/time><time datetime=\"2019-04-02T11:06:19+00:00\">2019-04-02T11:06:19+00:00<\/time><\/header>\n<p>Human brains are hardwired to connect the dots and make sense out of everything the eyes see. Design is a creative field where forms and space intermingle to lend us a variety of experiences. Whatever design we come across, our brains are hardwired to transform that piece into simpler components made up of basic shapes and forms that are at play with the spaces. Our minds flood with memories and \u2014 <strong>thanks to our experiences<\/strong> \u2014 we recognize the patterns easily.<\/p>\n<p>Space \u2014 both positive and negative \u2014 plays a pivotal role in unifying the design elements. As a result, we see a uniform pattern (or not). When the elements are arranged in an orderly manner, the intelligent use of spaces draws our eye to the most noticeable space \u2014 be it positive or negative.<\/p>\n<p>The <strong>positive space<\/strong> poses as the flesh or the meat of the design; it\u2019s the part where you see the shapes, colors, patterns and so on. The <strong>negative space<\/strong>, on the other hand, is the background or the hyped white space (most of the times).<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-starry-night.gif\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-starry-night.gif?w=900\" alt=\"The popular artwork by Vincent Van Gogh features an interesting case of negative versus positive space\"><\/a><figcaption>\u201cThe Starry Night\u201d by Vincent van Gogh<\/figcaption><\/figure>\n<p>As much as the positive space seems to dominate the negative counterpart, both are used in equilibrium to tell a harmonious, coherent, and a seamlessly complete story.<\/p>\n<p>In balanced compositions, the positive parts and negative space of the design work together and complement each other to form a seamless, aesthetically pleasing whole. Unbalanced compositions, on the contrary, can cause discomfort to the audience and convey an incomplete, rather distorted story.<\/p>\n<p><strong>But what kind of story do spaces tell in web design?<\/strong><\/p>\n<p>In the midst of the spaces, the success and failure of web design is determined more by the utility and the usability. Just consider that if you have poor design skills, the overall efficacy and the presentation of the web design will be disturbed. Content is king, but from an alternative point of view, the content will take its toll on your website if the spaces are not used appropriately.<\/p>\n<p>If you think your developing skills rock but your design skills could need some more improvement, you\u2019ve just hit the jackpot. In this article, we\u2019re going to cover:<\/p>\n<ul>\n<li>Positive versus negative space relationship, importance and implementation;<\/li>\n<li>The connection between spaces and cognitive perception;<\/li>\n<li>The Gestalt principles and their implication in web design.<\/li>\n<\/ul>\n<p>We\u2019re also going to discuss some real-world web design examples with each Gestalt principle and creative use of spaces.<\/p>\n<p>Without further ado, let\u2019s begin.<\/p>\n<div data-component=\"FeaturePanel\" data-audience=\"non-subscriber\" data-remove=\"true\"><\/div>\n<h3>Positive Versus Negative Space: Relationship, Importance And Implementation<\/h3>\n<p>Spaces comprise of two main dimensions: positive and negative. The positive is the element and the negative is the no element. As mentioned before, the positive is object, negative is the negligible space behind it. Where one is the focus, other serves as the background. Where the former moves and motivates, the latter remains stationary and obscure. Where one is the moon, the other is the dark sky surrounding it.<\/p>\n<p>In web design, the spaces interact with each other to maintain the idea of holistic composition. Visual hierarchy is only created when both the spaces are differentiated with contrast and yet tend to the bigger picture (think of <em>yin and yang<\/em>).<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9f0d7733-f70b-4f0f-9561-7dd7a8c075b9\/gestalt-principles-yin-and-yang.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-yin-and-yang.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9f0d7733-f70b-4f0f-9561-7dd7a8c075b9\/gestalt-principles-yin-and-yang.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9f0d7733-f70b-4f0f-9561-7dd7a8c075b9\/gestalt-principles-yin-and-yang.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9f0d7733-f70b-4f0f-9561-7dd7a8c075b9\/gestalt-principles-yin-and-yang.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9f0d7733-f70b-4f0f-9561-7dd7a8c075b9\/gestalt-principles-yin-and-yang.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-yin-and-yang.png?w=900\" sizes=\"100vw\" alt=\"The popular Chinese symbol Yin and Yang\"><\/a><figcaption>\n\t\t\t\u201cYin and yang\u201d, a concept of dualism in ancient Chinese philosophy. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9f0d7733-f70b-4f0f-9561-7dd7a8c075b9\/gestalt-principles-yin-and-yang.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>We differentiate between the positive and the negative space at the meeting point. The negative occurs mainly as the white space that complements the positive to make it pop out.<\/p>\n<p>It might seem that the positive space takes the lead, the <a href=\"https:\/\/www.designer-daily.com\/taking-advantage-of-negative-space-in-web-design-61720\">negative space is equally important<\/a> for a myriad of benefits. Some of these benefits are:<\/p>\n<ul>\n<li>It creates an easy-to-follow visual hierarchy;<\/li>\n<li>Sets the focus of attention as well as reduces distraction;<\/li>\n<li>Helps establish the scale and lets the focus appear bigger;<\/li>\n<li>It improves page scan-ability;<\/li>\n<li>Makes the flow on the page appear natural;<\/li>\n<li>It clarifies the relationship between the visual elements without the need for additional aids;<\/li>\n<li>It helps de-clutter the page;<\/li>\n<li>Enhances the style and look of the webpage.<\/li>\n<\/ul>\n<p>Negative space in design isn\u2019t that negative if you ask me. However, both space types perform great when used in a balanced ratio. Unfortunately, chaos strikes only when either one dominates the other and gives an \u2018overcrowded\u2019 or a \u2018lacking\u2019 impression. In both cases, the audience is unable to process such complex information, and hence, the motive of using space creatively for web design falls apart.<\/p>\n<p>Here\u2019s a web template with misplaced content or \u2018chaos\u2019 space:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/64475487-8c11-42d2-9306-8ec91b1c6881\/gestalt-principles-space-chaos.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-space-chaos.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/64475487-8c11-42d2-9306-8ec91b1c6881\/gestalt-principles-space-chaos.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/64475487-8c11-42d2-9306-8ec91b1c6881\/gestalt-principles-space-chaos.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/64475487-8c11-42d2-9306-8ec91b1c6881\/gestalt-principles-space-chaos.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/64475487-8c11-42d2-9306-8ec91b1c6881\/gestalt-principles-space-chaos.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-space-chaos.png?w=900\" sizes=\"100vw\" alt=\"Here is what happens when space is not considered\"><\/a><figcaption>\n\t\t\tUnconsidered \u2018chaotic\u2019 space (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/64475487-8c11-42d2-9306-8ec91b1c6881\/gestalt-principles-space-chaos.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6520412f-cf97-44dc-9711-aa8b1c1f321d\/gestalt-principles-space-chaos-bw.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-space-chaos-bw.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6520412f-cf97-44dc-9711-aa8b1c1f321d\/gestalt-principles-space-chaos-bw.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6520412f-cf97-44dc-9711-aa8b1c1f321d\/gestalt-principles-space-chaos-bw.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6520412f-cf97-44dc-9711-aa8b1c1f321d\/gestalt-principles-space-chaos-bw.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6520412f-cf97-44dc-9711-aa8b1c1f321d\/gestalt-principles-space-chaos-bw.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-space-chaos-bw.png?w=900\" sizes=\"100vw\" alt=\"We translated the above website template into black and white to show space discrepancies\"><\/a><figcaption>\n\t\t\tSpace discrepancies shown in black and white (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6520412f-cf97-44dc-9711-aa8b1c1f321d\/gestalt-principles-space-chaos-bw.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/01bb420c-8ee4-40b5-b5cd-4901c44be0fd\/gestalt-principles-space-fixed-bw.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-space-fixed-bw.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/01bb420c-8ee4-40b5-b5cd-4901c44be0fd\/gestalt-principles-space-fixed-bw.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/01bb420c-8ee4-40b5-b5cd-4901c44be0fd\/gestalt-principles-space-fixed-bw.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/01bb420c-8ee4-40b5-b5cd-4901c44be0fd\/gestalt-principles-space-fixed-bw.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/01bb420c-8ee4-40b5-b5cd-4901c44be0fd\/gestalt-principles-space-fixed-bw.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-space-fixed-bw.png?w=900\" sizes=\"100vw\" alt=\"Here we have fixed space to show how space can spark clarity and uniformity when used in proportion\"><\/a><figcaption>\n\t\t\tFixed space to show how space can spark clarity and uniformity when used in proportion (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/01bb420c-8ee4-40b5-b5cd-4901c44be0fd\/gestalt-principles-space-fixed-bw.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/12efd293-70d8-4b1c-8e46-1bc2485361bf\/gestalt-principles-space-fixed.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-space-fixed.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/12efd293-70d8-4b1c-8e46-1bc2485361bf\/gestalt-principles-space-fixed.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/12efd293-70d8-4b1c-8e46-1bc2485361bf\/gestalt-principles-space-fixed.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/12efd293-70d8-4b1c-8e46-1bc2485361bf\/gestalt-principles-space-fixed.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/12efd293-70d8-4b1c-8e46-1bc2485361bf\/gestalt-principles-space-fixed.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-space-fixed.png?w=900\" sizes=\"100vw\" alt=\"The effective use of space in web design\"><\/a><figcaption>\n\t\t\tThe effective use of space in web design (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/12efd293-70d8-4b1c-8e46-1bc2485361bf\/gestalt-principles-space-fixed.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>As fascinating as the concept and arrangement of space occurs, doubt begins to fog the area.<\/p>\n<ul>\n<li>Is the positive space surrounded by the negative one or is the negative space eaten up by the positive one?<\/li>\n<li>How is the proportion of each space type determined?<\/li>\n<li>Which one should validate as the focal object?<\/li>\n<li>Is it mandatory to highlight one and eclipse the other to communicate your intended perception to the audience?<\/li>\n<li>How would I achieve \u2018design nirvana\u2019 with the communion of positive and negative spaces?<\/li>\n<\/ul>\n<p>Questions like these can only be answered with a clear understanding of the basics. And as per the golden rule of thumb: <strong>simplicity is the best policy<\/strong> (<em>we made that up because it fits!<\/em>).<\/p>\n<p>We mentioned in the beginning that web design is all about creating a simple user interface that helps you and your audience kill more than two birds with one stone, or in literal terms, helps increase the visual desirability of the website design as well as making it effective and easier to use \u2014 yes, with an incredible power over the use of spaces.<\/p>\n<div><\/div>\n<h3>The Connection Between Spaces And Cognitive Perception<\/h3>\n<p>Since our minds are always playing the detective for finding hidden clues and missing links between the spaces, it compares present visuals with the ones experienced before as a part of the cognitive process. In order to become an efficient web designer, you must first understand how the brain pays attention to its surroundings. It may help you pin the particular use of visual elements and use them to influence the viewer\u2019s perception.<\/p>\n<blockquote><p>\u201cGreat designers understand the powerful role that psychology plays in visual perception. What happens when someone\u2019s eye meets your design creations? How does their mind react to the message your piece is sharing?\u201d<\/p>\n<p>\u2014 <a href=\"https:\/\/medium.muz.li\/gestalt-principles-in-ui-design-6b75a41e9965\">Laura Busche<\/a>, Brand Content Strategist at Autodesk<\/p><\/blockquote>\n<p>You must now have a clear idea of how visual design and psychology are linked and have the power to influence each other. In other words, the main idea of developing a simple user-centric interface and using space for its design is by considering the Gestalt principles. These can help you understand and control the visual-psychological connection.<\/p>\n<p><strong>Recommended reading<\/strong>: <em><a href=\"https:\/\/www.smashingmagazine.com\/2016\/05\/improve-your-designs-with-principles-similarity-proximity-part-1\/\">Improve Your Designs With The Principles Of Similarity And Proximity<\/a><\/em><\/p>\n<h3>Gestalt Principles In Web Design<\/h3>\n<p>Gestalt is German for \u2018forms\u2019. It is more of a concept than a word, which states that:<\/p>\n<blockquote><p>\u201cThe whole is other than the sum of the parts.\u201d<\/p>\n<p>\u2014 Kurt Koffka<\/p><\/blockquote>\n<p>A collection of individual units appears as a group to us when they\u2019re unified in some way. We see the elements as a group despite their individuality. This concept or theory applies fundamentally to all the design mediums: We don\u2019t see text, colors, and shapes as separate elements, but instead a whole webpage as a collective entity. The same applies to a forest: we don\u2019t only see a bunch of trees, just the same way we don\u2019t see water drops when looking at an ocean.<\/p>\n<p>The <a href=\"https:\/\/logogeek.uk\/logo-design\/gestalt-theory\/\">Gestalt principles<\/a> describe how the human mind perceives visual components when certain terms and conditions are applied. It helps the brain create imagery of the visual. Hence, the Gestalt principles are based on six main categories:<\/p>\n<ol>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/articles\/#figure-and-ground\">Figure And Ground<\/a><\/li>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/articles\/#proximity\">Proximity<\/a><\/li>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/articles\/#symmetry-and-order\">Symmetry And Order<\/a><\/li>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/articles\/#similarity\">Similarity<\/a><\/li>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/articles\/#closure\">Closure<\/a><\/li>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/articles\/#continuity\">Continuity<\/a><\/li>\n<\/ol>\n<h4>Figure And Ground<\/h4>\n<p>The \u2018figure\u2019 is the object that is intuitively as well as visibly separated from the ground.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f20b9178-b795-47da-8934-51f45e624705\/gestalt-principles-grail-cup.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-grail-cup.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f20b9178-b795-47da-8934-51f45e624705\/gestalt-principles-grail-cup.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f20b9178-b795-47da-8934-51f45e624705\/gestalt-principles-grail-cup.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f20b9178-b795-47da-8934-51f45e624705\/gestalt-principles-grail-cup.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f20b9178-b795-47da-8934-51f45e624705\/gestalt-principles-grail-cup.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-grail-cup.png?w=900\" sizes=\"100vw\" alt=\"Negative space vs. positive space depiction through grail cup\"><\/a><figcaption>\n\t\t\tGrail Cup (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f20b9178-b795-47da-8934-51f45e624705\/gestalt-principles-grail-cup.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>The most classic example that exists is that of the grail cup \u2014 the vase between two mirroring face silhouettes. When you first come across this image, your eyes are drawn to the most focally visual object that comes into your notice immediately, which might be the faces opposing each other or the vase. While your mind is adjusting your focus, the ground or the vase is blurred out and at that moment, your mind intuitively crops out the negative or the ground in the image.<\/p>\n<p>After a while, you get to notice the vase in the background and realize it was there in the first place. As ambiguous as <a href=\"https:\/\/www.smashingmagazine.com\/2014\/05\/design-principles-space-figure-ground-relationship\/\">the Figure and Ground principle<\/a> seems, designers usually create visually appealing surreal and illusionary art and web designs.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1ba6c5a5-8188-4979-96ae-9fadcbe83920\/gestalt-principles-figure-and-ground.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-figure-and-ground.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1ba6c5a5-8188-4979-96ae-9fadcbe83920\/gestalt-principles-figure-and-ground.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1ba6c5a5-8188-4979-96ae-9fadcbe83920\/gestalt-principles-figure-and-ground.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1ba6c5a5-8188-4979-96ae-9fadcbe83920\/gestalt-principles-figure-and-ground.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1ba6c5a5-8188-4979-96ae-9fadcbe83920\/gestalt-principles-figure-and-ground.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-figure-and-ground.png?w=900\" sizes=\"100vw\" alt=\"Image depicting the figure-ground relationship\"><\/a><figcaption>\n\t\t\tFigure-ground relationship (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1ba6c5a5-8188-4979-96ae-9fadcbe83920\/gestalt-principles-figure-and-ground.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>Sometimes, the <a href=\"http:\/\/facweb.cs.depaul.edu\/sgrais\/gestalt_principles.htm\">relationship between figure and ground<\/a> is stable, which makes both distinguishable from one another. This relationship is sometimes unstable, meaning that the figure and ground are indistinguishable from each other. Due to the ambiguousness of this relationship, the viewers confront perceptual confusion.<\/p>\n<p>To give you a clear idea of how the figure-ground relationship influences web design, let\u2019s discuss a few examples in detail. Each of these examples focus on <strong>three main areas of the figure-ground relationship<\/strong>: You can add explicit visual cues by using contrast, boxes, and shadows for your web design. These techniques are used to distinguish the color, size, and level of detail, to separate the content, and to add depth to the respective object of focus.<\/p>\n<p>In the first example below, <a href=\"http:\/\/www.trellisfarm.com\/\">Trellis<\/a> uses a \u2018hero image\u2019 (images with clear CTAs) with a figure-ground relationship that clearly indicates the level of detail, color, and size.<\/p>\n<figure><a href=\"http:\/\/www.trellisfarm.com\/\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-trellis-website.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3e731c4a-8315-41c5-9766-dfca33a91d8d\/gestalt-principles-trellis-website.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3e731c4a-8315-41c5-9766-dfca33a91d8d\/gestalt-principles-trellis-website.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3e731c4a-8315-41c5-9766-dfca33a91d8d\/gestalt-principles-trellis-website.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3e731c4a-8315-41c5-9766-dfca33a91d8d\/gestalt-principles-trellis-website.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-trellis-website.png?w=900\" sizes=\"100vw\" alt=\"Trellis website features a good example of figure-ground relationship\"><\/a><figcaption>\n\t\t\tTrellis (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3e731c4a-8315-41c5-9766-dfca33a91d8d\/gestalt-principles-trellis-website.png\">Large preview<\/a>) (<a href=\"http:\/\/www.trellisfarm.com\/\">Image source<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>The text is the figure here in a large cursive font in the center of the page, making it stand out as compared to the image in the background. The white text over the contrasting grayscale image draws the focus of attention, which makes the text visible over it. From another perspective, the background is blurred so that the text pops out as the figure. All of these aspects show that <strong>the text here is prioritized as the figure or the positive space<\/strong>, while the blurred image is used as background or the negative space, hence strongly implying the concept of figure and ground.<\/p>\n<p>Next comes the content in boxes. <a href=\"http:\/\/www.oceanhealthindex.org\/\">Ocean Health Index<\/a> makes a smart use of boxed content to separate the figure from the background. This is what you see when you come across their website:<\/p>\n<figure><a href=\"http:\/\/www.oceanhealthindex.org\/\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-ocean-health-index-website.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/30d944bf-160a-4b3a-ab35-8f37c2949f4d\/gestalt-principles-ocean-health-index-website.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/30d944bf-160a-4b3a-ab35-8f37c2949f4d\/gestalt-principles-ocean-health-index-website.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/30d944bf-160a-4b3a-ab35-8f37c2949f4d\/gestalt-principles-ocean-health-index-website.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/30d944bf-160a-4b3a-ab35-8f37c2949f4d\/gestalt-principles-ocean-health-index-website.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-ocean-health-index-website.png?w=900\" sizes=\"100vw\" alt=\"The Ocean Health Index website shows how both figure and ground can be used in web design\"><\/a><figcaption>\n\t\t\tOcean Health Index (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/30d944bf-160a-4b3a-ab35-8f37c2949f4d\/gestalt-principles-ocean-health-index-website.png\">Large preview<\/a>) (<a href=\"http:\/\/www.oceanhealthindex.org\/\">Image source<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>Which part of it jumps at you when you first view this web page? If you ask me, it\u2019s the main text in white in the upper right-hand side and the two boxes with contrasting color and text. The bold white text on the top is obviously the figure. (Notice how it\u2019s placed over the darker image to stand out.) The boxes down below are also part of the figure, due to the contrast they offer to the ground image. The other aspect of this figure is the second contrast that is placed inside the boxes in the form of contrastive-colored text.<\/p>\n<p>The background uses subtle shades that help the figures appear sharply, showing <strong>a pattern of detail<\/strong> here. The boxes are also overlapping the background image, bringing them in clear view over the image.<\/p>\n<p>Some websites also exhibit the figure-ground relationship by adding drop shadows to the figure, in order to give a feeling that the figure is placed over the background. Here\u2019s a screenshot from <a href=\"http:\/\/www.drinkseriously.com\/\">Seriously Unsweetened<\/a>:<\/p>\n<figure><a href=\"http:\/\/www.drinkseriously.com\/\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-seriously-unsweetened-website.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ae8a8735-7d06-4b9e-a539-60d3cb5e972b\/gestalt-principles-seriously-unsweetened-website.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ae8a8735-7d06-4b9e-a539-60d3cb5e972b\/gestalt-principles-seriously-unsweetened-website.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ae8a8735-7d06-4b9e-a539-60d3cb5e972b\/gestalt-principles-seriously-unsweetened-website.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ae8a8735-7d06-4b9e-a539-60d3cb5e972b\/gestalt-principles-seriously-unsweetened-website.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-seriously-unsweetened-website.png?w=900\" sizes=\"100vw\" alt=\"The Seriously Unsweetened\u2019s website uses figure-ground balanced on their website\"><\/a><figcaption>\n\t\t\tSeriously Unsweetened (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ae8a8735-7d06-4b9e-a539-60d3cb5e972b\/gestalt-principles-seriously-unsweetened-website.png\">Large preview<\/a>) (<a href=\"http:\/\/www.drinkseriously.com\/\">Image source<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>Seriously Unsweetened\u2019s landing page uses more than one technique to maintain that figure-ground relationship in a balanced manner. There are bright colors and shadows. The ground remains white, making it easier for the figure to appear accurately above the ground. In the positive space, the objects in the figure are presented under an illusion as of being \u2018on the top\u2019 of the background. The shadow game is played inside the primary figure, making us notice that there is another figure-ground relationship within the main figure. A clever one!<\/p>\n<div><\/div>\n<h4>Proximity<\/h4>\n<p>Proximity refers to the closeness of elements in a page. Different elements in webpages can be grouped together to create a bigger association. Apart from being similar, the closeness of these elements with each other than other page elements will automatically be paired in the viewer\u2019s mind.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/302dacc5-d798-40de-9dcd-aac960995dcc\/gestalt-principles-proximity-in-design.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-proximity-in-design.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/302dacc5-d798-40de-9dcd-aac960995dcc\/gestalt-principles-proximity-in-design.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/302dacc5-d798-40de-9dcd-aac960995dcc\/gestalt-principles-proximity-in-design.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/302dacc5-d798-40de-9dcd-aac960995dcc\/gestalt-principles-proximity-in-design.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/302dacc5-d798-40de-9dcd-aac960995dcc\/gestalt-principles-proximity-in-design.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-proximity-in-design.png?w=900\" sizes=\"100vw\" alt=\"The image depicts proximity in graphic design\"><\/a><figcaption>\n\t\t\tProximity in design (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/302dacc5-d798-40de-9dcd-aac960995dcc\/gestalt-principles-proximity-in-design.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>From images to texts and navigation bars to web forms, the Proximity principle applies heavily to web design. When you group similar content together, it creates a seamless relationship between the elements and delivers a better visual experience to the viewer.<\/p>\n<p>Here is an example of proximity as displayed in the navigation of the <a href=\"https:\/\/mashable.com\/\">Mashable<\/a> website:<\/p>\n<figure><a href=\"https:\/\/mashable.com\/\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-mashable-website.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/64a68255-2d55-477f-b352-0f1640aa9937\/gestalt-principles-mashable-website.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/64a68255-2d55-477f-b352-0f1640aa9937\/gestalt-principles-mashable-website.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/64a68255-2d55-477f-b352-0f1640aa9937\/gestalt-principles-mashable-website.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/64a68255-2d55-477f-b352-0f1640aa9937\/gestalt-principles-mashable-website.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-mashable-website.png?w=900\" sizes=\"100vw\" alt=\"Mashable website features proximity principle\"><\/a><figcaption>\n\t\t\tMashable (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/64a68255-2d55-477f-b352-0f1640aa9937\/gestalt-principles-mashable-website.png\">Large preview<\/a>) (<a href=\"https:\/\/mashable.com\/\">Image source<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>In the snapshot above, you can clearly notice how the elements of the same category are placed together to show the relation with the main menu type. The users\u2019 eyes are automatically drawn to the subtypes under the main heading \u2014 also <strong>thanks to the use of colors and text size<\/strong>. You can see that the items that are unrelated are set apart with the help of a line, which serves as the users\u2019 guide in relating and separating the items as per the principle of proximity.<\/p>\n<p>Besides delineating the navigation bar, the grid-based content also complies with the golden rule of Proximity. <a href=\"https:\/\/www.amazon.com\/\">Amazon<\/a>\u2019s product listing is the best example:<\/p>\n<figure><a href=\"https:\/\/www.amazon.com\/\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-amazon-products-website.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d0eac530-d727-4ef4-85ab-c6326ba390eb\/gestalt-principles-amazon-products-website.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d0eac530-d727-4ef4-85ab-c6326ba390eb\/gestalt-principles-amazon-products-website.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d0eac530-d727-4ef4-85ab-c6326ba390eb\/gestalt-principles-amazon-products-website.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d0eac530-d727-4ef4-85ab-c6326ba390eb\/gestalt-principles-amazon-products-website.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-amazon-products-website.png?w=900\" sizes=\"100vw\" alt=\"Amazon product pages also make use of proximity principle\"><\/a><figcaption>\n\t\t\tAmazon Products (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d0eac530-d727-4ef4-85ab-c6326ba390eb\/gestalt-principles-amazon-products-website.png\">Large preview<\/a>) (<a href=\"https:\/\/www.amazon.com\/\">Image source<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>Proximity complies with similarity, which is yet to be discussed. As you can see, similar products in the positive space are grouped and separated using narrow white space. This instructs the user to sort their preferred item from the list of similar products. Moreover, the principle of closure also comes into action among the list of similar items.<\/p>\n<p>Now, we\u2019ll take a closer look at the <a href=\"https:\/\/signup.37signals.com\/basecamp\/free\/\">Basecamp web form<\/a> which displays yet another ideal case for proximity in web design:<\/p>\n<figure><a href=\"https:\/\/signup.37signals.com\/basecamp\/free\/\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-basecamp-website.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b9c3fb4c-1b19-4e6e-bd78-fe87fd87f2c5\/gestalt-principles-basecamp-website.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b9c3fb4c-1b19-4e6e-bd78-fe87fd87f2c5\/gestalt-principles-basecamp-website.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b9c3fb4c-1b19-4e6e-bd78-fe87fd87f2c5\/gestalt-principles-basecamp-website.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b9c3fb4c-1b19-4e6e-bd78-fe87fd87f2c5\/gestalt-principles-basecamp-website.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-basecamp-website.png?w=900\" sizes=\"100vw\" alt=\"Interestingly, Basecamp web form also uses proximity to segment form details\"><\/a><figcaption>\n\t\t\tBasecamp Web Form (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b9c3fb4c-1b19-4e6e-bd78-fe87fd87f2c5\/gestalt-principles-basecamp-website.png\">Large preview<\/a>) (<a href=\"https:\/\/signup.37signals.com\/basecamp\/free\/\">Image source<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>You can notice how the form is divided into two main segments: personal details and ID generation. The first section is implied as the most important field, followed by a lesser important requirement. The headings for both the sections vary as shown by the difference in color and font size. In this web form, proximity is an indicator that places and prioritizes grouping of information from highest to lowest importance.<\/p>\n<h4>Symmetry and Ordery<\/h4>\n<p>Symmetry refers to the exact reflection or the mirror image of the two opposing planes. It can be regarded as the balance that divides an object into two equal halves. Real-world examples of symmetry include geometrical images like equilateral triangles, circles, and squares and so on.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/afff8345-83a5-4467-b429-f70eced45d4f\/gestalt-principles-symmetry-vs-asymmetry.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-symmetry-vs-asymmetry.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/afff8345-83a5-4467-b429-f70eced45d4f\/gestalt-principles-symmetry-vs-asymmetry.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/afff8345-83a5-4467-b429-f70eced45d4f\/gestalt-principles-symmetry-vs-asymmetry.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/afff8345-83a5-4467-b429-f70eced45d4f\/gestalt-principles-symmetry-vs-asymmetry.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/afff8345-83a5-4467-b429-f70eced45d4f\/gestalt-principles-symmetry-vs-asymmetry.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-symmetry-vs-asymmetry.png?w=900\" sizes=\"100vw\" alt=\"Here is a clear distinction between symmetric and asymmetric design\"><\/a><figcaption>\n\t\t\tSymmetry versus asymmetry (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/afff8345-83a5-4467-b429-f70eced45d4f\/gestalt-principles-symmetry-vs-asymmetry.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>The <a href=\"https:\/\/www.ncbi.nlm.nih.gov\/pmc\/articles\/PMC3130383\/\">human mind desires to find the \u2018balance\u2019 in human faces<\/a>, which it finds aesthetically pleasing. The mind also tends to find symmetry in other objects, such as images because symmetry creates harmony and allows the viewers to be at comfort while viewing the image.<\/p>\n<p>Below is a great example of symmetry in web design as exhibited by <a href=\"https:\/\/www.hvdfonts.com\/\">HvD Fonts<\/a>:<\/p>\n<figure><a href=\"https:\/\/www.hvdfonts.com\/\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-hvd-fonts-website.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e7e6e303-044a-4f77-b808-371676f4945a\/gestalt-principles-hvd-fonts-website.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e7e6e303-044a-4f77-b808-371676f4945a\/gestalt-principles-hvd-fonts-website.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e7e6e303-044a-4f77-b808-371676f4945a\/gestalt-principles-hvd-fonts-website.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e7e6e303-044a-4f77-b808-371676f4945a\/gestalt-principles-hvd-fonts-website.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-hvd-fonts-website.png?w=900\" sizes=\"100vw\" alt=\"A good example of symmetry in Web design is HvD Fonts website\"><\/a><figcaption>\n\t\t\tHvD Fonts (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e7e6e303-044a-4f77-b808-371676f4945a\/gestalt-principles-hvd-fonts-website.png\">Large preview<\/a>) (<a href=\"https:\/\/www.hvdfonts.com\/\">Image source<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>Not only does this webpage show a typical figure-ground relationship, but also displays great symmetry. The page is dissected into four equal halves with fonts of similar size and color. The background in each of the four sections runs along the same theme with a grayscale effect. You can also notice that the negative space isn\u2019t necessarily white; it\u2019s the image in the background.<\/p>\n<p>The idea of symmetry gives rise to another notion: <strong>asymmetry can be confusing and must be used with great care when used in web design<\/strong>. Many websites use asymmetry as the main balancing element for spacing, where the unconventional positive space is balanced with a neutral background and vice versa. And as per the concept of asymmetry, <a href=\"https:\/\/www.xplodemarketing.com\/\">Xplode Marketing<\/a> prompts asymmetry with unique aesthetics pleasing the eyes.<\/p>\n<figure><a href=\"https:\/\/www.xplodemarketing.com\/\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-xplode-marketing.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3c6a8431-e501-414f-9e82-6b9dcf908099\/gestalt-principles-xplode-marketing.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3c6a8431-e501-414f-9e82-6b9dcf908099\/gestalt-principles-xplode-marketing.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3c6a8431-e501-414f-9e82-6b9dcf908099\/gestalt-principles-xplode-marketing.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3c6a8431-e501-414f-9e82-6b9dcf908099\/gestalt-principles-xplode-marketing.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-xplode-marketing.png?w=900\" sizes=\"100vw\" alt=\"Xplode Marketing website prompts asymmetry with creative placement\"><\/a><figcaption>\n\t\t\tXplode Marketing (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3c6a8431-e501-414f-9e82-6b9dcf908099\/gestalt-principles-xplode-marketing.png\">Large preview<\/a>) (<a href=\"https:\/\/www.xplodemarketing.com\/\">Image source<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>This webpage immediately grabs the eye using optical illusions as well as asymmetry. The positive space objects are placed in an unusual pattern over the negative space that creates the appeal. The color is the main indicator of harmony between both the spaces and develops a natural connection for the viewers to notice. There is also a strong balance of left-hand graphics with the strong and dominant wings on the right. What do you think?<\/p>\n<h4>Similarity<\/h4>\n<p>The reason that proximity works closely with the principle of similarity is the quality of shared attributes among the similarly-grouped objects. Whether it be color, shape, posture, size, shape, orientation or any other property, connectedness will prevail when one or more of these are shared in all the objects displayed in proximity.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6d07c71f-c595-4256-9e69-99429c579977\/gestalt-principles-similarity-in-design.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-similarity-in-design.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6d07c71f-c595-4256-9e69-99429c579977\/gestalt-principles-similarity-in-design.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6d07c71f-c595-4256-9e69-99429c579977\/gestalt-principles-similarity-in-design.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6d07c71f-c595-4256-9e69-99429c579977\/gestalt-principles-similarity-in-design.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6d07c71f-c595-4256-9e69-99429c579977\/gestalt-principles-similarity-in-design.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-similarity-in-design.png?w=900\" sizes=\"100vw\" alt=\"The image depicts how similar elements group together\"><\/a><figcaption>\n\t\t\tSimilarity in Design (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6d07c71f-c595-4256-9e69-99429c579977\/gestalt-principles-similarity-in-design.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>Even if the positive space elements do not look visibly connected, these will stand apart from the negative one due to the principle of similarity.<\/p>\n<p>Just look at these <a href=\"https:\/\/www.urbandecay.com\/\">UrbanDecay<\/a> palettes list for a moment:<\/p>\n<figure><a href=\"https:\/\/www.urbandecay.com\/\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-urban-decay-website.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7291d114-044d-44f8-8299-aababf115684\/gestalt-principles-urban-decay-website.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7291d114-044d-44f8-8299-aababf115684\/gestalt-principles-urban-decay-website.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7291d114-044d-44f8-8299-aababf115684\/gestalt-principles-urban-decay-website.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7291d114-044d-44f8-8299-aababf115684\/gestalt-principles-urban-decay-website.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-urban-decay-website.png?w=900\" sizes=\"100vw\" alt=\"The Urban Decay products are a classic example of similarity in design\"><\/a><figcaption>\n\t\t\tUrban Decay (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7291d114-044d-44f8-8299-aababf115684\/gestalt-principles-urban-decay-website.png\">Large preview<\/a>) (<a href=\"https:\/\/www.urbandecay.com\/\">Image source<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>The positive spaces aka the figures are different from each other but do <a href=\"https:\/\/www.smashingmagazine.com\/2016\/05\/improve-your-designs-with-principles-similarity-proximity-part-1\/\">share some similarity in various aspects<\/a>, such as their position, color, product layout and mode of presentation. The only dissimilar object is the ad for the eye shadow primer that stands out uniquely in the line of the similar-product category. This is obviously a marketing tactic that is intended to <strong>draw attention without hurting the overall symmetry<\/strong> and beauty of the page. Another point to consider here is that similarity in size sets the other image apart from the similar product category.<\/p>\n<p>Other than just product display, the positive space can be employed with the similarity in conjunction with the negative space.<\/p>\n<p>Let\u2019s take a look at the <a href=\"https:\/\/www.influenster.com\/\">influenster<\/a> landing page:<\/p>\n<figure><a href=\"https:\/\/www.influenster.com\/\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-influenster-website.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/5275903b-c7d5-470a-8c11-4dbd4129c080\/gestalt-principles-influenster-website.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/5275903b-c7d5-470a-8c11-4dbd4129c080\/gestalt-principles-influenster-website.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/5275903b-c7d5-470a-8c11-4dbd4129c080\/gestalt-principles-influenster-website.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/5275903b-c7d5-470a-8c11-4dbd4129c080\/gestalt-principles-influenster-website.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-influenster-website.png?w=900\" sizes=\"100vw\" alt=\"Influenster website applies the principle of similarity to achieve clarity in design.\"><\/a><figcaption>\n\t\t\tInfluenster\u2019s front page(<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/5275903b-c7d5-470a-8c11-4dbd4129c080\/gestalt-principles-influenster-website.png\">Large preview<\/a>) (<a href=\"https:\/\/www.influenster.com\/\">Image source<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>The similarity in the above example shows clearly aligned boxes. Though the products in each positive space are different, the perception of similarity is conveyed by the consistent text fields in the overall page. The genre, layout, and the theme all are similar, hence delivering a seamless effect to the vision.<\/p>\n<h4>Closure<\/h4>\n<p>Did you ever come across an image that seems close but is open? That is because of the principle of closure. Our brains tend to \u2018close\u2019 the gaps in the incomplete objects and use our visual perception to complete the figure, seeing it as a whole.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/c7cdd50d-3d04-4fad-ac45-64e675efb228\/gestalt-principles-closure-in-design.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-closure-in-design.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/c7cdd50d-3d04-4fad-ac45-64e675efb228\/gestalt-principles-closure-in-design.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/c7cdd50d-3d04-4fad-ac45-64e675efb228\/gestalt-principles-closure-in-design.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/c7cdd50d-3d04-4fad-ac45-64e675efb228\/gestalt-principles-closure-in-design.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/c7cdd50d-3d04-4fad-ac45-64e675efb228\/gestalt-principles-closure-in-design.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-closure-in-design.png?w=900\" sizes=\"100vw\" alt=\"A perfect example of closure where four circles come together to form a square\"><\/a><figcaption>\n\t\t\tClosure in design (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/c7cdd50d-3d04-4fad-ac45-64e675efb228\/gestalt-principles-closure-in-design.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>The positive and negative spaces <a href=\"https:\/\/www.smashingmagazine.com\/2016\/05\/improve-your-designs-with-the-principles-of-closure-and-figure-ground-part-2\/\">close in to form a whole<\/a>. The best example is that of the hidden shapes and forms in the negative space in and outside the design, which demands an intelligent assessment of message within the design. Using both the spaces creatively in the closure can give rise to an interesting yet simplified design.<\/p>\n<p>Take a look at the screenshot from <a href=\"http:\/\/magukombucha.cz\/\">Magu Kambucha<\/a> below:<\/p>\n<figure><a href=\"http:\/\/magukombucha.cz\/\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-magu-kambucha-website.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/8424344f-9279-4285-a426-093250b4a5b3\/gestalt-principles-magu-kambucha-website.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/8424344f-9279-4285-a426-093250b4a5b3\/gestalt-principles-magu-kambucha-website.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/8424344f-9279-4285-a426-093250b4a5b3\/gestalt-principles-magu-kambucha-website.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/8424344f-9279-4285-a426-093250b4a5b3\/gestalt-principles-magu-kambucha-website.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-magu-kambucha-website.png?w=900\" sizes=\"100vw\" alt=\"Figure-Ground relationship and closure principles work hand-in-hand in Magu Kambucha website\"><\/a><figcaption>\n\t\t\tMagu Kambucha (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/8424344f-9279-4285-a426-093250b4a5b3\/gestalt-principles-magu-kambucha-website.png\">Large preview<\/a>) (<a href=\"http:\/\/magukombucha.cz\/\">Image source<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>In this example, you can see that closure is kept intact with the principle of the figure-ground relationship. The bottles and the bold text behind are obviously the figure, where the background is solid soft pink. Where\u2019s the closure? See the text behind the bottles? You can\u2019t see it completely, but still know it\u2019s \u2018Kambucha\u2019. Except for the first \u2018K\u2019 and the last \u2018A\u2019, other letters are half hidden, which are intuitively completed and the whole form begins to take shape and consequently, the meaning. This, my friend, is one good example of closure we have here!<\/p>\n<p>Take a look at the screenshot from <a href=\"https:\/\/cultldn.com\/\">Cult<\/a> below:<\/p>\n<figure><a href=\"https:\/\/cultldn.com\/\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-cult-ldn-website.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/35bd8be9-ab95-47dd-85c5-7f16d14a7351\/gestalt-principles-cult-ldn-website.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/35bd8be9-ab95-47dd-85c5-7f16d14a7351\/gestalt-principles-cult-ldn-website.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/35bd8be9-ab95-47dd-85c5-7f16d14a7351\/gestalt-principles-cult-ldn-website.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/35bd8be9-ab95-47dd-85c5-7f16d14a7351\/gestalt-principles-cult-ldn-website.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-cult-ldn-website.png?w=900\" sizes=\"100vw\" alt=\"The title of the website follows the closure principle to add dramatic effect to the animation in the website header\"><\/a><figcaption>\n\t\t\tCULT Website (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/35bd8be9-ab95-47dd-85c5-7f16d14a7351\/gestalt-principles-cult-ldn-website.png\">Large preview<\/a>) (<a href=\"https:\/\/cultldn.com\/\">Image source<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>Even though the text is not spelled out quite clearly, our minds can easily read the word CULT. The arrangement and alignment of the text made it easy to decipher, even when the words are incomplete.<\/p>\n<h4>Continuity<\/h4>\n<p>Finally, as per the general Gestalt principles, continuity follows the pattern by leading the eyes to follow a consistent path and establishing a linear pattern from object to object. It can best be understood by the example of a positive space line with a curved over the negative space. The colors of both lines indicate that the lines bent by each other, but the pattern of continuity suggests otherwise.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7796d603-3400-4f55-beb8-a4a9184feb7b\/gestalt-principles-continuity-in-design.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-continuity-in-design.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7796d603-3400-4f55-beb8-a4a9184feb7b\/gestalt-principles-continuity-in-design.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7796d603-3400-4f55-beb8-a4a9184feb7b\/gestalt-principles-continuity-in-design.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7796d603-3400-4f55-beb8-a4a9184feb7b\/gestalt-principles-continuity-in-design.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7796d603-3400-4f55-beb8-a4a9184feb7b\/gestalt-principles-continuity-in-design.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-continuity-in-design.png?w=900\" sizes=\"100vw\" alt=\"A depiction of continuous line\"><\/a><figcaption>\n\t\t\tContinuity in design (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7796d603-3400-4f55-beb8-a4a9184feb7b\/gestalt-principles-continuity-in-design.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>In the image above, the viewers are more inclined to see a straight line despite the color degradation. This leads us to believe that the principle of Continuity <strong>guides the perception better than the power of color<\/strong>. This concept flows smoothly through both kinds of spaces. When we insert a subject in the negative space, our eyes tend to draw the line of distinction between the positive space and the negative one.<\/p>\n<p>The imaginary line of continuity is what we tend to introduce in the design to guide our perception when differentiating between the positive and the negative space.<\/p>\n<p>Let\u2019s take our cue from the <a href=\"https:\/\/crypton.trading\/\">Crypton Trading<\/a> website down below:<\/p>\n<figure><a href=\"https:\/\/crypton.trading\/\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-crypton-trading-website.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/731493eb-a46d-4220-b0b1-2439baf36a01\/gestalt-principles-crypton-trading-website.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/731493eb-a46d-4220-b0b1-2439baf36a01\/gestalt-principles-crypton-trading-website.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/731493eb-a46d-4220-b0b1-2439baf36a01\/gestalt-principles-crypton-trading-website.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/731493eb-a46d-4220-b0b1-2439baf36a01\/gestalt-principles-crypton-trading-website.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-crypton-trading-website.png?w=900\" sizes=\"100vw\" alt=\"The pattern on Crypto Trading website exemplifies continuation in design\"><\/a><figcaption>\n\t\t\tCrypton Trading (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/731493eb-a46d-4220-b0b1-2439baf36a01\/gestalt-principles-crypton-trading-website.png\">Large preview<\/a>) (<a href=\"https:\/\/crypton.trading\/\">Image source<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>See the perfect continuation of design in the right half of the page? Regardless of the light and dark hue in the background, the pattern is pretty much obvious on the page. And when you scroll down, you will see how the pattern as well the color change in a continuous and seamless motion. The shift in tones is negligible here and all we see is a continued pattern of lines and dots.<\/p>\n<p>Another good example is the <a href=\"http:\/\/oscilloscope.redbullmusicacademy.com\/panorama\/main_01\">OscilloScope<\/a> website:<\/p>\n<figure><a href=\"http:\/\/oscilloscope.redbullmusicacademy.com\/panorama\/main_01\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-oscilloscope-website.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/76c2f289-59db-4214-847b-528142298575\/gestalt-principles-oscilloscope-website.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/76c2f289-59db-4214-847b-528142298575\/gestalt-principles-oscilloscope-website.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/76c2f289-59db-4214-847b-528142298575\/gestalt-principles-oscilloscope-website.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/76c2f289-59db-4214-847b-528142298575\/gestalt-principles-oscilloscope-website.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-oscilloscope-website.png?w=900\" sizes=\"100vw\" alt=\"The OscilloScope website also features the law of continuity through 360-degree view of their studio\"><\/a><figcaption>\n\t\t\tOscilloScope Website (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/76c2f289-59db-4214-847b-528142298575\/gestalt-principles-oscilloscope-website.png\">Large preview<\/a>) (<a href=\"http:\/\/oscilloscope.redbullmusicacademy.com\/panorama\/main_01\">Image source<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>The website uses the law of Continuity to take web visitors to a 360-degree view of the studio where they can navigate their way to the desired section.<\/p>\n<figure><a href=\"https:\/\/cargothefilm2017.com\/\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-cargo-the-film-website.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/bb0ded12-a090-4e9d-b29f-e96b8202ef35\/gestalt-principles-cargo-the-film-website.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/bb0ded12-a090-4e9d-b29f-e96b8202ef35\/gestalt-principles-cargo-the-film-website.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/bb0ded12-a090-4e9d-b29f-e96b8202ef35\/gestalt-principles-cargo-the-film-website.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/bb0ded12-a090-4e9d-b29f-e96b8202ef35\/gestalt-principles-cargo-the-film-website.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-cargo-the-film-website.png?w=900\" sizes=\"100vw\" alt=\"The official website of the film \u2018Cargo\u2019 also uses the law of continuity to navigate users\"><\/a><figcaption>\n\t\t\tCargo the movie (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/bb0ded12-a090-4e9d-b29f-e96b8202ef35\/gestalt-principles-cargo-the-film-website.png\">Large preview<\/a>) (<a href=\"https:\/\/cargothefilm2017.com\/\">Image source<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>The film <a href=\"https:\/\/cargothefilm2017.com\/\">Cargo<\/a> has a landing page that also uses the law of continuity: it get its text float across the website in a linear motion using the scroll-only navigation. Since the half-visible logo was shown vertically, the viewer has to scroll down to get a full view of it. As the page is scrolled down, the static logo starts floating along with the chunks of text running parallel to it. The navigation leads the user through different levels of experience without interfering the darkness lurking below.<\/p>\n<p>Since our eyes usually follow the smoothest path, graphic designers can use such examples to make them follow the desired path and position the elements along a line.<\/p>\n<h3>Summing It Up<\/h3>\n<p>In this article, we covered the Gestalt principles in relation to positive and negative spaces in websites. We also made sure we include some real-life examples to give you a clear idea of how you can employ simple yet effective techniques to influence your audience\u2019s perception. The key here is to use these principles to create a web design that appears more than the sum of its parts.<\/p>\n<p><strong>We humans think in terms of our perception<\/strong> \u2014 mainly based on visuals. According to the Gestalt principles in relation to positive and negative spaces, we tend to see the bigger picture rather than individual elements at first glance.<\/p>\n<p>Positive and negative spaces help us differentiate, help us recall our experiences, and recognize the patterns. With the help of the Gestalt principles, we are better able to visualize how well we can use spaces in web design to create appealing pieces. Since spaces can appear as a tangled affair for any designer, the best way is to keep intact your Gestalt principles. This is the only way you can truly <strong>realize the importance, usage, and effectiveness of spaces in your designs<\/strong> and effortlessly become an effective contributor in the web design domain.<\/p>\n<p>Want to add something else? Don\u2019t forget to share your ideas. We\u2019d love to receive the feedback!<\/p>\n<h4>Further Reading<\/h4>\n<p>Here are a few design sources to help you understand the Gestalt principles:<\/p>\n<ul>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2014\/05\/design-principles-space-figure-ground-relationship\/\">Design principles: Space And The Figure-Ground Relationship<\/a>,\u201d Steven Bradley, Smashing Magazine<\/li>\n<li>\u201c<a href=\"https:\/\/uxdesign.cc\/psychology-design-4-gestalt-principles-to-use-as-your-next-design-solution-fcdec423a6bf\">Psychology + Design: Gestalt principles You Can Use As Design Solutions<\/a>,\u201d Mhariell Riel, Medium<\/li>\n<li>\u201c<a href=\"https:\/\/medium.muz.li\/gestalt-principles-in-ui-design-6b75a41e9965\">Gestalt principles In UI Design<\/a>,\u201d Eleana Gkogka, Medium<\/li>\n<li>\u201c<a href=\"https:\/\/webdesign.tutsplus.com\/articles\/the-gestalt-principle-design-theory-for-web-designers--webdesign-1756\">The Gestalt principle: Design Theory For Web Designers<\/a>,\u201d Ahmed Hussam, Envato Tuts+<\/li>\n<li>\u201c<a href=\"https:\/\/manifesto.co.uk\/design-principles-gestalt-white-space-perception\/\">Design principles: Gestalt, White Space And Perception<\/a>,\u201d Barbara Marcantonio, Manifesto<\/li>\n<\/ul>\n<p>Don\u2019t forget to check out the related recommended tutorials:<\/p>\n<ul>\n<li>\u201c<a href=\"https:\/\/thenextweb.com\/dd\/2015\/03\/17\/how-to-apply-optical-illusions-to-web-ui-design\/\">How To Apply Optical Illusions To Web UI Design<\/a>,\u201d Jerry Cao, TNW<\/li>\n<li>\u201c<a href=\"https:\/\/www.logodesign.net\/negative-space-logo\">How To Create A Negative Space Logo Design<\/a>,\u201d Tarif Khan, LogoDesign.net<\/li>\n<li>\u201c<a href=\"https:\/\/www.justinmind.com\/blog\/how-to-improve-ux-using-gestalt-principles\/\">How To Improve UX Using Gestalt principles<\/a>,\u201d Steven Douglas, Justinmind<\/li>\n<li>\u201c<a href=\"https:\/\/www.lynda.com\/Design-Techniques-tutorials\/Using-negative-space-create-powerful-composition\/135095\/153689-4.html\">Using Negative Space To Create A Powerful Composition<\/a>,\u201d Sean Adams, Lynda.com (Video)<\/li>\n<\/ul>\n<div>\n  <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/logo-red.png?w=900\" alt=\"Smashing Editorial\"><span>(il)<\/span>\n<\/div>\n<\/article>\n<p class=\"wpematico_credit\"><small>Powered by <a href=\"http:\/\/www.wpematico.com\" target=\"_blank\">WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How To Use Spaces In Web Design With Gestalt Principles How To Use Spaces In Web Design With Gestalt Principles Ayesha Ambreen 2019-04-01T12:30:41+01:002019-04-02T11:06:19+00:00 Human brains are hardwired to connect the dots and make sense out of everything the eyes see. Design is a creative field where forms and space intermingle to lend us a variety&#8230;<a class=\"moretag\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/04\/how-to-use-spaces-in-web-design-with-gestalt-principles\/\"> Read the full article&#8230;<\/a><\/p>\n","protected":false},"author":4,"featured_media":62865,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_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_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-62864","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"How To Use Spaces In Web Design With Gestalt PrinciplesHow To Use Spaces In Web Design With Gestalt Principles Ayesha Ambreen 2019-04-01T12:30:41+01:002019-04-02T11:06:19+00:00Human brains are hardwired to connect the dots and make sense out of everything the eyes see. Design is a creative field where forms and space intermingle to lend us a variety of experiences.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Guest Contribution\"\/>\n\t<meta name=\"keywords\" content=\"user experience\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/04\/how-to-use-spaces-in-web-design-with-gestalt-principles\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"How To Use Spaces In Web Design With Gestalt Principles | Design for Immersive Technologies\" \/>\n\t\t<meta property=\"og:description\" content=\"How To Use Spaces In Web Design With Gestalt PrinciplesHow To Use Spaces In Web Design With Gestalt Principles Ayesha Ambreen 2019-04-01T12:30:41+01:002019-04-02T11:06:19+00:00Human brains are hardwired to connect the dots and make sense out of everything the eyes see. Design is a creative field where forms and space intermingle to lend us a variety of experiences.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.taterboy.com\/blog\/2019\/04\/how-to-use-spaces-in-web-design-with-gestalt-principles\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-04-02T11:15:45+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-04-02T11:15:45+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"How To Use Spaces In Web Design With Gestalt Principles | Design for Immersive Technologies\" \/>\n\t\t<meta name=\"twitter:description\" content=\"How To Use Spaces In Web Design With Gestalt PrinciplesHow To Use Spaces In Web Design With Gestalt Principles Ayesha Ambreen 2019-04-01T12:30:41+01:002019-04-02T11:06:19+00:00Human brains are hardwired to connect the dots and make sense out of everything the eyes see. Design is a creative field where forms and space intermingle to lend us a variety of experiences.\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/04\\\/how-to-use-spaces-in-web-design-with-gestalt-principles\\\/#article\",\"name\":\"How To Use Spaces In Web Design With Gestalt Principles | Design for Immersive Technologies\",\"headline\":\"How To Use Spaces In Web Design With Gestalt Principles\",\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/04\\\/gestalt-principles-starry-night.gif?fit=1000%2C840&ssl=1\",\"width\":1000,\"height\":840},\"datePublished\":\"2019-04-02T04:15:45-07:00\",\"dateModified\":\"2019-04-02T04:15:45-07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/04\\\/how-to-use-spaces-in-web-design-with-gestalt-principles\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/04\\\/how-to-use-spaces-in-web-design-with-gestalt-principles\\\/#webpage\"},\"articleSection\":\"User Experience\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/04\\\/how-to-use-spaces-in-web-design-with-gestalt-principles\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"position\":2,\"name\":\"User Experience\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/04\\\/how-to-use-spaces-in-web-design-with-gestalt-principles\\\/#listItem\",\"name\":\"How To Use Spaces In Web Design With Gestalt Principles\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/04\\\/how-to-use-spaces-in-web-design-with-gestalt-principles\\\/#listItem\",\"position\":3,\"name\":\"How To Use Spaces In Web Design With Gestalt Principles\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/\",\"name\":\"Guest Contribution\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/04\\\/how-to-use-spaces-in-web-design-with-gestalt-principles\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Guest Contribution\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/04\\\/how-to-use-spaces-in-web-design-with-gestalt-principles\\\/#webpage\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/04\\\/how-to-use-spaces-in-web-design-with-gestalt-principles\\\/\",\"name\":\"How To Use Spaces In Web Design With Gestalt Principles | Design for Immersive Technologies\",\"description\":\"How To Use Spaces In Web Design With Gestalt PrinciplesHow To Use Spaces In Web Design With Gestalt Principles Ayesha Ambreen 2019-04-01T12:30:41+01:002019-04-02T11:06:19+00:00Human brains are hardwired to connect the dots and make sense out of everything the eyes see. Design is a creative field where forms and space intermingle to lend us a variety of experiences.\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/04\\\/how-to-use-spaces-in-web-design-with-gestalt-principles\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/04\\\/gestalt-principles-starry-night.gif?fit=1000%2C840&ssl=1\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/04\\\/how-to-use-spaces-in-web-design-with-gestalt-principles\\\/#mainImage\",\"width\":1000,\"height\":840},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/04\\\/how-to-use-spaces-in-web-design-with-gestalt-principles\\\/#mainImage\"},\"datePublished\":\"2019-04-02T04:15:45-07:00\",\"dateModified\":\"2019-04-02T04:15:45-07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"How To Use Spaces In Web Design With Gestalt Principles | Design for Immersive Technologies","description":"How To Use Spaces In Web Design With Gestalt PrinciplesHow To Use Spaces In Web Design With Gestalt Principles Ayesha Ambreen 2019-04-01T12:30:41+01:002019-04-02T11:06:19+00:00Human brains are hardwired to connect the dots and make sense out of everything the eyes see. Design is a creative field where forms and space intermingle to lend us a variety of experiences.","canonical_url":"https:\/\/www.taterboy.com\/blog\/2019\/04\/how-to-use-spaces-in-web-design-with-gestalt-principles\/","robots":"max-image-preview:large","keywords":"user experience","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.taterboy.com\/blog\/2019\/04\/how-to-use-spaces-in-web-design-with-gestalt-principles\/#article","name":"How To Use Spaces In Web Design With Gestalt Principles | Design for Immersive Technologies","headline":"How To Use Spaces In Web Design With Gestalt Principles","author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-starry-night.gif?fit=1000%2C840&ssl=1","width":1000,"height":840},"datePublished":"2019-04-02T04:15:45-07:00","dateModified":"2019-04-02T04:15:45-07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/04\/how-to-use-spaces-in-web-design-with-gestalt-principles\/#webpage"},"isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/04\/how-to-use-spaces-in-web-design-with-gestalt-principles\/#webpage"},"articleSection":"User Experience"},{"@type":"BreadcrumbList","@id":"https:\/\/www.taterboy.com\/blog\/2019\/04\/how-to-use-spaces-in-web-design-with-gestalt-principles\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/www.taterboy.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","position":2,"name":"User Experience","item":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/04\/how-to-use-spaces-in-web-design-with-gestalt-principles\/#listItem","name":"How To Use Spaces In Web Design With Gestalt Principles"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/04\/how-to-use-spaces-in-web-design-with-gestalt-principles\/#listItem","position":3,"name":"How To Use Spaces In Web Design With Gestalt Principles","previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}}]},{"@type":"Organization","@id":"https:\/\/www.taterboy.com\/blog\/#organization","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","url":"https:\/\/www.taterboy.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author","url":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/","name":"Guest Contribution","image":{"@type":"ImageObject","@id":"https:\/\/www.taterboy.com\/blog\/2019\/04\/how-to-use-spaces-in-web-design-with-gestalt-principles\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g","width":96,"height":96,"caption":"Guest Contribution"}},{"@type":"WebPage","@id":"https:\/\/www.taterboy.com\/blog\/2019\/04\/how-to-use-spaces-in-web-design-with-gestalt-principles\/#webpage","url":"https:\/\/www.taterboy.com\/blog\/2019\/04\/how-to-use-spaces-in-web-design-with-gestalt-principles\/","name":"How To Use Spaces In Web Design With Gestalt Principles | Design for Immersive Technologies","description":"How To Use Spaces In Web Design With Gestalt PrinciplesHow To Use Spaces In Web Design With Gestalt Principles Ayesha Ambreen 2019-04-01T12:30:41+01:002019-04-02T11:06:19+00:00Human brains are hardwired to connect the dots and make sense out of everything the eyes see. Design is a creative field where forms and space intermingle to lend us a variety of experiences.","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/04\/how-to-use-spaces-in-web-design-with-gestalt-principles\/#breadcrumblist"},"author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"creator":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-starry-night.gif?fit=1000%2C840&ssl=1","@id":"https:\/\/www.taterboy.com\/blog\/2019\/04\/how-to-use-spaces-in-web-design-with-gestalt-principles\/#mainImage","width":1000,"height":840},"primaryImageOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/04\/how-to-use-spaces-in-web-design-with-gestalt-principles\/#mainImage"},"datePublished":"2019-04-02T04:15:45-07:00","dateModified":"2019-04-02T04:15:45-07:00"},{"@type":"WebSite","@id":"https:\/\/www.taterboy.com\/blog\/#website","url":"https:\/\/www.taterboy.com\/blog\/","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","og:type":"article","og:title":"How To Use Spaces In Web Design With Gestalt Principles | Design for Immersive Technologies","og:description":"How To Use Spaces In Web Design With Gestalt PrinciplesHow To Use Spaces In Web Design With Gestalt Principles Ayesha Ambreen 2019-04-01T12:30:41+01:002019-04-02T11:06:19+00:00Human brains are hardwired to connect the dots and make sense out of everything the eyes see. Design is a creative field where forms and space intermingle to lend us a variety of experiences.","og:url":"https:\/\/www.taterboy.com\/blog\/2019\/04\/how-to-use-spaces-in-web-design-with-gestalt-principles\/","article:published_time":"2019-04-02T11:15:45+00:00","article:modified_time":"2019-04-02T11:15:45+00:00","twitter:card":"summary","twitter:title":"How To Use Spaces In Web Design With Gestalt Principles | Design for Immersive Technologies","twitter:description":"How To Use Spaces In Web Design With Gestalt PrinciplesHow To Use Spaces In Web Design With Gestalt Principles Ayesha Ambreen 2019-04-01T12:30:41+01:002019-04-02T11:06:19+00:00Human brains are hardwired to connect the dots and make sense out of everything the eyes see. Design is a creative field where forms and space intermingle to lend us a variety of experiences."},"aioseo_meta_data":{"post_id":"62864","title":null,"description":null,"keywords":null,"keyphrases":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_custom_image_width":null,"og_custom_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"created":"2021-02-07 21:16:35","updated":"2026-09-01 07:50:05","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"twitter_image_url":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/\" title=\"User Experience\">User Experience<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tHow To Use Spaces In Web Design With Gestalt Principles\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.taterboy.com\/blog"},{"label":"User Experience","link":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/"},{"label":"How To Use Spaces In Web Design With Gestalt Principles","link":"https:\/\/www.taterboy.com\/blog\/2019\/04\/how-to-use-spaces-in-web-design-with-gestalt-principles\/"}],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8wzr5-glW","jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/gestalt-principles-starry-night.gif?fit=1000%2C840&ssl=1","_links":{"self":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/62864","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/comments?post=62864"}],"version-history":[{"count":0,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/62864\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media\/62865"}],"wp:attachment":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media?parent=62864"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/categories?post=62864"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/tags?post=62864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}