Huisstijl [style]guide 1 · • Typografie • Kleurgebruik • Diverse templates • Styleguide:...

Huisstijl [style]guide 1.0

19 december 2017

Visuele identiteitEr is veel energie en toewijding voor het aanpakken van eenzaamheid in Amsterdam. Veel mensen en organisaties willen zich extra inzetten. En nemen hun

aandeel in de opgave en de ‘Aanpak Eenzaamheid Amsterdam’. We bundelen de kracht van de stad in ‘amsterdams netwerk [een]zaamheid’. Om samen

de strijd tegen eenzaamheid te intensiveren. Dit netwerk bestaat uit aandeelhouders; formele en informele organisaties en initiatieven en de gemeente in haar

reguliere rol als beleidsmaker.

Aandeelhouderschap betekent gedeeld eigenaarschap van de opgave. Co creatie is de werkwijze: aandeelhouders ontwikkelen samen en voeren samen

uit. Om synergie, samenwerking en eigenaarschap te accentueren en te versterken is een zelfstandig en eigen visuele identiteit voor het netwerk gecreëerd,

waaronder vallen:

• Beeldmerk

• Woordmerk

• Typografie

• Kleurgebruik

• Diverse templates

• Styleguide: Do’s en Dont’s

Deze huisstijl dient als basis voor de verder te ontwikkelen producten en kan zowel online als offline gebruikt worden. In de eerste instantie is deze huisstijl

ontwikkelt worden voor interne communicatie, later kan - als dat wenselijk is - een module worden toegevoegd voor externe communicatie. De module voor de

externe communicatie zal handvatten geven om met emotie te kunnen werken, waardoor de boodschap zich sterker kan verankeren en meer aanspraak kan

maken op de beleving van de ontvanger.

Huisstijl ‘amsterdams netwerk [een]zaamheid’

Pijlers huisstijl ‘amsterdams netwerk [een]zaamheid’De huisstijl wordt conceptueel gevisualiseerd op basis van onderstaande kernwaarden. De kernwaarden worden gebruikt om de visuele identiteit te laden en

bepalen mede naast esthetiek de totstandkoming van typografie, kleurgebruik en beeldtaal.

• Zakelijk : effectiviteit, beleid, georganiseerd, wetenschappelijk, kennis en kunde

• Dienstbaar : betrouwbaar, met elkaar, verbinden, faciliteren, open en transparant

• Dynamisch : al lerende doen, terwijl je uitvoert blijven verkennen, leren en verbeteren

• Diepte/dimensie : complex, emotie

• Creativiteit : doorontwikkelen, blijven verkennen, maatwerk

Visuele pijler

• Ruimtelijkheid

[kern]waarden

Betekenis beeldmerk1. Het beeldmerk beeld een persoon uit die is afgesloten van de buitenwereld. De kring of cirkel symboliseert een

schild of muur, die een scheiding aanbrengt tussen de persoon en de mensen om zich heen

2. De cirkel stelt de eenzame persoon centraal en maakt daarmee de eenzame persoon tot het hart of middelpunt

3. Kring wordt ook gebruikt om datgene in het maatschappelijk leven aan te duiden, wat binnen zekere grenzen

gelegen is, of den omtrek, waarbinnen zich iets beweegt. Kring staat ook synoniem voor; groep, district,

vereniging, verbond, gezelschap, etc.

[beeld]merk

Het beeldmerk mag los van het woord merk gebruikt worden. De tint mag verandert worden en ook mag een gedeelte - de linker of rechterzijde - van het

beeldmerk gebruikt worden.

Beeldmerk los van woordmerk

[beeld]merk

Beeldmerk in kleurtint Beeldmerk alleen rechterzijde zichtbaar

Niet toegestaan:beeldmerk alleen onderzijde zichtbaar

[woord]merk

Combinatie beeldmerk en woordmerk. Gebruik nooit het woordmerk zonder beeldmerk op een oppervlakte.

Uitbeelding typografie van het woordmerk1. Typografie: alle woorden zijn in onderkast geschreven, dit om de kernwaarde “dienstbaar” te benadrukken. De witruimte tussen de letters symboliseert “los staan”, de situatie van een eenzame persoon, hij of

