BLOG 3 - TalentZ en Create Care website

Project: TalentZ

Programma's: Adobe Illustrator, ProCreate

Duur: Onbekend

B1-K1-W1: Bespreekt de opdracht

De eerste dag van mijn stage liep ik naar binnen bij Specialist in Websites. Toen ik net m’n tas wilde neerzetten kwam iemand van Create naar mij toe om te vertellen dat ik de eerste twee weken daar zou zitten in verband met een illustratie opdracht.

B1-K1-W3: Oriënteert zich op opdrachtgever/doelgroep/onderwerp

De opdracht was om voor de website van TalentZ een aantal illustraties te maken die in één keer zouden laten zien hoe TalentZ in elkaar zit. TalentZ koppelt op een innovatieve manier de student op basis van skills, persoonlijke eigenschappen en opleiding aan het juiste bedrijf. Op deze manier spelen zij in op de behoefte van jongeren door een stagevacature snel en gemakkelijk aan de student te koppelen. Op basis van deze informatie laat TalentZ - uitgedrukt in matchingspercentage - zien welke bedrijven het best bij de student passen. De student krijgt vervolgens in één oogopslag te zien waar hij/zij zich gedurende de stage optimaal kan ontwikkelen.

Makkelijker gezegd dan gedaan. Diezelfde dag begon ik met het onderzoeken van verschillende stijlen. Als onderzoek heb ik gekeken naar verschillende illustratie stijlen die op websites veel gebruikt worden. Ik heb vooral gelet op Flat Design stijlen omdat ze mij verteld hadden dat ze dat dat ze aansprak. Die heb ik bij elkaar gezet op een Pinterest bord om dat vervolgens te bespreken met Jop en Martijn.

Pinterest bord - Illustratie stijlen

De volgende dag ging ik zitten met Martijn (eigenaar), Jop (designer) en Melissa (designer).

We hadden het kort over de illustraties en de ideeën die we hadden. Er was een bepaalde stijl die ons heel erg aansprak. Het was de stijl van een mobiele game genaamd Monument Valley. Hieronder een schermafbeelding.

Monument Valley - mobiele game

Tijdens dat gesprek kwam Martijn met het idee om geen illustraties te maken, maar animaties. Hij vroeg mij of ik kon animeren. Een beetje twijfelend vertelde ik dat ik op school de basis geleerd had en best een poging wilde wagen. Door de maanden heen heb ik ontdekt dat Martijn een redelijk grote dromer is. Hij gaat niet voor honderd procent, hij gaat altijd voor de duizend. Wat aan de ene kant heel erg mijn motivatie omhoog trekt maar aan de andere kant ook wel intimiderend was omdat ik het gevoel kreeg alsof hij hele hoge verwachtingen van me zou hebben.

B1-K1-W2: Maakt een planning

Na dat gesprek spraken we af om twee weken later weer samen te zitten om de voortgang te bespreken. Waarna ik dus aan de slag ging met een planning, onderzoek en de eerste illustratie. De planning was niet opgeschreven maar stond in Trello, iets wat ik niet kan laten zien omdat er verschillende projecten (ook van andere klanten) in staan.

Eerst schreef ik op wat we qua stijl allemaal hadden besproken en maakte een eerste kleine schets. Verder ging ik verschillende animatie programma's af op voor- en nadelen om te zien hoe ik het best de animatie kan maken. Ook schreef ik de storyboards op en bedacht ik me hoe ik het best de personages kon tekenen. Hieronder foto's van mijn onderzoek en eerste opzet.

B1-K1-W4: Maakt een concept

Aangezien Jop de designs maakt voor TalentZ.nl als UX/UI Designer, ging ik als eerst mijn illustratie met hem bespreken. We kwamen erover uit dat het nog niet helemaal was zoals we in ons hoofd hadden. Kleuren waren iets te vel waardoor de Z niet opvallend genoeg was. Hieronder de twee verschillende versies voor en na. (boven is voor, onder is na)

Na deze aanpassingen was het de bedoeling dat we het met Martijn zouden bespreken. Ondertussen heb ik zelf nog eens nagedacht over wat ik als "student" leuk zou vinden om te zien op een website. Zelf vond ik wat ik gemaakt had niet aansprekelijk genoeg. Het was een illustratie stijl die al veel te zien is op websites en het gaf me geen speciaal gevoel.

