Twintig weken Tammo STAGE VISUAL DESIGN

Transcriptie

1 Twintig weken Tammo STAGE VISUAL DESIGN 02/09 13 t/m 10/01 14

2

3

4

5 Twintig weken Tammo STAGE VISUAL DESIGN 02/09 13 t/m 10/01 13

6 Stagiair Nick van den Tol Robijnstraat 17B 3051 VK Rotterdam Studentennummer Klas CMD 3B 6 COLOFON

7 Stagebedrijf Tam Tam BV Patrijsweg EX Rijswijk Bedrijfsbegeleider Catriona de Ligt Visual designer COLOFON 7

8

9 Voorwoord Dit is één van de omvangrijkere resultaten van 20 weken stage mogen lopen bij Tam Tam. Met veel plezier heb ik dit verslag geschreven, omdat het voor mij de meest leerzame periode in mijn leven als ontwerper tot nu toe is geweest. Terugkijkend naar deze documentatie ben ik bovendien trots op de enorme stappen die ik heb gemaakt. Dit stageverslag beschrijft de meest waardevolle leermomenten van de afgelopen 20 weken. Naast deze momenten heb ik veel meer geleerd wat hoe cliché het ook klinkt niet allemaal te omschrijven valt in woorden. Met trots en een enorme bak met vergaarde kennis blik ik terug op een zeer leerzame periode in mijn CMD-carrière. Dit verslag moet dit voor jullie duidelijk maken. VOORWOORD 9

10

11 Over Tam Tam Rationale & emotionale Stijlgids TVM (Transport Verzekeringsmaatschappij) Pitchvoorstel Werken Bij Belastingdienst Stijlvoorstel SON scheepsverzekeringen Visueel ontwerp NKC (Nationale Kampeerauto Club) Verbeelden Visualisaties Bouwfonds Iconografie TVM Iconografie Pharma Partners... Infographic derde leerdoel Onderzoeken, empathie... Interviews over de discipline visual designer Kritische reflectie Onderzoek Stageplan OVER TAM TAM 11

12 Over Tam Tam Rationale & emotionale Stijlgids TVM (Transport Verzekeringsmaatschappij) Pitchvoorstel Werken Bij Belastingdienst Stijlvoorstel SON scheepsverzekeringen Visueel ontwerp NKC (Nationale Kampeerauto Club) Verbeelden Visualisaties Bouwfonds Iconografie TVM Iconografie Pharma Partners... Infographic derde leerdoel Onderzoeken, empathie... Interviews over de discipline visual designer Kritische reflectie Onderzoek Stageplan

13 Visual design is één van de minst exacte disciplines. Er zijn niet zoals bij development een vast aantal oplossingen of te bewandelen routes. Er zijn niet eens routes aangegeven.

14 De balie bij de ingang van het bedrijfspand. Geschiedenis In 1996 werd Tam Tam opgericht door Paul en Bart Manuel. Het idee was toen om catalogussen te maken voor technische groothandels. Naar eigen zeggen zijn ze daar niet echt aan toegekomen. Na ruim 17 jaar is Tam Tam uitgegroeid tot een bureau van grote omvang. Ruim 120 medewerkers vervullen dagelijks de digitale wensen van klanten als Oxxio, Kamer van Koophandel en Unicef. Sinds 2005 is Tam Tam gevestigd in een kantoorpand in Rijswijk. Omdat er geen concrete geschiedenis over Tam Tam te verkrijgen is, heb ik verderop de belangijkste veranderingen op een rijtje gezet. 14 OVER TAM TAM

15 Tam Tam opende in 2007 een kantoorruimte in Utrecht. Daarnaast werd intern het Baarda model (een modern beloningsmanagementsysteem voor personeel) ingevoerd. In 2009 werd Arjan Nataraj (algemeen directeur Mixit) algemeen directeur bij Tam Tam was het jaar waarin scrum geïntroduceerd werd. Ditzelfde jaar nam Tam Tam internetbureau Plag over, waarvan een hoop medewerkers gingen werken onder de vlag van Tam Tam. Mixit werd verzelfstandigd, en daarnaast opende Tam Tam een nieuwe vestiging in Amsterdam. In 2012 werd Arjan Nataraj weer directeur van Mixit, en Paul Manuel werd weer algemeen directeur van Tam Tam. Core-business Tam Tam houdt zich bezig met het maken van online oplossingen voor bedrijven. Hieronder vallen online strategie, websites, applicaties, campagnes en social marketing, service design, content design, back-end integratie, conversieoptimalisatie, SEO (Search Engine Optimalization) en SEA (Search Engine Advertising). OVER TAM TAM 15

