11.digital banners - singapore management university · most publishers of advertising banners have...

11. Digital Banners

11. DIGITAL BANNERS

In reference to section 2.4 Key Graphic, the Tangram Bar is designed to cater to and recognise various departments within the University’s ecosystem and their relationship with, and contribution to, the master brand.

The Tangram Bar should be featured in all applications of digital communications.Please refer to the application section in the following pages for specific instructions on how to apply the Tangram Bar.

BASIC FOOTPRINTS

11.1 TANGRAM APPLICATION

Digital banners appear in various sizes. For the purpose of illustration, this guide will group the common banner sizes into three core types, illustrating the most common banner size per type.

TYPE 1: Square/Rectangle Banners These are banners in aspect ratios similar to 8:6 5:4, 4:3, 3:2 & 1:1. Common sizes include 1200 x 628, 300 x 250, 336 x 280. Refer to section 2.2 for more details.

TYPE 2: Leaderboard Banners These are banners in aspect ratios similar to 8:1, 6:1, 5:1. Common sizes include Common sizes include 728 x 90, 970 x 90, 468 x 60.Refer to section 2.3 for more details.

TYPE 3: Skyscraper/Portrait Banners These are banners in aspect ratios similar to 1:6, 1:5, 1:3. Common sizes include 320 x 480, 300 x 1050, 160 x 600, 120 x 600.Refer to section 2.4 for more details.

1. Common Banner Sizes

TYPE 1 – Square/Rectangle Banners

SAMPLE: 300 X 250 WITH IMAGE

TYPE 2 – Leaderboard Banners


BANNER SAMPLES Banners shown are not presented in actual size and are for reference to aspect ratios only.

TYPE 3 – Skyscraper/Portrait Banners


11.2 OVERVIEW

Text:Headlines, programme names and Indicators should follow the colour of the School or Thematic cluster unless an application of SMU Blue, Black or White aids readability.

Image:Images will need to be treated to ensure clear readability of headline and CTA button, with clear colour distinction from the Tangram Bar.

BANNER SAMPLES Banners shown are not presented in actual size and are for reference to aspect ratios only.

EXAMPLE 2 -STATIC BANNER WITH HEADLINE IN WHITE, PROGRAMME NAME IN SCHOOL COLOUR & INDICATOR IN WHITE

EXAMPLE 1 -STATIC BANNER WITH HEADLINE IN REVERSE WHITE & INDICATOR IN WHITE

2. Colour Treatment of Text & Image On Banners

11.2 OVERVIEW

EXAMPLE OF TYPE 1 BANNER WITH SOLID SCHOOL COLOUR

EXAMPLE OF TYPE 1 BANNER WITH SOLID THEMATIC CLUSTER COLOUR

CONCEPT

–A solid colour treatment is only applicable to Type 1 digital advertising banners.

Refer to the following banner anatomy sections for details of application.

11.3.1 ANATOMY & STRUCTURE - GENERIC BANNERS

11.3.2 ANATOMY & STRUCTURE - BANNERS FEATURING PROGRAMMES, PROGRAMMATIC CORE & THEMATIC CLUSTERS

11.3.3 ADDITION TO BANNER ANATOMY & STRUCTURE - FEATURING CO-BRANDING LOGO

Solid colour - 100% opacity of colour APPLICATION OF SOLID COLOUR FOR TYPE 1 BANNERS

3. Application of Corporate, School or Thematic Cluster Colours on Banner

11.2 OVERVIEW

CORPORATE & SCHOOL COLOURS THEMATIC CLUSTERS

CONCEPT

100% opacityof colour

40% opacity of colour

The treatment is derived from section 2.3.2.

This treatment is only applicable to Type 2 and Type 3 digital advertising banners.

The gradient starts from 100% opacity to 40% opacity from left to right, with clearer reveal of the background image as the opacity decreases.

APPLICATION OF GRADIENT COLOUR FOR TYPE 2 & 3 BANNERS

