Layout in UX design

Layout is the structure and relationship between items on a page. It keeps balance and organization from one page to the next. Intentional placement of content helps users easily scan the page and find what they need.

Visual weight is the perceived weight of a visual element. It’s a measure of how much anything on the page attracts the eye of your viewer.

Here’s a list of factors that all contribute to the perceived visual weight of an element on a page:

• Size: Elements that are larger appear to be heavier than those that are smaller.
• Space: Elements separated by space are perceived as heavier than those that are closer to other elements.
• Color: There’s two parts to color. First, elements with intense, saturated colors appear to be heavier than those with more muted colors. Second, objects with darker colors have more visual weight than those with lighter colors.  
• Dimension: 3-dimensional elements are perceived to be heavier than 2-dimensional elements.
• Proximity: Elements in close proximity to one another in an area provide the perception of more visual weight in that area.
• Location: An object's visual weight increases as it gets further away from the center of the composition.

CHRAPBW (Contrast, Hierarchy, Repetition, Alignment, Proximity, Balance, Whitespace)

• Contrast: Using visual weight to make elements stand out and draw our attention.
• Hierarchy: The correct ordering and visual treatment to allow users to easily scan and understand content.
• Repetition: Unity and consistency. It helps people quickly understand what they’re looking at because they can see all similar elements.
• Alignment: The organization of elements relative to a line or margin. A design with poor alignment is like walking into a room that’s cluttered and hard to navigate.
• Proximity: Elements that are close together are seen as related. This closeness shows connectedness. This helps create perceived groupings, and these groupings reduce cognitive load and increase readability.
• Balance: Balance creates harmony, associations between content, and helps lessen cognitive load.
• Whitespace: The negative space or the space between your content. Proper use of whitespace can help define and separate sections, establish relationships between different pieces of information, and it gives your content room to breathe.

From the margins on the side of a page to the content in between, layout is, in many ways, the foundation of design.  

It keeps balance and organization from one page to the next.

Bad layout results in creating cognitive overload for your users.  

Good layout has solid hierarchy and visual relationships.  

And this video is all about helping you understand the difference.  

In this lesson, if it wasn't already super clear, we'll be talking about layout.  

We'll cover what layout is and why it's important. We'll talk about the concept of visual weight, and we're going to talk about crap.  

No, but seriously, we're going to talk about crap, contrast repetition, alignment, and proximity.

Let's get after it!  

Let's first talk about what layout is and why it's important.  

At the most basic level layout is the structure and relationship between items on a page.  

For digital products, layout is all about figuring out the arrangement of images, text, and overall functionality.  

Let's look at it like a food recipe.  

If UI elements such as buttons, text images, icons, et cetera, are the recipe ingredients.  

Then layout provides the instructions for where and how you use those ingredients to make the overall recipe look and taste just right.  

For example, let's imagine we were designing a travel site.  

For the site, we are creating cards to display beautiful places that people could travel.  

When designing the layout of the card, we would have a few ingredients: a beautiful picture, a title, some body text, and a rectangle.  

The layout would be the directions of where we place these ingredients to create a cohesive, visually pleasing card.  

Good layout can be learned. It's part science and part art. Just like a good recipe.  

So now let's talk about why it's important.  

Layout is important because it's quite literally how the information is organized and displayed in a page.

Intentional placement of content helps users easily scan the page and find what they need.  

Like we talked about before, bad layout results in mental friction for your users.

Good layout helps people to understand what they're seeing and find what they need.  

It has a solid sense of hierarchy and visual relationships.  

This helps the user to quickly scan and parse the contents of a page.  

Now that you have a general understanding of what layout is and why it's important, let's now talk about the concept of visual weight.  

When you think about object weight in the real world, this concept really isn't too hard to grasp.  

Stephen Bradley described it well in his article, 19 factors that impact compositional balance when he said, visual weight is the perceived weight of a visual element. It's a measure of how much anything on the page attracts the eye of your viewer."  

Here are six factors that contribute to the perceived visual weight of an element on a page. Let's break down each of them.  

First is size. Elements that are larger appear to be heavier than those that are smaller.  

With that in mind, looking at these two squares, which one attracts your eye more? The bigger one, right?  

That's because our brains perceive it as being heavier than the other object.  

Second is space. Element separated by space are perceived as heavier than those that are closer to other elements.  

For example, everything is exactly the same between both sets of text, except the vertical distance between the header and the body text on the right is double that of the example on the left.  

