< Back to blog

Coming up with layout ideas systematically

Thinking of ways to lay out pages and components is something I've struggled with before, and that I've seen other designers ask about. It's easy to feel like you haven't considered all of the possible solutions to a layout problem.

Give this method a try the next time you're coming up with layout ideas, especially for individual components.

It works this way: List the elements that make up the component you're designing, and work through every possible physical relationship between those components.

Here's an example, using just two elements that make up a card component: The card itself, and a title. Maybe there would also be a picture, and a description, but I'm keeping it simple to demonstrate the technique.

Here I've put the title in the corners and centres of the card, just inside the edge.

Here I've put the title outside the card, but still on the corners and centres.

Here I've added a horizontal rule that does not reach the edges, to create a visual connection between the title and the contents of the card (The gaps either side of the line), with the title in the corners and centres, top and bottom.

Here I've used a similar technique as the line to divide, but instead coloured the background of the title area, with the title in the corners and centres, top and bottom.

Here I've extended the dividing line used before, but made it reach right to the edges. This creates more of a visual divide between the contents of the card and the title, which might be appropriate depending on what the card holds.

Here I've used the coloured background method, and run the title vertically. I've included this to show that it is one option to consider, but generally having text run vertically makes it difficult to read.

You can see that just by systemtically trying all of the possible combinations in terms of where the card and the title sit, relative to each other, I've considered 37 different possibilities.

< Back to blog