Create page templates that keep your website consistent as content grows

Category: Web Design and UX

A website can look tidy at launch and still become difficult to use after a few years. New services are added, different employees publish content, and campaign pages are built under time pressure. The result is often variations in headings, buttons, navigation and page layouts that users have to interpret anew on every page.

The solution is not to make every page identical. The business needs a limited set of page templates that give each piece of content a clear role. A service page should help customers understand and assess an offering. An article should convey knowledge. A contact page should make it easy to choose the right point of contact.

Good page templates connect structure, navigation, typography, visual identity, accessibility and conversion. They also give editors clearer guidelines, so quality does not depend on who publishes the content.

Start with the page’s purpose, not its appearance

Before discussing colours, images and components, you should define what each page type should help the user accomplish. A template without a clear purpose often becomes a collection of optional content blocks. The editor then ends up designing the page from scratch every time.

Create a brief contract for each page type:

• Target audience: Who typically comes to this page?
• User need: What question or problem should the page address?
• Primary content: What must the user understand before taking the next step?
• Primary action: What is the most natural next step?
• Secondary action: What can the user do if they are not ready?
• Navigation role: Where does the page sit within the website’s structure?

For a service page, the main purpose may be to explain who the service is for, what it includes and how the customer can get started. The primary action might be to request an assessment. The secondary action could be to read a relevant customer story or view related services.

This clarification makes the design work more precise. It also prevents every page from getting the same standard buttons, regardless of what the user actually needs.

Choose a small number of page types with clear distinctions

Most corporate websites can manage with a clear set of basic templates. These might include:

• Home page
• Service overview
• Service page
• Industry or audience page
• Article or expert content
• Customer story
• About us or employee page
• Contact and form page

Two page types should only be separate if they have different purposes or require different structures. If the only difference is a different hero image, you probably do not need a new template.

At the same time, one flexible template should not be used for everything. When editors can choose freely from many blocks, pages without a clear sequence easily emerge. Flexibility should exist within fixed frameworks: some fields and sections are mandatory, some are optional, and certain combinations should not be possible.

Give each template a predictable structure

Users need to understand the page quickly. They should be able to see early on where they are, what the page is about and whether the content is relevant. The top of the page should therefore follow a recognisable structure.

A service page can start with a category or breadcrumb trail, followed by a precise main heading, a brief explanation and one primary action. The page can then answer key questions in a natural order:

1. What is this?
2. Who is it for?
3. What problem does it solve?
4. What does the delivery include?
5. How does the collaboration work?
6. What should the customer do next?

The sequence should not be dictated by the content blocks offered by the design tool. It should follow the user’s need for information. Internal disciplines and departmental structures are rarely a good starting point for the customer’s journey.

Let the navigation show the context

A page template must work together with the main menu, local navigation and internal pathways. If users arrive directly from a search or a shared link, they often lack the context provided by the homepage.

Therefore, clearly show which part of the website the page belongs to. A breadcrumb trail can be useful on websites with multiple levels. On extensive service pages, a local content menu can make it easier to jump between topics. Related pages should be selected because they are relevant, not because there is room for three cards at the bottom.

Avoid using completely different terms in navigation labels and page headings. If the menu says “Services”, the landing page says “What we deliver”, and the subpages use internal product names, users must work out how the terms relate to one another. Controlled language is an important part of the user experience.

Make typography part of the template

Typography is not just about typefaces. It determines how easy content is to scan, understand and read. In page templates, you should define how headings, introductions, body text, lists, captions and buttons are to be used.

A good template limits the number of text styles and ensures clear distinctions between levels. Heading levels must follow the content structure, not be selected based on the desired size. If a subheading looks too large, the style should be adjusted in the design system rather than the editor skipping a level.

Also set practical limits for the amount of text. A hero section should not depend on a three-word heading to work properly. Test the template with long Norwegian compound words, realistic service names and several lines of text. This reveals problems that do not appear with short sample texts.

Preserve the identity without sacrificing functionality

Visual identity should make the company recognisable, but it must work for everyday publishing. Define how the brand’s colours, shapes, images and graphic details are to be used in each page type.

This includes deciding which background colours can be combined with which text colours, how prominently brand colours should be used, and which image style suits different types of content. A brand colour can work well as an accent or button, but may be poorly suited as a background for long texts.

Also be clear about what should not be varied. Buttons with the same function should look the same. Links should be recognisable across page types. Cards, form elements and alerts should not get a new look every time a new campaign is launched.

Build accessibility into the standard solution

Accessibility is easier to maintain when the right choices are standard in the template. Editors should not have to check contrast, keyboard order and form labelling from scratch on every page.

Page templates should, among other things, ensure:

• Logical heading structure
• Sufficient contrast between text and background
• Visible indication when links and buttons receive keyboard focus
• Link text that makes sense without the surrounding text
• Form fields with clear labels and understandable error messages
• The ability to provide good text alternatives for meaningful images
• Content that works when enlarged and on narrow screens

Test the templates with real content, a keyboard and different screen sizes. A component may work on its own but cause problems when several components are combined. For example, a fixed action button may cover content on mobile, while a local content menu may be difficult to use with a keyboard.

Link conversion to the purpose of the page

Conversion does not mean that every page should push for an enquiry. An early-stage visitor may need professional information, while a customer looking for contact details wants a quick route to the right person.

Therefore, define the desired action for each page type. On an article, the next step may be to read a more detailed service page. On a customer story, it may be to see how the company handles similar assignments. On a contact page, it should be easy to choose between a phone call, email, form or a specific contact.

The placement of the action should follow the content. Users should receive enough information to understand what will happen after clicking. A button labelled “Submit” is less clear than one describing what will be sent or ordered. Also explain what users can expect afterwards, particularly with forms and enquiries.

Test the template before filling the entire website

Build one realistic page of each type before producing content at scale. Use long headings, short texts, missing images, extensive lists and different action links. Test both ideal and challenging cases.

Then carry out a simple review with representatives from design, development, content and the business:

1. Does the user understand the page’s topic and place in the site?
2. Is the content presented in a logical order?
3. Are the navigation and next steps clear?
4. Does the typography work with realistic Norwegian content?
5. Is the brand recognisable without disrupting reading?
6. Can the page be used with a keyboard and enlarged display?
7. Does the editor know which fields are mandatory?

Errors discovered in a page template will otherwise be repeated across many pages. It is therefore more efficient to quality-assure the template thoroughly than to repair each published page later.

Manage page templates as a working tool

Page templates are not just a design deliverable. They are a shared working tool for marketing, communications, sales and publishing. Each template should have a short description of its purpose, mandatory fields, recommended content order and permitted variations.

When a new need arises, you should first ask whether an existing template can meet it. If the answer is no, you must clarify whether the need is lasting and recurring before creating a new page type. This helps prevent the website from gradually filling up with bespoke solutions.

A good set of page templates makes the website easier to use and easier to manage. Users encounter consistent language and interfaces, while editors receive frameworks that help them publish effectively. It is this combination that enables web design to stand the test of time.