4. Application of Corporate, School or Thematic Cluster Colours on Banner

11.2 OVERVIEW

The following guidelines apply to the creation of CTA buttons for advertising banners:

The clearspace on the left and right of the CTA text within the CTA button should be equivalent to the font size of the CTA text.

The clearspace on the top and bottom of the CTA text within the CTA button should be equivalent to half of the font size of the CTA text.

CREATION OF BUTTON

ANATOMY OF CTA BUTTON The samples below illustrates the guidelines to create a CTA button applicable for all banner types.

5. Call-to-Action (CTA) Button

11.2 OVERVIEW

SCHOOL COLOURS THEMATIC CLUSTERSCORPORATE COLOURS

SAMPLE APPLICATION OF CTA BUTTON The samples below illustrate the CTA button colour to be applied against backgrounds of Corporate, School and Thematic colours.

This is how the CTA button should be applied on backgrounds with images.

Use SMU Gold on darker backgrounds and SMU Blue on lighter backgrounds.

APPLICATION OF BUTTON ON IMAGES


11.2 OVERVIEW

SCHOOL COLOURS THEMATIC CLUSTERSCORPORATE COLOURS

SAMPLE APPLICATION OF CTA BUTTON The samples below illustrate the CTA button colour to be applied against backgrounds of Corporate, School and Thematic colours.

This is how the CTA button should be applied on background without images.

The CTA button should be created based on the colour of the communicated Corporate, School or Thematic cluster, lined with a white border of 0.5px thickness.

APPLICATION OF BUTTON WITHOUT IMAGES


11.2 OVERVIEW

● Due to the limited space on the banners, the text under the SMU logo – ‘Singapore Management University’ is removed as it will not be legible and will make the overall asset appear cluttered.

● Banners should be resized proportionally for sizes beyond the samples shown.● Avoid buying these banner sizes:

○ Type 1: 250 x 250 , 220 x 220, 200 x 200 & 180 x 150○ Type 2: 320 x 100, 234 x 60○ Type 3: 120 x 240

● Most publishers of advertising banners have a standard file size limit of 150KB, max. 3 loops and animation timing less than 30s. Check with your appointed media publisher for the detailed media specs.

● A 1px #000000 black border at 20% opacity is to be applied to all banners.

8. Additional Notes

11.2 OVERVIEW

11.3 TYPE 1 - SQUARE/RECTANGLE BANNERSBANNERS IN ASPECT RATIO SIMILAR TO 8:6 5:4, 4:3, 3:2 & 1:1COMMON SIZES: 1200 x 628, 300 x 250, 336 x 280, 250 x 250, 200 x 200 & 180 x 150

TYPE 1 GENERIC BANNERS 1) TANGRAM BARThe height of the Tangram Bar should always be 20% of the height of the banner. The gradient colour on the right of the bar will change in accordance to the featured Corporate, School or Thematic cluster.

2) SMU LOGO The SMU Logo is always placed on the left within the white space of the Tangram Bar, with necessary logo clearspace as inidcated.The SMU Logo can be accompanied by a School/Department/ICLI logo if the feature of a Programmatic Core or Thematic cluster is not needed.Refer to section 11.3.2 for anatomy and structure of banner when featuring a Programmatic Core or Thematic cluster.Refer to section 11.3.3 when featuring a co-branded logo.

3) CONTENT CLEARSPACEAn all-round clearspace of 4% banner height is required. An equal distribution of height space between content clearspace to banner copy and Call-to-Action button to content clearspace is needed, as indicated by ‘x’.

4) MAIN BANNER COPYCopy is to be in font “Oswald Reg” with font sizes within 10%-16% banner height, with minimum font size of 24px. Banner copy should be kept within 25 characters per line, not exceeding three lines in total.

