Brochure site layouts

A page is a sequence of sections sandwiched between a header and a footer. To create a successful page, we need to get 3 things right:

• choose section layouts that present content effectively,
• prevent adjacent sections from competing for attention,
• ensure the choices above, which are made individually per section, resulting in a coherent, well-paced page.

The 25% rule

To remedy the “off by one column” problem, we use a system inspired by an oct-tree: Widths are multiples of 25% of the available space. This simple rule decimates the available choices, which has the following beneficial effects on our layouts:

• creates up to 4 invisible "fault lines" (at 0%, 25%, 50%, 75%, or at the start of the first, fourth, sixth and ninth column), to one of which all content, across all sections, aligns
• facilitates scanning/skimming, enabling the reader to quickly navigate by headings for example
• induces a strong sense of internal coherence, order and consistency
• provides enough room for variation to avoid monotony:

Further considerations

Before we look at examples, let's highlight a couple of considerations used in conjunction with the 25% rule:

• Place larger blocks on the right-hand side of smaller blocks. For example, if a heading is longer than the accompanying text, it would work better directly above it, rather than to the left of the text.
• Do not allow the quest for consistency to lead to monotony. Be mindful of pacing, and aim to create a rhythm of contrasts (large vs small, white space vs dense copy, etc ). This helps keep the page interesting and engaging.

Example layouts
built on the 25% system

The 50/50 split

The 50/50 split is a very versatile layout. It places a short scannable part of the content (usually a heading) on the left-hand side. The rest of the content goes into the right-hand side. A few of the benefits of this layout:

• provides enough width for large headings (e.g. an h2) and long paragraphs;
• makes it easy to scan by headings;
• it is very compact - as the headings do not push the body text down.

This layout is designed with two things in mind: the average time visitors spend on a brochure page (between 20sec - 1:35min), and the long length of our pages.

For example, if you only give us 20sec of your time on a page that takes 5min to read top to bottom, our best chance of directing you to the part of the page you are interested in is to let you scan by headings - which you can do on most pages in under 20 sec. Then, only when you’ve found the part you came for, you move over to the right, read the dense copy and hopefully click on a CTA.

View the example 50/50 split layout in the browser

---

The 25/25/50 split

A variation of the 50/50 split, we subdivide one of the halves further to obtain a 25/25/50 layout.

View the example 25/25/50 split layout in the browser

---

The 25/75 split

The 25/75 split reserves 3 columns for small headings (or just “structural” white space) and a larger, 9-column area that can be used for long copy - or further subdivided into multiples of 25%.

The simplest case: wayfinding heading + long h2 heading and some content:

View the example 25/75 split layout in the browser