Develop Page Templates for a New Website
To ensure design consistency, ease of use, and to make engineering more practical, most websites use a small handful of different design layouts called templates. You’ll want to develop page templates when you make a new website or redesign an existing one.
These templates are designed to handle all the different kinds of content, messaging, and tasks that the website will require. To give you an example, the Monster Energy website uses only about 12–14 different layout templates to make up the whole website. Some of those templates include Home, All Sports Landing, Sports Landing, Athlete Detail, and News Item Detail. All athletes use the same Athlete Detail page template. The template is populated dynamically from a database with the athlete’s unique images and information.
The other thing to note about templates is that while they each allow for a variety of layout arrangements (of internal page content), the navigation is held in the same location throughout the site. In the example, the primary navigation is located vertically on the left, while the secondary “header” navigation goes across the top, and the footer navigation brings up the bottom.
Incidentally, this site has a good example of a super footer. A super footer is a footer-on-steroids that lives at the bottom of the page, as seen in the following figure,. It contains a number of redundant text links to all portions of the site, but notice that it is very keyword–rich by design. Super footers not only provide a quick means of navigating the whole site but are also an opportunity for SEO (search engine optimization): By injecting your site with more searchable words and phrases, you enhance your site’s natural search ranking when people search for those terms.
The information and wireframing process will ultimately determine the number and types of templates that you’ll need to design for a site. Once the different templates are identified, you can begin to design visual “comps” for each template.