【品牌VI手冊】渣打銀行-市場營銷策劃-百強(qiáng)企業(yè)品牌視覺VI設(shè)計(jì)手冊參考

StandardChartered

CorporateIdentity

WebGuidelines

ThisissueoftheStandardCharteredCorporateIdentityWed

GuidelineswasprintedinSeptember2005.Allinformationis

accurateattimeofprinting.

TheStandardCharteredBrand,yourBrand,isbeingrefreshed.

ThenewcontemporarylookoftheStandardChartered

BrandreflectsonourcommitmenttoLeadingtheWayin

Asia,AfricaandtheMiddleEast.Andyouareacrucial

partintheengineofchange.

Weprideourselvesonourapproachability,friendliness

andwillingnesstogotheextramileforourcustomers.

Andthenew-lookwebsitereflectsthisbymakingtheweb

experienceafriendlyone.TheseWebGuidelineswillhelp

youimplementthesechangesquicklyandeffectively.

Introduction

ThechangestotheStandardCharteredBrandinvolvea

diversenumberofcommunicationplatforms.

TheseGuidelinesidentifyelementsyoucanchangeinline

withtherefreshedbrand.Youllbeempoweredtoproduce

moreeffectiveonlineandinteractivecommunications-

raisingtheStandardCharteredBrandtonewheights.

TheBasicGuidelines

BrandEssence-TheRightPartner

OurBrandEssenceisthecoreofourBrandIdentity.

Itcantaketheformofaphraseorwordthatsummarises

exactlywhattheBrandstandsfor.

Itshouldbesimpleandcompelling,yetresonatewith

bothemployeesandcustomers.Itisthesingle

propositionthatwebelieveinandlivebyeveryday.

OurBrandEssenceisgroundedveryfirmlyonthe

extensiveresearchweconductedwithourcustomers

andouremployees.

"TheRightPartner"stoodoutaboveall,asbyfarthe

mostdesirablebrandproposition.

Atruepartnershipisbaseduponsharedgoals,aswellas

adeepandunderlyingtrust.Itrequiresnurturingand

constantreviewing.11avoidscomplacencyand

demonstratescommitmentthroughgoodtimesandbad.

OurBrandIdentityrepresentshowtheBrandisseen

intheeyesofourcustomersaswellasouremployees.

ThisisthephysicalmanifestationofourBrandinits

manyandvariedforms.

OurBrandIdentityismadeupofanentirecommunication

spectrumfromourlogo,photographicstyleandsignage,

toouradvertising.TheBrandIdentityshouldalsobe

extendedtoouronlinepagessincetheyareapartofour

communicationspectrum.

Thenew,refreshedandexpandedlogoisattheheartof

ourBrandIdentityandhasbeencontemporisedand

mademoredynamic.

Thenewdoublehelixsymbolisesthepartnershipand

trustweinstilinourcustomers.Itisdynamicandinits

new3-dimensionalform,reinforcestheupward

movementtowardsachievinggreaterheights.

ToneofVoice

FindingandprojectingtherightToneOfVoiceisoneofthe

keyelementstosuccessfulcommunication.

Therighttoneshouldleaveconsumerswithapositiveimpression

ofourBrand,andmakethempredisposedtotrustand

useourproductsandservices.

OurToneOfVoiceshouldthereforebe:

Confident,Emotive,Reassuring

ItiscriticaltoestablishourToneOfVoiceattheoutsetof

ourcommunicationsandmaintainitthroughoutforbrand

consistency.

Asageneralguide,keepthecopyshort,conciseandto

thepoint.Don'tusetwowordswhereonewilldoandavoid

jargonasitjustgetsintheway.

Wewantthephotographicstyletobeasnatural,lifelikeand

yetasexpressiveaspossible,suggestingamorewarmand

approachableBank.

Weliveinavisualworld.Sophotographywillplayaleading

roleinthewaytheBankisprojected.

Wheneverpossible,avoidpretentious,clichedorartificial

images.Ourphotographicstyleshouldbeemotionaland

bringoutthefullsenseofexpressionandhonestyinour

subjects.

Peopleshouldbeyoursubjectofchoice,althoughthere

willbeoccasionswhenobjectswillbeyourprimaryfocus.

Insuchcases,chooseobjectsintheirnaturaleveryday

environment:thiswillmakeyourmessagemorerelevant

toyouraudience.

Avoidusingillustrations,cartoon-likeimagesorkeyline

drawingsincommunications.AsaBankandRightPartner,