B1-K1-W5: Maakt een ontwerp

Door dit gevoel ben ik aan de slag gegaan met iets totaal anders. Veel meer een illustratie stijl. Iets wat je terug zou kunnen vinden op billboards en posters. Iets wat op een interessante manier geanimeerd zou kunnen worden. Dus ik begon met schetsen...

B1-K1-W6: Presenteert het concept en/of ontwerp van de media-uiting

Nadat ik deze schets had gemaakt liep ik naar Create om het aan Jop te laten zien. Hij vond het wel cool maar was bang dat het niet was wat Martijn zocht. Hier lag het project een tijdje stil. Martijn had weinig tijd om met ons te zitten en we wisten ons geen raad. Na een korte periode had Martijn tijd en bespraken we de twee verschillende versies die ik had gemaakt. (De eerste, isometrische, flat design illustratie en mijn nieuwe meer getekende illustratie.)

Martijn was erover uit dat de tweede versie beter zou zijn. Wat ik heel erg leuk vond omdat ik het helemaal zelf getekend had.

B1-K2-W1: Bereidt de realisatie voor

Met dit gesprek en mijn nieuwe ideeen in mijn hoofd maakte ik deze eerste illustratie/storyboard af. Omdat ik ze in het begin al had opgeschreven was het makkelijker uit te schetsen. Tijdens het illustreren hield ik in mijn achterhoofd wat ik op school geleerd had over kleurentheoriën. Hiernaast mijn kleuren pallet en hieronder een video timelapse voor de eerste illustratie met de twee officiele illustraties eronder.

B1-K2-W3: Maakt de media-uiting

https://video.wixstatic.com/video/1d4bae_8b51f94c2e9941fc95bfdf42fcefa895/1080p/mp4/file.mp4

B1-K2-W4: Levert de media-uiting op

Helaas nadat ik deze illustraties gemaakt had kwam het project stil te staan omdat de doelgroep aangepast is van alleen studenten, naar studenten en werkzoekende. Dus deze illustraties (die een animatie zouden worden) zijn niet meer relevant. Daardoor heb ik ook geen start kunnen maken met de animatie. Jop heeft overleg gehad over wat nu en ik moet nu de illustraties die al op de websites staan vervangen door illustraties die samen meer in één stijl vallen. Dus jammer genoeg, begin ik weer vanaf nul.

Ik heb geleerd om te gaan met verwarrende situaties. Doordat de doelgroep inneens aangepast werd leerde ik de juiste vragen stellen om ervoor te zorgen dat ik de juiste designs maak voor de juiste situatie. Ondanks dat ik dit project nog aan het afronden ben en het niet helemaal gelopen is zoals gepland, vond ik dit project enorm leuk en ik denk dat ik er veel van opgestoken heb.

---

Project: Create Care

Programma's: Sketch

Duur: Ongeveer 2 weken

B1-K1-W1: Bespreekt de opdracht

Create had Specialist in Websites de opdracht gegeven om een website te maken voor hun nieuwe project Create Care. Omdat alle designers bij Create het enorm druk hadden en ik toch de website mocht ontwerpen, gaven ze mij de kans om ook de andere visuals te designen. Dat is dus de huisstijl en het logo.

De klant (Menno) had al een heel goed beeld van wat hij zocht. Hij vertelde mij duidelijk dat hij met het logo graag groen wilde gebruiken voor een nieuwe en frisse, maar zachte look. Hij wilde het Create logo intact houden met een kleine en minimale aanpassing. Met die informatie ben ik aan de slag gegaan met het logo en de website.

B1-K1-W4: Maakt een concept

Omdat er al een heel duidelijk beeld was voor het logo heb ik gelijk Sketch geopend om aan de slag te gaan. Het logo was al best snel gemaakt met een klein beetje feedback van Thomas en Melissa. Hieronder de versies die ik bedacht.

B1-K1-W5: Maakt een ontwerp