zij is niet verbonden.

2. Typografische betekenis [Square bracket]: We gebruiken vierkante haakjes als we de woorden van een andere persoon willen wijzigen, om een situatie te verduidelijken, door te isoleren. In het woordmerk

wordt “isoleren” letterlijk vertaalt. Het woord “een” wordt apart gezet van de rest en raakt daardoor geïsoleerd. Zo verstrekt het woordmerk op typografische wijze te betekenis van het beeldmerk. “een” is

geïsoleerd en staat los van de rest. Aanbevolen wordt om de typografie van het woordmerk over te nemen in titels en kopteksten. Optioneel is om de typografie over te nemen in broodtekst.

3. Omdat de huisstijl zoveel mogelijk tracht ‘eenzaamheid’ centraal te stellen wordt ‘eenzaamheid’ groter afgebeeld dan ‘amsterdams netwerk’. Amsterdams netwerk staat wel boven eenzaamheid.

verticaal horizontaal woordmerk zonder beeldmerk

[beeld]merk los of in combinatie met het [woord]merk

Beeldmerk los

Beeldmerk in combinatie

woordmerk verticaal

Beeldmerk in combinatie

woordmerk horizontaal

[beeld]merk in combinatie met het [woord]merk

Gebruik nooit het beeldmerk op 100% van de kracht of in volledige vorm 2 x op het zelfde oppervlakte

Beeldmerk en woordmerk in andere verhoudingen

Beeldmerk in percentage in combinatie

Niet toegestaan: 2 x beeldmerk totaal

Niet toegestaan: 2 x beeldmerk totaal

[kleur]gebruik

KleurassociatiesKleuren spelen een grote rol in het gevoel dat we ergens bij krijgen. Deze kleurassociaties worden onder andere gevormd door cultuur, mode, ervaring,

persoonlijke voorkeur en kleurbeleving. Het menselijk geheugen is vatbaar voor visuele prikkels en daar is kleur er een van. Hoewel er geen wetenschappelijke

bewijzen zijn voor het effect van kleuren, worden op grote schaal wel eigenschappen en uitwerkingen aan toegekend. De betekenis en werking van kleur is erg

persoonlijk. Maar er zijn ook overeenkomsten in kleurbeleving.

Let op: veel kleuren hebben zowel een positieve als een negatieve associatie. De context zal doorslaggevend zijn in het beleven van de kleur. Ook de

kleursterkte speelt hierin mee. Hoe lichter de kleur, hoe zachter de uitwerking en het effect van de kleur.

Rood : Actie, avontuur, agressief, bloed, gevaar, gedrevenheid, energie, opwinding, liefde, passie, kracht, daadkrachtig

Grijsblauw : Autoriteit, kalm, zelfvertrouwen, waardigheid, gevestigd, loyaliteit, macht, succes, sereen, betrouwbaar, autoriteit, zakelijk, saaiheid, nederigheid,

humeurig, praktisch, respect, somber, stabiel

Uitbeelding kleurgebruik vanhet woordmerk1. Kleurgebruik op basis van kleurassociaties. Grijsblauw staat hier

voor de kernwaarden zakelijk en dienstbaar. De kleur rood staat

voor de kernwaarden: dynamisch, creativiteit en emotie. Behalve

dat de kleur rood het woord “een” centraal zet geeft het ook de

relatie met de gemeente Amsterdam aan.

[kleur]gebruik

KleurenpaletNaast de basiskleuren grijsblauw en rood, zijn er nog twee kleurpaletten toegevoegd . De “Primaire kleurengroep en de “Secundaire kleurengroep.

Een Indesign template met de kleurenpalleten is op de website te downloaden.

Primaire kleurengroep Secundaire kleurengroepBasiskleuren

GrijsblauwC/M/Y/K : 52/27/20/38R/G/B : 95/112/126Kleurcode : # 5f707ePantone : 5405C

RoodC/M/Y/K : 0/100/100/10R/G/B : 184/31/37Kleurcode : b81f25Pantone : 485C