weshouldalwaysbereal,sostickwithusingphotographic

imagesasmuchasyoucan.

PhotographicStyle

Right

people

objects

Wrong

objects

HowtoUseThisGuide

Informationtohelpyouusethe

StandardCharteredCorporateIdentityWebGuidelines

TheStandardCharteredCorporateIdentityWebGuidelines

helpyouapplyournewCorporateIdentitytoyouronline

communications.Itcontainsthebestpracticeguidelines

andspecificationsforallkeyelementsandapplications.

AsourBrandevolves,itwillbenecessarytoupdatecertain

sections.Wellbesuretokeepyouinformedaboutthese

changeswhentheyhappen.

TheStandardCharteredCorporateIdentityWebGuidelines

havebeenwrittentobeasclearandconciseaspossible.

Ifyouhaveanyquestions,feelfreetocontacttheGroup

WebsiteTeam(GWT),JustrefertotheApprovalsectionof

thisguidebookfortheircontactdetails.

DigitalWorkAids

CertainelementsoftheStandardCharteredCorporate

IdentityWebGuidelinesareprovidedasdigitalfilesonthe

CD-ROM.Theseareindicatedthroughouttheguidebook

bytheiconshownabove.

StandardChartered

CorporateIdentityWebGuidelines

1GeneralBranding

1.1StandardCharteredLogo

1.1.1IdentityElements

Single-lineVersion

StackedVersion

ReversedBlueTintVersion

TheTrustmark

1.1.2LogoMinimumSize&ClearSpaceSpecifications

TheLogo

TheTrustmark

1.2LogoColours&TheirUsage

1.2.1LogoApplications

Full-colourVersion

ReversedBlueTintVersion

WebPageMastheads

Dos&Don'ts

1.3ColourPalette

1.3.1PrimaryColours

1.3.2SecondaryColours

1.3.3BusinessUnitColours

1.4VisualIdentityBand

1.4.1Proportions

1.4.2ColourSpecifications

1.4.3Dos&Don'ts

1.5CorporateTypefaces

1.5.1EnglishFont-HelveticaNeue

1.5.2ChineseFont-Traditional&Simplified

1.5.3ScriptFont-ChiewScript

1.5.4Script-Usage&Applications

1.6Naming

1.6.1DomainNames

2WebDesignGuidelines

2.1InformationArchitecture

2.1.1Labelling

2.1.2Hyperlinking

2.2Animation,JavaScriptandPlug-ins

2.3Templates

2.3.1GroupHomepage

Structure

Dimensions

2.3.2CountryHomepage

2.3.2.1Structure

23.2.2Dimensions

2.3.3ProductPage

2.3.3.1Structure

23.3.2Dimensions

2.3.4FunctionPage

Structure

23.4.2Dimensions

2.3.5InsiderPage

Structure

Dimensions

2.4PageComponents

2.4.1CommonComponents

LogoandVisualIdentityBar

Search

TopNavigation

Footer

2.4.2HomepageComponents

HomepageSpotlight

OnlineCustomerServicesBox

BusinessUnitNavigation

HighlightsArea

HighlightsBanners

UpdatesandToolsArea

2.4.3Second-levelPagesComponents

SectionHeader

CustomerServicesBox

Left-handNavigation

BreadcrumbTrail

PageHeaders

ToolsandFormsBox

HighlightsBox

2.5TransactionalWebPages

2.5.1Examples

2.6Pop-UpWindows

2.6.1Examples

2.7GlobalStyleSheet

2.7.1StyleSheet

2.8Forms

2.8.1Example

3UsefulGuidelines

3.1Others

3.1.1Images

3.1.2Cookies

3.1.3FileSize&DownloadTime

3.1.4Plug-ins,JavaScript,Attachments&Forms

3.1.5OptimiseHTMLPagesForSearchEngines

3.1.6Browser&ViewingRequirements

3.1.7FileNamingConventionsForGroup&CountryWebsites

3.1.8GroupWebsitesDirectoryStructure

3.1.9UsingContentManagementSystem

3.1.10UsingExternalVendors&Agencies

DigitalWorkAids

StandardCharteredLogo,

VisualIdentityBand&

WebPageMasthead

Approvals

.1

StandardCharteredLogo

IdentityElements1.1.1

LogoMinimumSize&ClearSpaceSpecifications1.1.2

StandardCharteredLogo

IdentityElements

Single-lineVersion

StackedVersion

ReversedBlueTintVersion

TheTrustmark1.1,1.4

