ss15 cwi online media guidelines - john-fairservice.com · ss15 cwi collection online media...

SS15 CWIonline mediaguidelines

v1.119 January 2015

Burberry Limited © 2015 Private and ConfidentialNot for circulation

SS15 CWI CollectionOnline Media Guidelines

v1.119 January 2015

2

logos



v1.119 January 2015

3

Clearance zonesBurberry presents its name with understated confidence and clarity

There are specific minimum clearance zones to prevent our logos being crowded by other material. Do not put text or other graphic elements in these areas

The clearance zone is always based on the height of the Wordmark

Note that these are minimum clearance zones – where possible, allow more space

Clearance zones

Logos Simple Logo clearance zone

2H 2H

2H

2H

H



v1.119 January 2015

4

Small usage logo library

The series of small usage logos have been created for digital use only. They are to be used at 100% with no scaling.

Altering our logos weakens our Brand’s appearance and confuses the overall message. Never alter the supplied files.

White logosUse as supplied

Black logosApply solid #000000 colour overlay

Logos Small usage logo library

WHITE BLACK

325 pixels wide 325 pixels wide









v1.119 January 2015

5

typography



v1.119 January 2015

6

Burberry Capitals

Used for font size 18pt and above, in increments of 3 i.e. 21, 24, 27pt etc.Anti-alias set to ‘Crisp’.

Burberry Capitals Small

Optimal font sizes work best in increments of 3, 9pt being the smallest, then 12 and 15pt.Anti-alias set to ‘Crisp’.

Perpetua Regular

Perpetua should be used to impart emotive information. In Photoshop set anti-aliasing to ‘strong’ to help serif clarity.Anti-alias set to ‘Strong’.

Perpetua Italic

Perpetua Italic should be used as soft links. In Photoshop set anti-aliasing to ‘strong’ to help serif clarity.Anti-alias set to ‘Strong’.

Helvetica Regular

Helvetica Regular should be used for narrow or smaller formats.Anti-alias set to ‘Crisp’.

Note

Keep layouts simple and clean. Empty space around type is an asset that will focus attention on the message and adds a sense of importance to brand statements.

Typography Overview

HY Gothic (Korean)MS PGothic (Japanese)M Hei (Chinese)

저희 스토어의재 개장 행사에귀하를초대합니다

バーバリーの新装開店祝いに、ご招待します。

欢迎您受邀请参加我们商店重新开始的庆典活动

Digital primary typeface

Digital primary typeface at 18pt or larger

Secondary typeface for emotive copy. N.B. Latin characters only.

Secondary typeface for soft links. N.B. Latin characters only.

Burberry Capitals Small optimal font sizes

Supporting typeface for when there is limited space and informative copy

BURBERRY CAPITALS SMALL

BURBERRY CAPITALS

Perpetua Regular

Perpetua Italic

15pt (LARGEST)12pt9pt (smallest)

Helvetica Regular



v1.119 January 2015

7

buttons



v1.119 January 2015

8

Large button

Button textBurberry Capitals Small,12pt, #000000, crisp.Horizontally and vertically centered. Width is variable depending on text length.

Button graphicCorner radius 3px, #FFFFFF

Medium button

Button textBurberry Capitals Small9pt, #000000, crisp.Horizontally and vertically centered. Width is variable depending on text length.


Small button

Used when there is limited format width.

Button textHelvetica, 10pt, #000000, strong.Horizontally and vertically centered. Width is variable depending on text length.


Buttons Desktop

LOREM IPSUM

LOREM IPSUM

LOREM IPSUM

Large button

Medium button

Small button

34px

26px

26px

80%H

80%H

80%H

80%H

80%H

80%H



v1.119 January 2015

9

Buttons Tablet/mobile

Tablet

Button textBurberry Capitals Small, 21pt, #000000Anti-aliasing set to ‘crisp’Horizontally and vertically centered. Width is variable depending on text length.


Mobile

