Updated: 27.06.

12

4seven Guidelines

Guidelines Contents

Page No. 3 46 7 8 9 10 11 12 13 14 15 1617 1820 21 22 23 24 25 2627 28 29 30 31 3233

Contents Introduction Logo Isolation area Scale Logo usage Colour Typeface Typography On screen presentation Gradient background Information colour Tuning information On screen typography Credit squeeze Credit panel dimensions Lozenge Lozenge dimensions Bugs Menus Public announcement EOP & BOP Barker Breakdown slide Tweesers 34 3536 37 38 39 40 Offair Examples Branding ratio Grids Portrait examples D6 example

v. 1.0

Guidelines Introduction

These guidelines outline the elements which make up the 4seven brand. They include an overview of the identity and all the rules for producing on air packages. This will help you in designing and producing exciting 4seven designs with a high degree of creative flexibility.

v. 1.0

Identity Logo

This is the 4seven logo.

v. 1.0

Identity Logos

The 4seven logo has two versions when being used off screen. One for light backgrounds and one for dark.

The 4seven HD logo.

v. 1.0

Identity Logos

The standard colour of the seven is 7turquoise, see page 10 for colour values . In some cases a mono version with a 4 light grey or white seven can be used.

v. 1.0

Identity Isolation area

The 4seven identity should always be surrounded by a minimum area of space. The area of isolation ensures that headlines, text or other visual elements do not encroach on the logo. The area is defined by using one cell of the logo which is referred to as x. A margin of clear space equivalent to x is drawn around the logo to create the invisible boundary of the area of isolation. This area of separation is a minimum and should be increased wherever possible.

v. 1.0

Identity Scale and proportion

Print There are no predetermined sizes for the 4seven logo. Scale and proportion should be determined by the available space, aesthetics, function and visibility. There is no preset maximum size for the 4seven logo. In print the minimum size is 6mm. For digital uses the minimum size for the standard logo is 25 pixels. 25 pixels is the smallest size apart from when using an ICO. There is a specific file for ICOs which is a 16px tall file.. 6mm

Digital

ICO

16px

25px

v. 1.0

Identity Logo usage

Distorted When using the 4seven logo the following rules should be adhered to at all times.

Amended

Colour

Imagery

The logotype should never be manipulated, stretched, distorted or cropped.

The relationship between the four and the seven should never be changed.

The logo should never be placed on a unspecified brand colour. See page x for colour settings.

Take care when placing the logo over an image. It should never obscure the focus of the picture/footage.

Logo colour

Visual effects

Altered

The logo brand colours should not be switched in their position. The supplied logos should be used at all times.

The logo should never be have drop shadows or other graphic effects added.

The logo should not be altered in any way.

v. 1.0

Identity Colour

10

Brand colours The 4seven brand has four master colours which are used for branding and backgrounds. It also has three secondary colours which are used for typography and supporting graphics. Tints of these colours can be used where required. See on screen guidelines for further colour usage. White 255/255/255 0/0/0/0 White 4 dark grey 68/60/58 63/63/63/50 PMS 411 4 light grey 128/122/120 51/46/46/10 PMS 409 7 turquoise 99/204/191 56/0/32/0 PMS 3262

Secondary colours

1 teal 157/218/211 37/0/20/0 PMS 325

2 teal 66/148/155 74/26/37/2 PMS 7474

3 teal 105/155/155 62/26/38/1 PMS 7475

v. 1.0

Identity Typeface

11

The three typeface weights The 4seven identity uses a bespoke cut of the Channel4 typeface called 4seven which comes in three weights. On screen graphics should always be set in 4seven Headline. 4seven is supplied in the Open Type format and is supported by PC and Mac. You should always use this version.