ANE - primair - 1. Beige

C/M/Y/K : 10/9/20/0

R/G/B : 228/222/203

Kleurcode : #e1ddca

ANE - primair - 4. Groen

C/M/Y/K : 63/28/60/6

R/G/B : 103/144/118

Kleurcode : #748f76

ANE - primair - 7. Blauw 3

C/M/Y/K : 52/27/20/60

R/G/B : 62/83/95

Kleurcode : #47545f

ANE - primair - 2. Geel

C/M/Y/K : 9/20/78/0

R/G/B : 223/196/95

Kleurcode : #dfc45f


C/M/Y/K : 25/15/10/19

R/G/B : 159/169/180

Kleurcode : #a1a8b2


C/M/Y/K : 52/27/20/80

R/G/B : 37/54/64

Kleurcode : #2e3941

ANE - primair - 3. Oranje

C/M/Y/K : 9/58/100/0

R/G/B : 204/129/50

Kleurcode : #cc8132


C/M/Y/K : 25/7/0/30

R/G/B : 140/162/182

Kleurcode : #91a0b4

ANE - primair - 9. Zwart

C/M/Y/K : 40/0/0/100

R/G/B : 0/0/0

Kleurcode : #000000

ANE - secundair - 1.

Paars 1

C/M/Y/K : 24/30/0/0

R/G/B : 167/169/213

Kleurcode : #a5a7d2


Blauw 2

C/M/Y/K : 37/29/0/42

R/G/B : 105/112/142

Kleurcode : #6b6f8c


Mint

C/M/Y/K : 62/14/45/0

R/G/B : 102/173/155

Kleurcode : #7eab9a


Paars 2

C/M/Y/K : 35/45/0/14

R/G/B : 147/127/173

Kleurcode : #8d7eaa


Blauw 3

C/M/Y/K : 50/16/0/30

R/G/B : 91/137/172

Kleurcode : #6a88a9


Groen 1

C/M/Y/K : 47/22/89/0

R/G/B : 151/168/77

Kleurcode : #9aa754


Blauw 1

C/M/Y/K : 57/43/17/0

R/G/B : 122/136/172

Kleurcode : #7e87a9


Blauw 4

C/M/Y/K : 66/33/0/19

R/G/B : 73/125/175

Kleurcode : #5c7cac


Groen 2

C/M/Y/K : 42/30/70/5

R/G/B : 152/152/101

Kleurcode : #969768

[kleur]gebruik

Kleuren aanpassenZowel de basiskleuren als de primaire en secundaire kleurengroepen mogen aangepast worden. Alle kleuren mogen lichter en donkerder gemaakt worden.

Lichter door een (10% - 90%) percentage van de kleur te gebruiken en donkerder door toevoeging van zwart (10% - 90%).

Lichter 90% 70% 50%

Donkerder + 10% zwart + 20% zwart + 30% zwart + 40% zwart + 50% zwart

30% 10%

Lichter 90% 70% 50%

Donkerder + 10% zwart + 20% zwart + 30% zwart + 40% zwart + 50% zwart

30% 10%

[kleur]gebruik

KleurenBeperk kleurgebruik zo veel mogelijk tot de twee basiskleuren. Gebruik primaire kleurengroep voor grafieken en infographics. Bij complexere illustraties kan

gebruikt gemaakt worden van de secundaire kleurengroep.

Primaire kleurengroepBasiskleuren Secundaire kleurengroep

[kleur]verloop

KleurenverloopHet gebruik van verlopen is toegestaan als het verloop een lichtere of donkerdere tint bevat. Mixen van verschillende kleuren is niet toegestaan.

ToegestaanKleurenverloop van licht naar donker

binnen de kleurtint.

Niet toegestaan Kleurenverloop van een kleur naar

een andere kleur.

10% 100% +%zwart

[fx]effecten

SlagschaduwVoor objecten of kopteksten is slagschaduw toegestaan, gebruik hiervoor alleen zwart of een percentage van zwart.

TransparantieTransparantie, diepte en dementie zijn enkele van de pijlers, daarom is gebruik van deze effecten toe gestaan. Let wel dat bij het gebruik van transparantie de