OurlogoisattheheartofourBrandIdentity.

ItisavisualrepresentationoftheBank,andstandsfor

everythingwebelievein.Itsnewlookhasevolvedwitha

strongheritagefromouroldlogo.

Thenew3-dimensionalversionrepresentsthepartnership

westrivetobuildamongstourselvesandwithourcustomers,

whilstalsoreflectingourupwardmovementtowardsachieving

greaterheights.

Whatyouseeisamorecontemporary,refreshedlogothat

hasbeendesignedasasymbolforournewBrand.

Pleasenotethatthevariouslogosdiscussedinthissection

areforwebpagedevelopmentonly.Logosforothermedia

arenotcoveredinthisguide.

.1.1.1

StandardCharteredLogo

IderavElements

Single-lineWersion面

Thispageshowst^epreferredversions

foruseonwebpa奏.Whiletheyare

usedprimarilyonwebpages,insome

casestheymayalsobousedonweb

banners.\

Standa

SingleNineEnglisiyversion

Deprecated

StandarcLCh

/渣打

andardChartered

渣打銀行

Single-lineEnglishWithSimplifiedChineseVersion

StandardCharteredCorporateIdentityWebGuidelines

.1.1.2

StandardCharteredLogo

IdentityElements

StackedVersion弓

ThestackedversionoftheStandard

CharteredLogoisrecommendedforuse

onwebbanners.

Standard

Chartered

StackedEnglishVersion

Standard.Standard、

CharteredCharteredJ

渣打金艮行X渣打銀行?

StackedEnglishWithTraditionalChineseVersionStackedEnglishWithSimplifiedChineseVersion

StandardCharteredCorporateIdentityWebGuidelines

.1.1.3

Stan議dCharteredLogo

Idenb^yElements

