Huisstijl. [style]guide december 2017

Transcriptie

1 Huisstijl [style]guide december 2017

2 Huisstijl amsterdams netwerk [een]zaamheid Visuele identiteit Er 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.

3 [kern]waarden 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

4 [beeld]merk Betekenis beeldmerk 1. 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.

5 [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 Beeldmerk in kleurtint Beeldmerk alleen rechterzijde zichtbaar Niet toegestaan: beeldmerk alleen onderzijde zichtbaar

6 [woord]merk Combinatie beeldmerk en woordmerk. Gebruik nooit het woordmerk zonder beeldmerk op een oppervlakte. verticaal horizontaal woordmerk zonder beeldmerk Uitbeelding typografie van het woordmerk 1. 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.

7 [beeld]merk los of in combinatie met het [woord]merk Beeldmerk los Beeldmerk in combinatie woordmerk verticaal Beeldmerk in combinatie woordmerk horizontaal

8 [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

9 [kleur]gebruik Uitbeelding kleurgebruik van het woordmerk 1. 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. Kleurassociaties Kleuren 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

10 [kleur]gebruik Kleurenpalet Naast 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. Basiskleuren Primaire kleurengroep Secundaire kleurengroep Grijsblauw C/M/Y/K : 52/27/20/38 R/G/B : 95/112/126 Kleurcode : # 5f707e Pantone : 5405C ANE - primair - 1. Beige C/M/Y/K : 10/9/20/0 R/G/B : 228/222/203 Kleurcode : #e1ddca ANE - primair - 2. Geel C/M/Y/K : 9/20/78/0 R/G/B : 223/196/95 Kleurcode : #dfc45f ANE - primair - 3. Oranje C/M/Y/K : 9/58/100/0 R/G/B : 204/129/50 Kleurcode : #cc8132 ANE - secundair - 1. Paars 1 C/M/Y/K : 24/30/0/0 R/G/B : 167/169/213 Kleurcode : #a5a7d2 ANE - secundair - 2. Paars 2 C/M/Y/K : 35/45/0/14 R/G/B : 147/127/173 Kleurcode : #8d7eaa ANE - secundair - 3. Blauw 1 C/M/Y/K : 57/43/17/0 R/G/B : 122/136/172 Kleurcode : #7e87a9 Rood C/M/Y/K : 0/100/100/10 R/G/B : 184/31/37 Kleurcode : b81f25 Pantone : 485C ANE - primair - 4. Groen C/M/Y/K : 63/28/60/6 R/G/B : 103/144/118 Kleurcode : #748f76 ANE - primair - 5. Blauw 1 C/M/Y/K : 25/15/10/19 R/G/B : 159/169/180 Kleurcode : #a1a8b2 ANE - primair - 6. Blauw 2 C/M/Y/K : 25/7/0/30 R/G/B : 140/162/182 Kleurcode : #91a0b4 ANE - secundair - 4. Blauw 2 C/M/Y/K : 37/29/0/42 R/G/B : 105/112/142 Kleurcode : #6b6f8c ANE - secundair - 5. Blauw 3 C/M/Y/K : 50/16/0/30 R/G/B : 91/137/172 Kleurcode : #6a88a9 ANE - secundair - 6. Blauw 4 C/M/Y/K : 66/33/0/19 R/G/B : 73/125/175 Kleurcode : #5c7cac ANE - primair - 7. Blauw 3 ANE - primair - 8. Blauw 4 ANE - primair - 9. Zwart ANE - secundair - 7. ANE - secundair - 8. ANE - secundair - 9. C/M/Y/K : 52/27/20/60 C/M/Y/K : 52/27/20/80 C/M/Y/K : 40/0/0/100 Mint Groen 1 Groen 2 R/G/B : 62/83/95 R/G/B : 37/54/64 R/G/B : 0/0/0 C/M/Y/K : 62/14/45/0 C/M/Y/K : 47/22/89/0 C/M/Y/K : 42/30/70/5 Kleurcode : #47545f Kleurcode : #2e3941 Kleurcode : # R/G/B : 102/173/155 R/G/B : 151/168/77 R/G/B : 152/152/101 Kleurcode : #7eab9a Kleurcode : #9aa754 Kleurcode : #969768

11 [kleur]gebruik Kleuren aanpassen Zowel 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% 30% 10% Donkerder + 10% zwart + 20% zwart + 30% zwart + 40% zwart + 50% zwart Lichter 90% 70% 50% 30% 10% Donkerder + 10% zwart + 20% zwart + 30% zwart + 40% zwart + 50% zwart

12 [kleur]gebruik Kleuren Beperk 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. Basiskleuren Primaire kleurengroep Secundaire kleurengroep

13 [kleur]verloop Kleurenverloop Het gebruik van verlopen is toegestaan als het verloop een lichtere of donkerdere tint bevat. Mixen van verschillende kleuren is niet toegestaan. 10% 100% +%zwart Toegestaan Kleurenverloop van licht naar donker binnen de kleurtint. Niet toegestaan Kleurenverloop van een kleur naar een andere kleur.

14 [fx]effecten Slagschaduw Voor objecten of kopteksten is slagschaduw toegestaan, gebruik hiervoor alleen zwart of een percentage van zwart. Transparantie Transparantie, 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. PROGRAMMARAAD Strategisch Netwerk Eenzaamheid Pakhuis De Zwijger Regieteam Frontoffice Coalitie Erbij AMSTERDAMS NETWERK EENZAAMHEID Interne Expertgroep Wetenschappelijk Expertgroep Werkgroep Communicatie Juist gebruik van slagschaduw en transparantie Onjuist gebruik van slagschaduw en transparantie

15 [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] ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Arial Narrow [Regular] 7. Arial Narrow [Italic] 8. Arial Narrow [Bold] 9. Arial Narrow [Bold Italic] ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz

16 [secundaire] beeldelementen Skyline Amsterdam Naast 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

17 [secundaire] beeldelementen Cirkels Naast 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. PROGRAMMARAAD Strategisch Netwerk Eenzaamheid Pakhuis De Zwijger Regieteam Frontoffice Coalitie Erbij AMSTERDAMS NETWERK EENZAAMHEID Interne Expertgroep Wetenschappelijk Expertgroep Werkgroep Communicatie

18 [up]date [editie 3] Mei 2017 Beste lezers De 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 Voorbeeld toepassing [huis]stijl > Lees verder Colofon amsterdams netwerk [een]zaamheid > Aan/afmelden Nieuwsflits Contact E: I: amsterdam.nl/aanpakeenzaamheid Kent u collega s die zich ook op het gebied van eenzaamheid inzetten? Maak ze dan attent op deze nieuwsflits.

19 Voorbeeld toepassing [huis]stijl

20 [een]zaamheid pak je samen aan