Patterns & Transitions

Web layout has a lot of untapped potential, but if we’re to explore it (and ultimately master it) we first need to be able to talk about it. To do that, we’re going to need a better vocabulary.

Cinematography has such a well-established vocabulary that when I say “wide shot of deserted street, slow pan to cowboy, fade to closeup of cowboy’s eyes, cut to medium shot as he reaches for his holster”, you can probably imagine that exact scene—its pacing and emotion—without any visual reference.

Now, try and describe a web-based layout with words. The vocabulary we use to describe web layouts has been mostly borrowed from print, so while we can talk at length about “a sidebar in column 1 and text block spanning columns 2-4”, we’re ill-equipped to have any nuanced discussions about vertical pacing.

What do you call it when you have three images with captions side-by-side? How about when you have images on the left and text on the right… or when you have image on the left and text on the right, then text on the left and image on the right, and so on? We use these layout patterns all the time, yet their lack of widely-understood labels means I probably need to show you an image to be sure you understand what I mean, and talking about them is exhausting. Imagine if Spielberg had to say “ok at this point I want you to slowly rotate the camera horizontally, then gradually reduce the opacity of that shot while increasing the opacity of the shot where we changed the lens to a telephoto and aimed it at the actor’s face“? “Slow pan, then fade to closeup” is a lot quicker.

Once we have words to describe these patterns, we can have better conversations about the emotional impact they have on a reader, and when might be appropriate to use them.

How does the emotional impact differ between an image that takes up the entire screen, versus side-by-side images, versus ‘staggered’ images and text blocks? How does it feel when we scroll from one pattern to another? How does it feel when the background of one section is dark and the next is light? Or what about when the background fades between the two? What happens if I gradually reduce the vertical padding of each section, will the reader feel like things are speeding up? if I zig-zag the content in this section, then square it all off in the next, how will that make the reader feel?

These are the kind of discussions we need to be having if we’re going to explore the full potential of vertical web design.