BARREL

Website design is essentially an ongoing conversation. So to help bring everyone from clients to developers into the fold, the UX team at Barrel created the Template Table. It’s a simple cheat sheet that provides a high level overview of the content and planning of a project.

A template consists of a unique structure and a set of content types that can apply to different pages. For example, a template that we internally call the “Standard Secondary Template” often applies to the About Us, Our History, and Individual News pages – all of which may follow the same layout structure and content types. We typically aim to have as few templates as possible in a website to promote more efficient web development and visual design consistency throughout the site. When we wireframe, we typically design just the templates instead of all the pages that the templates may apply to.

A pain point of templates is keeping track of them all, along with their corresponding pages, when discussing the project. To help account for all pages, we created a “cheat sheet” for clients and team alike to understand at a glance which pages correspond to which templates. Hence the Template Table was born. Here is an example:

The Template Table is meant to be fairly high level. Everything is listed in brief bullet points, which makes it easy to read and skim. Low-fidelity wireframe thumbnails are used to help visualize the page. Also, we designed the table to accompany the site map, since it doesn’t replace the tree view of the site’s navigation structure: template codes (HOME, U1, U2, etc.) correspond to those used on the site map.

Great for Clients

This table format helps clients see the relationship between templates and pages in a way that’s easy to discuss.

Most of all, the Template Table helps clients focus on content types. At this stage we want the conversation to be about the content, especially before we begin designing any wireframes. The content should inform the design and the structure.

Great for Developers

At Barrel, we want developers in the loop throughout the UX phase. The Template Table provides them with an early overview of what content types and post types are to be expected when building the website. When equipped with this information, our developers are able to begin setting up the WordPress backend without having to see any designs or wireframes. This helps move the project along quickly. UX designers can point out any different variations of a template so that the developer can plan to accommodate those variations.

Great for Documentation and Reference

We keep the Template Table document updated as edits to the content and templates arise through client conversations and various UX decisions. Later on in the project, team members and clients may forget some of these earlier conversations and decisions. This is where the Template Table becomes the ultimate project cheat sheet. Even for communication purposes, the template code names help clients speak the same language as us.

Look, No Need for High-Fidelity Wireframes!

In Template Tables, low-fidelity wireframes are essentially already completed, and the Content Types column lists exactly what goes on the template. If the templates are straightforward enough, the visual designer will be comfortable working right off the Template Table, and skip creating high-fidelity wireframes of all templates to show to the client. Clients will develop a pretty good understanding of how content hierarchy and basic structures work after reviewing a Template Table, which is what wireframes try to communicate anyway. With no need for a prolonged wireframe phase, clients are often happy to go straight into visual designs.

Of course, not every template will be that clear and straightforward based off the Template Table, and we will still do a couple of high-fidelity wireframes to clarify a lot of the detail-level uncertainty with key templates. But spending time on 2-3 high-fidelity wireframes is a lot more efficient than creating wireframes for all 12 project templates.

At Barrel, we’re continuously evolving and improving the way we work, and likewise our tools evolve, too. We’ve been implementing modular design methods, which allows us to design and build in terms of modules rather than templates, and have found the same table format helpful for organizing and planning modules. Regardless of templates or modules, the table is all about about being able to articulate, plan, and communicate the content efficiently to both the client and the team.

Download an example Template Table

(.zip of an InDesign .idml file for CS4 and up)