16 Paul Manuel vertelt over het jaarplan Doelstellingen Voor het jaar 2013 staan er drie belangrijke thema s. In de eerste plaats wil Tam Tam haar klanten nog meer tevreden maken dan nu al het geval is, met in het vooruitzicht dat er ook prijzen gewonnen kunnen worden met het werk wat zij vervaardigd. Tam Tam heeft een positie als top 3 internet agency in Nederland. Die positie willen ze dan ook graag verduurzamen. Dat willen ze bereiken door kansen in de markt te pakken, zoals nu data-gestuurde marketingoplossingen aan te dragen om klanten van Tam Tam nog beter te kunnen helpen bij het versterken van hun online positie. 16 OVER TAM TAM

17 Ook wil Tam Tam werken aan het verwerven van een positie op de internationale markt. Er hoeven niet meteen kantoren geopend te worden in Londen, Parijs en Berlijn. De bedoeling is om dit in kleine stapjes te doen, door bijvoorbeeld stagiaires, afstudeerders en toptalent aan te trekken uit het buitenland om zo binnen Tam Tam ook een internationalere setting te creëren. Bedrijfscultuur Zoals Tam Tam het zelf beschrijft in haar wiki, hebben zij geprobeerd om hun cultuur onder woorden te brengen door het benoemen van kernwaarden. Medewerkers van Tam Tam delen deze kernwaarden en proberen er zoveel mogelijk naar te handelen. Deze waarden zijn dienstbaar, innovatief en behulpzaam. Wat mij is opgevallen tijdens mijn stageperiode bij Tam Tam, is het open karakter en de ontspannen sfeer die er hangt. De spreekkamers zijn voorzien van soms bijna lounge-achtig meubilair. Er ligt een voetbal en een skippybal in het kantoor, er is een pingpongtafel in spreekkamer Milaan en in de keuken zijn veel tussendoortjes en snacks te vinden. Ondanks dat er een gemoedelijke sfeer hangt, wordt er hard gewerkt. Tammo s verwachten van elkaar dat er top-notch producten worden aangeleverd. OVER TAM TAM 17

18 Het bedrijf Tam Tam BV Het bestuur MT (Management Team) De afdelingen ebusiness Digital Marketing Online Services Service & Beheer HR (Human Resources) Office Management Finance 18 OVER TAM TAM

19 Eerste leerdoel Tijdens mijn stage zou ik graag mijn vermogen om ontwerpkeuzes te verantwoorden willen versterken door na het opleveren van een ontwerp dit te verdedigen en feedback van collega s te vragen om vervolgens de feedback op te nemen in een tekstueel document. Specifiek Als visual designer wil ik bij Tam Tam mijn vermogen om ontwerpkeuzes te verantwoorden, versterken. Meetbaar Om aan te kunnen tonen dat ik vorderingen maak met dit leerdoel tijdens mijn stageperiode, wil ik de kennis en inzichten die ik heb opgedaan om mijn ontwerpkeuzes te versterken tekstueel omschrijven. Ik wil minstens 3 van deze momenten omschrijven in mijn stageverslag. RATIONALE & EMOTIONALE TVM (TRANSPORT VERZEKERINGSMAATSCHAPPIJ) OVER TAM TAM 19

20 Acceptabel Bij dit leerdoel werk ik aan de CMD-competentie Rationale & emotionale. Daarnaast valt het binnen de werkzaamheden van een visual designer, een opleidingsprofiel binnen mijn opleiding. Realistisch Mijn bedrijfsbegeleider en andere collega s, waaronder verschillende designers en developers kunnen mij hulp en feedback geven op mijn gemaakte werk. Tijdgebonden Gedurende mijn stageperiode wil ik werken aan dit leerdoel. 20 RATIONALE & EMOTIONALE STIJLGIDS TVM (TRANSPORT VERZEKERINGSMAATSCHAPPIJ)

21 Samen met Jan Paul en Armand bij het hoofdkantoor van TVM in Hoogeveen voor een demo. Een nieuwe website voor TVM Verzekeringen Tam Tam had de opdracht gekregen om een nieuwe website voor TVM te maken. Daarbij is het de bedoeling om de propositie van TVM, snelle en persoonlijke hulp op verzekeringstechnische gebieden, door te vertalen naar een online beleving. Binnen dit project werd ik als visueel ontwerper aangesteld voor een aantal opdrachten. Bij mijn aanvang diende ik een stijlgids voor de kleuren, de vormen en de typografie op te maken voor de nieuwe TVM-website. RATIONALE & EMOTIONALE TVM (TRANSPORT VERZEKERINGSMAATSCHAPPIJ) 21

