Quick start guide: Layout

If you design websites or applications, layout helps you to:

Make things easier to understand
Make things look good
Suit the device

Make things easier to understand

Reinforce visual relationships

If things are related, they should be visually related as well. Here are some ways layout can help.

Alignment

If things line up in some way, they feel related. You can align things with the buttons in your design software.
But sometimes it’s better to align things so that they “look right”. This is called optical alignment.
Look at how other designers align things with each other. For example, designers usually use the baseline of text if they want to align text of different sizes.

Proximity

If things are close, they feel related.
If many things are close together they feel like a group.
You can make a group more obvious if you put a box around the group.

Visible structure

Often, information is laid out based on a structure we can’t see. But you can make that structure visible.
One common example is a container on a website.
Visible structure makes it easier to understand the structure of your design.
Any visible edges will help someone to visually separate information.
But if you add too many lines and boxes the design will look busy.

Space

Empty space is important in design because it helps us understand relationships between things. Things look like they belong to a group because other things are further away.
Use space consistently because the amount of space between things helps people understand how they relate. Spacing scales can help with this.
Space is related to density. If you generally use less space between things, the design is more dense.

Visual balance

A design feels “wrong” if its visually unbalanced. You need to balance this visual weight in your design.
Size, colour, and other things affect how “heavy” something looks.
You’ll mostly balance designs with your instincts. Move things around until they look balanced.
The heaviest things should affect the layout the most.

Grids

Grids are a way to set up a visual structure for your design. They help you keep everything aligned. You don’t need a grid, especially if you’re already careful about alignment. But they help.

Vertical grids

A vertical grid helps you to lay things out from top to bottom.
A simple example is a baseline grid for text: it shows where the baseline of each line of text should sit.
A vertical grid is a good way to get a good vertical rhythm, so your design looks good.
Hard vertical grids are used when everything needs to fit into a strict vertical rhythm.
Soft vertical grids are used when it’s only the space between each thing that needs to match a certain amount.

Horizontal grids

A horizontal grid helps you to lay things out so that they align from left to right. It also helps you split the page horizontally into smaller columns, when you need things side by side.
The margin is the spaces either side of the horizontal grid.
The gutter is the space in between the columns of the horizontal grid. It should be set to a size that’s consistent with the rest of your design.
A useful number of columns for a horizontal grid is 12, because you can divide that into many fractions: 12 columns, 6 columns, 4 columns, 3 columns, 2 columns.

Hierarchical grids

A hierarchical grid takes the available space and splits it into sections. Then those sections can be split into sections, and so on.
Most applications use hierarchical grids because they let you split a window into sections that are assigned to different things. e.g. the tool palette and the canvas in your design software.

Different levels of layout

You need to think about layout at the page level, but also at lower levels. How will you layout a container in your page? How about a button?
Sometimes you can make these layout decisions on their own, but you’ll at least need to think about the sizes of things at different levels (including space), and how they relate to other things, at other levels.

Promote important information

Some information in your design is more important than other information. Here’s how layout can help that information stand out.

Visual hierarchy

Visual hierarchy is how you can see at a glance which things are more important.
The simplest way to set a visual hierarcy is order: put the more important things in a place where a person will see them first.
Reading direction is important if you design for more than one culture. It can change from culture to culture. In the West we start from the top left and work our way down to the bottom right. This will generally decide how someone looks at something.
Size is a big factor in visual hierarchy. Even if something is not first in the order, if it’s big people will often look at it first.
A guideline is “dominant, sub-dominant, subordinate”: One thing should dominate the page. Some other things should be next in line. The rest of the things should not draw too much attention to themselves.

Make it look good

Layout can help a design look better. Here’s how you can add some visual interest to your design.

Variety

Variety makes things more interesting for our eyes. You can vary the position or density of things, for example.
If you simply switch the direction of layout it makes things more interesting. A simple example is when you take things that are stacked in a long column and put some of them side by side with each other.
Ignore the rules of the layout sometimes. You might tilt a thing so it doesn’t quite align with the rest of the things. Or if you have columns of things side by side, shift the start point of each column so they look staggered.
You can layer things, so that one thing sits partly on top of another thing. This adds a third dimension to your layout.
Pay close attention to how other people lay things out for inspiration.

Satsifaction

Generally it’s satisfying if layout follows certain natural rules.
One simple example is that it feels better if things are ordered by size or weight.

Suit the device

People look at visual designs on different devices. Your design will often need to change its layout to suit the person’s screen size. Here’s how responsive design works.

General layout patterns

Often you’ll need to change any horizontal stacks (left to right) to vertical stacks (top to bottom). A one column layout is naturally responsive.
If you want to keep horizontal stacks, you can spill content off the screen. Horizontal scrolling is more natural on a touchscreen than with a mouse.
One approach you can use is to design for the smallest screen first. As you increase the width of the design for larger screens, stop when something looks silly and change its layout so that it works for the larger screen size.
If you design for a small screen, it’s a good idea to always make things full width—buttons, for example—unless you have a good reason not to.

Show when there’s more content

On any screen size, people should know that there’s more things than they can see. Show them this. You can show them a little bit of the rest of the content, for example.