Ik had gekozen voor een groene gradient (verloop) om het logo wat meer dynamisch en modern te maken. Daarbij heb ik het font van Create (de website) gebruikt voor het woordje "care" zodat het volledig bij Create past. Thomas kwam met wat feedback. Hij legde uit dat ondanks dat het er al nieuw en fris uit zag, het nog niet heel zacht over kwam. Hij gaf me de tip om de hoeken ronder te maken zodat het wat lievelijker is en het ook een beetje de vorm heeft van een pil (aangezien Create Care over zorg gaat). Zo gezegd, zo gedaan en hier zijn de goedgekeurde, uiteindelijke eind versies.

B1-K2-W3: Maakt de media-uiting

B1-K2-W4: Levert de media-uiting op

Ik heb logo zó ontworpen dat deze herbruikbaar is voor eventueel andere onderdelen van Create. Bijvoorbeeld Create Innovation of Create Education. Op deze manier is het een soort label geworden. Het logo heb ik opgeleverd als SVG wat een Vector bestand is. Waardoor het gerbuikt kan worden op alle formaten omdat het niet gebasseerd is op pixels.

B1-K1-W4: Maakt een concept

Naast het logo heb ik ook de Create Care website ontworpen. De website moest qua fonts en elementen hetzelfde zijn als de huidige Create website, maar wat vriendelijker. Create moest wel herkenbaar blijven. Nadat ik het had uitgeschreven en een paar miniatuur schetsen had gemaakt ging ik al snel aan de slag omdat ik een goed beeld in mijn hoofd had.

B1-K1-W5: Maakt een ontwerp

Ik was begonnen met de homepagina waarbij ik twee dezelfde versies had gemaakt waarvan een met blauwe accenten en een met oranje accenten. Helaas heb ik niet alle eerste versies meer maar dit is wel de belangrijkste. De volledige versies stonden op een harde schijf die gecrashed is. Normaal gesproken zet ik al mijn werk op "de NAS" wat een opslagsysteem is in dit bedrijf. De map bestaat uit een aantal extra mappen met verschillende onderwerpen. Jouw werk valt vrijwel altijd onder een van die onderwerpen. Wat het makkelijker maakt voor andere mensen als ze iets van je nodig hebben. Ik geef eerlijk toe dat ik er niet aan gedacht had toen ik bezig was met de website. Een slechte fout van mijn kant, maar zeker iets waar ik van geleerd heb! Hieronder een foto van de mappenstructuur.

B1-K1-W6: Presenteert het concept en/of ontwerp van de media-uiting

Na het ontwerp ging ik om tafel met de klant en Thomas. Ik had mijn ontwerpen klaarstaan en omdat het een interne klant was, was het vrij informeel. Voor deze presentatie maakte ik geen fysieke presentatie omdat het een moment was om mijn werk te laten zien en ik denk dat als ik een powerpoint had gemaakt, dat de ontwerpen minder belangrijk over zouden komen. Na overleg met de klant en Thomas waren er nog kleine feedback puntjes. Er moesten een paar afbeeldingen bij, een paar teksten moesten anders en er moest een blog bij. Daarna kon ik door naar de andere pagina's zoals Contact en Ons Verhaal.

B1-K2-W2: Bewaakt voortgang en beoordeelt resultaat van uitbesteding of deelproject

Voor de "Ons verhaal" pagina had ik een leuk idee voor een animatie/transitie. Die is te zien op de gepubliceerde website. Voor dit idee heb ik naast de developer gezeten (Bas) om mijn idee uit te leggen zodat hij het gelijk kon uitvoeren. Hieronder de schermen die ik ontworpen heb voor deze pagina's. Onderaan deze blog staat een link naar de nu online website!

Het is super cool om te zien dat mijn ontwerpen nu live staan. Het was voor mij makkelijker om de stijl te basseren op iets wat al bestond. Dat maakte de eisen duidelijker en overzichtelijker.

Ik heb geleerd om feedback met beide handen aan te nemen en het niet te zien als kritiek. Daarnaast heb ik geleerd dat het goed is om naast een developer te zitten zodat hij/zij een goed idee krijgt van de animaties en anderen ideeën die ik heb.

Create Care website: https://www.createcare.nl/