22 Ik begon met het opmaken van een document waarin ik de kleuren voor de TVM website ging vaststellen. Ik werkte vanuit Adobe Illustrator, omdat deze kleurenwaaiers en kleurcombinaties als ingebouwde functies heeft. Ik maakte hierin een aantal voorstellen voor kleurengidsen voor de website. Ik kreeg alle ruimte om zelfstandig hieraan te werken. Zodra ik iets had gemaakt, kon ik het voorleggen om feedback te krijgen. Voor het vinden van een goede passende typografie bij TVM, ging ik op het web op zoek naar diverse fonts die hierop aansloten. Ik maakte een overzicht van de lettertypes die mij geschikt leken. Catriona raadde mij aan om mijn zoektocht te beginnen bij Google Fonts, omdat hier veel lettertypes instaan en makkelijk voor developers zijn om te integreren. Uiteindelijk heb ik een stijlgids gemaakt met daarin richtlijnen voor kleur en typografie die van toepassing zouden zijn. Catriona gaf mij vervolgens feedback op mijn stijlgids. Ze vond nog niet goed duidelijk hoe de verschillende kleuren toegepast zouden worden in de website; Gebruik ik bijvoorbeeld nu de lichte kleur groen voor achtergronden of bijvoorbeeld in buttons? Hier lag dus een verbeterpunt voor mij. Ik moest de kleuren die ik wilde gebruiken koppelen aan de diverse elementen die in het visueel ontwerp zaten. 22 RATIONALE & EMOTIONALE STIJLGIDS TVM (TRANSPORT VERZEKERINGSMAATSCHAPPIJ)

23 In Adobe Illustrator zocht ik kleuren die goed bij elkaar pastten, zonder na te denken over de functionele kant die de kleuren zouden moeten hebben. Behalve dat het mooi was viel er weinig over uit te leggen. RATIONALE & EMOTIONALE TVM (TRANSPORT VERZEKERINGSMAATSCHAPPIJ) 23

24 Heeft u schade en wilt u dit direct en snel aan ons melden? Snel verzekeren Een lange tekst die iets zegt over een verzekering die je af moet sluiten of een vraag die je op moet lossen om in de toekomst minder verrast te worden door diverse ongevallen. Titel voor een artikel Een lange tekst die iets zegt over een verzekering die je af moet sluiten of een vraag die je op moet lossen om in de toekomst minder verrast te worden door diverse ongevallen. Heeft u schade en wilt u dit direct en snel aan ons melden? Snel verzekeren Een lange tekst die iets zegt over een verzekering die je af moet sluiten of een vraag die je op moet lossen om in de toekomst minder verrast te worden door diverse ongevallen. Heeft u schade en wilt u dit direct en snel aan ons melden? Snel verzekeren Een lange tekst die iets zegt over een verzekering die je af moet sluiten of een vraag die je op moet lossen om in de toekomst minder verrast te worden door diverse ongevallen. Titel voor een artikel Een lange tekst die iets zegt over een verzekering die je af moet sluiten of een vraag die je op moet lossen om in de toekomst minder verrast te worden door diverse ongevallen. Heeft u schade en wilt u dit direct en snel aan ons melden? Snel verzekeren Een lange tekst die iets zegt over een verzekering die je af moet sluiten of een vraag die je op moet lossen om in de toekomst minder verrast te worden door diverse ongevallen. Titel voor een artikel Een lange tekst die iets zegt over een verzekering die je af moet sluiten of een vraag die je op moet lossen om in de toekomst minder verrast te worden door diverse ongevallen. Titel voor een artikel Een lange tekst die iets zegt over een verzekering die je af moet sluiten of een vraag die je op moet lossen om in de toekomst minder verrast te worden door diverse ongevallen. Om mijn keuze voor typografie toe te kunnen lichten tegenover TVM, besloot ik opzetten te maken waarin hun huidige fonts werden gebruikt. Bij klein gebruik liep hun ITC Franklin Gothic Std dicht. Dit was een argument om een ander lettertype te gebruiken. 24 RATIONALE & EMOTIONALE STIJLGIDS TVM (TRANSPORT VERZEKERINGSMAATSCHAPPIJ)

