Designers, like chefs, make things that people consume.

I often think of the similarities between these two professions as each group has a specialized set of tools that they use.

Some design tools are highly specialized, while others — like templates — are fairly generic until you add content.

For chefs, they might use a bunch of different tools to create the food, but the final presentation to the end-user is almost always on a dish.

The specific size, color, shape, and material of the dish matter greatly to the chef.

Where the average person sees a plate or bowl, the chef sees a vessel to deliver the food they made for you. The chef knows that the food you taste won’t change because of the dish it is on, but how you perceive that food will likely change if the dish draws negative attention to itself.

Chipped, dirty, too small, too large — all could impact the food negatively.

Your content will fall under the same scrutiny from your user if the template attracts negative attention.

Broken links, busted design, poor type selection, too much space or too little — each a potential issue that could detract from your effort.

The outline of the considerations below should highlight some of the significant issues that plague most content templates. Avoid these problems, and you’ll be well on your way to delivering quality content your users will be eager to digest.

Style simplicity

For a template to be useful, it must be easy to implement. By limiting the number of styles and grid structures, adding content will be significantly easier.

While there isn’t a magic number of styles to use, it is pretty easy to identify what you’ll need.

• Headline (h1)
• Subhead (h2)
• A label or two (h3, h4)
• Body copy (p)
• Body copy (bold, italic)
• Caption

This list looks a small set of styles, but remember that each of them needs to be responsive. That responsiveness requires you to create at least two versions of each.

The grid structure that you utilize will also be relatively simple to construct. The example below covers many of the possible combinations you might use:

Source: newpragmatic.com

• Full width (large images, navigation)
• Container (most content)
• 1-column
• 2-column (even, off-center)
• 3-column
• 4-column

As with your typographic styles, the grid structure you use should morph as needed for responsive considerations. A design that is 2-column on mobile will likely expand to be a 3-or-4 column on desktop. Your design will adjust as you transition from one display to the next, but you have to dedicate time to address the issue adequately.

Responsive content

It’s easy to overlook how typography, images, illustrations, and diagrams will display at different sizes. This problem mostly applies to desktop assets that translate poorly to mobile devices, but the opposite can be true. The problem is quite common for new designers who overlook the issue when creating content templates.

Source: newpragmatic.com

As displayed above, an ideal presentation will likely require adjustments to the layout of the content from one device to the next. In addition to a new design, the size of the text and images you use will generally need adjustments as well.

The goal is to ensure that the content renders excellent on any device. That’s because you’ll never know where the user might view the content. They could be at their desk or on the go, so the content has to work for both.

The easiest way to protect against the issue is to design with a mobile-first mentality. This ensures you present the content well for small screens, and then you adjust it as you test out larger sizes.

Creativity within boundaries

If it takes discipline to build a template that can be used repeatedly, then it takes creativity to use it.

Templates shouldn’t make your work bland, but they should provide a sandbox to create different structures within. Think of your template styles and grid as LEGOs that we combine in different ways.

Content should directly influence each layout while operating within the boundaries of the template created.

Source: newpragmatic.com

In the wireframe above, I’ve created three layouts that could be used for an overview section. Each operates within the grid layout described earlier, and the basic typography should also be interchangeable.

So before you expand that template with new styles and structure, press yourself to be more creative with the existing pieces that you have.