DIFM Simple

LIGHT templates are developed for the production of sites where the actual production time is limited, meaning there is only time for a few things to be customized for a customer's final website. MASTER templates in this group come from template base layout designs A, B and C. For each MASTER template there are then four pages on the site with specific page compositions to futher allow for fast production.  

On this page we have described the concept for the production of MASTER templates and specified a set of dogma rules that make it easy for you to produce both STYLE templates and final customer websites.

Concept for MASTER templates

MASTER templates for the LIGHT template group are constructed in a way that is optimized for a quick production of a website. 

TEMPLATE FRAME DESIGNS:

We have used Template Base Layouts A, B and C to develop MASTER templates in the LIGHT group. They only use black and white skins, so there are no colors in the basic design.

CSS
HEADER + FOOTER

We have developed a system for Headers and Footers where we've set a dark header and a dark footer for each template base layout design as well as a light header and a light footer for each. All typography in headers and footers are either black or white depending on whether it is a dark or a light header/footer so you can quickly change the background color but keep the text color to quickly change the look and feel of the top and bottom of the site.


TEXT STYLING
Text style is based on the chosen skin. 

 

PAGE TEMPLATES
There five different pre-definded page compositions in LIGHT MASTER templates, a homepage, a product page with a subpage, a contact page and an about page. 


 

Dogma Rules for creating STYLE templates

In LIGHT templates only very little needs to beedited in order to optimize production time. We have below some 'dogma rules' to show how you can quickly develop a series of STYLE templates in the LIGHT category. 

CONCEPT IMAGES / PATTERNS
Images are the most time consuming elements to find in the production process. Therefore we recommend you start with an industry-specific stock photo and then adjust the style afterwards.
Choose a good 'concept' image that can be used in the Jumbotron module on the hompage in TEMPLATE BASE LAYOUT A or as the background top image in TEMPLATE BASE LAYOUT C, etc. 

SKIN CHOICE
Skin choice = font choice. Choose the skin/font that works best for the chosen concept image. 

CSS
HEADER + FOOTER
Find the colors you'd like for the header and footer (try and complement the concept image's colors perhaps). If an immage or an industry requires a certain style, you can choose to give the menu texts a color, maybe the selected menu point and then you can also change the size of the menu if needed as well. 

TEXT STYLING
Keep the most important text elements as the are defined in the skin (colors and sizes).

PAGE TEMPLATES
The defined page templates in MASTER templates should be kept as is, no edits needed.

 

Dogma Rules for transforming STYLE templates into a CLIENT WEBSITE

The essence of LIGHT templates is that you choose a STYLE template and make as few edits as possible to create the final website for a customer. The most time consuming element in producing a site is to create the style. Therefore it would be beneficial if the customer already has chosen a STYLE template they like, so the edits needed are just a few color adjustments as and then adding a new 'concept photo', logo and text.

It will of course be different from customer to customer what requires adjustment, however it should be very few things. See below an example of what we mean.

CONCEPT IMAGES / PATTERNS
Find a concept image for a customer (stock photo if they don't have anything you can use). Add the image to the site (Jumbotron if A base layout, Background image if C design, etc). 
Upload their logo and see if it works for Mobile view, if not just hide it in mobile view. 
Place in a content image (portrait in the About page for example). 

CSS
HEADER + FOOTER
Adjust the colors in the header and footer using colors in their logo or the colors agreed during the sales process.

PAGE TEMPLATES
Edit or adjust the modules on the page based on what you agree with the customer, though as few as possible.