25 Vervolgens was bij het typografische gedeelte nog iets belangrijks afwezig. Ik had slechts lettertypes uitgekozen die me passend leken, maar had niet nagedacht over de functie van het lettertype vanuit hiërarchisch oogpunt (verschillende koppen, inleidende tekst en broodtekst). Ook hierin moest nog een verbeterslag gemaakt worden. Aan het einde van de dag kwam iedereen bij elkaar in de spreekkamer Delft om alles door te nemen wat er gemaakt was voor het project. Hier moest ik dan ook mijn stijlgids verantwoorden. Armand beoordeelde mijn werk. Hij was kritisch en direct, en ik kon moeilijk verantwoorden waarom ik bepaalde kleuren had gebruikt. Uiteindelijk werd er op basis van één van mijn kleurvoorstellen een definitief voorstel gekozen. Daarnaast had ik geen goede rationale voor de keuze in lettertypes. Armand vroeg mij om mijn keuze voor de lettertypes te verantwoorden. Dit ging niet erg goed, ik kon moeizaam uitleggen waarom ik vond dat de typografie aansloot bij het gevoel dat de nieuwe website uit moest gaan stralen. RATIONALE & EMOTIONALE TVM (TRANSPORT VERZEKERINGSMAATSCHAPPIJ) 25

26 Na een feedbacksessie met Catriona ben ik kleuren gaan kiezen op een meer functionele manier. Welke kleur voor de buttons? Met welke kleuren leggen we accenten op een webpagina, enzovoorts. 26 RATIONALE & EMOTIONALE STIJLGIDS TVM (TRANSPORT VERZEKERINGSMAATSCHAPPIJ)

27 Reflectie Door deze werkzaamheden ben ik mij bewuster geworden van het gebruik van typografie en kleur in een webontwerp. Daarmee is ook mijn benadering voor het beslissen wat goed past binnen een ontwerp qua kleur en typografie veranderd. Vanaf nu houd ik rekening met een typografische hiërarchie voor wat er binnen de context van een ontwerp nodig is (Bijvoorbeeld drie soorten koppen, inleidende tekst en broodtekst). De motivering voor het kiezen van een lettertype voor een ontwerp kan in het geval van een corporate website getoetst worden aan bijvoorbeeld merkwaarden of gewenste uitstraling van de klant. Ook heb ik ontdekt dat je vanuit functioneel opzicht kunt beargumenteren waarom iets wel of niet kan. Zo was het huidige lettertype van TVM, ITC Franklin Gothic, op kleine grootte niet goed meer leesbaar. Dat toonde ik aan door het te vergelijken met een lettertype waar bij dit niet zo was op dezelfde grootte. Voor kleuren geldt hetzelfde. De kleuren zijn een invulling van de functionaliteit van diverse elementen in een website ontwerp. Catriona zei dat ik beter kan kijken naar welke elementen aanwezig zijn en dan gaan kijken hoe ik dit kan categoriseren met kleuren (accentkleuren e.d.). Kleur heeft invloed op de uitstraling van de corporate website. Ook hiermee wil ik in het vervolg rekening houden, zodat ik ook argumenten vanuit deze hoek kan geven. RATIONALE & EMOTIONALE TVM (TRANSPORT VERZEKERINGSMAATSCHAPPIJ) 27

28 Designers moeten zich meer bezig gaan houden met de techniek. Als je de techniek als designer snapt, dan kan dat ook voordelen hebben voor het bedrijf. Voor minder geld hetzelfde resultaat bijvoorbeeld. 28 RATIONALE & EMOTIONALE PITCHVOORSTEL WERKEN BIJ BELASTINGDIENST

29 Schetsen in de werkkamer Babylon, waar ik samen met Peter werkten aan het ontwerp. Aanbesteding voor de Belastingdienst Het was maandag en mijn planning was nog leeg. Ik vroeg of ik op een project gezet kon worden, en dat was mogelijk. In de middag begon ik met Peter Emmerzaal aan het uitwerken van twee casussen voor een aanbesteding bij de Belastingdienst. Mijn taak was om als visueel ontwerper kritisch te kijken naar de voorstellen die er lagen en hierin een verbeterslag te maken. Er moest een ontwerp opgeleverd worden dat aansloot op het verhaal van de pitch. Curt en Barry, twee designers, hadden een eerste opzet gemaakt voor een ontwerp voor een vacaturepagina en een pagina RATIONALE & EMOTIONALE PITCHVOORSTEL WERKEN BIJ BELASTINGDIENST 29