4seven Headline abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVW XYZ&0123456789*#@+<=>%?$,.:;...!?(/) [\]{|}TM ao`~^???? -_ 4seven Menu abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVW XYZ&0123456789*#@+<=>%?$,.:;...!?(/) [\]{|}TM ao`~^???? -_ 4seven Text abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWX YZ&0123456789*#@+<=>%?$,.:;...!?(/)[\] {|}TM ao`~^???? -_

v. 1.0

Identity Typography

12

Typographic design should be applied using the following parameters: Weight 4seven communications use both Text and Menu weights of the 4seven typeface. Text should be used for all body copy and Menu where appropriate for titling and other uses. Style Manipulating the typeface is prohibited. Stretching, condensing, outlining and drop shadow must never be used. Spacing Type should be set at the default values for the 4seven typefaces. In some circumstances it may be necessary to adjust the spacing between individual characters manually. Sizing The smallest size permitted is five point. This should only be for certain print uses such as credits. There is no upper size limit. Alignment 4seven fonts should be generally ranged left in all uses. Leading The leading on 4seven headline should be x1.1 or x1.2 depending on the type size. So 10pt type has a leading value of 11pt or 12pt. See page 17&18 for further on screen details. 4seven Menu and 4seven Text should have a leading value of x1.2. So 10pt type would be set on 12pt. Off screen leading up to 21pt should be set at x1.2. Above 21pt leading can be adjusted manually. The ascenders and descenders in the typeface should never touch. Colour Type can be set in any colour from the 4seven colour palette.

v. 1.0

OSP Guidelines

13

On screen presentation Promo packaging

v. 1.0

On screen Gradient Screen tone

14

During the day the background colour of the OSP graduates through a light to dark palette. At set times (shown right) the OSP backgrounds take on a gradually darker tone. The information is displayed in set colours which relate to time. See page 15 for this information. The RGB values for the average values for each panel are indicated right.

216 214 217

150 145 142

187 183 184

126 121 118

157 152 152

116 110 107

101 95 93

74 68 65

Gradient 01: 9.00am 12.00pm

Gradient 02: 12.00pm4.00pm

Gradient 03: 4.00pm7.00pm

Gradient 04: 7.00pm9.00pm

82 74 73

59 53 51

62 55 54

44 39 37

39 34 33

28 24 22

Gradient 05: 9.00pm 10.00pm

Gradient 06: 10.00pm12.00am

Gradient 07: 12.00am2.00am

v. 1.0

On screen Information colour

15

The colour of the information displayed on the OSP depends on two factors. The first is what gradient is currently in use and the second which side of the branding the information appears on. The diagram shown here displays the correct colour for each gradient for the two pieces of information. TX info should always appear in white apart from on gradient one when on the left. Show info should always be in 2teal unless on gradient one left and right and on gradient two on the left. To see expanded colour values see page 10 of these guidelines. Left: TX Info Gradient
Colour

4 dark grey 68/60/58 7 turquoise 99/204/191 1 teal 157/218/211 2 teal 66/148/155

Right: TX Info 03
White

01
4DarkGrey

02
White

04
White

05
White

06
White

07
White

01
White

02
White

03
White

04
White

05
White

06
White

07
White

Left: Show info Gradient

Colour

Right: Show info 03

1teal

01
2teal

02
2teal

04
1teal

05
1teal

06
1teal

07
1teal

01
2teal

02
1teal

03
1teal

04
1teal

05
1teal

06
1teal

07
1teal

v. 1.0

On screen Tuning information

16

The following rules should be followed for all programming information. Dates These should be written as Day Date Month or Date Month So for example it should be Wednesday 20th March or 20th March and not written as Wednesday 20 March.

v. 1.0

On screen Tuning information

17

Prefixes New Series, Next or After should be prefixed to days or dates. Time Information is formatted as 9.00pm or 9.30p and not 9pm. Note Long programme titles or TX info should break over two lines where applicable. New Series should be matched to the TX info colour. New Series is a separate piece of information so a return should be used for the next line of information.

v. 1.0

On screen Typography

18