5) CALL-TO-ACTION BUTTONHeight of button is to the same as the height of Main Banner Copy font. Text within button is to be 50% of Main Banner Copy font size, with minimum font size of 12px.The Call-to-Action button should have a minimum of 6% banner height space between copy and button.

–

TEMPLATE ARTWORKThis template is available as a digital working file and serves as a base template for Type 1 generic banners in the aspect ratios or banner sizes stated. Do not create new banner templates.

BANNER SAMPLESPlease refer to the samples in the following pages for details of application.SCHOOLSINSTITUTES/CENTRES/LABS AFFILIATED WITH A SCHOOLINSTITUTES/CENTRES/LABS NOT AFFILIATED WITH A SCHOOL

Priority of visual representation should be in the following order:

Change to SMU logo

Remove the text here, add note

Add note:

Refer to red text for point 3. need to present the central alignment of content and minimum clear space

Change to feature SMU logo with School for this verison

Ensure logo clear space all around

1. Type 1 Generic Banners

11.3 ANATOMY & STRUCTURE – GENERIC BANNERS

1) TANGRAM BARThe height of the Tangram Bar should always be 20% of the height of the banner. The gradient colour on the right of the bar will change in accordance to the featured Corporate, School or Thematic cluster.

2) SMU LOGO The SMU Logo is always placed on the left within the white space of the Tangram Bar, with necessary logo clearspace as shown.The Tangram Bar will only need to feature the main SMU Logo as the School or Thematic cluster will be represented by its respective gradient colour on the right of the Tangram Bar.Refer to section 11.3.1 for anatomy and structure of generic banners where featuring of Programmatic Core or Thematic cluster is not needed.Refer to section 11.3.3 when featuring a co-branded logo is needed.

3) PROGRAMMATIC / THEMATIC INDICATORWhere applicable, the Programmatic or Thematic Indicator is featured on the right of the Tangram Bar in CAPS, at 5% banner height or minimum font size of 12px. A minimum clearspace of 4% banner height is necessary on both sides of the Indicator, as marked by “y”. Where this minimum clearspace cannot be met, the Indicator can be omitted.

4) PROGRAMME NAMEProgramme name can be placed in the strip graphic shown, where applicable. Height of strip should be at 10% banner height, with text within element at 5% banner height, at minimum font size of 12px.If required, text can be presented in two lines within the strip, while adhering to the minimum font size. Height of the strip can be extended accordingly to accommodate two lines of text.

5) CONTENT CLEARSPACEAn all-round clearspace of 4% banner height is required. An equal distribution of height space between content clearspace to banner copy and Call-to-Action button to content clearspace is needed, as indicated by ‘x’.

6) MAIN BANNER COPYCopy is to be in font “Oswald Reg” with font sizes within 10%-16% banner height, with minimum font size of 24px. Banner copy should be kept within 25 characters per line, not exceeding three lines in total.

7) CALL-TO-ACTION BUTTONHeight of button is to be the same as the height of Main Banner Copy font. Text within button is to be 50% of Main Banner Copy font size, with minimum font size of 12px.The Call-to-Action button should have a minimum of 6% banner height space between copy and button.


BANNER SAMPLESPlease refer to the samples in the following pages for details of application.DEPARTMENT-BASED PROGRAMME AFFILIATED WITH A SCHOOLDEPARTMENT-BASED PROGRAMME NOT AFFILIATED WITH A SCHOOLRESEARCH-BASED PROGRAMMETHEMATIC CLUSTER

TEMPLATE ARTWORKThis template is available as a digital working file and serves as a base template for Type 1 banners featuring programmes, Programmatic Core & Thematic clusters in the aspect ratios or banner sizes stated. Do not create new banner templates.

2. Type 1 Banners Featuring Programmes, Programatic Core & Thematic Clusters

11.3 ANATOMY & STRUCTURE – BANNERS FEATURING PROGRAMMES, PROGRAMMATIC CORE & THEMATIC CLUSTERS

