Introduction to Layout

Layouts can either make or break your web design. This article will talk about a good structure and bad layout and how you can master layouts. Today we're going to talk about layouts and the hardest possible skill to master. But it's so important because it's either a fantastic website or such a crappy website that you're not going to use it. I want to jump straight into some examples, and then we're going to talk about the principles of what's behind it and how to master it.


I'm jumping straight into a horrible example. I'm just showing you this because look, I don't even know where to look. There's this huge pop up in front of my face. The title is hard to read, and there are these buttons here, there is the text here. Then some columns here and nothing is aligned to anything. I don't know even where to look.

Green Hotels Paris 13

Green Hotels Paris 13

On the other hand, I'm opening up Apple's website. And it's so clear you're scrolling even though there is more information here in such a way that it's beautiful to look at. It's easy to consume information and tell the story. Let's talk about how they arrange the information to make it attractive and easy to drink.


What makes a good layout?

  • The layout is clear, and it's not too confusing - it means that this is a good layout if there's a hierarchy. You understand what's first, what second, what's last.
  • It's interesting, and it's not dull - it means that it's a good layout.
  • It makes the actual content of the website easier to consume - you want our website's goal is for people to go through it, read it, purchase, do whatever we want them to do, and if they can't consume the content, then it means we did a bad design.

Trick Number 1

There are two things that we're going to talk about. That's going to help you make a good layout as a beginner designer. The first one is kind of a secret that I learned in a design school. It's so simple, but it's been highly impactful, and it helps me think about everything that I do or analyze. The rule goes like this in every design. There is something huge, something that's medium, and something small. Once you have these very contrasting sizes, it makes the layout clear and can rearrange and play with the design as long as you have something big, medium, and small. So this is the content of my website. 

There is an image of me. There is a title that says what I do. There's a kind of link to the stuff on my website. Now, as they rearranged on the page and nothing here, you don't know where to look. It just looks dull and poorly designed. So the first step is to decide what will be big, medium, and small. That comes down to hierarchy, which is more important. First of all, get the impression of that man to see who I am, and look at my face. I think this is critical a lot of times when people go into the website. They want to know who you are and get people to look at faces very easily and connect.

First, I want them to connect with Who I am. Then I want to look at the title which says Who I am, and the “About”, “Work” and “Contact” are the third thing. Which are the least important things here. I would go ahead, and again I wouldn't think about this whole image as the big thing. The big thing is me. I would go ahead and make my image big. Just make sure that my face is more significant than anything else that goes around here. As a second thing, I would probably need to make the text bigger because it's the same hierarchy. Bold the text, so it takes up more space. I'm going to make the text blacker. So it takes more visual, it looks more robust and more significant. We can make something bigger like this. 

