Creating A Custom Template – Overview

What Is A Template?

A template is a preset format or layout for a document or file, used so that the format/layout does not have to be recreated each time it is used. Limelight Platform will work together with your creative team to develop a standard template that can be used across all your branded campaigns.

There are two (2) types of templates on the Limelight Platform:

Please review the links above to learn more about Website and Email templates, their module structure and the functionality of each module.

Limelight’s Template Process

Please review the documents below and submit a  ZIP folder containing all elements to Limelight Platform so we may begin your custom template building experience!

1. Limelight Design Guidelines

For All Templates:

Every section of the website should be composed in its own layer. When naming layers in your Photoshop file, please utilize the same nomenclature you would prefer to be used in the Limelight Platform Web Builder. Using layers will define pixel distances between sections and columns while coding the template.

For Email Template:

To keep compatibility among older email clients (such as Outlook), we suggest using a 1 column design. In this case, your desktop and mobile mockups should have a similar layout.

For Web Template:

We use  Bootstrap 3.3 as a base for all of our websites. For design purposes, this means:

  1. Our websites follow a 12 column grid - of which any combination can be made (2 column design, 3 column design, 4 column design, and any combination of those)
  2. There is a default 15px padding on every column (the distance between the content of 2 columns would be 30px)

Although we do use Bootstrap as a base, its always possible to customize any element. No need to note changes, as the design elements in your Photoshop files will note the changes. 

2. Photoshop (.PSD) or Sketch Files (.sketch)

For Email Template:

Email templates have a fixed width of 650px. One Photoshop or Sketch (.PSD or .sketch) template file is required per email template. One PSD template should be versioned for desktop and mobile at 650px. Emails will be responsive to mobile when designed on the 650px size.

For Web Template:
Limelight Platform requires three (3) different versions of a template design for desktop, tablet, and mobile. If a website has multiple page templates, please submit three (3) versions per page template.
Please submit the following versions:
  • Desktop: Suggested size 1280px width
  • Tablet: Suggested size 760px width
  • Mobile: Suggested size 480px width
Please note:
Limelight website templates DO NOT support background images so please design your mockups accordingly.

3. Creative Assets

Please submit a ZIP folder with all images and creative assets used in the design for each template version (desktop, tablet, mobile).
Creative assets should include items such as:
  • Logos
  • Banner Images
  • Custom Buttons
  • Branded Images with custom fonts
  • Font Files
  • Social Icons
Fonts:
If special fonts are required, please submit a folder with the following font formats:
  • .eot
  • .ttf
  • .woff
Buttons:
There are two methods to set up buttons:
  • Provide Button background without text: This method is good for repeating usage of the same button style throughout the site
  • Provide Button with text: This method is good for custom fonts and irregular button shapes
  • Minimum size for buttons:  100px width
As a general guideline for images used by Limelight Platform:
  • All images must be high resolution in .PNG or .JPG format
  • Web Banners must be a minimum of 1280px width
  • Website Logo must be a minimum of 280px width
  • All images should be high resolution in .PNG or .JPG format

4. Documents

Please provide a ZIP folder containing all official copy and non-creative documents used within your template design.
Brand Standards Document:
Include a copy of your company brand standards. Please ensure the following items are addressed:
  • List of Fonts
  • Font Attributes (point, weight, colour, font name - Please indicate Header and Paragraph tags)
  • Company/Project Colours
For Web Template:
Documents can include:
  • Legal Documents
  • Approved Copy
  • Brand Standards Document
For Email Template:
Documents can include:
  • Email Copy
  • Legal Copy
  • Social Links
  • Brand Standards Document

Still need help? How can we help? How can we help?