DIGITAL STYLE Guide. NOVEMBER v2.0

Transcription

1 DIGITAL STYLE Gude NOVEMBER v2.0

2 INTRODUCTION Ths document detals the core elements requred for creatng content for the M&G webste. Typography (szes, weghts, styles, character counts), colours (key brand colours and addtonal secondary palettes), and templates (mage carousels, promos, module components) are detaled to provde consstency when creatng addtonal content. Copy standard gudelnes have also been ncluded to ad content producton. In addton to creatng new elements, further detals have been ncluded detalng page templates, formattng and navgaton to act as gudes alongsde vsual examples of page desgns. November 2012 v2.0 2

3 CONTENTS 1.0 CORE COLOURS 1.1 prmary colours 1.2 ExTENded palette 1.3 SECONdARY colours 2.0 typography NTERSTATE, HELVETICA & SIZE GUIDANCE 3.0 CAROUSELS 3.1 LARGE CAROUSEL - EXAMPLE n-page 3.1 LARGE CAROUSEL - SPECIFICATIONS 3.1 LARGE CAROUSEL - CHARACTER COUNT 3.1 LARGE CAROUSEL - EXAMPLEs 3.2 SMALL CAROUSEL - EXAMPLE n-page 3.2 SMALL CAROUSEL - SPECIFICATIONS 3.2 SMALL CAROUSEL - CHARACTER COUNT 3.2 SMALL CAROUSEL - EXAMPLEs 4.0 promos 4.1 ExAMpLES n-page 4.2 STANDARD PROMO 4.3 MAGE PROMO 4.4 CAROUSEL PROMO 4.5 RIGHT HAND COLUMN 4.6 promos - EXAMPLES 5.0 ADDITIONAL COMPONENTS 5.1 NSGHTS & market updates 5.2 Fund manager profles 6.0 M&G SUPERGRAPHIC 7.0 COpy STANDARDS November 2012 v2.0 3

4 1.0 CORE colours 4

5 1.1 Core COLOURS prmary M&G has a very defned colour palette, makng t nstantly dentfable across a range of applcatons, both dgtal and prnt. Prmary colour palette, BLUE & GREEN 100% 80% 60% 40% 20% 100% 80% 60% 40% 20% The Blue and Green are the key colours to be used when creatng addtonal webste components, ensurng consstency across all communcatons. HEX #004F5c R0 G79 B92 HEX #9EA900 R158 G169 B0 In addton, an extended palette (shown on the followng slde) has been created specfcally for onlne use. These addtonal colours add greater depth to nteractve desgns and also help when segregatng content areas. HEX #9EA900 R158 G169 B0 Please note: The colours shown here and throughout ths document may not be a true representaton of the colours you would see replcated on screen. HEX #004F5c R0 G79 B92 November 2012 v2.0 5

6 1.2 Core COLOURS extended The extended palette focusses on the core colours (blue and green) addng addtonal hues and tnts to gve greater emphass to components when creatng content and adds neutral greys, not prevously avalable n the orgnal M&G brand gudelnes. extended colour palette, blues, BRIGHT green + GREYS 100% 80% 60% 40% 20% 100% 80% 60% 40% 20% HEX # HEX # R0 G71 B82 R54 G54 B54 These extended colours may be used n conjuncton wth the core colours to add depth and layerng. 100% 80% 60% 40% 20% 100% 80% 60% 40% 20% A brghter green has also been added to complment the current green and blue combnatons. Examples of these colours n use are shown n secton 6.0 of ths document. HEX #1c626c R28 G98 B108 HEX #cccccc R204 G204 B % 80% 60% 40% 20% 100% 80% 60% 40% 20% HEX # R102 G153 B153 HEX #f2f2f2 R242 G242 B % 80% 60% 40% 20% HEX #cccc00 R204 G204 B0 November 2012 v2.0 6

7 1.3 Core COLOURS SECONDARY The secondary palette supports the core colours and may be used when graphc elements requre addtonal levels of colour to ad dfferentaton/segmentaton, hghlght detals or defne nformaton. SECONDARY colour palette, ORANGE, RED, BLUE, GOLD, PURPLE & ALT GREEN 100% 80% 60% 40% 20% 100% 80% 60% 40% 20% HEX #FFCC33 HEX #cc9933 R255 G204 B51 R204 G153 B51 The colours should be used sparngly, wth the core colours remanng more promnant on the overall page. 100% 80% 60% 40% 20% 100% 80% 60% 40% 20% HEX #88232b HEX #4b4870 R136 G354 B43 R754 G72 B % 80% 60% 40% 20% 100% 80% 60% 40% 20% HEX #42739b HEX #52682f R66 G115 B155 R82 G104 B47 November 2012 v2.0 7