30 voor de inhouse-dag voor ICT-ers. Daarnaast diende ik mee na te denken over de rationale van het design. Om zo efficiënt mogelijk te werk te gaan begon ik met het maken van schetsen voor twee pagina s: De vacaturepagina om inzicht te krijgen in de functie fiscalist en de informatiepagina over de inhouse-dag voor ICT-ers. Zodra ik een goed idee had gevisualiseerd op papier voor deze pagina s, besprak ik mijn ideeën met Peter. Wanneer daar akkoord op was, kon ik de schetsen uit gaan werken in Photoshop. Ik dacht daarbij goed na over hoe de webpagina s van toegevoegde waarde konden zijn voor de gebruiker. Wat wilden zij graag zien? Om mijn ontwerpen nog beter af te stemmen, vroeg ik Curt (interactive designer) af en toe om feedback. Het ontwerp van Curt en Barry was zo ingericht dat het niet gewoon maar lange lappen tekst zouden worden, waar de Belastingdienst bekend om staat. Het concept was om snackbare content te maken, die makkelijk te scannen was voor gebruikers en een goed beeld zou geven. Voor de twee casussen moest ook voor ieder apart een rationale geschreven worden. Ik schreef er hier ook één van. Zodra ik een ontwerp neer had gezet, ging ik met Peter verder nadenken over hoe de rationale eruit moest zien. Dit ging aan de hand van user stories, waarin gebruikers in een scenario in aanraking komen met de webpagina en er op een bepaalde manier mee gaan interacteren. 30 RATIONALE & EMOTIONALE PITCHVOORSTEL WERKEN BIJ BELASTINGDIENST

31 Het definitieve pitch-ontwerp. De nadruk lag hier op twee aspecten. Het moest esthetisch mooi zijn om het te verkopen, daarnaast moest het snackbare content zijn; kleine brokjes informatie die snel inzicht geven bij de content die op de pagina staat. RATIONALE & EMOTIONALE PITCHVOORSTEL WERKEN BIJ BELASTINGDIENST 31

32 32 RATIONALE & EMOTIONALE PITCHVOORSTEL WERKEN BIJ BELASTINGDIENST

33 Uiteindelijk leverde ik een set aan webpagina s op voor de twee casussen. Wat me alleen dwars zat, was dat voor mijn gevoel het design onvoldoende aan zou sluiten op de behoeften van de gebruikers. Ik sprak hierover met Arjan Lugthart (senior visual designer), die mij daarin waardevolle inzichten gaf. Het concept wat er namelijk lag voor de Belastingdienst had al rekening gehouden met de beleving van de gebruikers. De pitch moest de Belastingdienst ervan gaan overtuigen dat dit een goed verhaal zou zijn. Dat is waar het design om de hoek kwam kijken. Het moest in dit geval gebruikt worden om het verhaal van de pitch te versterken. Ik had al die tijd gedacht vanuit de gedachte dat het design puur moet gaan over het eindproduct en hoe dit toegevoegde waarde zou bieden voor de eindgebruikers. Curt zei tijdens de feedbacksessies dat het er goed uit zag, hij had er weinig inhoudelijk op aan te merken. Ook Peter was tevreden met het design. Samen hadden we naar de rationale gekeken die ik samen met Peter had geschreven en dit was een goed en sluitend verhaal geworden. RATIONALE & EMOTIONALE PITCHVOORSTEL WERKEN BIJ BELASTINGDIENST 33

34 De design rationale voor de Belastingdienst, wat mij binnen dit project aan het denken zet waarvoor we nu daadwerkelijk aan het ontwerpen waren. Het ging nu om het mooie, want het concept lag er al. 34 RATIONALE & EMOTIONALE PITCHVOORSTEL WERKEN BIJ BELASTINGDIENST

35 Je moet bij het maken van design goed nadenken over de functie ervan. Gebruikers zijn belangrijk, maar dit pitch voorstel moest een middel zijn om het verhaal te verstevigen. Reflectie Binnen dit relatief kleine project heb ik een belangrijk inzicht opgedaan. Ik ben meer gaan begrijpen hoe design ingezet kan worden. Je kunt je afvragen wat voor functie design heeft voor de eindgebruikers ervan, maar in de context van deze opdracht lag de nadruk op het maken van een design dat het verhaal van de pitch zou moeten versterken. Dit belangrijkee leermoment werd mooi verwoord door Arjan. Een ladder om de ramen te kunnen wassen heeft een andere functie dan een ladder die op een tentoonstelling ter bezichtiging staat. De rationale die bij de casussen lagen, waren voor mij nu ook veel duidelijker. Ondanks de korte duur van het project heb ik naar mijn idee een waardevolle denkwijze erbij geleerd. Ik wil daarom in het vervolg goed helder krijgen, dat als ik ga ontwerpen, ik me bewust ben van de precieze functie ervan. RATIONALE & EMOTIONALE PITCHVOORSTEL WERKEN BIJ BELASTINGDIENST 35