overlappende kleur binnen de kleurtint blijft.

Juist gebruik van slagschaduw en transparantie

Onjuist gebruik van slagschaduw en transparantie

RegieteamFrontoffice

InterneExpertgroep

PakhuisDe Zwijger

Weten-schappelijkExpertgroep

WerkgroepCommunicatie

AMSTERDAMS NETWERK

EENZAAMHEID

PROGRAMMARAAD

Strategisch Netwerk

Eenzaamheid

Coalitie Erbij

[typo]grafie

Font Arial; universeel en browser veilig Omdat het netwerk uit meerdere aandeelhouders/eigenaren bestaat en het niet ondenkbaar is dat meerdere partijen met de huisstijl aan de slag moeten is er

gekozen voor een universeel lettertype voor alle platforms - Windows en Mac - ook wel “browser veilige lettertypen” genoemd. Voor schema’s en infographics

is font familie Arial Narrow toegevoegd. De Narrow is een meer economische relatie van Arial. Schema’s of infographics bevatten vaak veel informatie met

beperkte ruimte voor tekst, een economisch lettertype kan hier oplossing bieden. Gebruik bij platte tekst of broodtekst bij voorkeur 75% zwart.

1. Arial [light]

2. Arial [Regular]3. Arial [Italic]4. Arial [Bold] 5. Arial [Bold Italic]

6. Arial Narrow [Regular]7. Arial Narrow [Italic] 8. Arial Narrow [Bold]9. Arial Narrow [Bold Italic]

ABCDEFGHIJKLMNOPQRSTUVWXYZ | abcdefghijklmnopqrstuvwxyz | 0123456789









[secundaire] beeldelementen

Skyline AmsterdamNaast het logo dient ieder document minimaal een maal gebruik te maken van de schematische weergave van de skyline van Amsterdam. Geef de skyline altijd

een horizon die afloopt aan de onderkant van de pagina.

Horizon over gehele breedte

Horizon over gehele breedte rechtslijnend

Denkbeeldige horizon over gehele breedte gecentreerd

Niet toegestaan: Zonder horizon

[secundaire] beeldelementen

CirkelsNaast het logo en de skyline van Amsterdam maken cirkels een groot deel uit van de huisstijl.

Daar waar mogelijk zullen afbeeldingen of infographics gebruikmaken van cirkels.

RegieteamFrontoffice

InterneExpertgroep

PakhuisDe Zwijger

Weten-schappelijkExpertgroep

WerkgroepCommunicatie

AMSTERDAMS NETWERK

EENZAAMHEID

PROGRAMMARAAD

Strategisch Netwerk

Eenzaamheid

Coalitie Erbij

Voorbeeldtoepassing [huis]stijl

[up]dateBeste lezersDe Snapshot is de voedingsbodem voor onze verdere samenwerking. De afgelopen periode hebben we hier vijf avonden met elkaar over gesproken in Pakhuis de Zwijger. Inspirerende en indrukwekkende sessies, waaruit bleek dat er veel behoefte is aan samenwerken en kennisdelen. Al doende lerend, werken we verder aan een aanpak eenzaamheid die werkt!Ik hoop jullie snel weer te ontmoeten, bij Pakhuis de Zwijger of online.

Tot ziens,Marijke Andeweg, regisseur eenzaamheid Amsterdam> Lees het verslag van de Snapshotbijeenkomsten

Colofonamsterdams netwerk [een]zaamheid> Aan/afmelden Nieuwsflits

ContactE: [email protected]: amsterdam.nl/aanpakeenzaamheid

Kent u collega’s die zich ook op het gebied van eenzaamheid inzetten? Maak ze dan attent op deze nieuwsflits.

[editie 3] Mei 2017

> Lees verder

Voorbeeld toepassing [huis]stijl

[een]zaamheid pak je samen aan

Huisstijl [style]guide 1 · • Typografie • Kleurgebruik • Diverse templates • Styleguide:...

Documents

Transcript of Huisstijl [style]guide 1 · • Typografie • Kleurgebruik • Diverse templates • Styleguide:...