Intergenerationeel leren
CO Logo
Bekijk BAP boek

Welkom!

Op deze website kan je alle belangrijke assets terugvinden die ontwikkeld en gebruikt werden bij de creatie van de CO-campagne. Daarnaast worden de geldende huisstijlregels per onderdeel opgesomd. Meer informatie kan altijd worden ingewonnen via het BAP boek genaamd CO(nnecteer).

Mock-up BAP boek

CO(nnecteer)

Het BAP boek, CO(nnecteer), weergeeft alle belangrijke stappen die het ontwerpproces van de CO-campagne hebben gestuurd. Zo omvat het boek een uitvoerige literatuurstudie. Daarnaast wordt het kwalitatieve, kwantitatieve en grafisch onderzoek beschreven. Vervolgens worden de huisstijl van het CO-merk en de campagnewebsite besproken. Voorts kan je heel wat extra toepassingen ontdekken: van t-shirts tot posters en visuals voor social media. Dit en nog veel meer kan je terugvinden in het BAP boek!

Campagnewebsite

Uit zowel het kwalitatief als het kwantitatief onderzoek kwam voort dat het ontwikkelen van een website de meest aangewezen keuze is om met de campagne zo veel mogelijk generaties te bereiken.

Op basis van de onderzoeksresultaten werd er een prototype ontwikkeld dat moet dienen als leidraad voor de effectieve uitwerking van het CO-platform.

Tal van interessante functies zoals een filterfunctie, een review-en ratingfunctie, een chatbox en een afsprakenkalender maken de website uitermate handig in gebruik. Het prototype kenmerkt zich door een evenwichtige balans tussen creatief ontwerp en gebruiksvriendelijkheid.

Een volledige beschrijving van de campagnewebsite, inclusief studiewerk, wireframes, designkeuzes en scenario's, kunnen geraadpleegd worden via het BAP boek CO(nnecteer).

Het prototype kan in PDF en als gedeeld bestand vanuit Adobe XD bekeken worden.

Mock-up campagnewebsite laptop

Om de werking van het prototype te demonstreren werden er zeven video's gemaakt die alle belangrijke aspecten van de campagnewebsite stap voor stap weergeven met behulp van een scenario.

Het uitgewerkte scenario steunt op de eerste stappen binnen het platform van fictieve gebruiker 'Marie-Thérèse Van De Waterschanz'. De demonstratievideo's capteren alle relevante stappen die deze 71-jarige vrouw onderneemt om een leerafspraak op te zetten.

De video's kunnen later ook dienen als instructievideo's om nieuwe gebruikers te begeleiden in hun eerste stappen binnen het CO-platform.

Deze video's kunnen geraadpleegd worden via onderstaande links.

Logo

Het CO-logo omvat meervoudige betekenissen en metaforen. In eerste instantie representeert het logo de ontketening van een metaforisch slot waarbij de deur tot het onderling uitwisselen van kennis en vaardigheden tussen generaties geopend wordt. Daarnaast vormt het logo een schakel van verbinding tussen de participanten. In een eerste ontwerpfase werd er ook getracht om een oneindige schakel te creëren. Ten voordele van het weergeven van het woordmerk ‘CO’ werd het logo onderbroken ter hoogte van de 'C'. Zo is de merknaam ‘CO’ duidelijk te lezen. Het gevoel van oneindigheid blijft wel behouden doordat de 'C' de curve van de 'O' volgt. In de letter ‘O’ bevindt zich een tekstballon die verwijst naar de interacties en conversaties tussen de leerpartners onderling. Door de toevoeging van een ‘beentje’ aan de uitsnede van deze letter, krijgt het logo een geheel nieuwe dimensie.

In het logo worden ronde vormen gecombineerd met hoeken en puntige uiteindes. De volledige contour vormt  een ovaal. Er werd bij het ontwerp rekening gehouden met zo veel mogelijk symmetrie. Zo zijn de diktes evenredig gehouden van de onderzijde en bovenzijde. De dikte van het logo wordt ook consistent aangehouden (cfr. zwarte indicatorstrepen).

Veiligheidsmarge

Daarnaast dient er een veiligheidsmarge gerespecteerd te worden. Deze marge zorgt ervoor dat er geen belangrijke elementen van het logo verdwijnen tijdens het snijden van het drukwerk of bij het exporteren van een ontwerp voor digitaal gebruik. De richtlijn is om minstens de doorsnede van de tekstballon (binnenwerk van de letter ‘O’) te nemen als veiligheidsmarge. Hierbij geldt dat de marge minimaal 5 mm dient te zijn voor drukwerk. Voor groot formaat drukwerk wordt er een marge van 10 mm ingesteld.