TEMPLATE ARTWORKThis template is available as a digital working file and serves as a base template for a Type 1 generic banner featuring a co-branding logo, in the aspect ratios or banner sizes stated. Do not create new banner templates.

BANNER SAMPLESPlease refer to the sample of a banner featuring a Programme, Programmatic Core or Thematic cluster, with the addition of featuring a co-branding logo, in the following application:DEPARTMENT-BASED PROGRAMME WITH CO-BRANDING AFFILIATED WITH A SCHOOL

Refer to red text for point 4. need to present the central alignment of content and minimum clear space from strip to copy & the alignment of content

This becomes point 3.

This page is only applicable when featuring the logo of a co-branding partner, and is in addition to the prior application of the anatomy and structure of either:

A. SECTION 11.3.1 - TYPE 1 GENERIC BANNERB. SECTION 11.3.2 - TYPE 1 BANNERS FEATURING PROGRAMMES,

PROGRAMMATIC CORE & THEMATIC CLUSTERS

When a co-branding logo needs to be featured, the following change in the applied banner anatomy and structure will be exercised:

SMU LOGO The SMU Logo is always placed on the left within the white space of the Tangram Bar, with necessary logo clearspace as shown.Where applicable, the SMU Logo can be accompanied by a co-branding logo to its right, in adherence to necessary clearspace of each logo.

The example shown on the right displays the combined application of:

● TYPE 1 BANNERS FEATURING PROGRAMMES, PROGRAMMATIC CORE & THEMATIC CLUSTERS

● ADDITION TO BANNER ANATOMY & STRUCTURE – FEATURING CO-BRANDING LOGO

Change to SMU logo, remove School logo

remove

remove

remove

remove

remove

remove

Change to 4% banner height

Ensure logo clear space all around

3. Featuring Co-Branding Logo in Type 1 Banners

11.3 ADDITION TO BANNER ANATOMY & STRUCTURE – FEATURING CO-BRANDING LOGO

11.4 EXAMPLES OF TYPE 1 STATIC BANNER – 300 X 250

300 X 250 WITH IMAGE

300 X 250 SOLID COLOUR BACKGROUND

Banner Type: Type 1 - Square/Rectangle

Size of Banner: 300 x 250

Applied banner anatomy & structure:TYPE 1 GENERIC BANNERS

Type of banner: Static

This scenario is only applicable to school-affiliated campaigns that do not fall under any of the Programmatic Core pillars or Thematic clusters.

For scenario where there is a need to feature a Programmatic Core pillar or Thematic cluster, please refer to banner anatomy and structure on section 11.3.2 and the respective examples.

For longer banner copy exceeding the character limit, please opt for the animated banner version.

1. Schools

11.4 EXAMPLE OF TYPE 1 STATIC BANNER – 300 x 250







This scenario is only applicable when communicating an Institute/Centre/Lab affiliated with a School.

This scenario does not apply when there is no affiliated School.



2. Institutes/Centres/Labs Affiliated with a School








This scenario is only applicable when communicating an Institute/Centre/Lab with no affiliated School.

For scenario where an Institute/Centre/Lab is affiliated with a School, please refer to the previous page.



3. Institutes/Centres/Labs Not Affiliated with a School






Applied banner anatomy & structure:TYPE 1 BANNERS FEATURING PROGRAMMES, PROGRAMMATIC CORE & THEMATIC CLUSTERS


This scenario is only applicable when communicating a Department-based programme affiliated with a School.

For scenario where a Department-based programme is not affiliated with a School, please refer to the next page.


4. Department-Based Programmes Affiliated with a School








This scenario is only applicable when communicating a Department-based programme with no affiliated School.

For scenario where a Department-based programme is affiliated with a School, please refer to the previous page.


5. Department-Based Programmes Not Affiliated with a School








This scenario is only applicable when communicating the suite of PhD or Research programmes.


6. Research-Based Programmes








