Design Guy, Episode 36, Unity Revisited / Emphasis

Download Episode 36

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

Well, when last we met, we were concluding a short tour of the gestalt rules, aka "the principles of perception," where "the whole is greater than the sum of its parts," and where our minds make meaning through our instinctive human tendency to visually group things together. In other words, we're wired to make associations between things. To mentally batch process them, and thereby simplify many, many things as just a few groups, or to ignore them altogether. And we can't help it. And thank goodness it works this way or we might go stark raving mad trying to reckon with every last thing in our field of vision.

Now, that excursion into gestalt came as a result of our original exploration, which was on the subject of Unity.

To refresh our memories, Unity echoes the very definition of Design itself, because Design is the process of creating order out of chaos, of taking what might start out as nothing but a senseless jumble of individual elements and organizing them into unified whole.

And it's that idea of Wholeness, or Oneness that we're always after as Designers. In fact it's what's operating beneath the surface, it's what's driving us, tugging at our hearts and minds and making our hands move as we're working. And it's what you might call the "E Pluribus Unum of Design", to coin a phrase taken directly from American coinage. "Out of Many, One" - one thing emerges. We achieve one effect.

This is the grand aim of design. This is design itself. It's the difference between randomness and intelligence, between chaos and order, between designs that seem to disintegrate and fall apart before our eyes, and those compositions where everything seems to fly in formation.

So, how do we do it?

Well, as we've said before, a good start is to make sure you've achieved balance in your composition. Now, this balance can be symmetrical or it can be asymmetrical, but it should be there nonetheless. You can get a refresher on balance, by revisiting the older episodes in which we covered the topic.

But Unity requires more than just balance, which leads us to the next principle we'll explore, and that principle is Emphasis.

Emphasis, as you might guess, is all about focus. Emphasis draws our focus by making us aware of a dominant element in our composition. Think of it this way, if all the elements in our composition are given equal attention, if they all speak in an equal voice, then what we've got is a cacophony. We don't know where to focus. Everything vies for our attention. And, ironically, nothing vies for our attention.

By creating certain points of interest in our composition by scaling an object larger than the rest. Or by using contrast to make it leap forth in our awareness. Or by centering it, or coloring it differently, or any number of other techniques, we create a point of interest. Or, as I like to think of it, we create an entry point.

Typographers think in terms of first read, second read, etc. And the obvious example is the large, bold headline. This serves as the entry point. It's an enticement. Surely, we can't help but see that element. And it beckons to us. It says, come on in, the water's fine! I know you don't think you're in the mood to read the whole thing, so just read this short headline first. And then, maybe you'll warm to reading the large, two-sentence sub-paragraph. And by then, if you're hooked. You're deep into the body copy, reading the entire article. It's a devious trick we typographers play, but who'd want it any other way? Who'd want to look at a marginless, block of type, every sentence, every word speaking in equal voice. Nothing shouts to us. Nothing calls our attention. It's quite off-putting, really.

And this is how strictly visual compositions work. A poster consisting of mostly colors and shapes has still got something to say to us. But what's it going to lead with? What image or element is going grab our eyeballs and make us peruse the rest of it?

By having primary, dominant elements, other elements serve, and support the composition as secondary or tertiary sub-dominant elements.

And before we know it, we've got all elements flying in formation. We've got a visual hierarchy that works! We've got the stuff of unity.

Well, that's it for today. Let me remind you that a transcript of the show, as always, is available at DesignGuyShow.blogspot.com. Music is by Kcentricity.com. Thanks for tuning in, and I hope to have back next time.

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.