Grids And Layout Systems

Designing Page Templates And Reusable Layouts

Learn how to build a small set of reusable layouts that keep a publication or website consistent, save production time and still leave room for varied content.

On this page
  1. What a template is for
  2. Start by looking at the content
  3. Decide what is fixed and what is flexible
  4. Build on shared foundations
  5. How many templates?
  6. Think about screen sizes and media
  7. Document and maintain
  8. Signs of a good set

What a template is for

A page template is a prebuilt layout with defined areas for specific kinds of content. Instead of designing each page from scratch, a team picks a template and fills it in. Templates exist because most publications, from a monthly report to a large website, repeat the same page types over and over: an article page, a list page, a landing page, a contact page.

The benefits are practical:

  • Consistency. Readers learn where to find things, and the whole publication feels like one thing.
  • Speed. Production becomes filling and adjusting rather than inventing.
  • Fewer errors. Spacing, type styles and alignments are set once and reused.
  • Easier handoff. A new team member can produce a matching page by following the template.

Templates sit between a grid and a full design system. The grid defines structure, the system defines parts and rules, and templates combine them into complete page types.

Start by looking at the content

The most common mistake is designing templates before understanding what they must hold. A better first step is an audit of real or planned content. Gather examples and sort them into types. Ask:

  • What kinds of pages exist, and how many of each?
  • What elements does each type always include, such as a title, an image, body text, a caption or a call to action?
  • Which elements are optional, and which vary in length the most?
  • Which pages are most important to readers or to the organization?

The audit often shows that dozens of pages fall into a handful of types. That is the target: a small set of layouts, not one per page.

Decide what is fixed and what is flexible

Every template has fixed parts and flexible ones. Fixed parts carry identity and navigation: a header, a footer, a masthead, a page number position, a consistent heading style. Flexible parts hold the content that changes.

Flexibility needs limits. For each content area, decide:

  1. Length range. What happens with a very short headline or a very long one?
  2. Optional elements. Does the layout still work without the image, or without the caption?
  3. Image behavior. Are images cropped to a fixed shape, or do they keep their own proportions? Using consistent image cropping rules keeps pages tidy.
  4. Overflow. Where does extra text go?

Testing a template with extreme examples, such as the shortest and longest realistic content, reveals weaknesses quickly. A template that works only with perfect sample text will fail in real use.

Build on shared foundations

Templates should share the same underlying rules rather than each being a separate invention. That means:

  • the same grid and margins
  • one type scale applied consistently, so headings and body text relate the same way on every page
  • a small set of spacing values
  • shared styles for repeated elements like captions, quotes and buttons

When templates share foundations, you can add a new one later without it looking foreign. It is also what makes updating easier: change a style once and every page that uses it follows.

How many templates?

There is no standard number. A short brochure might need three layouts: cover, content page and back page. A magazine might use a dozen. A large website might need a few dozen, though many are variations of a base.

A reasonable guideline is to start with the fewest layouts that cover the real content, and add one only when a recurring need appears that existing ones handle poorly. Too many templates defeat the purpose, because choosing between them becomes a task in itself and small differences erode consistency.

It can help to define a base layout and a few variants, such as a version with a sidebar and one without, rather than separate designs.

Think about screen sizes and media

If the layout will appear on different devices, each template should specify how it reflows. A multicolumn layout on a desktop may stack into one column on a phone, and navigation might collapse. This is the territory of responsive layout, and it is simpler to plan from the start than to retrofit. Print templates have their own needs, including margins, bleed and trim, and facing-page behavior.

Emails, slides and social formats benefit from templates too. An email design template might set header, body and footer blocks, while a presentation template defines title, content and section-break slides.

Document and maintain

A template nobody understands will be misused. Short notes help: what each template is for, which content fits, and what not to change. A brief gallery of correct examples is often more useful than a long manual. Many teams fold this into a brand style guide.

Review templates periodically. Real use exposes gaps, and content needs change. Treat the set as something that evolves slowly rather than something fixed forever, but change it deliberately, so existing pages are not broken by casual edits.

Signs of a good set

  • A new page can be created without asking a designer.
  • The same type of content always looks the same.
  • Edge cases do not break the layout.
  • Removing or adding an optional element still leaves a sound page.
  • The set is small enough that people remember it.

Good templates tend to go unnoticed by readers. What they notice is that the publication is easy to navigate and feels coherent from page to page.

The complete guide to grids and layout systems

Grid Systems In Graphic Design
Read the guide

Keep exploring

Guides from other topics

All topics →