Ook bij digitale toepassingen wordt een veiligheidsmarge toegepast. Hier geldt hetzelfde principe, waarbij de minimale marge altijd 25 pixels bedraagt van de randen van je ontwerp.

Respecteer de veiligheidsmarge rond het logo om de identiteit en integriteit van het CO-merk te beschermen.

Logo veiligheidsmarge
Veiligheidsmarge o.b.v. doorsnede tekstballon

Schalen

Het is daarnaast belangrijk om het logo altijd proportioneel te schalen zodat er geen ongewenste vervorming optreedt. Tracht bij de plaatsing en schaling van het logo zo veel mogelijk rekening te houden met het geldend stramien.

Stem met andere woorden de grootte af op het formaat van de drager. Voor de meest gangbare formaten kan de breedte van het logo gebaseerd worden het grid. Hier mag ook de helft van een kolom gerekend worden. Er mag visueel bepaald worden welke grootte het logo moet aannemen. Om de leesbaarheid van het logo te garanderen, mag het echter nooit smaller zijn dan 20 mm.

Logo positionering op grid
Positionering en schaling volgens grid (campagnewebsite)
Logo positionering en schaling
Positionering en schaling volgens grid (social media)
Officieel CO logo paarsLogo analyse

Richtlijnen

1. Positionering
Het logo mag in de rechterbenedenhoek, linkerbenedenhoek of rechterbovenhoek geplaatst worden, naargelang de situatie dit vraagt.

2. Kleurkeuze
Het logo wordt bij voorkeur gebruikt in de voorziene paarse huisstijlkleur. In situaties waar het contrast gecompromitteerd wordt, is het gebruik van andere kleurvarianten toegelaten. Ook voor zwart-wit communicatie-uitingen mag de negatieve of positieve variant ingezet worden.

3. Horizontaal logo
In essentie is het CO-logo ontworpen als verticaal logo. Bij nood aan een horizontaal logo, wordt het toegelaten om de baseline uit te sluiten van het logo. In uitzonderlijke gevallen mag de horizontale variant ingezet worden. Dezelfde voorwaarden als hiervoor werden beschreven gelden voor dit logo.

Logo kleurvarianten
Kleurvarianten
Horizontaal logo paars
Horizontaal logo

Don'ts

Hieronder volgen nog enkele te vermijden praktijken met betrekking tot het logo.

- Vervorm of transformeer het logo niet.
- Roteer het logo niet.
- Geef het logo geen omtreklijn of slagschaduw.
- Gebruik het logo niet aflopend.
- Gebruik geen kleuren anders dan de primaire kleuren, zwart of wit.
- Pas de rondingen van het logo niet aan.
- Voeg geen extra typografie toe en wijzig het font (Kufam Medium) van de baseline niet.

Logo don'ts
Don'ts

Typografie

Kufam

CO wil helder en duidelijk communiceren. Dit via klare taal, maar ook via tekstelementen die visueel makkelijk te lezen zijn. Er werd gekozen voor Kufam. Dit is een Arabisch-Latijns tweetalig lettertype bedoeld voor hedendaagse communicatie. Kufam Arabic is gebaseerd op Kufi-inscripties uit de zevende eeuw. De donkere, gecondenseerde vormen van dit vroege Kufi-schrift fungeerden als inspiratiebron voor de Latijnse kleine letters van Kufam. De Latijnse hoofdletters vinden hun oorsprong in de belettering die veel te zien was in bewegwijzering en winkelbelettering in Amsterdam aan het begin van de twintigste eeuw. Deze verschillende periodes uit de geschiedenis van de Arabische en Latijnse wereld komen samen in een eigentijds, leesbaar en esthetisch font dat geschikt is voor gebruik in verschillende media. Dit lettertype werd ontworpen door Wael Morcos en Artur Schmal. Het is vrij beschikbaar via Google Fonts en is dus makkelijk te implementeren in online en offline communicatiemiddelen.

Richtlijnen

1. Leesbaarheid
Zorg ervoor dat de boodschap te allen tijden toegankelijk en leesbaar is. Zeker als tekst op kleurvlakken wordt geplaatst.

