Design Guy, Episode 35, Proximity and Alignment

Download Episode 35

Design Guy here, welcome to the show. This is the program that explores timeless principles of design and explains them simply.

Today, we'll bring an end to this exploration of the principles of perception, also known as the Gestalt rules by discussing Proximity and Alignment.

Now there's more to Gestalt than what we've covered in this series, but I trust this has given you a foothold on the topic. But let's get right to it.

Proximity

Proximity is something we understand intuitively. It requires no explanation when we see it. If we're at a party, we'll see certain kinds of people around us. Some will be standing by themselves with drinks in their hands, looking around. Others will congregate in groups of two or three or five or six, and we "get it." Those that are standing close together form a group. Even when they stop talking and interacting, we still see them as a group by virtue of their proximity.

Or think of high school. There were groups of jocks. Groups of freaks. There were loners. Maybe there were gangs when you went to school. And we perceive these persons, we comprehend these individual elements, if you will, based on their relationships and context. They are either separate and individual, or they're perceived as part of a group. And it's just like our compositions.

If we have a more or less even distribution of shapes or elements, they all tend to stand alone. They're not in proximity to anything in particular. But when we bring elements together as a cluster or collective or group, we view them as a new thing. Something bigger.

And this helps us comprehend our environment. Complicated clusters of elements get simplified in our minds as one thing. They are that group or cluster, and this frees our minds from having to deal with them as individual units to be inventoried in our brain individually. You can mentally batch process the whole lot of them.

This is important to understand in our designs. If we don't use proximity to our advantage, then our audience has to mentally sort through all that we put before them. On the other hand, when we put like things together, as a logical group, we've put convenient handles on them. Now all those things are glanceable. You can take them all in at once.

Some examples. Think of web pages. Often we see various tiers of navigation. One group of links relate to global navigation, links like "home" or "about us" or "contact us". Another set of links might be grouped according to related product categories, like at Amazon, where they group "movies, music, and games" as one link, as opposed to another labeled "apparel, shoes $ jewelry". It's this grouping that enable us to cope with all the information. It gives it logic and order and hierarchy. We can put convenient cognitive handles on a bunch of stuff at once.
There's many more examples that I'm sure you can come up with on your own because proximity is so intuitive. The trick is to think logically as you order groups of elements in your compositions. You're really using it as a strategy to streamline your audience's comprehension of what you've set before them.

And, finally, I want to touch on Alignment today. Although I'll probably go into it in more detail at a later date.

Alignment is simply the technique of organizing elements by lining them up. When we look at a page, we don't see visible lines, but we do notice that headline, and subhead, and bodycopy and related image are usually on the same vertical axis. At least this is usually the case. Or there are enough elements lined up on that invisible vertical line for us to sense their relatedness.

Or we may see shapes that organized according to a central axis. We might call them center justified. Or the left edges all line up. (This is also called ragged right). Or it's the right edges that all line up (and this is alternatively called ragged left.) The difference among these examples is edge alignment versus center alignment. And all of us have at least some experience with this in this because we've played with those justification buttons in programs like Microsoft Word.

Earlier still, we might have been the kid who always had the toys scattered randomly on the floor. It was hard to see the relationship among our hotwheels or star wars action figures as a result.

On the other hand, we might have been the kid who neatly lined up the toys on our shelves. Our Smurf figures looked orderly and related. They were aligned AND grouped in proximity to one another, and it probably made all the difference to Mom.

Well, that's it for today. This one ran a little longer than usual, but then I've been away for a little while, for which I apologize, so I thought I'd cover a just bit more.

Well, let me remind you that today's transcript may be found at designguyshow.blogspot.com. Music is by kcentricity.com. Well, I thank you again for tuning in and I hope you'll join us next time.

Design Guy, Episode 30, Seeing Unity (Gestalt)

Download Episode 30

Design Guy here, welcome to the show. This is the program that explores timeless principles of design and explains them simply.

We're talking about Unity. And when we began this discussion last episode, we said that unity is a goal of composition - unity describes how a multiplicity of elements combine to achieve one efffect. And this concept hearkens back to the fundmental definition of design we layed down in our earliest episodes, when we said that Design is the process of creating order out of chaos, as we fashion many disparate elements into an ordered unit.

But how does Unity work? How is it that one design is perceived to be more unified than another? And that's the key phrase, "perceived to be." Because this discussion lands us squarely in the territory of perception. And it's all perception, when you think of it. Our designs are nothing but bits of paper and ink, or illuminated pixels. It's what our minds of make of those bits and pieces that matters. And while we may not entirely understand how our minds work, we know we can aid cognition by understanding some principles of perception.

So, today I'd like to introduce the ideas behind what is called Gestalt Theory. And don't let the terminology scare you, Gestalt Theory is concerned with how our minds connect the dots, so to speak, forming a coherent whole out of incomplete parts. A puzzle with missing pieces still provides enough relational and contextual clues for us to discern that emergent whole.

And you may recall that we touched on this idea somewhat in the episode on Shape, when I said that this was a cognitive imperative, the way our minds compulsively and continuously make meaning out of stimuli around us, even connecting random things. And I can't help being reminded of the scene in Woody Allen's Take The Money and Run, when he tells his analyst that the ink blot looks like two elephants making love to a male glee club. But I digress.

So, what Gestalt theory does is make much of context and relationships. When it comes to meaning, it's all in the WAY we put things together. Where is the element? What's next to it? Does this element stand alone or is it part of a group? These are the kinds of questions that are important.

One Gestalt analogy is how we can take a collection of individual musical notes and organize them as a unified melody. We can even transpose it to another key, which makes us use a different set of notes, yet we still recognize the same melody. The unity is persistent because the relationship of the notes has not changed. The intervals and duration and sequence are still the same. So, carrying this idea over to design, it makes us think in compositional terms, because the unity that we hope to create on the page has altogether to do with context and relationships.

But more on that next time, I think we have enough to chew on for today.

For now, let me remind you that a transcript of today's show can be found at designguyshow.blogspot.com. Music is by kcentricity.com. If you're enjoying this series, don't forget to click subscribe in iTunes, so that you're automatically notified of new installments. And while you're there, consider leaving a comment at the profile page, which will encourage others to tune in, and I'll thank you in advance for doing so. And I thank you for tuning in today.