This is a grid of 4 equal columns. The designer will usually have a set amount of text that is already written for the page. That will be a natural constraint. But the number of pictures and the way things are placed or the font size and line lengths are up to the designer to figure out.

You might try hundreds of combinations before you find some that you like (or that work). And even then, they might not work together for the different sections of your webpage.

Try and design from a bird’s-eye view that encompasses all of the pages and modules. There are only so many places where the content will fit in the larger cohesive puzzle. It’s not your job to magically “be creative,” it’s your job to find those places.

If you don’t have any layout ideas right out the gate, just map out how the site works as far as modules go.

There’s some data, and based on that, it includes the right modules. All those modules have to work together in a cohesive visual style. Some modules might need different space depending on which module they’re next to (just like typography headings and paragraphs and lists)

You need to figure out what you want, and to help you with that also figure out what you don’t want.

If you don’t do this, then how will you measure if it’s successful? Spend the time to write it out.

We’re all improving all the time, so it’s important that you don’t get too attached. Take a step back and walk through the process with fresh eyes.

12 is common because it breaks into 12, 6, 4, 3, and 2.

In this case, it reveals a nice use-case for 2/3rds and 1/3rd on larger screens – but also a 3x grid for project cards.

Don’t be afraid to keep it simple and align everything to the left. That’s what books do, and it’s working out great.

You’ll have to make lots of layouts that don’t work to find the ones that work pretty well. And then some more. And then some more.

You know that you NEED a certain amount of content to tell the story clearly.

The content will only fit in so many ways. So, design a system to hold it. This phase is not about the actual content. You already have that established.

In this case / there are 2 independent areas for content. how is it going to work? Figure it out before you start mashing keys in the dark.

Your layout system is more complex than a graphic design book. It has to work on many different screen sizes and ratios. So, don’t design something that doesn’t work.

The grid can feel scary or controlling or stiff or loose – or liberating. It just depends on how you decide to look at it. By breaking things up – there are more and fewer choices.

If you decide to choose a unique layout with some rules, then great! But you’ll have to decide what they are and follow them.

In this situation, the right side is sticky on the top (on desktop), and only the left side of the page appears to scroll.

(also note that we didn’t use the real fonts or necessarily the real colors / so don’t be too detailed)

Just because it’s a grid – doesn’t mean you can go wild. It’s actually just going to help you do that.

This is about practicing the process. Don’t expect a masterpiece your first or second or third time. 😉

Make sure you stick with the layout-level design. You can focus on the visual-design layer later.