Because of that space, the second header has more visual weight.  

Third is color.  

There are two parts to color.  

First, elements with intense saturated colors appear to be heavier than those with more muted colors.  

Looking at these equal sized squares, the bolder red square on the right draws our attention because it's saturated color gives it more visual weight.  

Here's the second part of color. Objects with darker colors have more visual weight than those with lighter colors.  

For example, the circle on the left is a darker version of blue, so it draws our attention more than the lighter circle on the right.  

Fourth is dimension.  

Three dimensional elements are perceived to be heavier than two dimensional elements. For example, looking at these two objects, the 3d cube has more perceived visual weight than the square on the right.  

This is because our minds can assign a make-believe weight to the 3d square, but it has no reference to assign a weight to the 2d object.  

Fifth is proximity.  

Elements in close proximity to one another in an area provide their perception of more visual weight in that area.  

For example, the four squares on the right draw our eyes slightly more than the four on the left, because the space between elements is less.  

And last location.  

An objects visual weight increases as it gets further away from the center of the composition.  

For example, look at the two canvases below.  

The green square on the right canvas draws our attention more because it's really far away from the center of the composition.  

It's important to understand the concept of visual weight because it's directly involved in how we lay out objects on a page.  

Now that we've talked about visual weight, let's talk about crap and no, again, we're not talking about bowel movements.  

Crap is a set of four design principles of layout created by Robin Patricia Williams: Contrast, Repetition, Alignment, and Proximity.  

Let's begin with contrast.  

Contrast is all about using visual weight to make elements stand out and draw our attention.  

It's used to help move the audience's focus to the most important things they should see and understand.  

Usually whatever element has the largest contrast is understood to be the most important thing on the screen.  

Contrast enables us to get a faster understanding of hierarchy and quickly see important pieces of information.  

Because it's 100% related to visual weight, contrast can be created through color, shape, size interaction, proximity, font, choice, symmetry, and the list goes on.  

Color contrast in particular is incredibly important for visual accessibility.  

Let's look at an example of contrast in the UI of MailChimp.  

Before we break it down, just take a moment and see what stands out to you.  

As a quick reminder, the reason that element stand out to you is because of visual weight and contrast.  

Looking at this image, six things immediately stand out.  

First is the picture. Our eyes go there immediately because it's the biggest thing on the screen, is off center, has a person in it, and has the most color.

In short, this object has the most contrast and visual weight.  

There's one thing to add here. In general, as humans, our eyes are drawn to other people. And so in this case, not only does it have the most contrast in visual weight, but because it has a person, our eyes are attracted there even more.  

Second is the headline. Our eyes then traveled from the picture to the element most related to it to try and learn about the picture.  

The headline is the second biggest element on the screen, creating contrast in its size.  

Third, the watch now button.  

The contrast through color and size and the proximity to the headline, draw our eyes to it.  

Fourth, the sign up free button in the top right.  

Because the button has the same color as the watch now button, the similarity in color and the visual way attracts our attention.  

Fifth, the text below the headline.  

Finally the MailChimp logo.  

Of course, you may have looked at the elements in a different order, but hopefully you get the idea.  

Contrast helps draw our attention and set elements apart from one another.  

It helps focus our attention on what matters most.  

When contrast is applied correctly, it's something that you probably shouldn't notice.  

Next up there's repetition. Repetition it's about unity and consistency.  

It helps people quickly understand what they're looking at because they can see all similar elements.  

Think about repetition this way... it's a lot easier to look at 24 objects that look the same than to look at 24 unique objects. Our brains have to parse each different object separately.  

Whereas with repetition, our brains can group all like objects together and to quickly understand what's going on.  

For example, every person on a soccer team wears the same jersey.  

The differentiating elements are the numbers and names of each player on each Jersey.  

And even the numbers of names usually appear in the same place.  

So if you want to know this information, you know where to look.  

Could you imagine a sports team that had varying Jersey colors or patterns? It would be really hard to tell who was on the same team.  

With all of this in mind, as repetition is all about consistency, it's super important to keep the patterns, colors, fonts, branding, and functionality consistent across a product.  

Let's look at Pitch's website to see how they use repetition.  

First, they are very intentional with their color choice and font.  

You'll see the same font styles and colors throughout every part of their website.  

Their main gradient is used on their primary button, as their background for their product photo, and their testimonials.  

Additionally, they use the same spacing and layout choices throughout their website.  