36 De vernieuwing van design zit in de manier waarop je samenwerkt en tot oplossingen komt. 36 RATIONALE & EMOTIONALE STIJLVOORSTEL SON SCHEEPSVERZEKERINGEN

37 Spreekkamer Delft, waar ik mijn verantwoording voor het stijlvoorstel aflegde. Een stijlgids voor SON verzekeringen TVM heeft ook een dochteronderneming die verzekeringen verzorgt in de scheepsvaart. Deze verzekeringsmaatschappij, genaamd SON verzekeringen, wilde graag binnen het project van TVM ook een aantal aanpassingen doen aan haar website. Ik werd aangewezen als visueel ontwerper om een stijlvoorstel te maken voor SON verzekeringen om het vervolgens ook aan hen te presenteren. Ik diende twee voorstellen te maken. Eén voorstel dat duidelijk maakt dat SON Verzekeringen een onderneming is van TVM, en een voorstel waarin SON visueel los lijkt te staan van TVM. RATIONALE & EMOTIONALE STIJLVOORSTEL SON SCHEEPSVERZEKERINGEN 37

38 Toen ik de opdracht kreeg werd mij verteld dat het stijlvoorstel vooral was gericht op het maken van een kleurenpalet. Aangezien SON een dochteronderneming is van TVM, mocht die relatie doorschemeren in het kleurgebruik. Vanuit het projectteam stelde een aantal leden dan ook voor om het kleurenpalet van TVM als uitgangspunt te nemen. Met dit als uitgangspunt ging ik nadenken over hoe kleur een extra dimensie kon gaan geven aan het nieuwe visueel ontwerp voor SON. Ik gebruikte hiervoor een standaard opgemaakte contentpagina die voor TVM was gemaakt, omdat hier alle elementen in zaten die eventueel voor zouden kunnen komen in het ontwerp. Ik probeerde diverse combinaties qua kleuren uit op de contentpagina en bewaarden deze. Na wat experimenteren heb ik een afgerond kleurenpalet in een presentatie gestopt met de nodige argumentatie en toepassing op zowel de contentpagina als de mobiele versie hiervan. Deze presentatie gaf ik eerst aan Catriona, en de dag erna aan SON. 38 RATIONALE & EMOTIONALE STIJLVOORSTEL SON SCHEEPSVERZEKERINGEN

39 Son blauw Wit Blauwe tekst Zwarte tekst Son grijs Highlight Subtiel onderscheid Call to action Met de feedback van het vorige stijlvoorstel voor TVM, maakte ik nu een voorstel waarbij ik goed nagedacht had over de verschillende kleuren. RATIONALE & EMOTIONALE STIJLVOORSTEL SON SCHEEPSVERZEKERINGEN 39

40 De verschillende soorten functies van de buttons vereisten andere kleuren. Hier experimenteerde ik dan ook mee. Ik zocht kleuren die aansloten bij SON blauw maar ook voldoende in het oog sprongen aan de hand van de waarde die knop had op de pagina. 40 RATIONALE & EMOTIONALE STIJLVOORSTEL SON SCHEEPSVERZEKERINGEN

41 Groen leek mij aanvankelijk een goede kleur om te gebruiken. In de praktijk bleek niets minder waar. Het is een vriendelijke kleur voor de knoppen, maar het springt onvoldoende in het oog als call to action. RATIONALE & EMOTIONALE STIJLVOORSTEL SON SCHEEPSVERZEKERINGEN 41

42 Door te experimenteren met geel, bleek het de meest opvallende kleur te zijn om in functioneel opzicht een doel te bereiken. Het moest ervoor zorgen dat de call to action in oog zou springen. 42 RATIONALE & EMOTIONALE STIJLVOORSTEL SON SCHEEPSVERZEKERINGEN

43 Om te testen of de kleuren werkten, paste ik ze toe op de standaard contentpagina die voor TVM was gemaakt en op een scherm uit mobiele versie die ook voor de website van TVM was gemaakt. RATIONALE & EMOTIONALE STIJLVOORSTEL SON SCHEEPSVERZEKERINGEN 43

44 44 RATIONALE & EMOTIONALE STIJLVOORSTEL SON SCHEEPSVERZEKERINGEN