Button textBurberry Capitals Small, 18pt, #000000Anti-aliasing set to ‘crisp’Horizontally and vertically centered. Width is variable depending on text length.


LOREM IPSUM

LOREM IPSUM

LOREM IPSUM

Tablet button

Mobile button (full screen)

Mobile button (banner)

80%H

80%H

50%H 50%H

80%H

80%H

72px

60px

42px



v1.119 January 2015

10

keyline border



v1.119 January 2015

11

1px border

1px border

#000000Set at 50% opacity

When to apply 1px border

Please apply 1px border to all desktop ad units and mobile device units that are smaller than screen size.

When not to apply 1px border

1px borders are not applied to mobile device full screen ads or DOOH (Digital Out of Home) ads.

Keyline border

1px border, #000000 50% opacity



v1.119 January 2015

12

LEGIBILITY



v1.119 January 2015

13

Correct Incorrect

Too heavy. Too weak.

Incorrect

Logo and textLegibility settings

Logo and text effects

Logo and text effects such as outer glow are applied to help legibility when placed on top of an image. The strength of the effect may vary depending on the image. Refer to PSD templates for guidance.

When & how to apply a‘Legibility Boost’ layer

If logo or text are hard to read in a certain area of the creative apply a ‘legibility boost’ layer.

• Create a new layer between logo/copy and image.• Colour pick from immediate area.• Apply subtle light brush behind the characters that need to become more legible.• Set blending mode to ‘multiply’• Reduce opacity so it does not alter the image and only increases legibility.



v1.119 January 2015

14

STATICstandard banners



v1.119 January 2015

15

Static standard banners 300x600 (Double skyscraper)

Logo:BURBERRY_LOGO_CHILDREN_WHITE_251PX.pngBaseline of ‘BURBERRY’ sits at 30% height of format.

Image:1:2 ratio from extended crops guidelines

Copy:Burberry Capitals Small, Crisp12pt, #FFFFFFCentred between bottom of logo and top of button.

Button:Medium button

30%H

5%H



v1.119 January 2015

16

160x600 (Skyscraper)


Image:1:3.5 ratio from extended crops guidelines



30%H

5%H

Static standard banners



v1.119 January 2015

17

Static standard banners 300x250 (MPU)


Image:1.25:1 ratio from extended crops guidelines


30%H



v1.119 January 2015

18

700x440 (Large format)

Logo:BURBERRY_LOGO_CHILDREN_WHITE_251PX.png35% width of format Baseline of ‘BURBERRY’ sits at 50% height of format.Horizontally centred at 75% width of format.


Copy:Burberry Capitals Small, Crisp12pt, #FFFFFFVertically between bottom of logo and top of button. Horizontally centred at 75% width of format.


50%H

50%W


75%W

10%H



v1.119 January 2015

19

728x90 (Leaderboard)

Logo:BURBERRY_LOGO_CHILDREN_WHITE_251PX.pngBaseline of ‘BURBERRY’ sits at 50% height of format.Horizontally centred between children and right edge of format.

Image:Adapt of extreme wide crop from guidelines.


50%H

X X



v1.119 January 2015

20

970x250 (Billboard)

Logo:BURBERRY_LOGO_CHILDREN_WHITE_292PX.pngBaseline of ‘BURBERRY’ sits at 65% height of format.Horizontally centred at 75% width of format.

Image:Adapt of 3.7:1 ratio from extended crops guidelines




65%H

50%W 75%W

X

X

X



v1.119 January 2015

21

animatedstandard banners



v1.119 January 2015

22

Phase 1 Phase 2 End phase

25%H

Animated standard banners 300x600 (Double skyscraper)



Copy:Burberry Capitals Small, Crisp12pt, #FFFFFF

Phase 2:Baseline sits at 25% height of format.

End phase:Centred between bottom of logo and bottom of format.




v1.119 January 2015

23

Animated standard banners 160x600




Phase 2:Middle sits at 25% height of format.

End phase:Centred between bottom of logo and bottom of format.



25%H



