Use this incredibly simple rule that is, somehow, never mentioned in school or design courses.

Humans like boxes.

We love boxes so much that they are central to both our visual and conceptual world. Stereotypes, music or art genres, religious or political views — all of them are boxes, or at least attempts to put stuff into them. But also in the physical world, 2D or 3D, we love boxes.

Here’s a neat little trick to show you what I mean: ask anyone to draw a circle on a piece of paper. Then ask them to draw something to contain the circle they drew. Guess what? Most people will draw a box around the circle.

This is remarkable, because a triangle, a hexagon, a wiggly-ass diamond, or even another circle would have sufficed just fine. But no: we like boxes. To put stuff into, stack them, align them, and stuff our attics or garages with them. Boxes feel solid because they are. In three dimensional space, a box is made up of six 2D boxes. Parabox. They’re almost like magic.

Now, before you get ahead of me: no — the ‘box’ is not the mystery design-rule I’m talking about. But boxes do have something to do with it; otherwise, I wouldn’t bore you with this introduction.

Let’s get to it. A two-dimensional box is made up of four lines. And, as we’ve seen with the circle, we are tempted to visualize boxes around everything we perceive in 2D space — e.g., UI and visual design.

This is very apparent in the act of wireframing and rough prototyping: we conjure op a composition of wired boxes that represent the entire user interface, and this works remarkably well.

Yes, I made that up myself. It’s not super catchy, I know. Let’s stay on-topic. The four strokes making up a box end at each intersection. But in our unconsciousness, every one of those lines draws out an imaginary line much further, through the entirety of your design. Like this:

This also applies to a circle, or any other shape, like this:

Every object draws these four lines through your design, regardless of their shape. This goes for rounded buttons, weirdly masked images, paragraphs of text, giant headings, social media icons — everything.

An easy way to see how this works is by simply drawing three shapes onto a plane. The shapes interact, even if they are quite far apart from each other. The reason for this is that, regardless of the distance between the objects, the imaginary lines of them do collide somewhere on the canvas.

This is the most fundamental rule when it comes to composition. It is how you handle the sum of all of these lines that makes your design look either cluttered or clean. I call this The Extendabox rule because it has more ring to it than “the four-line rule” and it makes sense: you extend the lines of boxes.

Well, not really. A grid works the other way around: you define a set of columns, gutters, and rows to make up certain sections of your design, and you then position all of your objects onto that grid.

While this works to keep your design clean, it can be limiting to your creativity, and your design might come off as dull or uninspired.

It is for this treason that I once was a grid hater. I believed that I was a wild horse, meant to roam free and be unconfined. Grids posed a threat to this eternal goal of mine. I and my creativity should never be tamed.

Until they were tamed, in a way. Acknowledging all of the invisible lines that go through your design helps you create better interfaces. Now, you might be tempted to assume that, based on the Extendabox-rule, everything should go into a grid. Not so much. Some things should go into a grid, but a grid should — in my opinion — be a result of all of your Extendaboxes, not the other way around.

Gridless

What I like to do is approach a design gridless, and then as I progress, a logical structure resembling a grid will appear slowly.

The next step is to align certain things that were already nearly aligned in the first place. If the extended lines of one object are only a few pixels or mm away from the lines of another object, you merge them. Taking out these small inconsistencies and weird gaps can suddenly bring calm to your design because you are significantly limiting the number of lines, making the composition easier to comprehend.

The sketch above shows what I mean, roughly. I started by sketching a basic layout, without a grid. This allows you to play around with the composition without being too confined.

Then, when you’re somewhat okay with where you’re going, you try to minimize the number of orange areas, which are areas where the extended lines nearly touch.

You can keep repeating this process — it’s iterative. Every time you move an object, other line collisions or gaps appear. It’s up to you to decide when to stop, but generally, you will quickly come to a point where removing even more gaps will make your design look generic and dull. Right before that point, you stop.

Things like this are great to read about, but you won’t grow unless you practice. Luckily, in this case, practicing is easy. A great place to start is to dissect existing designs. Head over to Awwwards, for instance, and look at award-winning websites.

Then just visualize all of the boxes and apply the Extendabox-rule: extend their lines and see a grid appear. This way you’ll be able to really understand what the designer went through getting to that specific end result.

If you want to take things further, take screenshots and draw onto them, or try to recreate a website UI you love out of only boxes and lines. In a geeky way, that can actually be a fun and relaxing experience.

Once you start mastering this rule, you will be able to create clean but bespoke UI designs in far less time than you do now, because you’re taking the guesswork out, and instead you take on a pragmatic approach to layout and composition.