<p>Published on <a href="https://blog.prototypr.io/gestalt-principles-applied-to-ux-design-af47bcf4bd28?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Harrison Wheeler <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*8QHvBflPOojdNXKJBRuI-Q.png"></p>
<p>A common adage in the product design world is “don’t make users think”. It can be a challenging goal to achieve, but what if I told you, getting there could be easier?</p>
<p><a href="https://en.wikipedia.org/wiki/Gestalt_psychology">Gestalt theory</a> implies that the mind understands the whole is greater than the sum of its parts. Simply put, our mind will always try to make order out of chaos.</p>
<p>The Gestalt theory is guided by 5 principles — <strong><em>Proximity, Similarity, Continuation, Closure, and Figure/Ground</em></strong><em>.</em></p>
<h3>Proximity</h3>
<p>When an individual perceives an assortment of objects they perceive objects that are close to each other as related.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*wVmKOUzYM91zm2QlKEojlw.png"></p>
<h4>How can this be applied?</h4>
<p>In the example above you’ll find that closer that items are they form a relationship. In turn, they are easier to read and associate with each other.</p>
<h3>Similarity</h3>
<p>Elements can visually be grouped together if they have visual similarities. This can be applied in the form of color, shape, or iconography.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*MmMxgZaZw8v57U_anm6KoA.png"></p>
<h4>How can this be applied?</h4>
<p>Visual nomenclature can help identify items that belong to similar or different categories while maintaining a consistent patterns across experiences.</p>
<h3>Continuation</h3>
<p>Continuity happens when the eye is guided to move from one object to another.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Oy8pBwKkUGLumo8epKLdQg.png"></p>
<h4>How can this be applied?</h4>
<p>Components containing tabs or dropdown selections with a partial option within view provides an affordance that there are additional options or interactions.</p>
<h3>Closure</h3>
<p>Individuals perceive objects such as shapes, letters, pictures, etc., as being whole when they are not complete. Specifically, when parts of a whole picture are missing, our perception fills in the visual gap.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*sz8iNsuU20oakBqtPFGDmg.png"></p>
<h4>How can this be applied?</h4>
<p>Loading states, completion meters are great examples of this.</p>
<h3>Figure/Ground</h3>
<p>Refers to our ability to visually separate elements on different planes of focus. There are three ways to effectively execute this, of these through layering, contrast, and information hierarchy.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ceBwh6GhJq2iuOv-mq3OoA.png"></p>
<h4>How can this be applied?</h4>
<p>Modals, overlays, and information hierarchy all abide to the law of figure ground. <a href="https://material.io/design/environment/elevation.html#elevation-in-material-design">Material design</a> goes as far as to classifying z-axis of elevation within their visual language.</p>
<h3>Wrapping up</h3>
<p>These principles should be a mainstay in your toolbox. If applied correctly, they can provide you with some quick wins out of the box. What are some examples of how you may have applied these?</p>
<h4>More reads</h4>
<ul>
<li><a href="https://medium.com/base-design/communicate-better-with-your-distributed-teams-fa932196ff2d">Communicate Better With Your Distributed Teams</a>.</li>
<li><a href="https://medium.com/base-design/key-learnings-from-building-a-design-team-c189bc6a242e">Key Learnings From Building A Design Team</a></li>
<li><a href="https://medium.com/base-design/designing-an-on-boarding-experience-with-mailchimp-7dcfc8968db7">Design and Employee On-boarding Experience With MailChimp</a></li>
</ul>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=af47bcf4bd28" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/gestalt-principles-applied-to-ux-design-af47bcf4bd28">Gestalt Principles Applied To UX Design</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Gestalt Principles Applied To UX Design

Top Stories