Now there's like a contrast right now. When you first come in visually, the biggest and visual impact is me. The background is the actual person in the image. Then you look at this, meaning this is the second priority. And then  this is small. Whether we should put the text “About”, “Work”, and “Contact” it doesn't matter. Whatever I do, it works, and it can work. Whatever the layout is, it works well because now we have number one (Image of me), number two (Who I am), and number three (“About”, “Work”, and “Contact”. We have a clear hierarchy here, and now we have a layout that's pretty much good.

Nuria Graham

Let me give you a few more examples. So here in the first example, we have a poster. And you can see that the most significant number one thing here that grabs your attention is the title of Nuria Graham just because it's its biggest and it's white. Because of the contrast that jumps fast even before her face in the red rectangular image. Probably number two, that's the thing that grabs your attention. So that's the medium thing. Then we have the text on the top Salah and 26. It's the small things here, and we have a tiny bit of text around as well.



Let's check out the second example of this digital agency website you can see. Number one is the digital title agency focuses on the web. Number two is maybe kind of like the big text in the background, which might look more significant because it's bigger but just because it's so great. I would probably put that as number two, or maybe the text below the image can be medium. The number three is perhaps either the buttons here on the top of the logo.

You see that most suitable designs that you can see around you can probably analyze them and break them down into number one, number two, number three, big medium, small, and. I think to keep this in mind when whatever you're designing, and it will give you a framework to make sure that there are clarity and hierarchy in your layouts. So that is tip number one. 

Trick Number 2

The second thing that you want to understand and master will make you help and create clarity within your design is something that's called grids. We talked a little bit about this when we talked about the history of graphic design and in the 60s where it became pretty popular within the Swiss style. 

The grid is an invisible line structure, a grid of invisible lines that rearrange the content on our screen or general design. It gives us a sense of logic, and it was popularized in this book, the grid system by Josef Muller-Brockmann.

The Grid System by Josef Muller-Brockmann

This is a classic design book. I recommend you get it. It will help you understand the frameworks of how to use grids and what to do with it. But let me jump into Adobe XD here to understand. You should see somewhere along the grid lines here, and I can turn that on. It created 12 columns for me, and 12 is the most popular reason I'll show you why.

grid.png 34.8 KB

Now when you're using grids, the idea here is that you can refer to it to organize your content. So I might put something that goes coast-to-coast. Right, it takes up the whole space, and then maybe I will do something that takes half the space. So this is using six columns, and then we can have like two columns of information. Perhaps I would do something that takes only three columns, and then I can create three columns. And this helps me organize knowing what size thinks should be or where they should be the page's position. 

screencapture-apple-2020-10-21-05_27_58.png 35.6 KB

Now let me give you let's jump back to Apple's website.  Where you can see how they're using this structure here. They're showing the grid, so this is a grid-based layout. You have three columns here. Each of them is rectangular on a different size, but you see how they use this invisible grid to divide the space on their screen and use it. Now, this is how you set this up and again.

Usually, in web design, we use the twelve columns grid. And that's just because 12 is divided by so many numbers. So you can do one column. You can divide it by two, which is six and six. You can divide it by three, four, and four. You can divide it by four, which is three columns. It's just divided by many numbers, and that's why we use the twelve grid.

Now one more concept that you should know about grids is the concept of the gutter. A gutter is essentially the space that you see here between these columns. And I can make it larger as you can see, which would mean that you know I should probably space these elements here, which can be, you know, images of different cars. It is a piece of other information on the website now. The gutter's size is probably dependent on what context you have if you have text. You don't want them to be too close to each other because that would make reading a little challenging. If it's just images, they might look tighter together. It depends on what content you're going to be placing. Within these kinds of grids, within these columns, and how you're going to structure them. So that's why you should be thinking about the gutter. Often, the default kind of works, but you sometimes want to adjust that. One more thing that you should be thinking about is actually how wide your grid is. 

Gutter Grids

We're going to talk about this more in-depth when we'll get to the web context. Most screen sizes are wide. We don't want to use the entire space because people would have to scan from left and right. That's not useful.

We want to contain the kind of content on the website within what we call a container. The grid is going to be even if, let's say that the screen is wide. We will have the grid contained somewhere around maybe 1100. I'm just throwing in a number 1000 pixels wide. The website's content will be centered no matter what we have, and I think you can probably see this in most of you know websites.

Wide Grid

1000 px wide

I like making my screen wider, but you can see that on the Apple website, the grid is not becoming wider than this. It is constrained. Let me see how wide their grid is measuring up so. This is 1400 pixels wide, and I'm doing this by screen capturing on my Mac. So you can see how wide so that's a pretty complete grid.

As you can see, it is still being contained. All right, so few things for you to take away. One thing I do recommend is going over the grid systems in graphic design. I think it's useful. It'll also be kind of inspire you visually to see some typographic layouts using design. It is phenomenal and kind of like a fundamental design book that every designer should at least scan or go over. 


If you want to practice your layout skills, I recommend coming up with daily practice, maybe like the one we did for the typography. Maybe try to make some headlines and a few bullets, and perhaps an image attempts to create a composition or a layout out of them. Perhaps as you know, an Instagram post or social media post that you can use as a practice to share. And try to get some content but do three different layouts to see if you can expand your creativity and try different sizes, differently other grids, or just playing around with it. Just like typography or layout, it's something that is acquired. It's a skill that you need to practice a lot to improve in and improve your sensibilities to it. So my advice is to create, create, create, and start by creating images and then only later on moving to more complex web and dynamic layouts. But static design in an image is a good practice.


Leave a Comment

Your email address will not be published. Required fields are marked *