Quick start guide: Layout

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

  1. Make things easier to understand
  2. Make things look good
  3. 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.



Visible structure


Visual balance


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

Horizontal grids

Hierarchical grids

Different levels of layout

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

Make it look good

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



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

Show when there’s more content