v1.119 January 2015

24

Animated standard banners 300x250 (MPU)



Copy:Burberry Capitals Small, Crisp#FFFFFF

2nd phase:12pt, baseline sits at 30% height of format.

End phase:9pt, centred between bottom of logo and bottom of format.



30%H



v1.119 January 2015

25

Animated standard banners 700x440

Logo:BURBERRY_LOGO_CHILDREN_WHITE_251PX.png#000000 Colour overlay35% width of formatBaseline of ‘BURBERRY’ sits at 50% height of format. Horizontally centred in right panel.



Phase 2:Middle sits at 50% height of format.

End Phase:Centred between bottom of logo and top of button.


Phase 1 Phase 2

End phase/backup

50%H

50%H

25%H

10%H

50%W

50%W

50%W75%W

75%W

75%W



v1.119 January 2015

26

Animated standard banners Leaderboards 728x90

Logo:BURBERRY_LOGO_CHILDREN_WHITE_251PX.png#000000 Colour overlayBaseline of ‘BURBERRY’ sits at 50% height of format.

Image:Adapt of 5:1 crop from guidelines.

Copy:Burberry Capitals Small, Crisp#FFFFFF, 12pt, vertically centred in format height.

Button:Large Button

Phase 1/ End frame

Phase 2

Phase 3

50%H

50%H

50%H

65.5%W



v1.119 January 2015

27

Animated standard banners 970x250 (Billboard)

Logo:BURBERRY_LOGO_CHILDREN_WHITE_292PX.pngBaseline of ‘BURBERRY’ sits at 50% height of format.Horizontally centred at 75% width of format.

Image:Adapt of 3.7:1 ratio from extended crops guidelines

Copy:Burberry Capitals Small, Crisp#FFFFFF

Phase 2:12pt, Baseline sits at 50% height of format.Horizontally centred at 75% width of format.

End frame:9pt, vertically centred between bottom of logo and bottom of format.


Phase 1

Phase 2

Phase 3/ End frame

50%H

50%H

50%H

50%W 75%W



v1.119 January 2015

28

expandablebanners



v1.119 January 2015

29


25%H

38pxH

Expandable banners 300x600 (Non-expanded)




Phase 2:Baseline sits at 25% height of format.

End phase:Centred between bottom of logo and top of expand bar.

Cta copy:Perpetua, Strong,21pt, #000000Vertically and horizontally centred in bottom bar.

Cta bar:38px high#FFFFFF

Icons:#000000



v1.119 January 2015

30

Expandable banners 600x600 (Expanded)


Arrows:14px from the edge, vertically centred between top of format and top of cta bar.



Icons:#000000

38pxH

11%H

14px 14px

4px

4px

4px

4px

Icon alignment

Use background layer in PSD file to align icons in bottom bar. Remove background layer before preparing for final layout.

Background layer found in PSD

Icon final layout



v1.119 January 2015

31

728x90 Non-expanded


Image:Adapt of 5:1 crop from guidelines.

Copy:Burberry Capitals Small, Crisp12pt, #FFFFFFVertically centred in format height.

CTA bar:Copy:Perpetua, Strong21pt, #000000Vertically centred in format height.

Expand direction arrow:Centred between expand copy baseline and bottom of format.

Phase 1/ End phase

Phase 2

57%W

50%H

50%H

16.5%W

Expandable banners



v1.119 January 2015

32

Expandable banners 600x600 (Expanded)

Image:Wide format from crops guidelines

Arrows:14px from the edge, vertically centred between top of format and top of cta bar.



Icons:#000000

38pxH

22%H

14px 14px

4px

4px

4px

4px

Icon alignment

Use background layer in PSD file to align icons in bottom bar. Remove background layer before preparing for final layout.

Background layer found in PSD

Icon final layout



v1.119 January 2015

33

tablet



v1.119 January 2015

34

Tablet 1536x2048 (Portrait)

