Tip:
Highlight text to annotate it
X
Last post, I put up a grid of squares that had been making the rounds on the Internet
and asked how many you could see. Normally, I would write a follow-up to a Design Talk
post, but this one got a little complicated, and so you get a video.
The question was, "How many squares do you see?" This is different from, "How many
squares are there?" That was on purpose. It's partly because the actual number of
squares is ambiguous, but mostly because I put this up there as a design exercise, kind
of an exercise in visualization. We made some of the squares black, the hope being that
you could begin seeing the interaction of squares on a grid, as well as differentiation
of scale, and so on. So we've got a lot to look at. We're going to look at drawn
squares, at dimensional squares, at phantom squares, at positive and negative spaces,
and all of this on a couple of live layouts.
So I'd like to like to start by just looking at the conventional count. If you were treating
this as a puzzle to solve . . . I'll give a shout out to Ken and to Chris, both of whom
made animations that illustrate this count.
So 40 is the conventional number. And I think if you came up with 40, you can probably give
yourself an A. But it's 40 squares if we're looking at this grid as a set of drawn lines,
like you'd make with a pencil, or a pen, or Illustrator, or your toe in the sand.
But there's another way of looking at this. Let's zoom in, and you're probably seeing
two squares here. But instead of drawn lines, visualize this as a large gray square, on
top of which is a slightly smaller white square, on top of which is a gray square, on top of
which is another white square.
Now these square are defined not by drawn lines but by edge, where white meets gray,
meets white, meets gray. Similarly, we can see it not as 16 individual gray squares but
as one large gray square, on top of which are placed smaller white squares, like floor
titles. I mean, just like tiling your floor.
So, pause here for a moment and just look at the grid again, and instead of drawn lines,
see it as white squares on top of gray squares. It might help if I move one for you.
This is an important visualization skill that will help every design you do — if you can
see not just lines, but the depth of objects, at the same time.
There's another kind of square on this grid: It's what I call a phantom square. In this
case, it's one that's defined by three sides. If you were in Illustrator, you would
draw a square path and just stroke it on three sides. And, our eyes tend to close in that
fourth side, and we don't literally see a square; we feel the presence of a square.
So there's this one, and there are seven others just like it on this page. There's
a phantom at the top, and there are seven others just like it for a total of 16 phantom
squares that I can count on this grid.
Phantoms are a very good thing to be aware of, because they often form in negative shapes,
they form between objects, they form in columns, they form . . . they can just form . . . and
they will apply pressure on your eyes, whether you are really aware of it or not, and affect
the feel and ultimately the look of a page.
There's more going on this grid, and that is the interaction of squares — large ones,
medium-sized ones, small ones, and the way that they move about together. For example,
if we look at this one small square, it's easy to see that it's a part of this larger
square, and this one, and this one, and this one — in each case it's in a different
place — this one. These are layouts. These are the bones, the skeleton of rudimentary
layouts. It's pretty easy to see when we zoom in and change the grid into a live layout.
It's very handsome. We can move the copy around the photo according to the grid. You
know, far right, lower left — layouts get made this way.