4seven headline is used for on-air graphics. It is used in two sizes for most on-air situations. These are the sizes at full HD resolution. N.B. The TX info and title are always the same type size, they vary in colour.

Sizes Type size A Used on Menu Pub Anno EOP/BOP Barker Breakdown Tweesers Type size B Used on Credit Panel Lozenge

Adobe CS/Final Cut Pro 54pt 64.8pt leading (x1.2)

DS Nitrus TBC

47pt 51.7pt leading (x1.1)

TBC

v. 1.0

On screen Typography

19

Make sure you use the correct leading space between the TX information and the programme information. There are two values, see page 18 for details.

Either x1.1 or 1.2 Either x1.1 or 1.2 Either x1.1 or 1.2

v. 1.0

On screen Typography

20

The layout of on screen typography is constructed on a grid which should be used at all times. It is flexible enough to handle all the variations within the on screen package. The grid is constructed of eight columns and four rows. Place the type in relation to the branding using a clear space at all times. The baseline of the first line of copy should sit on the top of a row where possible. The copy should be left aligned at all times.

Layout examples

v. 1.0

On screen Credit squeeze

21

On both styles all programme information is in type size B. The background on the 4seven credit squeeze is one of the seven gradients, see page 14 for details. On the 4seven credit squeeze the TX info and URL/Hashtag is in white with the programme information set in 1 teal or 2 teal depending on the gradient. For the Channel 4 credit squeeze see Channel 4 guidelines for details.

Double panel credit squeeze

Channel 4 double version

v. 1.0

On screen Panel dimensions

22

1920 PX

Shown right are the dimensions for the credit squeeze double panel.

540 PX

603 PX

975 PX

1004 PX 1080 PX

960 PX

v. 1.0

On screen Lozenge

23

On both styles all programme information is in type size B. The background on the 4seven credit squeeze is one of the seven gradients, see page 14 for details. There is a maximum of three lines of copy with the TX info in white and programme information in 1 & 2 teal depending on the gradient background. See details on page 15 for using the correct colours. For the Channel 4 lozenge see Channel 4 guidelines for details. 4seven lozenge Channel 4 double lozenge

Next Next One Born Every One Born Every Minute Special Minute Special

v. 1.0

On screen Lozenge dimensions

24

1920 PX

Shown right are the dimensions for the lozenge panel.

960 PX

1080 PX

850 PX

250 PX

178 PX

Next One Born Every Minute Special

176 PX

v. 1.0

On screen Bugs

25

The bug sits top left in a 16:9 safe area. Shown here are the standard and HD versions.

4seven Bug

4seven HD Bug

v. 1.0

On screen Menus

26

There are two menu types. One for when three shows are included and the other for one and two shows. They are the same apart from the placement and animation of the typography. On a two and three up the type animates from the base of the copy block. On a one up it animates off the show title X height. Menu type animates by a percentage of 25% from its smaller to larger state. The type is set at size A before being animated. The leading return between the type blocks is 75% of a normal return. 4seven one up menu example 4seven two up menu example

4seven three up menu example

v. 1.0

On screen Menus

27

Menus example demonstrating how the animation through the three shows is realised.

v. 1.0

On screen Public announcement

28

There are four types of public announcement message. All copy is set at type size A. Information is set in white and 1 and 2teal depending on the gradient.

Full-frame consumer with heading

Full-frame consumer

Full-frame consumer no image

Full-frame longer text

v. 1.0

On screen EOP/BOP

29

The EOP/BOP copy is set in size A. One set of information is in white or 4dark grey, the other in 1 or 2 teal depending on the gradient.

v. 1.0

On screen Barker

30

The copy is always set in size A. The barker only appears in gradient 1 so the information is set in 2 teal.

v. 1.0

On screen Breakdown slide

31

The Breakdown slide is always set on gradient 4. All information is set in size A in white and 1 teal.

v. 1.0

On screen Tweesers

32

