BCLC.COM Templates Guide - 2015

bclc.com templates guide.

Don’t worry, we’ll still take your call.

This document is continually growing, so make sure to check back.

A dynamic graphic you only have to make once.

960x540

720x405

192x108

Sometimes.

On bclc.com we try to reuse graphics as much as possible which is why graphics are dynamically resized. Once you make a graphic at 960x540 it can be reused on other pages.

3

bclc.com homepage carousel 960x540

bclc.com home feature carousel TEMPLATE NAME:

home-carousel.psd SAVE FOR WEB AS JPEG MAX. FILE SIZE 25K

192x108

bclc.com home tile TEMPLATE NAME:

bclc-home-tile.psd SAVE FOR WEB AS JPEG MAX. FILE SIZE 20K

4

bclc.com homepage carousel

The homepage carousel has a few items you need to remember when designing an effective graphic.

cta buttons Learn More

Call To Action (CTA) buttons are placed on top of your graphic by the web team.

If need be you can build a faux button on your graphic but this is a rare acception. Just make sure the button has rounded corners.

Effective design where the button and controls are in proper areas.

Effective design where the button and controls are in proper areas.

Carousel controls are placed over top of the graphic by the web team.

Be sure your graphic has a darker background to they are visible.

As you can see by this example the button is in an odd spot while the controls overlap important information. Be sure to request to your designer there will be a button overlayed on top so they can design around this parameter.

5

Homepage tiles 224x126

megamenu tile TEMPLATE NAME:

bclc-home-tile.psd SAVE FOR WEB AS JPEG MAX. FILE SIZE 20K

212x119

home tile TEMPLATE NAME:

bclc-home-tile.psd SAVE FOR WEB AS JPEG MAX. FILE SIZE 20K

6

Winners tiles 2

480x134

240x134

winners tile

COLUMN TEMPLATE NAME:

winners_1col_720x134.psd 720x134

1

COLUMN

240x134

3

COLUMN

When saving out the 3 column tiles you want to create one continuous image across 720x134 then slice the image out.

7

SAVE FOR WEB AS JPEG MAX. FILE SIZE 20K

Lotto! product pages

The 3 column carousel is used throughout your pages and the size is only 720x405.

It gets better, if you are using this graphic across the site it can be resized dynamically.

Yah!

720x405

Lotto carousel TEMPLATE NAME:

lotto-3-col-carousel.psd SAVE FOR WEB AS JPEG MAX. FILE SIZE 45K

8

Corporate homepage

Corporate home TEMPLATE NAME:

corp-home.psd SAVE FOR WEB AS JPEG MAX. FILE SIZE 80K Live type is placed on top of graphic to the right and the Find out more> button is placed at the end by the web team.

Promo tile TEMPLATE NAME:

promo-template.psd SAVE FOR WEB AS JPEG MAX. FILE SIZE 12K

9

Corporate “who we are” page

Corporate three panel Rounded corner on the bottom left.

TEMPLATE NAME:

3-up-feature-singlerounded.psd SAVE FOR WEB AS JPEG MAX. FILE SIZE 50K

Regular square template TEMPLATE NAME:

3-up-feature-single.psd SAVE FOR WEB AS JPEG MAX. FILE SIZE 50K You might be making two of these for when all 3 are in place they all coincide with each other.

Example of copy placed by the web team.

Our Vision, Mission & Values Bringing fun to the fore in a responsible way. That’s what we do for you and for all British Columbians.

Here’s our story>

10

Corporate careers page

960x540

Corporate careers carousel TEMPLATE NAME:

host-local-gov.psd SAVE FOR WEB AS JPEG MAX. FILE SIZE ?????K This template has a bottom left rounded corner.

Live type can be applied by the web team. As you can see it is on the right side of the carousel which is left aligned. Below is an area where you can place a video for viewing.

11

GameSense page

960x540

GameSense feature TEMPLATE NAME:

gamesense-2-col-feature.psd SAVE FOR WEB AS JPEG MAX. FILE SIZE 150K This template has a bottom left rounded corner.

Live type can be applied by the web team. As you can see it is on the right side of the carousel which is left aligned. Below is an area where you can place a video for viewing.

12

Social media twitter LIVE AREA

Twitter header TEMPLATE NAME

twitter-1500x500.psd SAVE FOR WEB AS JPEG MAX. FILE SIZE 150K

Twitter profile TEMPLATE NAME

twitterprofile-400x400.psd SAVE FOR WEB AS JPEG MAX. FILE SIZE 80

13

This book was created by the creative department at BCLC.

bclctempbook-JUN15-2015

Any questions please contact Chris Scott or Chris Biggar

14