45 Catriona had mij gezegd twee voorstellen te maken. Ik had er maar één. De reden die ik hiervoor had, was dat ik het als moeilijk ervoer om een voorstel te maken waarvoor ik weinig fundament vanuit de opdracht had om ontwerpkeuzes op te baseren. Catriona vertelde mij om die vasthoudendheid los te laten. Ik had onderscheid gemaakt in verschillende elementen op de contentpagina. Drie soorten buttons, die naar mate van belangrijkheid ook een meer opvallende kleur hadden in verhouding tot andere elementen op de pagina. Andere elementen hadden kleuren die voortkwamen uit de bestaande kleuren uit het logo van SON, om op deze manier de merkbeleving in stand te houden. Catriona vond dat ik een goede rationale had gemaakt rondom de kleuren. RATIONALE & EMOTIONALE STIJLVOORSTEL SON SCHEEPSVERZEKERINGEN 45

46 Reflectie Wat ik heb geleerd is het toepassen van mijn kennis uit de vorige stijlopdracht die ik voor TVM deed. Het stijlvoorstel voor SON maken was een moment voor mij om mijn nieuwe kennis over het toepassen van kleur in de praktijk te brengen. Ik kon op een dieper niveau nadenken en beargumenteren hoe kleur ingezet kan worden binnen een ontwerp. Dat ik gegroeid ben in het geven van een goede rationale voor kleurgebruik is me duidelijk geworden na de feedback van Catriona op mijn presentatie voor SON. Het was een duidelijke rationale vond zij. Catriona bekritiseerde echter dat ik maar één stijlvoorstel had gemaakt. Ik had maar één voorstel gemaakt, omdat ik voor mijn gevoel niet anders kon qua stijl. Ik dacht er teveel over na en heb het daarom niet gedaan. Omdat Catriona dit punt aandroeg en mij hiermee nieuw inzicht heeft gegeven, wil ik hier in het verloop van mijn stageeperiode aan gaan werken. Door gewoon te doen. 46 RATIONALE & EMOTIONALE STIJLVOORSTEL SON SCHEEPSVERZEKERINGEN

47 Voor mij bestaan visual designers niet. Visual design is een resultaat van onderzoek naar wat de gebruiker nodig heeft en hoe gaat hij iets bedienen. Die discipline is voor mij niet echt relevant. Ik omschrijf dat meer als een huisschilder. RATIONALE & EMOTIONALE STIJLVOORSTEL SON SCHEEPSVERZEKERINGEN 47

48 Tam Tam Utrecht, waar we op dinsdagen met Ramon de Goede van NKC scrumden. Het scrumteam voor NKC Na ruim zes weken stage bij Tam Tam voelde ik dat goed op mijn plek zat. Ik was gewend geraakt aan mijn collega s, ik had een beeld van hun werkwijze en mijn leerdoelen waren minder troebel geworden. Ik vond dat het moment er was om een project te doen waarin ik veel kon ontwerpen en vroeg Norbert daarom of hier een mogelijkheid toe was. Die was er, en zo belandde ik voor twee dagen in de week in een scrum team voor NKC (Nationale Kampeerauto Club). Zij hadden Tam Tam in de arm genomen om hun nieuwe website te realiseren. 48 RATIONALE & EMOTIONALE VISUEEL ONTWERP NKC (NATIONALE KAMPEERAUTO CLUB)

49 Binnen dit project fungeerde ik als een visueel ontwerper die zich bezighield met het opleveren van ontwerpen voor diverse pagina s van de website. Dit gebeurde onder supervisie van Arjan Lugthart. Hij is senior visual -en interactie ontwerper. Voor de website van NKC werkten we in sprints. Op maandag zaten we bij de vestiging in Rijswijk op een scrum-eiland. Op dinsdag werkten we in Utrecht waarbij Ramon de Goede, internet marketeer bij NKC, aanschoof. Mijn eerste klus als visueel ontwerper binnen dit project was het ontwerpen van een pagina waarop niet-leden een overzicht van de voordelen van een lidmaatschap bij NKC konden verwachten. Via deze pagina moesten ze ook verleid worden om een lidmaatschap te nemen. Het startpunt voor het ontwerpen van deze pagina was dat hij visueel zodanig aantrekkelijk moest worden dat het niet-leden daadwerkelijk over de streep zou trekken. Arjan kwam in eerste instantie met het idee om met leuke, ondersteunde visuals te komen in de vorm van iconen. Ik maakte hiervoor een aantal schetsen waarin de tien voordelen van een lidmaatschap benadrukt werden door het gebruik van iconen. Uiteindelijk vonden wij samen dat dit sterker kon. Arjan stelde voor om het idee van iconen te laten varen, en op zoek te gaan naar andere visuele mogelijkheden. Arjan had een pagina op Flickr gevonden waarop heel veel fotografie met campers te vinden was. Ik ben toen gaan kijken of deze fotografie het doel van RATIONALE & EMOTIONALE VISUEEL ONTWERP NKC (NATIONALE KAMPEERAUTO CLUB) 49