2. Uitlijning
Voor webgebruik en digitale toepassingen (website, socialmediakanalen, e-nieuwsbrieven, presentaties, e.d.) wordt de tekst links uitgelijnd of gecentreerd, afhankelijk van de toepassing. Er wordt voor webtoepassingen nooit uitvulling gebruikt. Voor traditionele toepassingen wordt ook de voorkeur gegeven aan links uitgelijnde tekst. In bepaalde gevallen mag de tekst gecentreerd worden. Zo mag een bijschrift gecentreerd worden geplaatst onder een afbeelding, maar dit is geen verplichting. De tekst rechts uitlijnen mag nooit. Enkel voor toepassingen waar lange broodteksten gebruikt worden mag er uitgevuld worden waarbij de laatste regel links wordt uitgelijnd. Denk hierbij aan gedrukte artikels, handleidingen, boeken, e.d. die ettelijke pagina’s tekst bevatten. Hou in dit geval rekening met het ontstaan van ‘gaten’ in de tekst die de leesbaarheid bemoeilijken. De woordspatiëring en letterspatiëring mag in dit geval aangepast worden om het voorkomen van deze zogenaamde ‘gaten’ te beperken. Contacteer bij twijfel altijd de designer van de campagne.

3. Ademruimte
Hou bij de tekstuele opmaak rekening met ademruimte. Opteer niet voor lange blokken tekst, maar hou het kort en bondig. Meer ademruimte (i.e. leesruimte) brengt rust in de tekst en zorgt dat lezers meer gemotiveerd zijn om de tekst te lezen.

4. Puntgrootte en regelafstand
Ook de regelafstand wordt in functie van een aangename leeservaring ingesteld. Tekst wordt bij voorkeur met enige witruimte gescheiden dankzij een aanzienlijke regelafstand. Een fontgrootte van 8 pt gaat bijvoorbeeld gepaard met een regelafstand van 14 pt in broodtekst. Een quote (Kufam Bold) van 10 pt zal worden gecombineerd met een regelafstand van 22 pt. Hier wordt gewerkt met incrementen van 2 pt. De lettertypegroottes voor webgebruik worden verhoogd met incrementen van 2 px  met een minimum van 16 px, mits enkele uitzonderingen zoals het gebruik van erg kleine tekst (e.g. bijschriften, copyrights). Zo is een H1 titel 40 px groot met een regelafstand van 50 en is de bodytekst voor gegevensvelden 18 px groot met een regelafstand van 32 pt. De lettertypegroottes voor traditionele media kunnen vrij gekozen worden naargelang de toepassing dit vraagt en rekening houdend met de incrementen per 2 pt of px. Hou bij de keuze van de fontgrootte rekening met een passende typografische hiërarchie.

*pt staat voor punt, px staat voor pixels

Kapitalen

Broodtekst, quotes, copyrights, bijschriften, paginering, etc. worden nooit in kapitalen geplaatst. Titels van elke grootte daarentegen mogen wel in kapitalen geplaatst worden, maar dat is geen verplichting. Zo worden titels in het BAP boek in kapitalen geplaatst, omwille van de visuele impact en de duidelijke hiërarchie.  

Twaalf stijlen

Het Kufam lettertype omvat de volgende twaalf stijlen:
- Regular 400
- Regular 400 Italic
- Medium 500
- Medium 500 Italic
- SemiBold 600
- SemiBold 600 Italic
- Bold 700
- Bold 700 Italic
- ExtraBold 800
- ExtraBold 800 Italic
- Black 900
- Black 900 Italic

Kufam is een modern, tijdloos font met een goede leesbaarheid. De unieke rondingen maken het font fris en speels zonder in te boeten op de leesbaarheid. Het komt ook enigszins creatief over, hetgeen één van de meer gegeerde factoren bleek uit het kwantitatief onderzoek, waaronder ook duidelijkheid en toegankelijkheid.

Het lettertype wordt ingezet voor alle dragers: offline, online en interne communicatie. Zo draagt het lettertype bij tot een brede herkenbaarheid van de communicatie en ontstaat er consistentie in de branding.  Qua stijl mag de volledige familie van Kufam aangesproken worden. Er zijn echter wel enkele richtlijnen die het gebruik sturen.

Gebruik

- Kufam Medium is uitstekend voor broodtekst in online en offline uitingen.

- Kufam Bold is dan weer geschikt voor titels en accenten in teksten.

- Kufam Italic wordt eerder gebruikt voor het vermelden van bijschriften en copyrights.

- Kufam Regular wordt weinig ingezet, maar kan eventueel dienst doen als alternatief voor een ‘Light' variant.