They also cleverly repeat the exact same collaborator style for their testimonials as they use in their product.  

This helps our brains draw the connection between the way people collaborate in their app and how they see folks who are providing them with reviews.  

They're also very consistent with their 3d illustration, even down to their signup form.  

Next up in crap is alignment.  

Alignment is all about the organization of elements relative to a line or margin.  

A design with poor alignment is like walking into a room that's cluttered and hard to navigate.

It makes you uneasy and it can be frustrating to try to even make sense of everything around you.  

Alignment is important for four reasons.  

One, it matches how people naturally scan and focus on content.  

Two it's visually appealing.  

Three, it provides a sense of balance.

And four, it creates a relationship between similarly aligned elements.  

There are two basic kinds of alignment: edge alignment and central alignment.  

With edge alignment, elements align consistently to the left or right. With center alignment elements are aligned consistently in the center.  

Using a grid to align elements can really help create a sense of cohesion and establish a relationship between elements.  

This is really helpful for scanability.  

And finally in crap there's proximity.  

This principle states that elements that are close together are seen as related.  

This closeness shows connectedness.

This helps create perceived groupings and these groupings reduce cognitive load and increase readability.  

Here's an example with Google flights.  

The type of trip, number of passengers, search fields, dates, and filters are all close together. The close proximity shows that they all work together.  

If you're familiar with the Gestalt principles, this should sound familiar because it's the exact same as the proximity Gestalt principle.  

Before we wrap up this lesson though, we want to expand to crap to include an H a B and a W. So it's CHRAPBW, what kind of a weird combination of crab, chap, raw, and crap... Hopefully that creature really doesn't exist.  

Anyway, the H is for hierarchy and it's all about the correct ordering and visual treatment to allow users to easily scan and understand your content.  

Yes, hierarchy and contrast are very related, but we thought it was important to call it out as being separate because so many websites have a lot of contrast, but still they don't have great hierarchy.  

Use hierarchy to establish relationships between parent and child content, create categories, and generally build a sense of order and organization.  

Proper use of hierarchy will help make your designs easy to understand and help users figure out what matters most on the page.  

For example, Nike's navigation provides a clear sense of hierarchy through font, styles, and space.  

The top level categories of new and featured men, women, kids, sale, and back to school as tabs help to establish where you are and what you're looking at.  

The space between those options and the menu beneath provides extra visual weight to show their importance and highlight their hierarchy of information.  

Then in the main section, they use large labels and smaller text to show where each item belongs.  

That's a great use of hierarchy.  

Next in the CHRAPBW there's B, which is balance.

This plays into the gestalt principle of symmetry.  

And yes, this one also plays into alignment, but again, it's something that we believe is important to call out.  

When something is imbalanced, our brain wants to fill in the gaps and find the missing pieces to make up different shapes that aren't there.  

Balance creates harmony, associations between content, and helps lessen cognitive load.  

Look how Airbnb creates balance in their online experiences page.  

You can literally split the page down the middle and it's equal on both sides.  

This creates a wonderful sense of harmony.  

And finally there's W for white space and no, this doesn't just mean using a bunch of white in your designs.  

White space refers to the negative space or space between your content.  

We left white space for last because it's used in all the other principles for layout.  

Proper use of white space can help define and separate sections, establish relationships between different pieces of information, and it gives your content room to breathe.  

For example, look at Airbnb's help center.  

We're using their old one because their new one isn't as good of an example.  

Anyway, they use a generous amount of white space to separate the header and each of their sections.  

It makes the page feel light and easy to consume, even though there's a lot of information.  

If the white space is removed, the page doesn't feel as easy to consume because it's cramped and harder to tell each section apart.  

CHRAPBW are another set of principles to consider what building a layout of a page.  

We recommend you use them along with Gestalt principles, as both sets are interrelated.  

Okay. We made it to the end.

To recap.  

Layout is the structure and relationships between items on a page.  

Intentional placement of content helps users easily scan the page and find what they need.  

Visual weight is a measure of how much anything on the page attracts the eye of your viewer.  

And finally we covered the very strange creature CHRAPBW: Contrast Hierarchy, Repetition Alignment, Balance, Proximity, and Whitespace.  

The secret to great design is in the way visual elements are arranged in relation to one another.  

And that's what layout design is all about.  

We really hoped you love this lesson and look forward to seeing you the next one.

19 Factors That Impact Compositional Balance