This scenario is only applicable when presenting any communication classified under Thematic clusters. For more details on Thematic clusters, please refer to sections 3.2.6 and 4.3.


7. Thematic Cluster







ADDITION TO BANNER ANATOMY & STRUCTURE – FEATURING CO-BRANDING LOGO


This scenario is applicable when communicating a co-branded, Department-based programme affiliated with a School.

For the definition of co-branding partner, please refer to section 6.1.


8. Department-Based Programmes with Co-Branding Affiliated with a School


11.5 EXAMPLES OF TYPE 1 ANIMATED BANNER – 300 X 250

Frame 1: Banner visual, Tangram Bar and elements within are fixed from the first frame.

Frame 2: Text fades in or slides in from the left.

Frame 3: End frame text and CTA button fade in or slide in from the left (depends on creative implementation).

The samples shown here are optimally configured for animated banners. Refer to the Anatomy & Structure for application details.

Use animated banners to tell an appealing story set within a longer context. Maximum 4 frames.

This scenario is only applicable to School-affiliated campaigns that do not fall under any of the Programmatic Core pillars or Thematic clusters.

For scenario where there is a need to feature the Programmatic Core pillars or Thematic clusters, please refer to banner anatomy and structure on section 11.3.2 and the respective examples.




Type of banner: Animated

1. Schools11.5 EXAMPLE OF TYPE 1 ANIMATED BANNER – 300 x 250




This scenario is only applicable for an Institute/Centre/Lab affiliated with a School.










11.5 EXAMPLE OF TYPE 1 ANIMATED BANNER – 300 x 250











For scenario where an Institute/Centre/Lab is affiliated with a School, please refer to previous page.

For scenario where there is a need to feature a Programmatic Core pillar or Thematic cluster, please refer to banner anatomy and structure on on section 11.3.2 and the respective examples.






This scenario is only applicable when communicating a Department-based programme with an affiliated School.


















Frame 2: Text fades in and slides in from the left.




This scenario is only applicable when presenting any communication classified under Thematic clusters.

For more details on Thematic clusters, please refer to sections 3.2.6 and 4.3.











7. Thematic Cluster













8. Department-Based Programmes with Co-Branding Affiliated with a School11.5 EXAMPLE OF TYPE 1 ANIMATED BANNER – 300 x 250

11.6 TYPE 2 - LEADERBOARD BANNERSBANNERS IN ASPECT RATIO SIMILAR TO 8:1, 6:1, 5:1. COMMON SIZES: 728 x 90, 970 x 90, 468 x 60,

1) SMU LOGOThe SMU Logo is always placed on the left within the white space of the Tangram Bar, with necessary logo clearspace as indicated.The SMU Logo can be accompanied by a School/Department logo when featuring of a Programmatic Core or Thematic cluster is not needed.Refer to section 11.6.2 for anatomy and structure of banner when featuring of Programmatic Core or Thematic cluster is needed.Refer to section 11.6.3 when featuring a co-branded logo.

2) CONTENT CLEARSPACEAn all-round clearspace of 10% banner height is required. The same clearspace is required between copy and Call-to-Action button.An equal distribution of height space between content clearspace to banner copy is needed, as indicated by ‘x’.

Priority of visual representation should be in this order as follows:

Change to SMU logo

1remove

remove

2% banner width

2 3

4

2% banner width

3) MAIN BANNER COPYCopy is to be in font “Oswald Reg” with font sizes within 22%-30% banner height, with minimum font size of 20px. Copy should be less than 35 characters per line while adhering to the minimum clearspace around the Call-to-Action button. Copy should not exceed two lines.

4) CALL-TO-ACTION BUTTONThe Call-to-Action button should be placed 50px from the total width of the Main Banner Copy, while adhering to a minimum clearspace of 10% banner height all round. Button height should be 24% of the height of the Main Banner Copy. Text within button is to be 50% of Main Banner Copy font size, or minimum font size of 11px.





