{"id":15,"date":"2016-01-08T19:19:01","date_gmt":"2016-01-08T19:19:01","guid":{"rendered":"http:\/\/themes.wplook.com\/studio8\/?p=15"},"modified":"2016-11-17T22:06:01","modified_gmt":"2016-11-17T22:06:01","slug":"visual-perception-the-principles-of-gestalt","status":"publish","type":"post","link":"http:\/\/slmetalworks.com\/wordpress_dev\/visual-perception-the-principles-of-gestalt\/","title":{"rendered":"Title here"},"content":{"rendered":"
<\/div>\n\"about-slm-studio9\"
\n
<\/div>\n

In 1910, psychologist Max Wertheimer had an insight when he observed a series of lights flashing on and off at a railroad crossing. It was similar to how the lights encircling a movie theater marquee flash on and off.<\/p>\n

<\/p>\n

To the observer, it appears as if a single light moves around the marquee, traveling from bulb to bulb, when in reality it\u2019s a series of bulbs turning on and off and the lights don\u2019t move it all.<\/p>\n

This observation led to a set of descriptive principles about how we visually perceive objects. These principles sit at the heart of nearly everything we do graphically as designers.<\/p>\n

This is the start of a series of posts about design principles. It begins with these principles of gestalt, because many of the design principles we follow arise out of gestalt theory. In this post, I\u2019ll walk you through a little bit of theory and offer some basic definitions of gestalt principles.
\nFuture posts in this series will consider aspects of design like space, balance and visual hierarchy. In upcoming posts, I\u2019ll point out which gestalt principles influence the aspects of design being discussed, and I\u2019ll offer more practical uses and examples of how the gestalt principles are used in Web design.<\/p>\n

The Key Ideas Behind Gestalt Theory<\/h4>\n

The quote above is gestalt in a nutshell. When human beings see a group of objects, we perceive their entirety before we see the individual objects. We see the whole as more than the sum of the parts, and even when the parts are entirely separate entities, we\u2019ll look to group them as some whole.<\/p>\n

The whole is other than the sum of the parts.Kurt Koffka<\/cite><\/p><\/blockquote>\n

Emergence (the whole is identified before the parts)<\/h5>\n

Emergence is the process of forming complex patterns from simple rules. When attempting to identify an object, we first seek to identify its outline. We then match this outline pattern against shapes and objects we already know to find a match. Only after the whole emerges through this outline pattern matching, do we start to identify the parts that make up the whole.<\/p>\n

When designing, keep in mind that people will identify elements first by their general form. A simple well defined object will communicate more quickly than a detailed object with a hard to recognize contour.<\/p>\n

Reification (our mind fills in the gaps)<\/h5>\n

Reification is an aspect of perception in which the object as perceived contains more spatial information than what is actually present. As we attempt to match what we see to the familiar patterns we have stored in memory, there isn\u2019t always an exact match. Instead we find a near match and then fill in the gaps of what we think we should see.<\/p>\n

Reification suggests that we don\u2019t need to present the complete outline in order of viewers to see it. We can leave out parts of the outline as long as we provide enough of it to allow for a close enough pattern match. You can see examples of this a little further down under the principle of closure.<\/p>\n

Multi-stability (the mind seeks to avoid uncertainty)<\/h5>\n

Multi-stability is the tendency of ambiguous perceptual experiences to move unstably back and forth between alternative interpretations. Some objects can be perceived in more than one way. An example from below in the section of figure\/ground is one you\u2019ve likely seen before. The image can be seen as either two faces in profile or as a vase.<\/p>\n

You can see these ideas in play in the principles below. The main idea is that gestalt principles are about perception and what is visually communicated by objects. The principles speak to the core of the visual language within which we work.<\/p>\n

Summary<\/h4>\n

Gestalt principles are important to understand. They sit at the foundation of everything we do visually as designers. They describe how everyone visually perceives objects.
\nThe principles above should be relatively easy to understand. For most of them, the definition and the image are probably all you needed to understand the principle. At the same time, understanding the basic ideas of these principles isn\u2019t the same as understanding how they influence design.
\nIn the coming weeks we\u2019ll look more at how gestalt influences design. We\u2019ll see how symmetry helps us balance a composition and how combining focal points and similarity allows us to create a visual hierarchy in a design.<\/p>\n","protected":false},"excerpt":{"rendered":"

In 1910, psychologist Max Wertheimer had an insight when he observed a series of lights flashing on and off at a railroad crossing. It was similar to how the lights encircling a movie theater marquee flash on and off.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[8],"tags":[],"_links":{"self":[{"href":"http:\/\/slmetalworks.com\/wordpress_dev\/wp-json\/wp\/v2\/posts\/15"}],"collection":[{"href":"http:\/\/slmetalworks.com\/wordpress_dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/slmetalworks.com\/wordpress_dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/slmetalworks.com\/wordpress_dev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/slmetalworks.com\/wordpress_dev\/wp-json\/wp\/v2\/comments?post=15"}],"version-history":[{"count":5,"href":"http:\/\/slmetalworks.com\/wordpress_dev\/wp-json\/wp\/v2\/posts\/15\/revisions"}],"predecessor-version":[{"id":1004,"href":"http:\/\/slmetalworks.com\/wordpress_dev\/wp-json\/wp\/v2\/posts\/15\/revisions\/1004"}],"wp:attachment":[{"href":"http:\/\/slmetalworks.com\/wordpress_dev\/wp-json\/wp\/v2\/media?parent=15"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/slmetalworks.com\/wordpress_dev\/wp-json\/wp\/v2\/categories?post=15"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/slmetalworks.com\/wordpress_dev\/wp-json\/wp\/v2\/tags?post=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}