8 2.0 TYPOGRAPHY 8

9 2.0 TYPOGRAphy TYPOGRAPHY Interstate s the typeface used throughout the M&G webste, utlsng the lght, regular and bold weghts where requred. A custom verson of ths typeface has been created, specfcally for M&G wth an updated ampersand. M&G holds the lcence to ths typeface and t s ths and only ths verson that should be used n any communcatons Szes for components where copy s edtable are detaled n ther specfc sectons and are controlled by the CMS. THE famly of nterstate abcdefghjklmnopqrstuvwxyz abcdefghjklmnopqrstuvwxyz %&(,.;: #!?) Interstate lght abcdefghjklmnopqrstuvwxyz abcdefghjklmnopqrstuvwxyz %&(,.;: #!?) Interstate regular abcdefghjklmnopqrstuvwxyz abcdefghjklmnopqrstuvwxyz %&(,.;: #!?) Interstate bold Lg Reg Bol November 2012 v2.0 9

10 2.0 TYPOGRAphy TYPOGRAPHY Where browser functonalty does not permt webfonts beng used, Helvetca s the substtute for Interstate. THE famly of HELVETICA abcdefghjklmnopqrstuvwxyz abcdefghjklmnopqrstuvwxyz %&(,.;: #!?) Helvetca lght abcdefghjklmnopqrstuvwxyz abcdefghjklmnopqrstuvwxyz %&(,.;: #!?) Helvetca regular abcdefghjklmnopqrstuvwxyz abcdefghjklmnopqrstuvwxyz %&(,.;: #!?) Helvetca bold Lg Reg Bol November 2012 v2.0 10

11 2.0 TYPOGRAphy TYPOGRAPHY SUGGESTED TypE SIZES Type szes detaled here can used as a gude when creatng addtonal onlne projects for M&G. The szes and colours shown cover a range of possbe uses from ttles to CTAs. Any addtonal szes requred whch are not detaled n ths document should be sent to M&G for approval pror to gong lve. BReadcRUMB Interstate RegulaR 11px. #bbbbbb H2 SUBTITLE Interstate LIGHT 20px. #2e515c BODY COPY Interstate BOLD. 12px. # H3 SECTION HEADING Interstate RegulaR 13/18px. # Utlty nav Interstate BOLD. 11px. # Utlty nav Interstate BOLD. 12px. # H1 HEADER Interstate BOLD /lght. 36/41px. #2e515c ntro COPY Interstate LIGHT. 15/20px. # H2 SUBTITLE Interstate LIGHT/bold 20px. #2e515c cta LINK Interstate RegulaR 12px. #2e515c November 2012 v2.0 11

12 3.0 CAROUSELS 12

13 3.1 CAROUSELS Large CAROUSEL LARGE CAROUSEL - example n-page The carousels st at dfferent levels on the M&G webste and n two dfferent szes, large and small. The large carousels are used on the landng pages of the core nvestor types. The smaller versons st on lower level pages, such as Ways to Invest. The ttle of the carousel, f requred, can be customsed to use two dferent weghts and colours of type, dependng on the messagng. These are show n the examples and detaled n the specfcatons November 2012 v2.0 13

14 3.1 CAROUSELS Large CAROUSEL LARGE carousel - MAGE & copy area The carousels st at dfferent levels on the M&G webste and n two dfferent szes, large and small. 960PX 54PX The large carousels are used on the landng pages of the core nvestor types. 440PX 118PX H1 440PX 296PX IMAGE The smaller versons st on lower level pages, such as Ways to Invest. 350PX 20PX The ttle of the carousel, f requred, can be customsed to use two dferent weghts and colours of type, dependng on the messagng. These are show n the examples and detaled n the specfcatons 440PX 54PX 20PX 356PX 20PX CTA BODY 40PX 20PX IMAGE AREA Safe area for supportng magery TYpE AREA Predefned area for text nput. Ths area s fxed horzontally, but n some nstances the depth can be varable H1 45/39PX INTERSTATE BOLD / 36PX INTERSTATE LIGHT. -20 KERNING BODY 15/20px INTERSTATE LIGHT. -20 KERNING CTA 12/18px INTERstate RegulaR. -20 KERnng DIMENSIONS Pxel based dmensons suppled as gudance for the creaton of addtonal graphcal elements November 2012 v2.0 14

15 3.1 CAROUSELS Large CAROUSEL The carousels st at dfferent levels on the M&G webste and n two dfferent szes, large and small. CHARACTER COUNT 440PX 118PX H1 The large carousels are used on the landng pages of the core nvestor types. The smaller versons st on lower level pages, such as Ways to Invest. MAIN HEADLINE: 48 Characters MAxMUM. 72 characters are permtted wth NO body copy. The ttle of the carousel, f requred, can be customsed to use two dferent weghts and colours of type, dependng on the messagng. These are show n the examples and detaled n the specfcatons 440PX 54PX BODY BODY COPY: 216 Characters MAxMUM. 356PX 20PX CTA CTA: 75 Characters MAxMUM. November 2012 v2.0 15

16 3.1 CAROUSELS Large CAROUSEL large carousel - example sldes The carousels st at dfferent levels on the M&G webste and n two dfferent szes, large and small. The large carousels are used on the landng pages of the core nvestor types. The smaller versons st on lower level pages, such as Ways to Invest. The ttle of the carousel, f requred, can be customsed to use two dferent weghts and colours of type, dependng on the messagng. These are show n the examples and detaled n the specfcatons November 2012 v2.0 16

17 3.1 CAROUSELS Large CAROUSEL large carousel - example sldes The carousels st at dfferent levels on the M&G webste and n two dfferent szes, large and small. The large carousels are used on the landng pages of the core nvestor types. The smaller versons st on lower level pages, such as Ways to Invest. The ttle of the carousel, f requred, can be customsed to use two dferent weghts and colours of type, dependng on the messagng. These are show n the examples and detaled n the specfcatons November 2012 v2.0 17

18 3.1 CAROUSELS Large CAROUSEL large carousel - example sldes The carousels st at dfferent levels on the M&G webste and n two dfferent szes, large and small. The large carousels are used on the landng pages of the core nvestor types. The smaller versons st on lower level pages, such as Ways to Invest. The ttle of the carousel, f requred, can be customsed to use two dferent weghts and colours of type, dependng on the messagng. These are show n the examples and detaled n the specfcatons November 2012 v2.0 18

19 3.1 CAROUSELS Large CAROUSEL large carousel - example sldes The carousels st at dfferent levels on the M&G webste and n two dfferent szes, large and small. The large carousels are used on the landng pages of the core nvestor types. The smaller versons st on lower level pages, such as Ways to Invest. The ttle of the carousel, f requred, can be customsed to use two dferent weghts and colours of type, dependng on the messagng. These are show n the examples and detaled n the specfcatons November 2012 v2.0 19

20 3.2 CAROUSELS SMALL CAROUSEL small CAROUSEL - example n-page The carousels st at dfferent levels on the M&G webste and n two dfferent szes, large and small. The large carousels are used on the landng pages of the core nvestor types. The smaller versons st on lower level pages, such as Ways to Invest. The ttle of the carousel, f requred, can be customsed to use two dferent weghts and colours of type, dependng on the messagng. These are show n the examples and detaled n the specfcatons November 2012 v2.0 20

21 3.2 CAROUSELS SMALL CAROUSEL carousel small - MAGE & copy area The carousels st at dfferent levels on the M&G webste and n two dfferent szes, large and small. The large carousels are used on the landng pages of the core nvestor types. 440PX 80PX 914PX H1 440PX 215PX IMAGE 20PX The smaller versons st on lower level pages, such as Ways to Invest. 250PX 20PX 440PX 54PX BODY The ttle of the carousel, f requred, can be customsed to use two dferent weghts and colours of type, dependng on the messagng. These are show n the examples and detaled n the specfcatons 40PX 20PX 356PX 20PX CTA H1 32/37PX INTERSTATE BOLD. 32PX INTERSTATE LIGHT. -20 KERNING 20PX BODY 15/20px INTERSTATE LIGHT. -20 KERNING IMAGE AREA Safe area for supportng magery CTA 12/18px INTERstate RegulaR. -20 KERnng TYpE AREA Predefned area for text nput. Ths area s fxed horzontally, but n some nstances the depth can be varable DIMENSIONS Pxel based dmensons suppled as gudance for the creaton of addtonal graphcal elements November 2012 v2.0 21

22 3.2 CAROUSELS SMALL CAROUSEL The carousels st at dfferent levels on the M&G webste and n two dfferent szes, large and small. CHARACTER COUNT 440PX 80PX H1 The large carousels are used on the landng pages of the core nvestor types. The smaller versons st on lower level pages, such as Ways to Invest. MAIN HEADLINE: 48 Characters MAxMUM. 72 characters are permtted wth NO body copy The ttle of the carousel, f requred, can be customsed to use two dferent weghts and colours of type, dependng on the messagng. These are show n the examples and detaled n the specfcatons 440PX 54PX BODY BODY COPY: 216 Characters MAxMUM. 356PX 20PX CTA CTA: 75 Characters MAxMUM. November 2012 v2.0 22

23 3.2 CAROUSELS SMALL CAROUSEL SMALL carousel - example sldes The carousels st at dfferent levels on the M&G webste and n two dfferent szes, large and small. The large carousels are used on the landng pages of the core nvestor types. The smaller versons st on lower level pages, such as Ways to Invest. The ttle of the carousel, f requred, can be customsed to use two dferent weghts and colours of type, dependng on the messagng. These are show n the examples and detaled n the specfcatons November 2012 v2.0 23

24 3.2 CAROUSELS SMALL CAROUSEL SMALL carousel - example sldes The carousels st at dfferent levels on the M&G webste and n two dfferent szes, large and small. The large carousels are used on the landng pages of the core nvestor types. The smaller versons st on lower level pages, such as Ways to Invest. The ttle of the carousel, f requred, can be customsed to use two dferent weghts and colours of type, dependng on the messagng. These are show n the examples and detaled n the specfcatons November 2012 v2.0 24

25 4.0 PROMOS 25

26 4.1 PROMOS PROMOS PROMOS - examples n-page Page Promos are used throughout the entre M&G webste to further hghlght addtonal or related content to the page or to ad further nternal sgnpostng. Dfferent types of page promo are avalable: Standard Promo: contanng a background mage, addtonal copy and CTA lnk Image Promo: contanng an mage and CTA lnk Carousel Promo: contanng up to 3 mage and copy promos Rght Hand Column Promo: Alternate desgn treatment for lower level pages featurng ether mage only, mage wth addtonal copy or carousel. SMALL PRomo. SECTION LANdNG PAGE Two dfferent szes are avalable for use. Small promos are used on secton landng pages and large promos are used on audence landng pages. Rght hand column promos are small sze only. large PRomo. DETAIL PAGE Rght HAND COLUMN PRomo. AudEINCE LANdNG PAGE November 2012 v2.0 26

27 4.2 M&G dgtal style gude PROMOS STANDARD PROMO small Page Promos are used throughout the entre M&G webste to further hghlght addtonal or related content to the page or to ad further nternal sgnpostng. STANDARD PROMO - MAGE, COPY & CTA area H1 20PX INTERSTATE BOLD. -20 KERNING BODY 15/20px INTERSTATE LIGHT. -20 KERNING CTA 12px INTERstate RegulaR. -20 KERnng 256PX 20PX MAIN HEADLINE: 25 Characters MAxMUM. TITLE 256PX 52PX COPY BODY COPY: 80 Characters MAxMUM. 128PX 20PX CTA IMAGE AREA Safe area for supportng magery TYpE AREA Predefned area for text nput. Ths area s fxed horzontally, but n some nstances the depth can be varable 260PX 256PX 20PX 256PX 52PX 128PX 20PX CTA TITLE COPY 140Px153PX IMAGE 30PX 45PX CTA: 40 Characters MAxMUM. DIMENSIONS Pxel based dmensons suppled as gudance for the creaton of addtonal graphcal elements 20PX 296PX 20PX November 2012 v2.0 27

28 4.2 M&G dgtal style gude PROMOS STANDARD PROMO LARGE STANDARD PROMO - MAGE, COPY & CTA area H1 20PX INTERSTATE BOLD/LIGHT. -20 KERNING CTA 12px INTERstate RegulaR. -20 KERnng Page Promos are used throughout the entre M&G webste to further hghlght addtonal or related content to the page or to ad further nternal sgnpostng. 412PX 20PX MAIN HEADLINE: 38 Characters MAxMUM. TITLE 236PX 52PX COPY 412PX 20PX TITLE 45PX BODY COPY: 160 Characters MAxMUM. 128PX 20PX CTA 236PX 52PX COPY CTA: 40 Characters MAxMUM. 300PX 180PX x 130PX IMAGE IMAGE AREA Safe area for supportng magery 128PX 20PX CTA 20PX TYpE AREA Predefned area for text nput. Ths area s fxed horzontally, but n some nstances the depth can be varable 20PX 452px 20PX DIMENSIONS Pxel based dmensons suppled as gudance for the creaton of addtonal graphcal elements November 2012 v2.0 28

29 4.3 M&G dgtal style gude PROMOS IMAGE PROMO small IMAGE PROMO - MAGE & cta areas H1 20PX INTERSTATE BOLD. -20 KERNING CTA 12px INTERstate RegulaR. -20 KERnng Page Promos are used throughout the entre M&G webste to further hghlght addtonal or related content to the page or to ad further nternal sgnpostng. 256PX 20PX MAIN HEADLINE: 25 Characters MAxMUM. TITLE 128PX 20PX CTA CTA: 40 Characters MAxMUM. IMAGE AREA Safe area for supportng magery 260PX 256PX 20PX 296PX 215PX 128PX 20PX CTA TITLE IMAGE 30PX 45PX TYpE AREA Predefned area for text nput. Ths area s fxed horzontally, but n some nstances the depth can be varable 20PX 296PX 20PX DIMENSIONS Pxel based dmensons suppled as gudance for the creaton of addtonal graphcal elements November 2012 v2.0 29

30 4.3 M&G dgtal style gude PROMOS IMAGE PROMO LARGE IMAGE PROMO - MAGE & CTA areas H1 20PX INTERSTATE BOLD/LIGHT. -20 KERNING CTA 12px INTERstate RegulaR. -20 KERnng Page Promos are used throughout the entre M&G webste to further hghlght addtonal or related content to the page or to ad further nternal sgnpostng. 412PX 20PX MAIN HEADLINE: 38 Characters MAxMUM. TITLE 128PX 20PX CTA CTA: 40 Characters MAxMUM. 412PX 20PX TITLE 45PX 452PX 255PX IMAGE 300PX IMAGE AREA Safe area for supportng magery TYpE AREA Predefned area for text nput. Ths area s fxed horzontally, but n some nstances the depth can be varable 20PX 128PX 20PX CTA 452px 20PX 20PX DIMENSIONS Pxel based dmensons suppled as gudance for the creaton of addtonal graphcal elements November 2012 v2.0 30

31 4.4 M&G dgtal style gude PROMOS CAROUSEL PROMO SMALL Page Promos are used throughout the entre M&G webste to further hghlght addtonal or related content to the page or to ad further nternal sgnpostng. carousel PROMO - MAGE, copy & CTA areas H1 20PX INTERSTATE BOLD. -20 KERNING BODY 15/20px INTERSTATE LIGHT. -20 KERNING CTA 12px INTERstate RegulaR. -20 KERnng 236PX 20PX MAIN HEADLINE: 25 Characters MAxMUM. TITLE 236PX 54PX COPY IMAGE AREA Safe area for supportng magery 230PX 236PX 20PX 75PX 11PX 236PX 54PX 166PX 20PX 20PX CTA 296PX TITLE DATE + COPY 98PX 572PX IMAGE 20PX 20PX 25PX BODY COPY: 80 Characters MAxMUM. 166PX 20PX CTA: 25 Characters MAxMUM. TYpE AREA Predefned area for text nput. Ths area s fxed horzontally, but n some nstances the depth can be varable DIMENSIONS Pxel based dmensons suppled as gudance for the creaton of addtonal graphcal elements November 2012 v2.0 31

32 4.4 M&G dgtal style gude PROMOS CAROUSEL PROMO LARGE carousel PROMO - MAGE, copy & CTA areas H1 20PX INTERSTATE BOLD/LIGHT. -20 KERNING CTA 12px INTERstate RegulaR. -20 KERnng Page Promos are used throughout the entre M&G webste to further hghlght addtonal or related content to the page or to ad further nternal sgnpostng. 380PX 20PX MAIN HEADLINE: 38 Characters MAxMUM. TITLE 236PX 20PX COPY BODY COPY: 160 Characters MAxMUM. IMAGE AREA Safe area for supportng magery 300PX 380PX 20PX 75PX 11PX 236PX 80PX 280PX 20PX CTA COPY TITLE 145PX x 130PX IMAGE 20PX 45PX 280PX 20PX CTA: 40 Characters MAxMUM. CTA TYpE AREA Predefned area for text nput. Ths area s fxed horzontally, but n some nstances the depth can be varable 20PX 452px 20PX DIMENSIONS Pxel based dmensons suppled as gudance for the creaton of addtonal graphcal elements November 2012 v2.0 32

33 M&G dgtal style gude 4.5 PROMOS RIGHT HAND COLUMN PROMO Page Promos are used throughout the entre M&G webste to further hghlght addtonal or related content to the page or to ad further nternal sgnpostng. RIGHT HAND COLUMN - MAGE, copy & CTA areas H1 20PX INTERSTATE BOLD. -20 KERNING BODY 15/20px INTERSTATE LIGHT. -20 KERNING CTA 12px INTERstate RegulaR. -20 KERnng 236PX 20PX MAIN HEADLINE: 25 Characters MAxMUM. TITLE 236PX 54PX COPY BODY COPY: 80 Characters MAxMUM. 166PX 20PX IMAGE AREA Safe area for supportng magery TYpE AREA Predefned area for text nput. Ths area s fxed horzontally, but n some nstances the depth can be varable DIMENSIONS Pxel based dmensons suppled as gudance for the creaton of addtonal graphcal elements 324PX 20PX 236PX 20PX 236PX 38PX 246PX 125PX 236PX 20PX 296PX TITLE COPY IMAGE CTA 20PX 30PX 20PX 42PX 25PX CTA: 25 Characters MAxMUM. November 2012 v2.0 33

34 4.6 M&G dgtal style gude PROMOS PAGE PROMOS RIGHT HAND COLUMN - examples Page Promos are used throughout the entre M&G webste to further hghlght addtonal or related content to the page or to ad further nternal sgnpostng. November 2012 v2.0 34

35 4.6 M&G dgtal style gude PROMOS PAGE PROMOS RIGHT HAND COLUMN - examples Page Promos are used throughout the entre M&G webste to further hghlght addtonal or related content to the page or to ad further nternal sgnpostng. November 2012 v2.0 35

36 4.6 M&G dgtal style gude PROMOS PAGE PROMOS SMALL AND LARGE IMAGE PROMOS - examples Page Promos are used throughout the entre M&G webste to further hghlght addtonal or related content to the page or to ad further nternal sgnpostng. November 2012 v2.0 36

37 4.6 M&G dgtal style gude PROMOS PAGE PROMOS SMALL AND LARGE IMAGE PROMOS - examples Page Promos are used throughout the entre M&G webste to further hghlght addtonal or related content to the page or to ad further nternal sgnpostng. November 2012 v2.0 37

38 5.0 ADDITIONAL COMPONENTS 38

39 5.1 ADDITIONAL COMPONENTS INSIGHTS & MARKET UPDATES nsghts & market updates - example page The Insghts & Market Updates has a bespoke desgn whch allows for mage to be ncluded wthn an artcle. November 2012 v2.0 39

40 5.1 ADDITIONAL COMPONENTS INSIGHTS & MARKET UPDATES The Insghts & Market Updates has a bespoke desgn whch allows for mage to be ncluded wthn an artcle. COMPONENT PANEL - COPY + IMAGE CATEGORY + DATE 11px INTERstate BOLD. -20 KERnng H1 28PX INTERSTATE BOLD. -20 KERNING BODY 13/18px INTERSTATE LIGHT. -20 KERNING CTA 12px INTERstate RegulaR. -20 KERnng 245PX 20PX CATEGORY + DATE CATEGORY + DATE: 38 Characters MAxMUM. 245PX 20PX TITLE MAIN HEADLINE: 56 Characters. 245PX 54PX COPY VARable heght 245PX 20PX 245PX VARIABLE 250PX 140PX CATEGORY + DATE TITLE IMAGE 20PX 20PX BODY COPY: 150 Characters. 236PX 20PX CTA: 25 Characters MAxMUM. 245PX VARIABLE COPY 236PX 20PX CTA 280PX November 2012 v2.0 40

41 5.2 ADDITIONAL COMPONENTS FUND MANAGERS FUND MANAGER - PROFILE IMAGE SIZES Fund Manager profle pages use 2 szes, the Meet the Team thumbnal and full sze ndvdual profle page photo. 80PX 80PX IMAG 326PX 215PX IMAGE November 2012 v2.0 41

42 6.0 SUPERGRAPHIC 42

43 6.0 M&G dgtal style gude SUPERGRAPHIC SUPERGRAPHIC LEVEL 1 - GLOBAL LANdNG PAGE SupERGRAPHIC The webste redevelopment has ntroduced new brandng assets n the form of Supergraphcs. These form the backgrounds of the pages of the M&G webste and brng a new element to the overall executon of the M&G brand, when focussng on dgtal communcatons. A range of supergraphcs have been created and are avalable from the Dgtal Team. Certan graphcs have assgned assocaton wth the global M&G brand as well as specfc audence types. The global brand Supergraphc must not be used n any other form of communcaton other than on the M&G Global homepage. Each graphc s labelled here for usage purposes. November 2012 v2.0 43

44 6.0 M&G dgtal style gude SUPERGRAPHIC SUPERGRAPHIC SUPERGRAPHICS - FINAL ASSETS The webste redevelopment has ntroduced new brandng assets n the form of Supergraphcs. These form the backgrounds of the pages of the M&G webste and brng a new element to the overall executon of the M&G brand, when focussng on dgtal communcatons. A range of supergraphcs have been created and are avalable from the Dgtal Team. Certan graphcs have assgned assocaton wth the global M&G brand as well as specfc audence types. The global brand Supergraphc must not be used n any other form of communcaton other than on the M&G Global homepage. Each graphc s labelled here for usage purposes. LEVEL 2 - AudENCE LANdNG PAGE LEVEL 3 - SECTION LANdNG PAGE November 2012 v2.0 44

45 6.0 M&G dgtal style gude SUPERGRAPHIC SUPERGRAPHIC SUPERGRAPHICS - FINAL ASSETS The webste redevelopment has ntroduced new brandng assets n the form of Supergraphcs. These form the backgrounds of the pages of the M&G webste and brng a new element to the overall executon of the M&G brand, when focussng on dgtal communcatons. A range of supergraphcs have been created and are avalable from the Dgtal Team. Certan graphcs have assgned assocaton wth the global M&G brand as well as specfc audence types. The global brand Supergraphc must not be used n any other form of communcaton other than on the M&G Global homepage. Each graphc s labelled here for usage purposes. LEVEL 4 - CONTENT PAGE November 2012 v2.0 45

46 7.0 copy standards 46

47 7.0 M&G dgtal style gude COpy STANDARDS COPY STANDARDS Standards have been created to help defne wrtten content wthn the M&G webste. An addtonal document s avalable wth a defned lst of words and defntons and how they should be communcated. When wrtng Marketng copy please also consult the Tone of Voce secton wthn your M&G Brand Gudelnes. If you have any suggestons for ncluson or would lke to dscuss any of the subjects covered please contact George Frost on ext Please note: Copy standards are updated every sx months. RefERRING to websites n offline copy Use Vst our webste. Use our webste, not the webste. Use Vst our webste at not Vst our webste NEVER put a full stop at the end of a web address or emal address. When mentonng My Account use upper case ntals and nverted commas. REFERRING TO PAGES IN ONLINE COpy Use See or Go to or add the lnk to the page n the body copy. Examples: For more nformaton, see Terms and Condtons Go to the Global Bascs Fund page To apply for an ISA, download the applcaton form and send back to us Use Vst when drectng vstors to other webstes. Example: Vst In body copy, the lnk s placed on the name of the page you are drectng the vstor to, not on the verb. We should avod usng the URL - t s smpler to embed the URL nto the lnk, and merely dsplay the page name as the lnked text. In call to acton buttons, use a verb. Example: Download Contact Us DATES In man text, show day as number, month as word, year n full as below. Avod splttng over two lnes Example: 7 July 2009 (Please note the excluson of the suffx: th/nd/st/rd and no the before date) When quotng the day please use n full,.e. Frday 24 July 2009 In tables, footnotes and sources (where space s an ssue) use numbers (6 dgts) and full stops. Example: Months can be abbrevated to three letters n graphs and tables. Example: Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec Keep any abbrevatons consstent throughout document. USING ampersands (&) All ampersands need to be fully spelt out as and, unless t s part of a company s brand dentty Example: M&G Investments or HM Revenue & Customs Tmes Use 12-hour clock, no space between the tme and am/pm wthout punctuaton Example: 8.00am to 8.00pm November 2012 v2.0 47

48 7.0 M&G dgtal style gude COpy STANDARDS COPY STANDARDS Standards have been created to help defne wrtten content wthn the M&G webste. An addtonal document s avalable wth a defned lst of words and defntons and how they should be communcated. When wrtng Marketng copy please also consult the Tone of Voce secton wthn your M&G Brand Gudelnes. If you have any suggestons for ncluson or would lke to dscuss any of the subjects covered please contact George Frost on ext Please note: Copy standards are updated every sx months. TELEphONE NUMBERS Use the formats below and avod splttng over lnes Examples: / NUMBERS n tables UK In tables show specfc numbers wth commas at the thousand and mllon marks and use full stops for decmals, mantanng consstent decmal places throughout so that they lne up and can be compared easly n document. Examples: 15,804 and 2,500, % and 1.00% (not 1%) NUMBERS within text Numbers up to ten are spelled out, from 11 onwards they are not. Try to avod placng numbers next to each other. Example: The audtorum can accommodate 200, 50 of whom are stood at the back. Reword as of whom 50 are stood at the back. Numbers should be used when statng a sequence of quanttes. Example: The past 12 months show a net ncrease of 7%. Do not begn a sentence wth a number, use the word nstead. Example: Use Eghteen of M&G s fund managers have been awarded top rankng not 18 of M&G s NUMBERS n tables EUROpe In tables show specfc numbers wth full stops at the thousand and mllon marks and use commas for decmals, mantanng consstent decmal places throughout so that they lne up and can be compared easly n document. Examples: and ,25% and 1,00% (not 1%) Quotaton marks and Referrng to a quote Example: Warren Buffett once sad, We smply attempt to be fearful when others are greedy InvERTED commas and Hghlghtng a word for stand-out or slang/modern phrase Example: Remember the term face value / ntervew the management and generally kck the tyres. SOURCES Always n talcs eg the Fnancal Tmes, Mornngstar, Inc. DOUBLE spaces All M&G documents should only use one space after a full stop or other endng punctuaton. BULLET points n offline copy Complete sentences are punctuated as normal. In order to draw the reader s eye to the front of each bullet, start the bullet wth a captal. Avod sem-colons at the end of each bullet pont. November 2012 v2.0 48

49 7.0 M&G dgtal style gude COpy STANDARDS COPY STANDARDS Standards have been created to help defne wrtten content wthn the M&G webste. An addtonal document s avalable wth a defned lst of words and defntons and how they should be communcated. When wrtng Marketng copy please also consult the Tone of Voce secton wthn your M&G Brand Gudelnes. If you have any suggestons for ncluson or would lke to dscuss any of the subjects covered please contact George Frost on ext Please note: Copy standards are updated every sx months. BULLET points n onlne copy In onlne copy, bullets should be as short as possble and never word-wrap to a second lne. The frst few words should be the most mportant n each bullet. In order to draw the reader s eye to the front of each bullet, start the bullet wth a captal. Do not end the bullet wth any punctuaton, even the last bullet. Try to keep the number of bullets below fve. Use numbered bullets f they express steps n a process. ABBREvIATIONS Examples: eg, pa, e and etc these should be lower case wthout punctuaton. ISA these should be upper case wthout punctuaton and wll normally need to be defned at frst menton. All M&G fund names abbrevatons/mnemoncs for M&G fund names s not allowed. SIGN posting If referrng to a specfc page for further nstructons place a comma after the statement and make clear drectons. Example: Passwords cannot be shared, see page 4 for detals. If referrng to a dagram or table use the abbrevaton of fgure 1. Example: The chart shows how ths would be affected, see fg.1. Names Try to use full forename wth surname, however f you have to use ntals leave space nstead of full stops. Example: Mchael McLntock or M G A McLntock Headngs for onlne Man headng (H1) should be short, smple and clear as possble. It should be a good ndcaton of the content of the page. Examples: Global Bascs Fund Press centre Our approach and phlosophy Sub headng (H2) should be used to dvde the page nto: Logcal sectons Descrbng (clearly) the content of each subsecton Do not try to be wtty or funny n headngs. Never allow any headng to word-wrap around to a second lne. For all headngs, use sentence case - captalse the frst letter, and use lower case for the rest of the headng (unless t stated otherwse n the Copy Standards). Avod punctuaton n headngs. November 2012 v2.0 49