Priority of visual representation should be in this order as follows:

Change to SMU logo

1

4

Remove this

2

35

6

2% banner width2% banner width 2% banner width

15% banner height with text within element at 50% of

1) SMU LOGO The SMU Logo is always placed on the left within the white space of the Tangram Bar, with necessary logo clearspace as indicated.The Tangram Bar will only need to feature the main SMU Logo as the School or Thematic cluster will be represented by its respective gradient colour on the right of the Tangram Bar.Refer to section 11.6.1 for anatomy and structure of generic banners when featuring of Programmatic Core or Thematic cluster is not needed.Refer to section 11.6.3 when featuring a co-branded logo is needed.

2) CONTENT CLEARSPACEAn all-round clearspace of 10% banner height is required. The same clearspace is required between copy and Call-to-Action button.An equal distribution of height space between content clearspace to banner copy is needed, as indicated by ‘x’.

6) CALL TO ACTION BUTTONThe Call-to-Action button should be placed 50px from the total width of the Main Banner Copy, while adhering to a minimum clearspace of 10% banner height all round. Button height should be 24% of the height of the Main Banner Copy. Text within button is to be 50% of Main Banner Copy font size, or minimum font size of 11px.

TEMPLATE ARTWORKThis template is available as a digital working file and serves as a base template for Type 2 banners featuring Programmes, Programmatic Core & Thematic clusters in the aspect ratios or banner sizes stated. Do not create new banner templates.Please refer to the samples in the following pages for details of application.

3) PROGRAMMATIC / THEMATIC INDICATORWhere applicable, the Programmatic or Thematic Indicator is featured on the right of the Tangram graphic line in CAPS, at 13% banner height or minimum font size of 12px. An equal distribution of height space between content clearspace to indicator is needed, as indicated by ‘y’.

4) PROGRAMME NAMEProgramme name can be placed at the top right corner of the banner in the strip graphic shown. Height of strip should be at 25% banner height, with text within element at 12% banner height or minimum font size of 11px.

5) MAIN BANNER COPYCopy is to be in font “Oswald Reg” with font sizes within 22%-30% banner height, or minimum font size of 20px. Copy should be less than 35 characters per line while adhering to the minimum clearspace around the Call-to-Action button. Copy should not exceed two lines.



Change to SMU logo, remove School logo

remove

remove




A. SECTION 11.6.1 – TYPE 2 GENERIC BANNERB. SECTION 11.6.2 - TYPE 2 BANNERS FEATURING

PROGRAMMES, PROGRAMMATIC CORE & THEMATIC CLUSTERS

When a co-branding logo needs to be featured, the following change in the applied banner anatomy and structure will be exercised:

SMU LOGO:

The example shown on the below displays the combined application of:


● ADDITION TO BANNER ANATOMY & STRUCTURE –FEATURING CO-BRANDING LOGO

The SMU Logo is always placed on the left within the white space of the Tangram Bar, with necessary logo clearspace as indicated.Where applicable, the SMU Logo can be accompanied by a co-branding logo to its right, in adherence to necessary clearspace of each logo.



11.7 EXAMPLES OF TYPE 2 STATIC BANNER – 728 X 90

The samples shown here are optimally configured for static banners. Refer to the Anatomy & Structure for application details.

For heavier and longer content, please opt for the static banner version.



Banner Type: Type 2 - Leaderboard Banner




728 X 90 WITH IMAGE

728 X 90 WITHOUT IMAGE

1. Schools


728 X 90 WITH IMAGE



For heavier and longer content, please opt for the static banner version.

This scenario is only applicable when communicating an Institute/Centre/Lab while featuring the affiliated School.











This scenario is only applicable when communicating an Institute/Centre/Lab not affiliated with a School.

For scenario where an Institute/Centre/Lab is affiliated with a School, please refer to the prevous page.






728 X 90 WITH IMAGE












728 X 90 WITH IMAGE