Reverse(r&ueTintVersionQ

Whenrequired,th^reversedbluetint

versionofthelogoc^nbeused.

Single-lineEnglishWithSimplifiedChineseVersion

StandardCharteredCorporateIdentityWebGuidelines

.1.1.4

StandardCharteredLogo

IdentityElements

TheTrustmark磕

Thetrustmarkmaybeusedonitsown.

Withtime,itisintendedthatthetrustmark

willevolveandbecomesingularly

representativeof,andsynonymouswith

theStandardCharteredBrand.

StandardCharteredCorporateIdentityWebGuidelines

,1.2

StandardCharteredLogo

LogoMinimumSize&

ClearSpaceSpecifications

TheLogo

TheTrustmark1.1,2.2

11.1.2.1

StandardCharteredLogo

LogoMinimumSize&

ClearSpaceSpecifications

TheLogo

Thispagedemonstrateshowtheminimumsizeforthevariousversionsofthelogoandits

correspondingclearspacerequirementsarederived.

Toensurethelogoisprominentandlegible,alwayskeeptheareaarounditfreeofother

textorgraphicelements.

Theminimumclearspaceisshownbelow.Moreclearspacearoundthelogowillhelpits

legibilityandincreaseitseffectivenessonthepage.

TheminimumlogosizeisX=28.5pixels.

Deprecated

StandardCharteredCorporateIdentityWebGuidelines

.1.2.2

StandardCharteredLogo

LogoMinimumSize&

ClearSpaceSpecifications

TheTrustmark

Toensurethetrustmarkisprominent,

alwayskeeptheareaarounditfreeof

othertextorgraphicelements.

TheminimumsizeisX=28.5pixels.

%X

X

%x

Clearspacearoundthetrustmark

StandardCharteredCorporateIdentityWebGuidelines

.2

LogoColours&TheirUsage

LogoApplications1.2.1

2.1

LogoColours&TheirUsage

LogoApplications

Full-colourVersion

ReversedBlueTintVersion

WebPageMastheads

Dos&Don'ts

1

LogoColours&TheirUsage

LogoApplications

Full-colourVersion

Colours

1StandardCharteredBlue

2StandardCharteredBlueTint

3StandardCharteredGreen

4StandardCharteredGreenTint

Forindexcolourcodes,referto1.3.1.

Standard巴

Chartered

StandardCharteredCorporateIdentityWebGuiddines

Standard哪福匕ered區(qū)

StandardCharteredCorporateIdentityWebGuidelines

LogoColours&TheirUsage

LogoApplications

WebPageMastheads磕

ToclearlydifferentiatebetweenPublic

websitesandInternalwebsites,the

StandardCharteredLogoshouldbe

applieddifferentlyontheirrespective

mastheads.

OnaPublicwebsiteandInternal

websitessuchasSCyBernet,thelogois

positionedattheleftofthemasthead,

abovethetopnavigationbaronawhite

background,asshownhere.

X=39pixels.

StandardCharteredCorporateIdentityWebGuidelines

1

LogoColours&TheirUsage

LogoApplications

Dos&Don'ts

Dos

Full-colourVersion

Whenthelogoisonanimage,allitselements

shouldremainclear.Positionitona'clean'

areaoftheimage.Whenapplyingthefull-

colourlogotoaflatbackgroundcolour,white

isthebestchoice.Palecoloursmayalsobe

used.Ensuresufficientcontrast.

Deprecated

Don'ts

Full-colourVersion

Donotusethelogoagainstasimilar-coloured

background.Ifanimageistoodark,oristoo

similarintonetooneofthelogo'scolours,

apartofthelogomaybelost.

ReversedBlueTintVersion

Donotusethisifthebackgroundimageis

toolightorofasimilartonetoStandard

CharteredBlue.Donotusedistinctivetonal

changesbehindthelogothatmayseparate

theelementsortakeattentionawayfromit.

StandardCharteredCorporateIdentityWebGuidelines

.3

ColourPalette

PrimaryColours1.3.1

SecondaryColours1.3.2

BusinessUnitColours1.3.3

ColourPalette

PrimaryColours

Thecolourpaletteconsistsofthe

followingStandardCharteredprimary

coloursandtheircorrespondingindex

colourcodesoptimisedfortheweb.

Theseprimarycoloursareusedinthe

StandardCharteredLogoandcanbe

usedinotherdesignelementsto

maximiseBranding.

StandardCharteredGreenStandardCharteredBlue

IndexColour#009015IndexColour#006596

StandardCharteredGreenTintStandardCharteredBlueTint

IndexColour#66BB66IndexColour#66A3BE

StandardCharteredCorporateIdentityWebGuidelines

.3.2

ColourPalette

SecondaryColours

Thesecondarycolourpaletteconsistsof

arangeofgreensandblueschosento

complementtheprimarycoloursandfor

maximumBranding.Thesecoloursmay

beusedindesigningStandardChartered

webpages.

StandardCharteredBlueandStandard

CharteredGreenarealsoshownonthis

pagetopresentthecompletespectrumof

StandardCharteredcolours.

Green1Blue1

IndexColour#86C533IndexColour#OOA1D5

Green2Blue2

IndexColour#3DAE38IndexColour#017AA7

StandardCharteredGreenStandardCharteredBlue

IndexColour#009015IndexColour#006596

Green3Blue3

IndexColour#007200IndexColour#004A6D

StandardCharteredCorporateIdentityWebGuidelines

.3.3

ColourPalette

BusinessUnitColours

Thissectionshowsthecolourpalettefor

thevariousBusinessUnitmastheads.

Differentcolourshavebeenchosento

representdifferentunitsforeasy

identificationwhenbrowsingthewebsite.

PersonalBanking

IndexColourIndexColourIndexColourIndexColourIndexColour

#127200#036900#098400#O66EC1#005FB6

BusinessFinancialServices

IndexColourIndexColourIndexColourIndexColourIndexColour

#26589B#1B4988#5179AF#O66EC1#005FB6

Corporate&InstitutionalBanking

IndexColourIndexColourIndexColourIndexColourIndexColour

#269D8B#41857B#51B0A2#O66EC1#005FB6

GlobalMarkets

IndexColourIndexColourIndexColourIndexColourIndexColour

#1C8A4O#157635#49A166#O66EC1#005FB6

Divisions-Careers,HR,Search,etc.

IndexColourIndexColourIndexColourIndexColourIndexColour

#40AF40#U8EU#66BF66#O66EC1#005FB6

StandardCharteredCorporateIdentityWebGuidelines

.4

VisualIdentityBand

Proportions1.4.1

ColourSpecifications1.4.2

Dos&Don'ts1.4.3

Colourisapowerfulmeansofvisualidentification.Thatis

whyStandardChartered'ssignatureBlueandGreenhave

beenappliedtoanimportantnewmotifthatwillhelpbuild

visibilityandrecognitionforourBrand.

Comprisingfivecolourbars,eachrepresentingoneofour

BrandValues,theVisualIdentityBandwillbecomeas

representativeoftheBrandasthelogo.Thestriking

progressionfromlighttodarktonesrepresentsthegrowth

an