Thursday, May 10, 2012

5 ways digital design is like dating

You’re looking for "the one", that person who makes you stop in your tracks, draw in your breath and sigh. Looking, you know that everything is just right. You can’t quite put your finger on just what that je ne sais quoi truly is (little wonder they call it that) but, as the tired cliché goes, when you find "the one", you just know.

But how? Humans tend to look at the whole before they see its individual (sometimes very yummy) parts. Gestalt, my friends. (No, not "Get bent", although I have muttered that under my breath at my share of narcissists and sleazoids. Geh-shtall-t.)

The German word gestalt means "shape" or "form" and refers the way humans perceive visual input. Like, say, a guy’s overall hunkiness before noticing the ripped abs and the cute butt. Ah, now we’re onto something!

So, how is digital design like dating?

Read on, Macduff.


Let’s face it, more often than not, long-distance relationships simply don’t work. That’s because humans are touchy-feely, social creatures. We crave contact and love to be close.
In design, elements that are close to one another are perceived to be more related than things that are spaced farther apart.

Uniform connectedness

Relationships are all about connectedness. Humans want to belong, and we seek out people that are like us. And when we find "the one", we somehow know we’re meant to be together.

The same goes for design. One of the central gestalt principles is uniform connectedness, the strongest of the gestalt principles concerned with relatedness.

Elements connected by uniform visual properties are perceived as being more related than elements that aren’t connected. In other words, uniform connectedness causes us to perceive groups or chunks rather than unrelated, individual things.

Don’t believe me? Draw a box around a group of elements, and … voilà, they’re related. Alternatively, you can draw connecting lines or arrows from one element to the next for the same effect.

In web design, you can use uniform connectedness to provide context. Think tabbed navigation. Similarly, the easiest way to show related context is to enclose disparate elements in a box or in an array.

Good continuation

Isn’t it great when you find someone who "gets" you? When the two of you are "on the same wavelength"? Well, guess what? There’s a gestalt principle for that, too. Good continuation refers to elements arranged on a line or curve: they’re perceived to be more related than elements not on the line or curve.

Think about text. The words in this paragraph are on a straight line (or series of lines), and that helps you, the reader, to understand that they’re related.

Order from chaos

When you find "the one", suddenly everything makes sense. Everything fits.

When designing a web page, designers typically use the grid to facilitate good continuation. A grid is most useful in bringing order to a layout, but it’s also useful in indicating context. Think of a series of thumbnail images arranged along a horizontal line. Or, maybe you’ve seen a magazine layout that employs three columns: linear arrangement can also be vertical.

Even if the content is not visually uniform, a clear design grid makes organization obvious.

Just your Stijl

So, it’s all about finding that someone who "fits" your design grid. That one person who’s just your Stijl.

Stijl. It’s Dutch. (Work with me, people.)

De Stijl (The Style) is the name given to a Dutch artistic movement founded in 1917—a mere five years before the Berlin School of experimental psychology became a school for gestalt psychology.

(See? There’s a relationship—although perhaps a loose one—between gestalt and De Stijl.)

Essentially, De Stijl is based on the geometry of the straight line, the square and the rectangle, combined with strong asymmetry and the relationship between positive and negative elements (that gestalt "figure-ground thing") in an arrangement of non-objective forms and lines.

Say what?

Proponents of De Stijl, by reducing art to the essentials of form and colour, simplified visual compositions to the vertical and horizontal directions. They sought to express a new utopian ideal of spiritual harmony and order.

 Composition with Yellow, Blue and Red by Piet Mondrian (1937–1942)

Harmony and order. And isn’t that just what the ideal relationship—and the ideal design—are all about?


  1. Excellent post! I would further argue that digital design is like relationships in general. Once you've built it, you need to continually invest time and elbow grease into maintaining it lest you be left with a website looking like a relic from 1995 (sound familiar?), by which point your online audience has long ditched you for someone sexier.

    1. That's exactly right, Ben. All relationships -- platonic, professional, mentoring, romantic, sexual -- employ similar principles and require continuous investments of time and effort if they are to succeed.

      As for the GeoShitties relics, I'm sure I have no idea just which website in particular you're referring to. No idea at all. Nope. Not a clue. ;)