Logo:BURBERRY_CHILDREN_B_SMALL_WHITE_RGB.eps65% width of formatBaseline of ‘BURBERRY’ sits at 30% height of format.

Image:1:1.33 ratio from extended crops guidelines.

Copy:Burberry Capitals Small, Crisp33pt, #FFFFFFCentered between bottom of logo and top of button.

Button:Tablet button

5%H

30%H



v1.119 January 2015

35

Tablet 2048x1536 (Landscape)

Logo:BURBERRY_CHILDREN_B_SMALL_WHITE_RGB.eps37.5% width of format Baseline of ‘BURBERRY’ sits at 50% height of format.



Button:Tablet button

20%H

50%H

50%W 75%W



v1.119 January 2015

36

mobile



v1.119 January 2015

37

Mobile 640x100 (Banner)

Logo:BURBERRY_LOGO_CHILDREN_WHITE_251PX.png39% width of format.Baseline of ‘BURBERRY’ sits at 50% height of format.Horizontally centred between children and right edge of format.

Image:Adapt of extreme wide crop from guidelines.

Static

50%H

X X



v1.119 January 2015

38

Mobile 640x960 (Portrait)

Logo:BURBERRY_CHILDREN_B_SMALL_WHITE_RGB.eps78% width of formatBaseline of ‘BURBERRY’ sits at 35% height of format.



Button:Mobile button (full screen)

6%H

35%H



v1.119 January 2015

39

Skins

2015_SS15_CWI_SHOT_4_INFANT_UNCROPPED_RGB_A

AMBIENT BLUE

2015_SS15_CWI_SHOT_4_INFANT_UNCROPPED_RGB_ATo be used when no other banners are present.

AMBIENT BLUETo be used when other banners are present.Make sure other banners being used are of the same colour.

AMBIENT GREENTo be used when other banners are present.Make sure other banners being used are of the same colour.

AMBIENT GREEN

Usage

Blue skin Green skin

Blue coloured banner creative

Green coloured banner creative



v1.119 January 2015

40

Skins

1280 W

1600 W

1400 W

2000 W

Fireplace tall

Logo:BURBERRY_CHILDREN_B_SMALL_WHITE_RGB.eps43% width of site column

Image:2015_SS15_CWI_SHOT_4_INFANT_UNCROPPED_RGB_A_LOWRES

Copy:Burberry Capitals Small, Crisp15pt, #FFFFFFCentered between bottom of logo and top of site.

50% YY

X

43% X



v1.119 January 2015

41

Skins

1280 W

1600 W

1400 W

2000 W

Fireplace short

Logo:BURBERRY_LOGO_CHILDREN_WHITE_292PX.png





v1.119 January 2015

42

Skins

1280 W

1600 W

1400 W

2000 W


Sidepanel



v1.119 January 2015

43

Skins

1280 W

1600 W

1400 W

2000 W

Fireplace tall

AMBIENT GREEN



50% YY

X

43% X



v1.119 January 2015

44

Skins

1280 W

1600 W

1400 W

2000 W

Fireplace short

AMBIENT GREEN

Logo:BURBERRY_LOGO_CHILDREN_WHITE_292PX.pngHorizontally centred in site column width.Vertically centred in header area.



v1.119 January 2015

45

Skins

1280 W

1600 W

1400 W

2000 W

Sidepanel

AMBIENT GREEN



v1.119 January 2015

46

Skins

1280 W

1600 W

1400 W

2000 W

Fireplace tall

AMBIENT BLUE



50% YY

X

43% X



v1.119 January 2015

47

Skins

1280 W

1600 W

1400 W

2000 W

Fireplace short

AMBIENT BLUE

Logo:BURBERRY_LOGO_CHILDREN_WHITE_292PX.pngHorizontally centred in site column width.Vertically centred in header area.



v1.119 January 2015

48

Skins

1280 W

1600 W

1400 W

2000 W

Sidepanel

AMBIENT BLUE

ss15 cwi online media guidelines - john-fairservice.com · ss15 cwi collection online media...

Documents