Difference Between a Design Template and a Page

When engaging with a new or potential client, we find there is often confusion about the difference between a template and a page. We believe much of this confusion stems from the fact that there are several different ways to scope design work for digital products such as websites, mobile apps, desktop software, portals, intranets or embedded systems. In order to successfully deliver solutions that our clients need, we start by understanding our client’s internal capacity and the structure of their team. Only then can we decide whether templates, pages or a combination of both is required.

Different organizations structure their product development teams in different ways. Large, product-oriented companies often have internal engineering teams and developers, but when it comes to smaller companies or start-ups, their in-house capabilities can be limited. Designs can only be fully executed into code with both front- and back-end development, so depending on the client’s set up and budget, Akendi will provide either:

• Flat design templates
• Flat design templates plus style guide and asset library
• Flat pages
• Front-end coded templates
• A fully coded (front-end) system with all pages required to form the website or application

Defining a Design Template vs. a Page

Once we understand our client’s capacity and budget limitations, we can recommend either a templated approach, a page approach or a combination of both.

Approach 1 – “Flat” Design Templates

Just like a dressmaker’s pattern allows a design to be replicated, a design template is a non-functional visual layout (often executed in Adobe Illustrator or Photoshop) that serves as a pattern for actual pages. The template illustrates the site’s visual structure. Templates create repeatable patterns for developers to follow. They have customized formats and structures that are then coded and filled in with content during the development phase. Design templates are meant to illustrate how most content for the website or application should be formatted and visualized. They will not show every control or element that may appear in the interface, but instead typically cover 80-90% of them.

The design templates that Akendi creates are custom templates designed specifically for each client based on their individual product and communication goals. They are unique and not based on generic templates – such as those purchased online or ones that sometimes come with a CMS, such as WordPress.

We utilize our Experience Thinking process to uncover user requirements, followed by information architecture and interaction design (wireframing) activities prior to starting the visual design phase. The visual design phase starts with conducting creative workshops resulting in a creative brief as a tangible outcome that informs the design approach, which then informs the approach to the templates, assets and pages created.

We design the templates first, THEN code the design. Usually we design between 5-20 unique design templates per website, SaaS app or other digital product. This approach works best if there is a creative/development team on the client side that can take our design templates and apply the design as the site/app is built.

Approach 2 – “Flat” Design Templates plus Style Guide and Asset Library

Once you have your design templates, these templates still need to be applied to each page on the site or app. On a website, there could be hundreds or thousands of pages that are built based on one template. It is possible to design each and every page, but it’s less cost effective and more time consuming.

Some of our clients need slight variations of those templates – minor things that don’t warrant a fresh new design template – to create a certain page. In these cases, the client’s in-house team can create every page of the site if they have the design templates plus the different visual assets and navigational controls of that site. We call this “templates plus asset library”. This is an extension of the design template approach described above and includes a visual style guide, which captures and explains the logic for the entire design including typographic decisions, visual imagery guidelines, assets, navigational controls and icons. This approach works particularly well for SaaS/web app design projects as it allows for many pages that are similar to be coded without a more significant design effort per page.

Approach 3 – “Flat” Pages

The most involved approach from a visual design perspective is to visualize every page on the site or app. This is the least cost effective and the most time consuming and is sometimes more than budgets and timelines allow. We are however often engaged to execute this approach as it eliminates any ambiguity around the design. What you see is what you get. Page counts of several hundred are not uncommon.

When applying design templates into each page, content documents and photo libraries (or a budget for stock images) must be available so all relevant information can be put on each page. This last approach is a good fit when the coding team is remote or outsourced completely and there is a particular focus on getting the UX right to the last detail. We find that more and more clients are looking for this level of completeness in our design deliverables.

All templates need to have supporting wireframes that outline the elements and functionality of the page.

The Pros and Cons of Design Templates and Pages

The approaches described above introduce various trade-offs, so it’s important to understand their impact.

“Flat” Design Templates

A repeatable page design that covers content and layout needs based on wireframes and covers 80-90% of content depending on the quantity of templates desired.

Pros

• The number of templates provided can be adjusted to meet budget needs.
• Typically 10-15 templates will cover 90% of the system.
• Most efficient in terms of time and budget.

Cons

• Sometimes internal teams struggle to imagine what every page will look like.
• Internal resources may not have the skill to create assets that aren’t provided.
• Isn’t usually presented as a task flow, but as a group of random pages.

“Flat” Design Templates plus Style Guide and Asset Library

Templates plus a style guide that contains each and every asset, visual element and content type for the entire system.

Pros

• No guessing by development team.
• Will cover 100% of system assets, but not every page needed to build out the system.
• Only creates what you need.

Cons

• More expensive than a set number of templates.
• More difficult to figure out all the parts and templates that will be required.

Every Page Visualized

Flat visual layouts for each and every page of the site or application.

Pros

• Stakeholders can see exactly how the site will look once completed.
• Very clearly outlines the design for developers.
• Most thorough.

Cons

• Most expensive.
• Most time consuming.
• Bulky and awkward for internal team to review.
• Client needs to provide all content to be inserted into the pages before they can be designed.
• A lot of redundancy.
• Many of the pages won’t be used in development, except for content.

What Design Templates Won’t Get You

If you have a group that needs to see their content/pages to feel that they are being heard – or you have an upper management team that may have trouble understanding how a system will come together – 10-15 templates may not meet their needs. You won’t capture each element and every control with 10 templates, and if responsive design is a factor, you will need many more templates to cover the targeted breakpoints.

How to Decide What You Need

It’s a challenge to know at the beginning of a large design project how many templates and pages will be required. Often, this isn’t clear until after the interaction design phase. The best way to handle this dilemma is to scope a reasonable number of templates (normally 10-15 per breakpoint depending on the size and complexity of the system) and then create a style guide that captures that design, including all relevant assets. A style guide is a good supporting document that captures the logic and the components of the design system. It’s valuable for capturing what you’ve bought, and extremely helpful if and when additional pages need to be added to the experience.

Our Recommendation

While each project is unique, an approach with design templates, a style guide and asset library is the often the best way to design an application or website. This is because it is normally cost prohibitive and inefficient to visualize each page of the wireframe as there can often be 100+ pages required to map out the key tasks contained in a wireframe document!

Typically, many of these pages will have a similar layout (or visual structure) as other pages, and visualizing each page individually takes up time and money that could be better used during the development phase of the project. With a templated approach, the development team replicates pages from the design templates in code to complete the solution. As such, unique page designs are often not necessary, saving your budget for other important tasks in your product development.

Hopefully, understanding the difference between a design template and a page will help with your next project!

Contact us today for more information about what could be right for you.