728 X 90 WITH IMAGE




This scenario is only applicable when communicating a Department-based programme not affiliated with a School.








728 X 90 WITH IMAGE











728 X 90 WITH IMAGE







7. Thematic Cluster





728 X 90 WITH IMAGE


Type of banner: Static–The samples shown here are optimally configured for static banners. Refer to the Anatomy & Structure for application details.

–For longer banner copy exceeding the character limit, please opt for the animated banner version.

–This scenario is applicable when communicating a co-branded, Department-based programme affiliated with a School.


11.7 EXAMPLE OF TYPE 2 STATIC BANNER – 728 x 908. Department-Based Programmes with Co-Branding Affiliated with a School

11.8 EXAMPLES OF TYPE 2 ANIMATED BANNER – 728 X 90


Frame 2: Text fades in or slides in from the right.

Frame 3: End frame text and CTA button fade in or slide in from the right (depends on creative implementation).









1. Schools





Use animated banners to tell an appealing story set within a longer context. Maximum 4 frames























7. Thematic Cluster









Use animated banners to tell an appealing story set within a longer context.Maximum 4 frames.




11.8 EXAMPLE OF TYPE 2 ANIMATED BANNER – 728 x 908. Department-Based Programmes with Co-Branding Affiliated with a School

11.9 TYPE 3 - SKYSCRAPER/PORTRAIT BANNERSBANNERS IN ASPECT RATIOS SIMILAR TO 1:6, 1:5, 1:3. COMMON SIZES: 320 x 480, 300 x 1050, 160 x 600, 120 x 600.

1

2

3

4

remove

SMU logo

REMOVE

remove

remove


1) SMU LOGOThe SMU Logo is always placed on top within the white space of the Tangram Bar, with necessary logo clearspace as indicated.The SMU Logo can be accompanied by a School/Department logo if the feature of a Programmatic Core or Thematic cluster is not needed.Refer to section 11.9.2 for anatomy and structure of banner when featuring of Programmatic Core or Thematic cluster is needed.Refer to section 11.9.3 when featuring a co-branded logo.

2) CONTENT CLEARSPACEAn all-round clearspace of 6% banner width is required. The same minimum clearspace is required between copy and Call-to-Action button.An equal distribution of spacing between content clearspace to banner copy is needed.

3) MAIN BANNER COPYCopy is to be in font “Oswald Reg” with font sizes within 14%-20% banner width, or minimum font size of 24px. Copy should adhere to the minimum content clearspace with the same minimum spacing requires before the Call-to-Action button. Copy should not exceed 10 lines.

4) CALL-TO-ACTION BUTTONHeight of button is to the same as the height of Main Banner Copy font. Text within button is to be 50% of Main Banner Copy font size, with minimum font size of 11px.The Call-to-Action button should have a minimum of 6% banner width space between copy and button.

–



2.4.1 ANATOMY & STRUCTURE – GENERIC BANNERS



1

2

3

5

Refer to client file for size

SMU logo

REMOVE

4

6

1) SMU LOGOThe SMU Logo is always placed at the top within the white space of theTangram Bar, with necessary logo clearspace as indicated.The Tangram Bar will only need to feature the main SMU logo as the School orThematic cluster will be represented by its respective gradient colour on theright of the Tangram Bar.Refer to section 11.9.2 for anatomy and structure of banner when featuring ofProgrammatic Core or Thematic cluster is needed.Refer to section 11.9.3 when featuring a co-branding logo.

2) CONTENT CLEARSPACEAn all-round clearspace of 6% banner width is required. The same minimumclearspace is required between copy and Call-to-Action button.

3) PROGRAMMATIC / THEMATIC INDICATORWhere applicable, the Programmatic or Thematic Indicator is featured below theTangram graphic line, within the designated content space. The Indicator is tobe centrally aligned to the banner width, in CAPS, at 11% banner width orminimum font size of 18px. The Indicator can be presented in two lines if thelength of text falls into the content clearspace when placed in a single line.