The tweesers show tweets or other information on screen in sets of two upwards. The tweet or review goes first, followed by the source or username. They are setup so they can take up to 140 characters including spaces for the main content and up to 30 characters for the source. Type is set in size A always. There are six colour combinations see page 33 for details.

Example layout.

Maximum character lengths.

v. 1.0

On screen Tweesers

33

The three teal colours are the background colours for the tweesers. Their colour values can be seen on page 10.

Background: 1teal Text: 2teal and white

Background: 2teal Text: 1teal and white

Background: 3teal Text: 1teal and white

Background: 1teal Text: 4dark grey and white

Background: 2teal Text: 4dark grey and white

Background: 3teal Text: 4dark grey and white

v. 1.0

Off Air Guidelines

34

OffAir guidelines

v. 1.0

Off Air Examples

35

The 4seven logo is more than just a graphic badge added at the end. It should lead the layout of the page with its placement dictating the rest of the communication. Type should always be left aligned. See page 12 for all other typographic rules.

The very best of 4 from the last 7 days

Available on Freeview, cable and satellite

The very best of 4 from the last 7 days.

Available on Freeview, cable and satellite

The very best of 4 from the last 7 days

Available on Freeview, cable and satellite

The very best of 4 from the last 7 days.

Available on Freeview, cable and satellite

In this example the position of the seven dictates the vertical positioning of the copy.

The branding on the right hand side in this piece dictates the larger copy line. The smaller sub line sits on the bottom margin.

v. 1.0

Off Air Examples

36

It is important to take the length of the copy into account when positioning the branding on the page. See Grids on page 38 for further guidance.

The very best of 4 from the last 7 days.

Available on Freeview, cable and satellite

The very best of 4 from the last 7 days in a longer format headline.
#hashtag/URL

A shorter line length.

A longer line length which moves the branding upwards, whilst keeping it within the margin.

v. 1.0

Off Air Branding ratio

37

When creating a piece of communications it is important to get the ratio of brand to content right. How and where the logo corner is placed is flexible, with the branding being able to be positioned on the left or right of the page. In this format a ratio of two to three is used.

Branding

Content

Content

Branding

An example with the branding on the left hand side.

An example with the branding on the right hand side.

v. 1.0

Off Air Grids

38

A grid should be used on all off air communication. The grid is there to help place the elements of the page to create a harmonious design.

The very best of 4 from the last 7 days in a longer format headline.
The very best of 4 from the last 7 days
Available on Freeview, cable and satellite

Showing how you could achieve a longer message at the expense of the branding space.

The very best of 4 from the last 7 days

Available on Freeview, cable and satellite

#hashtag/URL

Example grids on landscape and portrait formats.

v. 1.0

Off Air Portrait examples

39

The examples shown right show how the same rules apply to portrait formats.

The very best of 4 from the last 7 days in a longer format headline.
#hashtag/URL

The very best of 4 from the last 7 days in a longer format headline.
#hashtag/URL

The very best of 4 from the last 7 days in a longer format headline. Content
#hashtag/URL

The very best of 4 from the last 7 days in a longer format headline. Showing how you could achieve a longer message at the expense of the branding.
#hashtag/URL

Branding

This example shows larger branding.

The grid shows how the elements are placed in the page.

The branding to content ratio is flipped in this tall format.

This ratio can be easily adjusted to take more copy.

v. 1.0

Off Air D6 example

40

This digital D6 out of home advert shows all the rules laid out in practice. The branding is in the middle in this case and takes into account the text above and below it. The type is set in white and teal1. See page 10 for details.

4seven Channel 4s most popular and talked about shows from the last 7 days.

A new channel available on Freeview 47 | Freesat 127 | Sky 140 | Virgin 195

v. 1.0

Channel4 2012

For further information please contact; Louise Oliver Email loliver@channel4.co.uk Phone +44(0)20 7306 6479

Design manvsmachine.co.uk