Opmerking
Kufam heeft geen 'Light' versie ter beschikking. Om dit op te vangen werd er een alternatief font gedefinieerd dat enkel uitsluitend voor deze toepassing mag ingezet worden. Het font KoHo bevat eveneens 12 stijlen en is tevens beschikbaar via Google Fonts. KoHo is een Thaise en Latijnse letterfamilie geïnspireerd op geometrische en humanistische schreefletters.

KoHo letterfamilie

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp QqRr Ss Tt Uu Vv Ww Xx Yy Zz1 2 3 4 5 6 7 8 9 10/ ? , ! * - _ ç à [ ] ^¨£ µ % @ &| “ ‘ { } ° ( ) = + - /: ; * $ €

Kleurenpalet

Primaire kleuren

Het consistent gebruik van de huisstijlkleuren voor zowel tekst, als vlakken, lijnen en soortgelijke elementen is essentieel.

Er werden twee primaire huisstijlkleuren gedefinieerd, zijnde:

Paars
Het integreren van paars in ontwerpen kan mensen inspireren en dat is precies wat de CO-campagne voor ogen heeft. Deze diepe paarse kleur contrasteert goed met de primaire kleur oranje. Dit is tevens de hoofdkleur van het logo (hoewel het logo ook als oranje, witte en zwarte variant beschikbaar is).

Oranje
De gekozen oranje kleur straalt de nodige vrolijkheid en frisheid uit. Uit het kwantitatief onderzoek bleek dat dit gewenste aspecten waren die de CO-campagne dient uit te stralen. Met deze kleurkeuzes wordt deze wens ingewilligd.

Zowel paars als oranje worden gebruikt als tekst-, accent-, lijn-, en vormkleuren in de communicatie. Beide kleuren vormen een goede contrastcombinatie en ogen fris bij simultaan gebruik.

De kleuren kunnen ook op zichzelf gebruikt worden, of worden gecombineerd met een secundaire kleur of met zwart of wit. De voorkeur gaat echter uit naar de volgende combinaties:

- Paars-oranje
- Paars-wit
- Oranje-wit

Huisstijlkleur groenHuisstijlkleur blauwHuisstijlkleur rood

Secundaire kleuren

Voorts zijn er drie secundaire (of ondersteunende) kleuren beschikbaar, zijnde:
- Groen: een frisse, muntgroene kleur
- Blauw: een lichte, hemelsblauwe kleur
- Rood: een dieprode, niet schreeuwerige kleur

Richtlijnen