50 Mijn verantwoording om onderaan de pagina Lid worden een afbeelding te gebruiken kon ik goed beargumenteren. Je wilt namelijk de terugkoppeling maken naar het ideaalbeeld van de gebruiker. Dit kun je als overtuigingsmiddel gebruiken om nieuwe leden te werven. Zij kunnen op die manier zelf meer context geven aan een lidmaatschap. De ontwerpkeuze kwam ook in het definitief ontwerp. 50 RATIONALE & EMOTIONALE VISUEEL ONTWERP NKC (NATIONALE KAMPEERAUTO CLUB)

51 de pagina zou kunnen versterken. Ik heb hierin toen een voorstel gedaan en mijn keuzes onderbouwd. Na het afwerken van deze pagina, moest het Nieuws-gedeelte van de NKC-website worden ingericht. Hiervoor waren twee pagina s die moesten worden ontworpen, één met het nieuwsoverzicht en een specifieke nieuwsbericht pagina. Deze pagina s werkten ik voornamelijk met Arjan uit. Het makkelijke van deze pagina s was dat het vrij vanzelfsprekend was wat erop moest komen. De uitdaging zat meer in het esthetische gedeelte. We moesten zorgen voor een overzicht wat plezierig zou zijn voor de gebruiker. NKC zou binnen haar nieuwe website ook een onderdeel krijgen waarin haar leden spullen konden kopen en verkopen. Dit Vraag en aanbod gedeelte van de website had in het voorstel voor de pitch nog geen concrete invulling gekregen, dus moesten Arjan en ik heel veel van dit onderdeel nog uitdenken. Er ging hierbij veel tijd zitten in het categoriseren van de diverse producten die gekocht en verkocht werden. Ramon verschafte ons informatie over de manier waarop NKC dit ingevuld zou willen zien. Hierbij formuleerden we uiteindelijk een drietal productcategorieën (Campers, accessoires en stallingsplaatsen). Vervolgens gingen Arjan en ik met deze input aan de slag. Bij het ontwerpen van deze pagina s was het Arjan RATIONALE & EMOTIONALE VISUEEL ONTWERP NKC (NATIONALE KAMPEERAUTO CLUB) 51

52 die voornamelijk die ideeën aandroeg voor de ontwerp. Hij kwam met een schets voor de landingspagina, de overzichtspagina en de detailpagina. Bij het ontwerpen van deze pagina in Fireworks probeerde ik me kritisch op te stellen om het ontwerp functioneel en helder voor de gebruiker te houden. De ontwerpkeuzes waar ik me mee bezig hield zaten in het filtersysteem op de overzichtspagina en de indeling op de detailpagina. Zo was het filtersysteem dusdanig groot dat het ontzettend lang zou worden op de overzichtspagina. Ik droeg als oplossing aan om bepaalde categorieën ingeklapt te maken, zodat de meest relevante eigenschappen van een product als eerste naar voren komen voor de gebruiker. Als de gebruiker verder wilde specificeren, kon hij het filter zelf verder uitklappen. Dit overzicht heeft hij omdat de categorieën in het filtersysteem ingeklapt ook een categorienaam hadden. Dit leek Arjan een goed idee, dus pasten we het toe in het ontwerp. De detailpagina was meer op esthetisch gebied keuzes maken in het ontwerp. Mijn voorstel was om de detailpagina van een tabelstructuur te voorzien om de producteigenschappen aan te duiden. Het gevolg was in combinatie met de carousel die ernaast stond dat het ontwerp saai, statisch en blokkerig oogde. We zochten naar een visuele oplossing om deze saaiheid uit het ontwerp te krijgen. Na allebei een voorstel te hebben gedaan, kozen we uiteindelijk voor Arjan s ontwerp, om vervolgens de detailpagina af te ronden. 52 RATIONALE & EMOTIONALE VISUEEL ONTWERP NKC (NATIONALE KAMPEERAUTO CLUB)