When we use the phrase “an eye for design,” we often reserve it for the designers and creative directors who we work with. But here’s a secret: We all have an eye for design. (Whether my saying this as a non designer lends more or less credit to that statement is up to you.)
The way we view design is rooted in how our brains interpret the visual cues we are given from any number of stimuli every nanosecond. We rely on our visual sense to help us understand the objects and scenes in our line of sight.When something is well-designed, it aids in facilitating our understanding of the world that much more quickly. Strong visual cues + keen perception = good design.
So how do psychology and design work together? The best starting point for this is to look at a movement in psychology that formed in Germany a little over 100 years ago. Trust us on this one, and read on to learn how our own psychology influences the way we see.
The Gestalt Movement
In studying UX (user experience) design, we see a huge amount of focus placed on psychology. More specifically, UX experts are schooled in Gestalt psychology. German for “unified whole,” Gestalt is a movement in cognitive psychology that originated in Berlin in 1912.
What can that possibly have to do with design? A whole lot. “The whole is greater than the sum of its parts” actually originated as a Gestalt principle, though it’s more accurately translated as “The whole is other than the sum of its parts.”
It’s this bird’s-eye view that we often miss in design when we fixate on the small details of a design experience. But what about the sum of those parts? Design relies on a balance of creativity and following 10 principles of Gestalt visual theory. We’ll hold them up to Whole Whale’s own website as a case study, but you can also consider these in relation to your own organization’s website. What’s working? What isn’t? What can your website tell you about its childhood? (Okay, we’re kidding on that last one. But now’s as good a time as any to get your site on the proverbial couch.)
Similarity
As humans, we have a herd mentality. According to the the Gestalt principle of similarity, we exemplify this by grouping together objects that share similar visual characteristics. In design, the same color, font, or size can factor into these groupings.
Let’s take a look at the drop-down menu on WholeWhale.com. Under “Resources,” we have 7 options that fall into this bucket. They’re all listed in the same font, the same color, and the same size, and this gives the eye a cue that these are all in the same level of our information hierarchy. More consistency comes together with the alignment and positioning of each option.
Proximity
We also group items together if they’re in close proximity to one another. Think of it this way: You arrive at a party that’s already in full swing. There are about 50 people in your friend’s crowded apartment, and you know no one except the host.
By the time you leave the party, you may walk out with 50 new friends and know each of their names, hometowns, and favorite Backstreet Boys song. But when you first get there, you don’t notice 50 individual people. You notice a group. And the defining characteristic of the group is that they’re all crowded into one tiny apartment. You’re perceiving the whole before the sum of its parts, thanks to proximity.
Speaking of new friends, here is our Team page on WholeWhale.com. The cozy grouping of our team profiles in this grid would give you the sense that these photos share some unifying characteristic even if we didn’t have the title “Meet the Whalers” hanging above. If one of these tiles linked to our video resources, we would be playing the “one of these things is not like the other” game.
Meaningfulness
When I tell you I’m thinking of a red octagon, what’s the first thought that comes to mind? Most likely “Stop,” right? The way we perceive new designs is directly influenced by how we’ve historically experienced design. This is the principle of meaningfulness. Since we have a whole lifetime of visual experience to work with, good design plays to these perceptions versus trying to rewrite prior experience.
Whether you grew up with a VCR, a LaserDisc player, a DVD player, or streaming, a sideways triangle pointing to the right has consistently been equated with “Play.” Over time, we’ve come to associate it with all things video (check out YouTube’s logo) and so in order to help audiences immediately recognize a video resource, our favorite three-sided polygon gets used once again.
Symmetry
We love order, and part of that order lies within the idea of symmetry. Just saying that word gives you a small sigh of relief, doesn’t it?
As this is something we’re attuned to, we tend to find symmetrical designs far more pleasing. This applies to both the grouping of elements on a website as well as the individual items themselves. But with great design power comes great design responsibility: Like the principle of proximity, don’t place objects in symmetry with one another if they aren’t related (unless you want to make people think they are).
On WholeWhale.com, we have over 200 written resources. Can you imagine if those weren’t arranged symmetrically? Our heads are spinning just thinking about it.
Continuity
This is one of those Invisibilia-level cool human facts: If an object is partially obscured, we will automatically perceive it as a whole even though we could just as easily see one whole but slightly obscured object as two (or more) separate objects. That’s continuity.
Yes, it seems like no big deal, but imagine if we lacked that perception. Check out that chart of the % of all American adults who use the Internet. We have one marker for each year, but we still see this as one continuous line versus 15 short lines (and 16 dots).
Common Fate
Here’s where we get a little motion going. When individual elements move in the same direction, at the same speed, or at the same time, we will assume they are grouped together because they share a common fate.
Closure
Similar to continuity, in closure we are able to form a whole shape or scene in our mind’s eye when we only see a portion of it. Think of logos like the World Wildlife Fund — have you ever noticed that the panda isn’t fully drawn? You still see a panda because your brain fills in the gaps.
Take a look at the heart icon we used in one of our graphics on our product page for All Good Text. But wait — how do you know it’s a heart? There’s a line graph cutting through the middle!
That’s right: Closure. Our mind fills in the gaps for us so all we see are 😍.
Connectedness
Many of these Gestalt principles help us to connect the proverbial dots and see things as grouped. So it stands to reason that one of the principles would center on connectedness. Objects joined by some physical connection will also be perceived in our eyes as belonging to the same group.
We’ve used two examples with line graphs in this article already, and these exemplify the law of connectedness as well as continuity.
The intersection of our Venn diagram also demonstrates connectedness. Tech and Impact may not overlap 100% (yet), but they do connect in the middle. We’re working on making that midsection a little bigger.
Common Region
Sometimes we want to group objects together but also want to have groups within groups. When we add design elements, they aren’t randomly selected or placed, rather we often use the small details to note common region. Boundaries are good, both IRL and online.
A lot of thought went into the homepage layout for defining what we do at Whole Whale. There’s a hierarchy in place with our services taking up a full-width above the (symmetrical) placement of our resources and products. We use a few design elements to create common regions for these three verticals: We have margins separating all three sections, horizontal and vertical placement, and color offsets. Therefore, while these are in proximity to one another, we also can recognize the individual elements in the group.
Synchrony
The principle of synchrony builds on what we’ve covered in a few other principles, including common fate and similarity. For objects that are either static or in the same motion, we will perceive them as related so long as they occur in unison.
Let’s go back to where we started: The WholeWhale.com menu. All of the elements that fall under “Products” are considered to be grouped because when we hover over “Products” in the menu, they come up in unison. They’re like the Rockettes, but with shorter legs.
Tell us more!
What’s one Gestalt principle that your website is crushing? Tweet it at us with the hashtag #WhaledIt!