Voor de broodtekst wordt er zwart (#000000) gebruikt. Titels, inleidingstekst, copyrights en bijschriften, e.d. mogen dan weer een andere kleur krijgen. Zwart is evenwel toegelaten, zeker wanneer er niet in kleur kan worden gedrukt. Pas echter op voor overmatig gebruik van zwart, gezien dit het ontwerp erg donker kan maken. De doelstelling is om de campagne fris en modern te doen ogen. Overmatig gebruik van zwart is dus uit den boze. Zwarte en witte (#FFFFFF) tekstkleur mag echter wel gebruikt worden om contrast te creëren waar nodig, zoals bij plaatsing van tekst op een gekleurd vlak.

Alle kleuren worden in 100% opaciteit gebruikt. De secundaire huisstijlkleuren worden voornamelijk ingezet voor buttons (i.e. knoppen), grafieken, tabellen en kleinschalige (grafische) accenten. Ze mogen ook als achtergrondkleur gebruikt worden bij de opmaak van affiches en socialmediaposts.

Voor digitale toepassingen wordt er gekozen voor de achtergrondkleur ecru (#FDF6E8, CMYK 1% - 4% - 11% - 0%) of puur wit. Wit (#FFFFFF) mag voorts ook gecombineerd worden met de primaire en secundaire kleuren.

Huisstijlkleur ecru
Huisstijlkleur paarsHuisstijlkleur oranje

Huisstijlelementen

Er werden tal van gevarieerde huisstijlelementen gedistilleerd uit de vorm van het logo. Deze huisstijlelementen mogen creatief ingezet worden.

De elementen worden in principe altijd opgemaakt in de paarse of oranje huisstijlkleur. Voor specifieke toepassingen mogen dit ook de secundaire huisstijlkleuren zijn. Zo mag de legende van een grafiek of tabel worden voorzien van tekstballonnen in alle gedefinieerde kleuren uit het palet.

Huisstijlelement met foto

De huisstijlelementen kunnen dienen als placeholder voor afbeeldingen of illustraties. Daarnaast is het toegelaten om tekst te plaatsen op deze elementen, op voorwaarde dat het contrast wordt gegarandeerd.

Huisstijlelementen tekstballonnen

Richtlijnen

De eerste twee rijen die weergegeven worden in het onderstaande overzicht, met uitzondering van de 'C', mogen over de verticale as gespiegeld worden. Roteren of spiegelen over de horizontale as wordt niet toegelaten.

De overige huisstijlelementen mogen gespiegeld worden over de horizontale en verticale as. De rotatie mag in een hoek naar wens gebeuren.

De huisstijlelementen mogen in hoeken geplaatst worden van het ontwerp, maar mogen ook in het canvas een centrale rol spelen of overheen afbeeldingen gepositioneerd worden (al dan niet met tekstuele elementen).

Gebruik de huisstijlelementen niet te vaak en alleen als dit zinvol is. Een cover moet minstens één huisstijlelement bevatten. Affiches en socialmediaposts worden bij voorkeur ook voorzien van één of meerdere huisstijlelementen tenzij er reeds gebruik werd gemaakt van illustraties of iconen.

Huisstijlelementen overzicht

Grid

Het gebruiken van grids (i.e. rasters) biedt evenwicht in het ontwerp en faciliteert een betere pagina-uitlijning dankzij het aanhouden van een gelijke afstand. Daarnaast maakt het dat elementen perfect op elkaar uitgelijnd kunnen worden, ook al staan ze ver van elkaar verwijderd. Dit alles levert een aangenamere visuele ervaring op. Grids laten ook creativiteit toe. Een flexibel grid kan zo leuke resultaten genereren.

Ook de campagnewebsite van CO maakt gebruik van een gridstructuur. Zo wordt de inhoud in nette en uniforme secties verdeeld. Dit zorgt voor consistentie overheen de website, maar geeft ook goede richtlijnen waar ontwerpers de elementen dienen te plaatsen wanneer ze elementen toevoegen aan of wijzigen op de website.

In uitzonderlijke gevallen is het toegelaten om in beperkte mate af te wijken van de gridstructuur ter bevordering van de creativiteit. Zo mag een huisstijlelement met een foto ietwat buiten de margeranden komen voor een meer dynamisch effect bijvoorbeeld.

Campagnewebsite

Het grid gebruikt voor de campagnewebsite bestaat uit 10 kolommen, waarbij de kolombreedtes 120 pixels bedragen. De tussenruimte (i.e. gutter) is 44 pixels breed. De linker-en rechtermarge van de webpagina bedraagt 162 pixels. Dit maakt dat de inhoud gecentreerd komt te staan. De volledige breedte van het prototype van de website bedraagt 1920 pixels.

Grid webpagina campagne
Grid webpagina campagne

Templates social media

Ook voor socialmediaposts wordt er gewerkt met een raster. Er wordt uitgegaan van een marge (boven, onder, links en rechts) van 60 pixels. De inhoud wordt gepositioneerd op een grid van zes kolommen met een tussenruimte van 20 pixels.

Grid Social Media
Grid Social Media

Affiches

Het grid gebruikt voor de (A2) affiches bestaat tevens uit zes kolommen met een tussenruimte van 10 mm. Hier wordt altijd een bleed van 3 mm gebruikt. Er worden marges (boven, onder, links en rechts) van 45 pixels gebruikt.

Grid affiches
Grid Affiches

Iconen

Voor de uitwerking van de campagnewebsite werd er een uitgebreide iconenset uitgewerkt. Deze set omvat achttien iconen, waaronder negen iconen die de leercategorieën aanduiden en vijf iconen die dienen om het profiel van een potentiële leerpartner te selecteren, af te wijzen, op te slaan of om een bericht te sturen naar de potentiële partner wanneer er nog geen sprake is van een ‘leermatch’. Een laatste icoon binnen deze set van vijf verwijst naar het geheel aan leerpartners en wordt ingezet op het dashboard van de campagnewebsite.
Daarnaast werden er nog vier functionele iconen ontwikkeld die gebruikt kunnen worden in verschillende communicatiemiddelen. Deze worden zo meteen verder besproken.

Alle iconen werden opgemaakt op een grid van 100 pixels (25 pixels per vierkantje). Dit om de iconen zo consistent mogelijk op te bouwen. Dankzij het raster verkrijgen we iconen die goed bij elkaar aansluiten en ook min of meer even groot en breed zijn. Er werd bij de opmaak ook geprobeerd om deze zo symmetrisch mogelijk te ontwerpen. De iconen in het voorbeeld werden opgemaakt met een lijndikte van 2 mm. De lijndikte mag naargelang de toepassing verhoogd of verlaagd worden met tussenstappen van 0,5 mm voor drukwerk en van 0,25 pixels voor digitale toepassingen. Let op bij verhoging van lijndikte dat de proporties behouden blijven.

Voorts wordt er consistent gebruikgemaakt van een 30° of 60° radius voor de hoeken. De iconen zijn zo afgerond mogelijk, tenzij het de betekenis of duidelijkheid zou kunnen verstoren. Het icoon dat ‘verzenden’ weerspiegelt (cfr. icoon papieren vlieger) zou bijvoorbeeld onduidelijk ogen wanneer alle hoeken afgerond zouden zijn.

De iconen van de leercategorieën mogen vrij geroteerd worden om leuke creatieve effecten te bekomen. Het belangrijkste uitgangspunt bij het ontwerpen van de set is het bieden van instant duidelijkheid over wat het icoon weergeeft. Het moet de tekstuele boodschap versterken en zelfs verstaanbaar zijn wanneer de tekst niet aanwezig zou zijn.

IconenRaster iconen
Voorbeeld 100 px raster

Tot slot werd er op dezelfde manier een iconenset ontwikkeld die bedoeld is om te implementeren in communicatiemateriaal zoals socialmediatemplates, affiches, e.d. Met uitzondering van de tekstballon die gedistilleerd werd uit het logo om te dienen als huisstijlelement, werden ook deze iconen op basis van het grid ontworpen. De iconen reflecteren de concepten tijd, locatie, data en informatie. Ze worden als complementair beschouwd van de algemene set.

De laatste twee rijen aan iconen* die worden aangeduid op bovenstaande afbeelding mogen echter niet geroteerd worden, in tegenstelling tot de iconen die de leercategorieën weergeven. Enkel het informatie-icoon mag geroteerd worden rond de verticale as.

*Bepaalde iconen zijn puur symmetrisch opgemaakt en worden niet beïnvloed door rotatie.

Illustratieve stijl

In het grafisch onderzoek werden heel wat uiteenlopende illustratieve stijlen onderzocht en afgetoetst. Het belangrijkste vertrekpunt bij het ontwerp van de illustraties voor de campagne was het bewaren van de simpliciteit van de tekenstijl en het incorporeren van de huisstijlkenmerken, waaronder voornamelijk het kleurenpalet en de ronde vormen. Uit het onderzoek kwam voort dat het taalgebruik in de communicatie duidelijk, kort en bondig dient te zijn met her een der een moderne, speelse twist. Ditzelfde principe werd doorgetrokken naar de illustraties.

De illustraties ogen speels en fris. Daarnaast bevatten ze weinig details, hetgeen relatief makkelijke reproductie of herwerking mogelijk maakt. Dit maakt ook dat de creatie van nieuwe illustraties in dezelfde stijl gefaciliteerd wordt.

De focus ligt in iedere illustratie sterk op de boodschap. In één oogopslag moet duidelijk worden wat de illustratie representeert. Dankzij de relatief simpele tekenstijl kunnen gelaatstrekken en karakteristieken van personages makkelijk aangepast worden naar de situatie en de verhaallijn die een illustratie moet weergeven. Ogen, monden, wenkbrauwen, neuzen, haarstijlen, e.d. kunnen aangepast worden naar eigen creatieve invulling, rekening houdend met de huidige illustratieve stijl. Zo wordt er steevast gewerkt met afgeronde lijnen en worden zo veel mogelijk gelaatskenmerken met gebogen, afgeronde lijnen voorgesteld.

Tot op heden werden er twee illustraties uitgewerkt. De ‘high-five’ wordt ingezet op het notitieboekje (zie ‘Extra toepassingen’), terwijl het gesprek tussen twee personen terugkomt op de tote bag (zie ‘Extra toepassingen’) en de registratiepagina van de CO-website. Het kleurenpalet wordt uiteraard voor beide illustraties gerespecteerd. Daarnaast worden huidskleuren niet opgevuld, maar blijven deze wit om een neutrale sfeer te behouden. De lijndikte is afhankelijk van het formaat en de vereiste fijnheid. Zo vereist de high-five illustratie iets meer fijnheid in verhouding tot de twee gesprekspartners. De lijndikte mag met incrementen van 0,25 mm ingesteld worden.

Illustratie high-five
High-five illustratie - lijndikte 1 mm

De details blijven simpel. Zo worden niet alle lijnen in de handen weergeven, maar enkel diegenen noodzakelijk om aan te tonen hoe de hand gekromd staat. Er worden in de illustraties zo veel mogelijk ronde lijnen of krommes gebruikt. Dit om in de huisstijl te blijven, waarbij de huisstijlelementen gebaseerd op het logo ook heel wat rondingen vertonen. Op de campagnewebsite wordt er overigens ook veel gebruikgemaakt van afgeronde en ovale buttons (i.e. knoppen) en placeholders. Enkelvoudige lijnen krijgen dan ook een ronde afkapping (afronding) toegekend. De gelaatstrekken van de personages stralen vriendelijkheid en positiviteit uit. Er wordt gewerkt met een dunne schaduwlijn onder het gezicht die meer dynamiek geeft aan het personage. De haren en gezichtsbeharing worden nooit omlijnd. Dit geldt ook voor onderkleding en andere details die niet onder de contour vallen van het personage.

Fotografie

SFEER

De foto’s gebruikt in de CO-campagne dienen de interactieve, positieve, vriendelijke sfeer weer te geven waar CO op berust. Het 1-op-1 karakter van intergenerationeel leren moet in één oogopslag duidelijk worden. Daarnaast weergeven de foto’s duidelijk een onderlinge conversatie, interactie of leeractiviteit die ondernomen wordt.

Er wordt gewerkt met ‘oprecht’ fotomateriaal. Dit laatste duidt erop dat de foto’s niet overduidelijk geposeerd mogen overkomen. Het moet lijken dat een foto sporadisch werd genomen tijdens een leermoment. Hierbij kijken de personen ook niet recht in de lens van de camera, maar zijn ze voornamelijk bezig met elkaar en de activiteit die geportretteerd wordt. Het gebruik van fotomateriaal waarbij de gelaatsuitdrukkingen positieve emoties overbrengen, wordt sterk aangemoedigd.

De setting mag niet geënsceneerd ogen. Het gefotografeerd (leer)moment mag zich zowel binnen als buiten afspelen. Studiowerk met een egale of artificiële achtergrond wordt bij voorkeur vermeden. Kortom, het gebruikte fotografisch materiaal moet zo ‘echt’ mogelijk overkomen.

Kies voor foto’s met lichte kleuren en voldoende scherpte. Foto’s met een sterke scherpte-diepte kunnen gebruikt worden, op voorwaarde dat het scherpe deel zich focust op de positieve gelaatsuitdrukkingen of op de leeractiviteit.

Eens de campagne loopt kunnen er foto’s genomen worden van echte leersituaties met echte gebruikers. Zulk beeldmateriaal zal ertoe bijdragen dat de campagne oprecht overkomt.

Aandachtspunten

Zorg ervoor dat bij gebruik van stockfoto’s de rechten correct werden aangekocht. Afbeeldingen gebruiken waar auteursrecht op rust zonder toestemming is uit den boze. Deze mogen enkel gebruik worden met expliciete schriftelijke toestemming of tegen betaling. De huidige foto’s gebruikt in de campagnewebsite zijn afkomstig van freepik.com en zijn vrij te gebruiken, mits de auteur (@Freepik) geaccrediteerd wordt bij commercieel gebruik.

Gebruik daarnaast geen onder-of overbelichte foto’s. Details worden slecht zichtbaar en dit oogt daarenboven onprofessioneel. Vermijd ook foto’s waar mensen niet flatterend vertoond worden. Hou tot slot rekening met de vereisten om foto’s in te zetten op social media. Instagram gebruikt een 1:1 ratio, hetgeen impliceert dat de gekozen foto moet gecropt (i.e. bijgesneden) worden tot een vierkant. Alle belangrijke handelingen moeten met andere woorden in dit vierkant vertoond kunnen worden.

Kwaliteit

De gebruikte foto’s dienen altijd een minimale resolutie van 300 ppi te bevatten voor drukwerk. Foto’s voor webgebruik daarentegen worden bij voorkeur klein gehouden qua bestandsgrootte. Hierbij is een minimale resolutie van 72 ppi voldoende. Controleer voor webgebruik echter altijd visueel of afbeeldingen gebruikt voor grotere toepassingen, zoals banners en headers, niet gepixeld noch vaag zijn. Schaal afbeeldingen altijd proportioneel.

Twee dames die een kopje koffie delen
Alle gebruikte afbeeldingen zijn afkomstig van freepik.com en mogen vrij worden gebruikt mits het vermelden van "@Freepik" bij commercieel gebruik

Extra toepassingen

Sign-off video

De CO-campagne heeft als doel te benadrukken dat leren een toegankelijk proces kan zijn voor alle generaties en dat het delen van kennis en kunde van onschatbare waarde is. Om deze boodschap krachtig over te brengen, werd er een korte sign-off video gemaakt waarbij het logo het centraal element is.

De video bevat een aaneenschakeling van animaties die gemonteerd werden op het geluid van een openend slot en sterke windvlagen. Dit beeldt symbolisch uit dat het initiatief deuren opent naar nieuwe kennis en kansen om te leren. Nadat het slot zich opent, komt er een schakel tevoorschijn die levenslang leren vertegenwoordigt. Deze schakel vormt ook de letters van de campagne, zijnde ‘CO’. Dit staat voor de essentiële verbinding tussen generaties, waarbij elke schakel in de keten bijdraagt aan een continue stroom van kennis en ervaring.

De grafische metaforen die verstopt zitten in het logo komen op deze manier duidelijk naar voren, waardoor het verhaal van de CO-campagne op een boeiende en visueel aantrekkelijke manier wordt verteld.

Giveaways

Enkele leuke toepassingen die werden ontworpen voor de CO-campagne kunnen worden overgenomen of als inspiratie bieden voor nieuwe toepassingen die passen binnen de geest van de CO-campagne. Er moet altijd een direct verband zijn met de doelstelling van CO. Zo kan een tote bag handig zijn om spullen mee te nemen naar een leerpartner en kan een notitieboekje gebruikt worden om notities te maken tijdens je wederzijdse leerervaring. Een t-shirt kan dan weer dienen als giveaway voor early adopters en CO-fans. Ook medewerkers van de CO-campagne kunnen deze t-shirt dragen ter bevordering van de naamsbekendheid.

Tote bag
NotitieboekjeT-shirt

Social media

Gezien de CO-campagne steunt op een website waar de gebruikers leuke leerpartners kunnen vinden, is het essentieel om de campagne ook te promoten via digitale kanalen. Zo kunnen er heel wat leeftijdsgroepen bereikt worden. Er werden enkele posts voor de socialmediakanalen uitgewerkt die kunnen dienen als template, inspiratiebron en richtlijn. De templates werden opgemaakt op een 1080 px op 1080 px formaat, voor optimaal gebruik op Instagram,  Facebook (Meta) en LinkedIn. Voor de opmaak wordt een grid gebruikt van 6 kolommen met een tussenruimte van 20 px. De marges worden ingesteld op 60 px. De huisstijlelementen die uit het logo werden gedistilleerd, worden optimaal gebruikt om de templates vorm te geven. Het logo wordt zo veel als mogelijk ingesloten ter bevordering van consistente branding. Daarnaast wordt er fotomateriaal ingezet die de sfeer rond intergenerationeel leren optimaal weergeeft.

Het is de bedoeling om de aangeleverde templates aan te passen naar eigen gebruik. Zo kunnen de foto’s gewisseld worden, maar ook de kleuren (voor zo ver deze uit het kleurenpalet komen) en de inhoud. Daarnaast kunnen de huisstijlelementen optimaal en creatief worden ingezet om de CO-sfeer te communiceren via social media.

De afbeeldingen en mock-ups zijn afkomstig van freepik.com.

*px staat voor pixels

 Mock-up InstagramMock-up Facebook

Affiches

De CO-campagne wil een breed doelpubliek aanspreken. Daarom wordt de campagne niet louter gepromoot via digitale kanalen, maar ook aan de hand van affiches (i.e. Out of home advertising). Er werden 10 varianten ontworpen die kunnen dienen als template, inspiratiebron en richtlijn. In combinatie met de socialmediaposts kan er een groot deel van de doelgroep bereikt worden.

Er zijn postervarianten beschikbaar die zowel weinig tekst bevatten als varianten die er net op voorzien zijn om veel tekst te communiceren. De illustraties, iconen en huisstijlelementen werden veelvuldig ingezet om deze posterreeks te creëren. Ook werd er gespeeld met de huisstijlkleuren oranje, paars en groen als achtergrondkleur. De overige secundaire kleuren mogen evenwel gebruikt worden in het posterdesign.

De afbeeldingen en mock-ups zijn afkomstig van freepik.com en pixpine.com

De A2 posters werden opgemaakt in CMYK. Er werd gebruikgemaakt van een grid bestaande uit zes kolommen met een tussenruimte van 10 mm. De boven-, onder-, linker-, en rechtermarge wordt ingesteld op 45 mm. Het raster wordt zo veel mogelijk gevolgd, mits enkele uitzonderingen om enige creatieve vrijheid te bieden.

Affiche in bushokjeAffiche in metro