4) PROGRAMME NAMEProgramme name can be placed in the bottom panel of the bar whereapplicable, at 7% banner width or minimum font size of 11px.Text can be presented in three lines within the strip, while adhering to theminimum font size. Slope can be extended accordingly upwards toaccommodate up to three lines of text.

5) MAIN BANNER COPYCopy is to be in font “Oswald Reg” with font sizes within 14%-20% bannerwidth, with minimum font size of 24px. Copy should adhere to the minimumcontent clearspace with the same minimum spacing required before the Call-to-Action button. Copy should not exceed 8 lines.

6) CALL-TO-ACTION BUTTONHeight of button is to the same as the height of Main Banner Copy font. Textwithin button is to be 50% of Main Banner Copy font size, with minimum fontsize of 11px.The Call-to-Action button should have a minimum of 6% banner width spacebetween copy and button.

–

TEMPLATE ARTWORKThis template is available as a digital working file and serves as a base template for Type 3 banners featuring Programmes, Programmatic Core & Thematic clusters in the aspect ratios or banner sizes stated. Do not create new banner templates.Please refer to the samples in the following pages for details of application.




1

2

SMU logo

2.4.3 ADDITION TO BANNER ANATOMY & STRUCTURE – FEATURING CO-BRANDING LOGO

SMU LOGO The SMU Logo is always placed at the top within the white space of the Tangram Bar, with necessary logo clearspace as indicated.Where applicable, a co-branding logo can be featured below the SMU logo, in adherence to necessary clearspace of each logo.

The example shown on the right displays the combined application of:


● ADDITION TO BANNER ANATOMY & STRUCTURE –FEATURING CO-BRANDING LOGO

–




A. SECTION 11.9.1 – TYPE 3 GENERIC BANNERB. SECTION 11.9.2 – TYPE 3 BANNERS FEATURING

PROGRAMMES, PROGRAMMATIC CORE & THEMATIC CLUSTERS

When a co-branding logo needs to be featured, the following changes in the applied banner anatomy and structure will be exercised:



11.10 EXAMPLES OF TYPE 3 STATIC BANNER – 160 x 600

Banner Type: Type 3 - Skyscraper/Portrait Banner





For scenario where there is a need tofeature the Programmatic Core pillars orThematic clusters, please refer to banneranatomy and structure on section 11.9.2and the respective examples.

For longer banner copy exceeding guidelines, please opt for the animated banner version

160 X 600 WITHOUT IMAGE160 X 600 WITH IMAGE

1. Schools


160 X 600 WITHOUT IMAGE160 X 600 WITH IMAGEBanner Type: Type 3 - Skyscraper/Portrait Banner







For longer banner copy exceeding guidelines, please opt for the animated banner version.












7. Thematic Cluster










11.10 EXAMPLE OF TYPE 3 STATIC BANNER – 160 x 6008. Department-Based Programmes with Co-Branding Affiliated with a School

11.11 EXAMPLES OF ANIMATED ADVERTISING BANNER – 160 X 600









Frame 2:Text fades in or slides in from the left.



1. Schools










For scenario where there is a need to feature a Programmatic Core pillar or Thematic cluster, please refer to banner anatomy and structure on section 11.9.2 and the respective examples. Frame 3:

End frame text and CTA button fade in or slide in from the left (depends on creative implementation).

















7. Thematic Cluster









For the definition of co-branding partner,please refer to section 6.1.




11.11 EXAMPLE OF TYPE 3 ANIMATED BANNER – 160 x 6008. Department-Based Programmes with Co-Branding Affiliated with a School

For more information, please contact:

Office of Corporate Communications and Marketing Singapore Management UniversityAdministration Building 81 Victoria StreetSingapore 188065

Email: [email protected]

mailto:[email protected]

11.digital banners - singapore management university · most publishers of advertising banners have...

Documents