Maaike Bongers JDE-VIS-1 Visual seminar Tom Wolvers
1
Inhoudsopgave Blz.3 Blz.4 Blz.6 Blz.9 Blz.10 Blz.12 Blz. 14 Blz. 15
1. Inleiding 2. Het huisstijlboekje 3. De stappen tot de realisatie van een huisstijl 4. Het onderscheiden van het merk, ten aanzien van de markt 5. De overwegingen voor een passend kleurgebruik 6. De designtrends van 2014 7. Onderzoeksvraag 8. Bronnenlijst
2
1. Inleiding Een nieuw merk opzetten binnen je bedrijf is een grote uitdaging. Je moet een sterk concept hebben dat zal aanslaan, maar het design is natuurlijk ook een punt. Hierover ga ik meer vertellen en onderzoeken. Je wil een design creëren die zal aanslaan bij de doelgroep. Hoe kom je er nou achter welk design zal aanslaan bij de geselecteerde doelgroep? Welke kleuren passen bij het bedrijf? Het is belangrijk dat je veel onderzoek hebt gedaan over het bedrijf en over de bestaande merken. Hierdoor kun je je beter inleven in wat het bedrijf voor ogen heeft en wat de vraag is. Daarbij zijn er designtrends, trends die erg populair zijn en die veel mensen aanspreekt. Hiervoor kun je kiezen, maar je moet je zelf afvragen of je door het gebruik van een trend wel zal opvallen bij de doelgroep. Verder moet je weten waar een huisstijl uit bestaat, het is namelijk niet alleen een logo. Je moet onder andere denken aan: Tone of voice, typografie, kleurgebruik, gebruik van buttons/kaders/iconen, logo en andere afspraken. Bij typografie zijn er veel keuzes die je kunt maken. Schreef of schreefloos, fond, lettergrootte, regelafstand etc. Veel keuzes die het totaalplaatje van je product beïnvloeden. Uiteindelijk zal ik de hoofdvraag gaan beantwoorden: ‘Hoe bedenk je een succesvolle huisstijl voor een nieuw product voor een bestaand merk?’
3
2. Het huisstijlboekje Een huisstijlboekje is een document waarin regels worden vastgelegd over het design. Deze handleiding is voor onder andere: Teksten, plaatjes en foto’s, kleurgebruik, lettertypegebruik, logo met variaties etc. Door het gebruik van een huisstijl krijg je consistentie en wordt het design een eenheid. Het wordt ook wel de visuele identiteit van het merk genoemd. Door een huisstijlboekje te maken krijg je sneller een mooi samenhangend design.1 Een basis huisstijlboekje bestaat uit het volgende: Tone of voice Wanneer je een bepaalde doelgroep aan wil spreken, bijvoorbeeld kinderen, zul je gebruik maken van de woorden ‘jullie, jij’. Er wordt niet gesproken met ‘u’. Je legt vast hoe je de doelgroep aanspreekt en wat voor ‘taalniveau’ je gebruikt. Logo Het logo heeft vaak een bepaald kleurgebruik. Bepaal ook hoe het logo eruit komt te zien wanneer deze zwart-wit is. Stel regels vast hoeveel witruimte eromheen moet komen, en wanneer het logo fout wordt gebruikt (bijvoorbeeld door het logo in de breedte uit proportie te halen). Kleurenpallet Hier beschrijf je de kleuren die gekozen zijn voor de huisstijl. Geef de RGB- en CMYK code erbij. Lettertype(s) Vaak worden er niet meer dan drie verschillende lettertypes gekozen. Wanneer dit wel gebeurt wordt het al snel chaos. Probeer het rustig te houden door maar één of een paar lettertypes te kiezen. Je kunt kiezen uit een schreefloze of schreef lettertype. Het verschil zit het in de uiteindes van de letters, met ‘pootjes’ of strak zonder poespas. Vaak wordt voor schreef gekozen voor broodtekst van websites. Dit schijnt beter leesbaar te zijn. Schreefloze lettertypes worden vaker voor print gebruikt. Ook leg je de lettertypegroottes vast, met spatiëring en interlinie.
4
Grids Door het gebruik van een grid zal er consistentie ontstaan. Het beeld is verdeeld in bepaalde delen, waardoor bijvoorbeeld alinea’s en foto’s netjes onder elkaar worden geplaatst. Het beeld wordt overzichtelijk en komt elke keer weer terug waardoor het herkenbaar wordt. Plaatjes en foto’s Leg regels vast voor de groottes van plaatjes, welke resolutie deze zullen hebben en in wat voor kleurtoon ze worden gebruikt. Wanneer je je aan deze regels houdt zal het sneller een rustig en overzichtelijk beeld worden. Iconen en buttons Ook hier leg je vast wat de groottes en resolutie zijn. Ook beschrijf je hoe een buttons herkenbaar is, dat er bijvoorbeeld op geklikt kan worden. Beschrijf de plaatsing en de witruimte eromheen. Benaming van bestanden Bepaal hoe je de bestanden opslaat, bijvoorbeeld ‘inleiding_boom.jpg’. Hierdoor voorkom je chaos en is alles makkelijker terug te vinden.2
5
3. De stappen tot de realisatie van een huisstijl Wanneer je een huisstijl wilt visualiseren, heb je een eigen identiteit nodig. Het merk moet herkenbaar worden. Er zijn een paar stappen die je doorloopt voor de realisatie van een huisstijl: Stap 1. Laten ontwerpen of zelf ontwerpen Het inhuren van een ontwerper kost wat. Daardoor lijkt zelf ontwerpen een goedkopere oplossing. Maar op termijn kunnen je eigen creaties je juist meer gaan kosten. Een goed ontworpen huisstijl gaat jaren mee. Bovendien kijkt een vormgever met een frisse blik naar jou en je bedrijf, waardoor die met vondsten zou kunnen komen die jezelf waarschijnlijk nooit had bedacht. Wil je toch zelf aan de slag, bedenk dan wel dat er tijd in gaat zitten en dat je moet kunnen omgaan met een grafisch opmaakprogramma. Ook is het nodig om je te verdiepen in o.a. kleur- en ruimtegebruik en typografie. Stap 2. Analyseer het bedrijf Je helpt een vormgever een stuk op weg wanneer je duidelijk kunt vertellen waar jouw bedrijf voor staat: - Hoe ziet je doelgroep eruit? - Welke eigenschappen vinden zij belangrijk? - Wat zijn jouw 'unique selling points'? - Welke beeld (imago) wil je creëren? Het beantwoorden van deze vragen helpt je om je bedrijfsprofiel concreet te formuleren. Stap 3. Welke communicatiemiddelen gebruik je, of ga je gebruiken? Om tot een goede huisstijl te komen, is het belangrijk om te weten waar je die allemaal voor wilt gebruiken. Wil je bijvoorbeeld op termijn ook over een website beschikken, dan is het wel zo handig dat je nu een logo laat ontwerpen dat zowel geschikt is voor print als voor het web. Kijk bij het kiezen van communicatie-uitingen ook goed naar je doelgroep. Waar kijkt die het meest naar? Waaraan heeft de doelgroep behoefte?
6
Stap 4. Inspiratie zoeken Wat spreekt je aan en waarom? Welke vorm of kleur bijvoorbeeld zou ook goed bij jouw onderneming passen? Hoe beter je weet wat je wel en niet wilt, hoe duidelijker je een vormgever kunt instrueren. Kijk naar het werk van verschillende vormgevers en bedenk wat jou aanspreek. Stap 5. Briefing Heb je eenmaal goed voor ogen wat je wilt, dan kun je op zoek naar een grafische vormgever. Het opstellen van een briefing vergemakkelijkt je zoektocht. In een briefing leg je vast: - Wie je bent, wat je doet en wie je klanten zijn; je bedrijfsprofiel. - Wat je huisstijl moet uitstralen. - Waar je huisstijl op komt te staan; welke communicatiemiddelen je nu en in de toekomst wilt gebruiken. - Je eigen ideeën en voorkeuren. Later kun je in een persoonlijk gesprek de verzamelde voorbeelden toelichten. - Wat je ongeveer aan je huisstijl wilt besteden. - Wanneer je wilt dat het ontwerp klaar is. - Hoeveel ontwerpvoorstellen er worden gemaakt. - Hoeveel correctierondes er zijn. Stap 6. Beoordeel de concepten Je vormgever presenteert de eerste concepten. Voordat je meteen van alles gaat roepen, is het handiger om je eerste indruk op te schrijven. Op die manier vergeet je niet wat je eerste reactie was en wordt die ook niet beïnvloed door de opmerkingen van een vormgever. Noteer niet alleen welk gevoel een ontwerp bij je oproept, maar ga ook na of het voldoet aan de briefing. Een goede vuistregel bij het beoordelen van concepten is dat wanneer een ontwerp veel uitleg behoeft, het ontwerp meestal zwak is. Stap 7. Papierkeuzes Is een ontwerp klaar, verdiep je dan in het materiaal waar het op komt te staan. Zo is papier niet alleen verkrijgbaar in verschillende diktes en kleuren, maar zijn er ook
7
papiersoorten met reliëf erin. Dik papier kan je visitekaartje een andere uitstraling geven dan wanneer je kiest voor een glanzend dun vel. Bespreek met een vormgever de verschillende mogelijkheden en maak enkele proefafdrukken. Stap 8. Bespreek technische vereisten Wil je je logo in de toekomst misschien uitvergroten, bijvoorbeeld voor een opdruk op een auto, dan stelt dat eisen aan de manier waarop de vormgever het logo aanlevert. Het bestand moet dan 'vectorgeoriënteerd' zijn. Om een logo of beeldmerk te kunnen drukken, moet het van voldoende kwaliteit zijn. Voor drukwerk is dat meestal 300 dpi of meer. Het bestand moet het juiste bestandsformaat hebben. Wil je je beeldmateriaal juist op het internet plaatsen, dan wil je dat het bestand zo klein mogelijk is. Dan is een resolutie van 72 dpi voldoende. Vraag altijd om zelf de bestanden in bezit te krijgen, zodat je erover beschikt als je ze in de toekomst nogmaals wilt gebruiken. Je krijgt daarmee overigens niet het 'intellectuele eigendom'. Dat blijft altijd bij de ontwerper, tenzij anders is afgesproken. 10. Kies de juiste druk(ker) Het ontwerp is klaar, het materiaal gekozen. Nu is het tijd om naar de drukker te gaan. Het is verstandig om verschillende offertes aan te vragen. Niet alleen kunnen de prijzen verschillen, maar ook of en hoe je drukproeven mag controleren.
8
4. Het onderscheiden van het merk, ten aanzien van de markt Er zijn tegenwoordig zoveel merken en logo’s dat het moeilijk is om als nieuw merk op te vallen. Toch zijn er ook merken die hun huisstijl en campagne na jaren omgooien. De NTR is een goed voorbeeld. De omroep heeft een duidelijke identiteit en boodschap. Missie NTR De NTR draagt bij aan een democratische kennissamenleving door het maken van informatieve, culturele en educatieve programma’s voor publiek met de volgende kernwaarden: onafhankelijk, onpartijdig, objectief, betrouwbaar, respect voor mensen en hun waarden, en gerichtheid op een samenleving van actieve, zelfstandige en nieuwsgierige burgers. (Businessplan, 2010) Dubbele punt De NTR draagt haar identiteit ook uit in het beeldmerk. NTR dubbele punt. De NTR heeft veel te zeggen, te laten zien en te laten horen. De NTR staat voor een pluriforme inhoud en de dubbele punt geeft dit aan. Voor verdieping en verrijking, voor duiding en verrassing, voor ontwikkeling en persoonlijke groei. En vooral voor speciale programma’s voor alle doelgroepen. 3 Er is een algemene ident gemaakt die voor elk programma te gebruiken is. Er is een begin-ident die het programma introduceert, en een sluit-ident. Visueel gezien hebben ze beiden hetzelfde idee met de twee puntjes, waardoor het een geheel is. Simpel en makkelijk te realiseren is hun uitgangspunt. De twee punten in hun logo komen ook bij andere elementen elke keer weer terug. Wanneer een programma begint na de begin-ident, opent deze in een rond beeld die wordt uitvergroot tot het originele schermformaat. De huisstijl is erg gericht op de doelgroep: iedereen. Hun slogan is dan ook: Speciaal voor iedereen. De dubbele punt staat ook ergens voor, het heeft een boodschap. Dat maakt deze campagne zo sterk; de ronde punten komen elke keer weer terug, er is een duidelijke samenhang in design en ze hebben een boodschap. Hierdoor kun je het merk onderscheiden ten aanzien van de markt.
9
5. De overwegingen voor een passende kleurgebruik Kleuren zijn erg belangrijk voor de ‘look and feeling’ voor het merk. Een kleur straalt iets uit. Een kleur werkt op psychologisch, mentaal, spiritueel en emotioneel vlak. Ik heb door middel van een klein testje een verklaring voor wat kleuren doen met de emoties van studenten van 18 tot 25 jaar.
Men kon uit de volgende emoties kiezen en die bij een kleur neerzetten: Boos, verdrietig/depressief, veilig, geïrriteerd, kalm, relaxed, vrolijk, moe/dromerig, verveeld, neutraal, liefde en haat. De meeste vrouwelijke studenten associeerden deze kleuren met deze emoties: Zwart: Verdrietig/depressief (43%) Groen: Neutraal (27%) Geel: Vrolijk (53%) Roze: Vrolijk (27%) en liefde (27%) Bruin: Verveling (40%) Rood: Boos (30%) en liefde (30%) Blauw: Kalm (23%) De meesten van de vrouwelijke studenten kozen bij de kleur zwart de emotie verdrietig/depressief. Groen deed hun het meest neutraal voelen. De kleur met de hoogste percentage is geel, namelijk vrolijk (53%). De meeste mannelijke studenten associeerden deze kleuren met deze emoties: Zwart: Verdrietig/depressief (37%) Groen: Veilig (27%) Geel: Vrolijk (17%) Roze: Liefde (33%) Bruin: Verveling (20%) Rood: Boos (27%) Blauw: Relaxed (23%) De meesten van de mannelijke studenten kozen bij de kleur zwart ook de emotie verdrietig/depressief. Wat opvalt is dat, in
10
tegenstelling tot bij de vrouwelijke ondervraagden, de mannelijke studenten ook de emotie vrolijk kozen bij de kleur geel, maar dat het wel maar 17% was van de ondervraagden. Dit betekend dat er veel verschillende emoties zijn gekozen bij de kleur geel. Conclusie Kleur beïnvloedt verschillende emoties van iedereen, maar het verschilt in dit geval per geslacht. Zie bijvoorbeeld de emotie liefde. Bij de vrouwelijke student riep de emotie liefde bij de kleuren roze en rood op. Bij de mannelijke student riep alleen de kleur roze de emotie liefde op. Rood stond voor de mannelijke student voor boos, nogal een verschillende emotie vergeleken met de vrouwen. Daarom is het belangrijk bij de keuze van kleur, dat je veel rekening houdt met de doelgroep en dat je goed nadenkt over welke emoties je wil oproepen. 4
11
6. De designtrends van 2014 In 2014 zullen we hunkeren naar de nieuwe realiteit van basic en eenvoud. Glossy onzin hoeft niet, we zijn blij met wat we hebben. Door de crisis zijn we content met eenvoud, zonder poespas. Zoek uit of jouw doelgroep zal worden aangetrokken door het gebruik van een designtrend. 8 Designtrends voor 2014: 1. Flat design Bij flat design lijkt het design plat, er ontbreekt gesuggereerde diepte. Er wordt geen gebruik gemaakt van effecten als schaduwen en highlights. De beeldtaal is tweedimensionaal. Kleurvlakken zijn monochroom: geen subtiele kleurverlopen die hoogte suggereren. Windows en Apple begonnen hiermee, Windows 8 en iOS7 zijn goede voorbeelden van flat design. 2. Blokkendoos Een lay-out als blokken in elkaar gebouwd. Afhankelijk van het scherm waarmee de website wordt bekeken, laat hij een andere versie van zichzelf zien. Op desktop veel blokjes naast elkaar maar op een smartphone verandert het naar blokjes onder elkaar. Het werkt dus erg goed met responsive design.
3. Witte dikke lijnen Witte lijnen van minimaal zes pixels breed, als kader of als een lijntje ergens tussen. Je krijgt een strak en simpel beeld door een kleine toepassing.
12
4. Witte en schreefloze typografie Geen gebruik meer van de klassieke fonts met haakjes en pootjes, maar veel gebruik van strakke lettertypes zoals Helvetica, Verdana en Tahoma en wanneer het mogelijk is in wit. 5. De zeshoek De geometrische vormen die makkelijk te maken zijn met CSS3. Ze zullen in menu’s, websites of plaatjes in deze vorm te zien zijn.
6. One-issue-homepage ‘Klik hier, bestel snel, lees meer en download nu’ werden vaak op de homepage geplaatst als calls-to-action. Nu moet er rust komen, we zullen vaker 1 beeld met 1 tekst en een simpel menu vinden. 7. Mobiel menu Om eenvoud te creëren kun je het menu achterwege laten. Het tonen van een menu op verzoek (bijvoorbeeld via het ‘hamburgermenu’) is op de telefoon heel gewoon, en nu zal dit ook toegepast gaan worden voor de desktop.
8. Monochrome kleuren Qua kleurgebruik kan het van zachte pastels en vrolijk primair tot felle kleuren. Er is wel een voorwaarde; het kleurvlak moet monochroom zijn. Verlopen, reliëfs en patronen zijn niet gewenst. 5
13
7. Onderzoeksvraag ‘Hoe bedenk je een succesvolle huisstijl voor een nieuw product voor een bestaand merk?’ Een huisstijl heeft vele onderdelen. Regels vastleggen is erg belangrijk voor de consistentie: er ontstaat een eenheid en een samenhangend herkenbaar design. Maar om op te vallen is een ander punt. Probeer een element erin te verwerken die op verschillende manieren terugkomt, er is dan een duidelijke samenhang in het design. Ook een boodschap is erg belangrijk. Je moet iets te vertellen hebben, het moet mensen laten zien dat het design een boodschap heeft. Hierdoor kun je het merk onderscheiden ten aanzien van de markt. Bedenk ook goed wat de voordelen en nadelen zijn van de huisstijl zelf ontwerpen, of een ontwerper in te huren. Maak een bedrijfsprofiel zodat er duidelijkheid komt en hou de opties open om eventueel toch een ontwerper in te huren. Er zijn verschillende designtrends waarmee je misschien niet het merk onderscheidt van andere merken, maar wel de doelgroep aantrekt. Dit is net zo belangrijk, want het gaat erom dat de doelgroep wordt aangesproken. Bedenk goed dat onderzoek naar de doelgroep doen erg belangrijk is. De test over kleuren en bijbehorende emoties resulteerde dat kleuren verschillende emoties teweeg brengen per geslacht, soms zelfs tegenovergestelde. Ken je doelgroep en speel daarop in met de keuzes die je maakt.
14
8. Bronnenlijst: Papers 1 Quesenbery W. (2001), Building a Better Style Guide, http://www.wqusability.com/articles/better-style-guide-paper.pdf, p. 1 2 Quesenbery W. (2001), Building a Better Style Guide, http://www.wqusability.com/articles/better-style-guide-paper.pdf, p. 8-10 3 NTR (2012), Huisstijl richtlijnen vormelementen, http://www.ntr.nl/static/docs/huisstijl/NTR_Manual_V3.pdf Websites 4 Color_Expert (2014), Color: Meaning, Symbolism and Psychology, http://arts-humanities.squidoo.com/colorexpert 5 Battjes D. (2013), 10 Webdesigntrends voor 2014, http://www.frankwatching.com/archive/2013/11/26/10-webdesigntrends-voor-2014/ Youtube - NTR (2011) Huisstijl NTR: Inzending voor the red dot award, http://www.youtube.com/watch?v=s2iu9-afarg Literatuur - Johnson J. (2011), Designing with the mind in mind, Elsevier Science & Technology, chapter 2 ‘Our vision is optimized to see structure’ - Johnson J. (2011), Designing with the mind in mind, Elsevier Science & Technology, chapter 5 ‘Our color vision is limited’ - Dabbs, A. & Campbell, A. (2005). Digitaal Design, handboek voor het grafisch ontwerpen van drukwerk en digitale media. Uitgeverij Librero.
15
