4
inleiding
13
6
16
projecten stageopdracht
20
mailingcube brochure
2
10
Leerdoelen TOEN het bedrijf
24
18
mailingcube tutorial
26
Rolgordijnstore Finitro
28
32 36
Backlinkbuild.nl
Webwinkelvakdagen
38
12Ebooks Mobile APP
48
HTML editor
iPaddesign
44 46
Goudsite.nl
49
Intern
Leerdoelen NU
52
Commentaar
54
Bijlage BLOG
56 3
Wie ik ben E. J. Jonathan de Roos 0828164 Communication & Multimedia Design September 2011 - januari 2012
Synocom - Rotterdam Bedrijfsbegeleider(s): Pascal Brouwers - Developer Rob Wiek - Eigenaar
Docentbegeleider: Hogeschool Rotterdam Communication & Multimedia Design James(Jim) Boekbinder Docent Interaction Design
4
Doormiddel van dit verslag wil ik laten zien wat mij
Voorwoord
bezigheden waren, tijdens een stageperiode van ongeveer 17 weken. Ik probeer dit door
BEELD
Woord
en
duidelijk te maken. Ook mijn leerdoelen zal ik
toelichten en laten zien waar ik dit tijdens mijn stageperiode heb volbracht of gedeeltelijk. Ik begon mijn stageperiode als een onzeker 3e jaars communication and multimedia design student. Ik wist totaal niet wat ik moest verwachten om te functioneren binnen een bedrijf naast professionals, die al jaren meedraaien. Het was best spannend om er tussen te zitten en echte opdrachten te krijgen en er zelf mee aan de slag te gaan. Ik heb slechts een basis van 2 jaar school en daar moest ik het mee doen. Sommige medestagiaires hadden al een eigen
argumenteren over waarom ik een bepaalde handeling had gedaan. Ook vond ik het fijn dat er een andere stagiair naast me kwam zitten die erg gericht was op het technische gedeelte, aangezien hij technische informatica doet. Hier heb ik veel aan gehad en heb
bedrijf en hadden voorsprong, in mijn visie.
ook buiten mijn stage om met hem samen gewerkt
Gelukkig verliep alles goed en werd ik gewoon
Daarbij hebben we samen ook een kleine project
behandeld als een medecollega. Doordat ik als enige designer bij Synocom functioneerde, was ik verantwoordelijk voor alle design. Dat voelde best wel goed. Ik heb vooral geleerd door vragen te stellen aan anderen en naar hun mening te vragen wat hun ervan vinden zodat ik meerdere visies krijg op een ontwerp in plaats van alleen mijn zicht op het ontwerp. Dit bracht voor mij meer inzichten en
en daaruit ook nog leuke ontwerpen kunnen maken. opgestart met eigen huisstijl en website. Na een aantal weken kwam er ook een online marketeer erbij die de gezelligheid nog extra opvulde. Toen ik bezig was met mijn brochure heeft hij me goed kunnen helpen met de inhoud daarvan, dan heb ik het voornamelijk over de Nederlandse taal maar ook de content.
duidelijkheid, zodat ik ook beter kon
5
Leerdoelen Aan het eind van mijn stage
wil ik...
Specifiek Ik kan structureel werken zonder dat iemand mij meteen hoeft te helpen. Meetbaar Ik wil elke keer beginnen met structuur in mijn werk te leggen. Acceptabel Ik kan mijn stagebegeleider op stage laten zien dat ik zelfstandig kan werken en mijn structuur laten zien.
Ik wil me ontwikkelen in het ontwerpen van digitale media en mezelf kunnen inleven in de doelgroep die op dat moment aan de orde is. Daaronder valt ook het volledige meedraaien binnen een bedrijf en het tempo kunnen bijhouden op het gebied van kennis en vaardigheden
Realistisch Zelfstandig werken met structuur erin kan over een termijn van een half jaar gehaald kunnen worden. Tijdsgebonden Ik kan gedurende mijn stageperiode zelfstandig werken en sommige, hangt af wat de complexiteit van
Zelfstandig werken Leerdoel
Ik wil tijdens mijn stageperiode structureel en zelfstandig kunnen werken.
het probleem, problemen oplossen. Dit vind ik een belangrijk punt binnen professionaliteit Hier wil ik ook goed aan werken tijdens mijn stageperiode. Als ik straks voor een echte opdrachtgever moet werken dan wil ik niet de opdrachtgever vaak lastig vallen omdat ik het zelf niet kan.
Communiceren Zelf communiceer ik meer met beeld dan met woord. Communictief ben ik niet sterk. Communicatie echter is essentieel binnen een professioneel bedrijf. Er moeten duidelijke afspraken gemaakt worden met zowel collega als opdrachtgever. Ik wil niet alleen leren communiceren in beeld, maar ook in woord. Waarschijnlijk zal ik gaan communiceren met klanten of opdrachtgevers. Door goed te communiceren kunnen de taken die ik krijg, na aanleiding van goede communicatie, zo goed mogelijk uitgevoerd worden. Leerdoel Binnen mijn stageperiode wil ik op een goed niveau zitten als het om communiceren gaat. Specifiek Ik kan duidelijk communiceren om zo weinig mogelijk misverstanden te voorkomen. Meetbaar Ik wil elke keer opschrijven wat ik precies communiceer en hoe ik dat doe en of de communicatie duidelijk aangekomen is bij de ontvanger. Acceptabel
Ik kan mijn collega’s laten zien dat ik duidelijk kan communiceren. Realistisch Het verbeteren van communiceren kan met elke stap beter worden. Tijdsgebonden Uiteraard ben ik al aan het begin van mijn opleiding begonnen om mijn communicatieve vaardigheden te verbeteren. Naar mijn idee kan het altijd nog beter, dus ik kan niet duidelijk zeggen dat ik aan het eind van mijn stageperiode een prof bent op het gebied van communiceren want dat leerproces gaat alsmaar door en door.
Ervaring ontwerpprogramma’s Heel erg veel ervaring heb ik nog niet in Adobe ontwerpprogramma’s zoals Indesign, Photoshop, Illustrator. Ik wil me nog verder ontwikkelen door meer dingen te leren en er vaak mee te werken en uitdagingen in de programma’s op te zoeken. Meer dingen ontdekken door opdrachten op stage uit te voeren in deze programma’s. Nieuwe tactieken ontdekken waardoor ik er sneller mee overweg kan en daardoor
effeciĂŤnter werk Behoefte van de klant vertalen naar design Behoefte van de klant of opdrachtgever zo duidelijk mogelijk vertalen naar visueel. Op een professionele manier het tot uiting brengen van de behoefte van de klant in visuele vorm. Daarbij goede research doen en kijken hoe andere professionals het aanpakken.
Plannen Goed mijn taken plannen zodat een deadline gehaald kan worden en de kwaliteit van het werk behouden wordt.
Initiatief nemen Ik moet niet wachten totdat mijn opdrachtgever naar me toestapt met een nieuwe opdracht of iets dergelijks. In de praktijk wil ik uit mezelf naar diegene toestappen om mijn betrokkenheid te tonen en ook mijn wilskracht. Het kan goed vallen, maar ik kan ook op mijn snufferd vallen. Dit is het risico die ik moet nemen.
Het waarom Ik wil beargumenteren waarom ik sommige beslissingen bij een bepaalde opdracht heb genomen om zo mijn keuze te ondersteunen en te verantwoorden. Dit kan verduidelijken voor een klant waarom ik zo heb gehandeld.
Het bedrijf en mijn rol
van Rotterdam met het gebouw van de Nationale Nederlanden op de achtergrond. De kantoorruimte heeft een prettig openlijk gevoel waardoor je goed met iedereen kan communiceren zonder dat je van je plaats moet gaan. De inrichting van het kantoor straalt ook echt Synocom uit. Dat wil zeggen de paarse accenten die je op de website van Synocom terugziet. Doordat het bedrijf klein is kan je snel communiceren als er een probleem is, want alles bevindt zich in één
Synocom is een jong bedrijf, dat opgericht is door Rob Wiek. Eerst had het de naam Helder Marketing wat in oktober 2010 overgegaan is in Synocom BV. Rob Wiek heeft zelf ook Communication & Multimedia Design gestudeerd, waardoor hij wist wat hij van me kon verwachten. De lokatie van Synocom bevind zich aan de Walenburgerweg 72-74 te Rotterdam. Hier zit Synocom samen met Drecomm in één kantoorgebouw wat afgelopen zomer in gebruik is genomen. Synocom en Drecomm werkten al in het vorige pand met elkaar samen. Het kantoor van Synocom bevindt zich op de derde verdieping en heeft een eigen ruimte, naast de Salesafdeling van Drecomm. Doordat het op de derde verdieping zit, heb je vanuit je stoel achter je bureau een prachtig uitzicht op de oudere huizen
ruimte. Van development tot marketing tot design. Mijn rol binnen dit bedrijf had vooral te maken met het design. Doordat Synocom geen designer heeft en had was ik als enige designer werkzaam bij Synocom. Gelukkig had Drecomm wel een eigen designafdeling. Helaas stond deze op de eerste verdieping, dus voor vragen kon ik dat beter via Skype doen, de communicatieve tool die het hele pand en andere locties buiten Rotterdam gebruikt. Als ik soms items moest afdrukken moest ik dat helaas helemaal beneden doen, dus daarvan leerde ik wel dat ik meteen mijn document goed drukkklaar moest hebben om te voor komen dat ik elke keer op en neer moest lopen. Elke keer als ik met een taak klaar was of als ik een vraag had voor Rob, kwam ik meestal naar zijn kan-
11
toor toe wat drie stappen verderop was. Na een paar weken alleen te hebben gezeten kwam er een stagiair van Drecomm/Isidoor naast mij zitten. Deze had als opdracht om een sociaal media platform te creeĂŤren. Hij studeerde technische informatica dus ik kon met veel technische vragen bij hem terecht. Later zijn we ook samen gaan werken buiten stage om. Dit brach veel vruchten met zich mee. Ik mocht een paar visitekaartjes voor hem maken en een website vormgeven voor een klant voor hem. Dit leverde niks op maar wel kennis en ervaring, wat onbetaalbaar is in mijn ogen. Nog een paar weken daarna kwam er een online marketeer(Mark Knops) voor mij zitten, die de marketing moest verzorgen voor bijvoorbeeld backlinkbuild wat ik later zelf heb moeten vormgeven.
12
Projecten
Stageopdracht Synocom
De opdrachtgever Deze opdrachten kwamen vanuit Synocom zelf. Dat wil zeggen dat het intern was.
De opdracht De opracht was om een aantal items voor de Mailingcube applicatie te maken. Er moest een brochure van Mailingcube komen, een inlogscherm voor Mailingcube, tutorials voor de features van Mailingcube, maar ook voor de webwinkel vakdagen moesten er ontwerpen komen. Denk maar aan de stand, deze moest een Magento uitstraling krijgen. Ook moest er een app komen voor de iPad die de bezoeker op de beurs te zien krijgt. Daarnaast zal ik wat losse opdrachten tussendoor krijgen, maar het voorgenoemde is voornamelijk de oorzaak.
14
Thank you for the opportunity
15
Mailingcube Tutorials
Dit is het eerste project binnen mijn stageperiode waar ik mee ben begonnen. In het kort Mailingcube is een tool waarmee nieuwsbrieven worden gemaakt en kan worden verzonden. Je kunt heel makkelijk de nieuwsbrief naar veel adressen sturen d.m.v. lijsten waarin de contacten staan. Je kunt ook een eigen nieuwsbrief zelf vormgeven of gebruik maken van sjablonen. Opdracht Er moesten tutorials komen voor de features die Mailingcube bied. De tutorials bestond uit kleine filmpjes die uitleg geven over hoe MailingCube gebruikt moet worden. Voordat ik de tutorials moest maken heb ik de applicatie eerst moeten testen. Ik moest door de oog van de klant kijken en ervaren wat de klant ervaart. Ik had nog nooit met deze applicatie gewerkt dus alles was nieuw voor me. Dit is juist ook goed om de applicatie te testen, zodat je tegen dingen aan kunt lopen wat je als gebruiker niet snapt. Hiervoor kan dus een tutorial gemaakt worden zodat het duidelijk is voor de gebruiker wat het betekend. Ik kwam de term CRM tegen. Dit was een leermo-
16
mentje voor mezelf want ik was hier nog niet van op de hoogte. CRM is de afkorting van Custom Relationship Management. Custom Relationship Management is een werkwijze met behulp van technologie waarbij het optimaliseren van alle contacten met de klant centraal staat en er wordt getracht elke klant een waardepropositie aan te bieden gebaseerd op de wensen van de klant. De relatie met de klant staat hier centraal. ScreenFlow Voor het maken van de tutorials heb ik het programma ScreenFlow voor de Mac gebruikt. Dit is een programma die het hele scherm opneemt. Elke beweging wordt opgenomen. Hiermee kan je dus een duidelijke tutorial maken zodat men kan zien wat ik precies aan het doen ben. Het opnemen van mijn stem was meer werk, omdat het op kantoor te onrustig was waardoor alle achtergrondgeluiden automatisch mee opgenomen werd. Uiteindelijk heb ik het in een aparte ruimte gedaan, maar ook hier hoorde je nog veel achtergrondgeluiden. Uiteindelijk heb ik het thuis moeten doen. Presentatie Nadat ik het helemaal afgerond had moest ik het voor Drecomm en Synocom zelf presenteren, hiermee kon ik mijn presentatieskills opschroeven waar ik naar mijn behoren nog tekort in schiet. Uiteindelijk is deze presentatie prima verlopen en was het voor het publiek duidelijk.
Mailingcube Brochure
Ik heb van elk ‘hoofdstuk’ een aparte afbeelding gebruikt. Dit laat het onderdeeld zien uit de applicatie wat erbij hoort. In het begin had ik moeite met het inschatten van
Naast het maken van tutorials moest ik ook een bro-
hoe groot het lettertype moest, omdat ik geen beeld
chure ontwerpen.
had van hoe het gedrukt eruit kwam te zien. Daarom hebben we eerst een testprint gedaan. Hieruit bleek
Programma
dus dat het font te klein was en dus groter moest.
Het prorgamma waar ik het in gemaakt heb is In-
Ook de plaatjes moesten groter zodat het geheel
Design. Met dit programma heb ik niet veel mee
meer opgevuld werd. Sommige formuleringen van
gewerkt en daarom was dit een groot leermoment
begrippen waar niet goed omschreven volgens Rob,
voor mij. Ik kreeg allerlei tips van anderen, zodat ik
dit moest dus ook verandert worden. Ook moesten
het drukklaar kon maken. Ik moest er voor zorgen
de features die de applicatie bevatte gerangschikt
dat bij afbeeldingen of dergelijke een paar centim-
worden op hoe belangrijk het is.
eter uitsteekt aan de snij-zijkanten. Ook heb ik goed gebruikt gemaakt van grids en andere hulplijnen om
Conclusie
zo een goed en gelijk ritme te kunnen krijgen in de
Dankzij de vele feedback heb ik veel kunnen leren
tekst, die gelezen gaat worden.
hoe InDesign werkt en hoe ik een informatie brochure vorm moet geven. Ook heb ik nu veel aan mijn
De inhoud
grammatica kunnen doen, want ik merkte dat ik last
Het was moeilijk de vorm van de brochure te bepal-
had van zinsopbouw. Ik had de neiginng om te lange
den aangezien MailingCube niet echt een eigen huis-
zinnen te maken, zodat de lezer snel zou kunnen
stijl heeft. Daarom heb ik het paars eruit genomen
afhaken vanwege de lengte.
die in de applicatie terug te vinden is. Daarom heb ik er meerdere kleuren ingezet. Hiermee wilde ik de ééntonigheid van paars verbreken.
To live a creative life, we must lose our fear of being wrong. -Joseph Chilton Pearce-
23
verliep. Doordat hij naast me zat kon hij directe feedback toepassen. Gelukkig was alles goed en hoefde hij alleen de kleur te ziene die gebruikt zou worden om het zwart/
Rolgordijnstore.nl Webdesign
wit te breken Ik was dus verantwoordelijk voor het hele design van de website. Dit was erg leuk om te doen, want dat vergt wel wat professionaliteit. Niet alleen met het ontwerpen, maar ook met het communiceren met de klant. Ik heb geleerd dat ik af en toe zijn woorden moet herhalen om te laten zien dat ik het allemaal volg, als ik iets zegt wat hij niet bedoelt kan hij nog ingrijpen om miscommunicatie te voorkomen. Dit is essentieel voor het ontwerp. Het was erg fijn dat ik zo directe communicatie met de klant had, waarvan ik veel geleerd heb. Communiceren
Dit was de eerste website die ik moest vormgeven op mijn
was ook een leerdoel van mij en nu weet ik hoe het is
stage.
om een klant naast me te hebben en daarmee te com-
Bedrijf
zetten.
Het was een bedrijf dat zich bezig houdt met rolgordijnen
municeren om tot een goed en duidelijk resultaat neer te
en alles wat met raambekleding te maken heeft.
De technische kant van deze website werd in de handen
Wat de klant wil
Met het opzetten van de site had Justin me zo nu en dan
Hij wilde de site helemaal gerestyled hebben om het nog makkelijker te maken voor de klant. De klant wilde daarom ook rust in zijn site hebben omdat er zoveel verschillende producten zijn en men kan veel dingen selecteren voor het bestellen van een product. Ook zouden er verschillende webshops van raambekleding komen, verschillende categorieĂŤn genaamd houtenjaloezieen.nl en rolgordijnstore.nl. Er zouden na mate meer webshops komen. Daarom moest er bovenaan een optie moeten komen om te kunnen switchen tussen de webshops. Dat heb ik gedaan door tabs te gebruiken. Hierdoor kan je gemakkelijk switchenn tussen de webshops. Ook kwam de klant vaak langs om te kijken hoe het proces
24
van Justin geschoven, een Media en Technologie stagiair. nodig als het ging om het design. Er moesten af en toe wat items bijgevoegd of verandert worden. Ik heb met dit project goed kunnen laten zien dat ik zelfstandig kan werken en af en toe ook het eigen initiatief tot me nam. Ik kreeg er 8 uur voor om het te maken, deze deadline heb ik gehaald en daarmee heb ik goed gepland om alles af te kunnen krijgen. Hiermee kan ik verklaren dat mijn planning gelukt is en daarmee heb ik een een leerdoel behaald, namelijk een goede planning kunnen maken en daar profeit van zien.
Finitro
Productbewerking pen zodat de achtergrond transparant kan zijn. Ook moest ik met schaduwen spelen en ligt. Dit heb ik eenvoudig gedaan door het echte doosje voor me neer te zetten en zo kon ik zien hoe de schaduw en Finitro is een bedrijf dat zich bezig houd met pil-
de lichtinval was. In Photoshop heb ik geprobeerd
len. Ze bieden allerlei verschillende pillen aan voor
dit na te bootsen.
verschillende doelgroepen. Van kalmeringspillen tot
Daarna moest het etiket vanuit InDesign naar het
energiepillen tot multivitaminepillen voor 50+ en ga
photoshopbestand worden geplaatst. Ook deze
zo maar door.
moest helemaal bewerkt worden aangezien deze
Voor elk van dit soort pillen moest een productaf-
afbeelding plat is zonder effect. Deze effecten moest
beelding komen.
ik dus zelf aanbrengen om het zo realistisch mogelijk te maken.
Het begin uiteraard met eerst een foto van het
Het etiket moest een beetje glimmend effect krijgen.
product te maken. Deze werd gemaakt door Luc
Ik zelf vond dit erg moeilijk om te doen. Ik vond het
Moers die een kleine studio had gemaakt waar in
moeilijk om de juiste balans te kunnen vinden zonder
het product zich bevond zodat later het gemakkelijk
dat het de afbeelding in zijn geheel stoort. Ik heb
bewerkt kon worden en dat door middel van bepaal-
veel op internet moeten zoeken om te kijken of ze
de belichting het product goed tot zijn recht kwam.
tutorials hadden om dit effect zo goed mogelijk na te
Er waren drie verschillende soorten doosjes voor de
bootsen. Uiteindelijk na wat feedback van klant en
pillen. Een smalle, een brede kleine en een brede
Rob Wiek is dit goed gelukt.
groten. Hierbij hoorde dan ook verschillende maten etiketten bij. Deze etiketten kreeg ik in een InDesign-
Deze afbeeldingen van de producten worden uitein-
bestand toegestuurd van de klant.
delijk op de site geplaatst.
Eerst moest ik het doosje in Photoshop zelf mooi maken. Dit houdt in dat ik het netjes moet uitknip-
26
27
Backlinkbuild Webdesign
Bij dit ontwerp heb ik ook gebruikt gemaakt van grid en guides om een goed ritme in de tekst te krijgen. Dit heb ik geleerd bij Visual Design vorig jaar en heb ik nu kunnen toepassen. Backlinkbuild.nl is het zusje van backlinkbuild.com. Dit is het Amerikaanse bedrijf. Synocom beheert de Nederlandse versie van Backlinkbuild. Deze moest uiteraard vormgegeven worden, dit was mijn opdracht om dat te gaan doen. Er was al een design, maar deze was niet helemaal naar wens. Ik vond dat erg leuk. Vooral ook omdat ze vertrouwen in me hadden dat ik een professioneel ontwerp neer zou kunnen zetten. Er was al een opzet gemaakt door een mensen in Amerika. Deze moest ik overnemen en als format gebruiken voor mijn design. Ik heb geprobeerd het design wat levendiger te maken door middel van creativiteit. Op de homepage had ik dus 4 vakken gemaakt waar de bezoeker de belangrijkste items van backlinkbuilding kan zien. Hierbij heb ik een soort van dieptegang gemaakt om het wat speelser te maken. Op de homepage heb ik een 3D-effect gemaakt door het op een blad te maken met een shadow effect zodat het lijkt alsof het op de de pagina ligt.
28
Creativity is thinking up new things. Innovation is doing new things. - Theodore Levitt-
31
Webwinkel vakdagen Design
3D object met dit programma maak. Alle afmetingen van de stand heb ik gekregen van de standbouwer zelf door middel van tekeningen. De stand moest helemaal Magento branded zijn. Dit heb ik geprobeerd door veel oranje te gebruiken. Demobox Er moest ook een verrassingsbox komen. Vorig jaar
De Webwinkelvakdagen worden elk jaar in Jaar-
had Drecomm en Synocom een demobox gemaakt
beurs in Utrecht gehouden. Dit is een beurs waar
met daarin informatie over wat ze te bieden hadden
alle vragen en antwoorden elkaar ontmoeten op het
op het gebied van Magento. Dit jaar moest er iets
gebied van webshops. Synocom en Drecomm zijn
anders komen.
steeds meer bezig met Magento en willen dat op de
Er is nu ook gekozen voor een box. Het idee was
beurs laten zijn, maar ook willen ze laten zien dat
om alleen een kaartje in de box te stoppen. Hierop
ze nog meer kennis in huis hebben dan alleen Ma-
staan dan contactgegevens om contact op te ne-
gento.
men op het gebied van B2B en B2C. Ook in de box wilden we een ballon doen met helium, zodat als de
Ik heb als opdracht gekregen om vorm te geven aan
bezoeker van de stand het doosje openmaakt dat
de uiting van Magento binnen Drecomm Synocom.
er een ballon van Synocom of Drecomm eruit komt
Hiervoor moest echter nog veel gedaan worden.
zweven. Hierdoor wilde ik een wauw-effect geven zodat de aandacht er meteen is en ze dan in het
Stand
doosjes kijken waarin het kaartje met ‘Maak een
Allereerst moest er een stand komen deze moest
afspraak en dan geven wij u echt iets om mee naar
gedesignd worden. Ik heb de keuze gemaakt om dit
huis te nemen’ erin zit.
in Google Sketchup te maken. Met dit programma heb ik nooit gewerkt en wilde wel leren hoe ik een
32
33
Magento App iPad Design
maken voor degene die niet zo erg thuis zijn met deze termen. Daar is de applicatie ook voor bedoelt. ik kreeg de opdracht om voor de webwinkelvakdagen een design neer te zetten om simpel te kunnen laten zien wat Synocom en Drecomm doen met Magento. Ik kreeg van de afdeling design een flowchart en een beginnend design, zodat ik daarmee verder kon werken. Dankzij de flowchart kon ik meteen zien wat waar moest komen en hoeveel pagina’s de app bevatte. Bij een paar pagina’s liep ik vast omdat ik termen zag die alleen Developers begrijpen en met die termen omgaan. Dan heb ik het overClusteropbouw, Page Caching, Private Cloud Hosting. Hierbij heb ik onderzoek gedaan naar deze termen en ben tot de conclusie gekomen dat het allemaal in één ‘ cloud ’ zit. In de lucht dus. Het heeft dus een eigen ‘ cloud ’ waar alle data in zit. Daarom heb ik ook een wolk gemaakt met daarin de drie features waar het om gaat. Ik wilde het visueel zo duidelijk mogelijk
36
37
12eBooks Mobile Design
boeken die ook op de website zijn, want ze hebben dezelfde database. Als eerste zie je meteen een afbeelding van het boek waar het om gaat. Daaronder de prijs, deze heb ik expres 12eBooks is een online webwinkel die eBooks verkopen. Deze kun je downloaden voor eReaders, smartphones, tablets etc. Opdracht De opdracht van deze klant was dat er een mobiele versie moest komen van de website. Ze hadden nu alleen een website en wilde het ook mobiel hebben. Hiervoor moest dus een design komen. Ik kreeg deze taak toegewezen, wat ik erg leuk vond. Ik heb van Rob Wiek een voorbeeld gekregen om van dit voorbeeld de structuur over te nemen. Dus eigenlijk een soort visuele flowchart. Hierbij kwam als eerst natuurlijk een ‘homepage’ waar de gebruiker door verwezen wordt naar bepaalde richting zoals een top 5. Als de gebruiker bijvoorbeeld naar ‘Ebooks’ gaat krijgt hij een lijst te zien met allerlei
38
een andere kleur gegeven, zodat de gebruiker in één keer kan zien hoeveel het boek is. Daarnaast staat de schrijver er meteen vermeld. Ook kan men een waardering geven. Deze optie is echter later in het proces afgevallen. Dan kan de gebruiker op het paarse pijltje klikken om meer informatie over het boek te ontvangen. Hierna komt de gebruiker op een pagina met een uitvoerige beschrijving waar het boek over gaat. Men kan ook meteen bestellen door het in de winkelwagen te doen, ook kan de hoeveelheid worden ingevult. Dan komt men in de winkelwagen terecht waar het boek besteld kan worden. Ook kan hier een eventuele kortingscode worden ingevuld. Ook kan er contact worden opgenomen voor een eventuele opmerking. Ik heb geprobeerd om een goede balans te vinden in de kleuren omdat het neigt naar een radio538 stijl te gaan, met het paars en groen wat erin zit. Daarom heb ik ook onderin zwart
gebruikt. Het lastigste was het ontwerpen van de buttons bovenin. Hiervoor heb ik veel onderzocht en inspiratie op gedaan.* Uiteindelijk heb ik ervoor gekozen om er een beetje 3D-effect eraan te geven om een echte buttongevoel eraan te geven. Dat wil zeggen geneigd om erop te klikken omdat het er realistischer uitziet. Ik heb bij deze opdracht geleerd om goed naar details te kijken en hoe ik een mobiele versie van een website kan maken.
*Zie bronnenlijst
Goudsite Webdesign
moeten gebruiken. Ik heb wat foto’s opgezocht met goud en gekeken hoe goud er blinkend uitziet. Hierbij heb ik gespeeld met effecten in Photoshop en net zolang totdat ik het gewenste Deze opdracht heeft ondanks wat miscommunicatie toch wel wat leuks naar voren weten te brengen. Uiteindelijk heb ik zelf te veel gedaan
resultaat kreeg. Een leermoment hierbij was dat ik meer met een
dan wat de bedoeling was.
website kan doen. In dit geval was het randje
Het was de bedoeling dat ik de content in een
goud gevoel wil creëeren. Ook dit heeft te
afgesloten ruimte moest zetten. Ik vatte het op dat ik de hele interface opnieuw moest ontwerpen. Dit heb ik gedaan, met leuk resultaat. Ech-
wat ik een klein beetje laat omslaan en zo een maken met details waar ik meer op ben gaan letten. Dat komt ook doordat ik werk inspiratie op internet op doe. Dit helpt me goed op weg
ter was dit niet helemaal de bedoeling.
om tot een goed design te komen.
Bij dit ontwerp heb ik vooral gekeken wat ik
In de toekomst wil ik me nog wel meer focussen
met ‘Goud’ kon doen. Hoe ik dat het best kon weergeven met een kwaliteitsuitstraling. Hierbij dacht ik meteen aan de kleuren goud en zwart. Deze combinatie zie je namelijk ook veel terugkomen in gouden sieraden. Daarom heb ik ervoor gekozen om het menu donker te houden, maar in de linkerhoek wilde ik de gebruiker laten zien wat achter het donkere gedeelte zit. Goud heb ik hiervoor gekozen. Hiervoor heb ik mijn photoshopvaardigheden
44
op inspiratie en hoe ik dit goed moet aanpakken om vanuit inspiratie en schetsen om tot een mooi en professioneel ontwerp te komen.
45
Intern
Synocom/Drecomm
Bedrijfsuitje(s) Wij als stagiaires troffen het goed want meteen werd er een bedrijfsuitje gepland zoals elk jaar, namelijk karten. Uit het werk gingen we meteen
Serious Requist 2011 Ook Serious Requist ging niet aan onze neus voorbij. In het begin hadden we al een potje gemaakt, vanwege het losgeld wat we van elk weekend over hadden. Het begon als een grap. Kijken wie het meeste kleingeld over had, werd uiteindelijk een soort van sport. Toen kwam Serious Requist eraan en toen dacht ik: ‘We kunnen er misschien wat voor doen om een nummer aan te vragen’. Toen viel mijn blik op het geld wat we gespaart hadden, een medestagiair en ik, hier kunnen we wat mee doen. Toen hebben we het thuisfront rondgevraagd of ze nog een kleine bijdrage hadden. Dit werd een succes en als snel waren we fanatiek bezig, ook het kantoor ging er niet aan voorbij. Uiteindelijk hebben we een megabedraf van €370,- opgehaald en directeur van de lokatie uit Amersfoort heeft dit zelfs verdubbeld. Uiteraard moesten de namen van Synocom en Drecomm ook vermeld worden.
46
met z’n allen naar Delft toe om daar een snelheidslimiet zoveer mogelijk over te schreiden. Na wat gescheur en huldiging van de winnaars werd er binnen een barbeque gehouden. Het was erg leuk om zo je medestagiaires en collega’s te leren kennen Kerstdiner Ergens in december hebben we ook nog kerstdiner gehad, wederom in Delft vlakbij de oude kerk. Het was behoorlijk druk want alle lokaties van Drecomm; Amersfoort, Groningen en Rotterdam. Iedereen had ook aanhang meegenomen, dus het was extra druk.
HTML Editor Webdesign
kanten op. Je kunt het van kleur verwisselen, het donkerder of lichter maken, maar wel goed de actie van de gebruiker zichtbaar maken. Ik heb ervoor gekozen om het iets lichter te laten Deze opdracht is via een Developer gegaan. Justin moest een HTML Editor maken en vroeg aan mij of ik het kon ontwerpen. Dit heb ik
lijken zodat de gebruiker kan zien dat de button iets kan doen. Uiteraard moet je bij sommige buttons ook een derde ontwerp maken, omdat
gedaan.
de gebruikeren erop geklikt heeft en daardoor
Dit was een ontwerpopdracht om de interface
HTML iets vetgedrukt of schuingedrukt wild heb-
van een applicatie eigen te maken, met een eigen look en feel. Dit heb ik geprobeerd door het paars van Mailing Cube te gebruiken. Daarnaast moest er uiteraard buttons voor de HTMLEditor gemaakt worden. Om alles eigen te maken heb ik dat ook allemaal tot op de pixel gemaakt. Dit heb ik gedaan om te laten zien dat ook de interface van de editor er helemaal
geselecteerd is. Bijvoorbeeld als men in de ben klikt men op de button dat ervoor zorgt dat de tekst dikgedrukt of schuingedrukt zichtbaar is. Hiervoor heb ik wel kleur gebruikt, namelijk oranje. Dit is lekker duidelijk en zichtbaar. Ter inspiratie heb ik veel naar andere interfaces gekeken en een simpel voorbeeld hierbij is ook Word. Deze gebruikt namelijk ook soort
bij hoort en ook apart ontworpen is.
vergelijkbare buttons bovenin.
Het was er goed om dit te ontwerpen om mijn
Het was erg precisie werk want ik moest vaak
Photoshop skills op te krikken. Er moesten bij sommige buttons zelfs 3 aparte ontwerpen voor gemaakt worden. Een ontwerp om te laten zien dat je erop kan klikken, een ontwerp als je met de muis erover heen gaat. Dit kan allerlei
48
inzoomen tot aan de pixel toe. Doordat ik dit beeld elke keer voor me zag heb ik nu meer gevoel gekregen bij pixels. Daardoor heb ik bij een totaalplaatje een beeld van hoe elke pixel op zijn plaats zit. Detail is hierbij ook een belangrijk gegeven. Dit heb ik bij de Goudsite al
geleerd en erop gelet. Ik ben ook erg tevreden met het resultaat ervan.
Blog
jonathanderoos.blog.com ceerd heb erop gezet. Eigenlijk om zo al een beetje mensen op de hoogte te houden van waar ik mee bezig ben op mijn stage en wat ik in die tijd gemaakt heb. Vanaf de eerste dag heb ik alles bijgehouden op een blog. Deze heb ik meteen opgezet toen ik aan mijn stageperiode begon. Dit wilde ik doen om te voorkomen dat ik alles vergeet wat ik gedaan heb. Elke dag heb ik alles bijgehouden op het blog om zo mijn leermomenten terug te kunnen vinden en bij welke opdracht ik bepaalde leerpunten opgedaan heb. Dit vond ik erg handig voor mezelf om zo bij dit verslag alles weer terug te kunnen lezen. Natuurlijk waren er ook dagen dat ik niet veel anders gedaan heb dan de dag ervoor. Dat kwam dus meestal omdat ik dan dingen af moest hebben. Hierbij heb ik wel alle feedback genoteerd om zo daarvan te kunnen leren en te kijken wat mijn argumenten waren bij het ontwerp. Het is uiteraard belangrijk om te weten waarom ik een item ergens geplaatst heb, want overal is er een reden voor en dat wil ik graag kunnen terug zien. Daarvoor is een blog bijhouden dus erg belangrijk. Ook heb ik bijna alle visuals die ik geprodu-
50
Ik vond het ook belangrijk om nog steeds van een soort inspiratieboek bij te houden. Dit vind ik namelijk ook erg prettig bij het ontwerpen van bijvoorbeeld een website. Want bij bijvoorbeeld Rolgordijnstore.nl heb ik verschillende websites als inspiratiebron gebruikt zoals; www. wehkamp.nl, ww.v&d.nl, ww.we.nl. Ook ben ik verzot van fotografie, dit wilde ik tijdens mijn stage ook warmhouden. Daarom heb ik ook foto’s op mijn blog gezet. Foto’s die me erg aanspraken en wat ik mooi vind.
Leerdoelen AFTER Leerdoelen NU
komen alleen dit kan nog wel stukken beter. Het blijft nog wel een zwak van me. Gelukkig heb ik vooruitgang geboekt tijdens mijn stageperiode en dat was voor mij wel een leerdoel. Uiteindelijk kon ik geheel zelfstandig werken. Hiermee heb ik voor mij een soort van werkstijl voor mezelf gecreëert. Namelijk dat ik met meerdere dingen bezig ben. Ik kan namelijk niet gefocust op één ding blijven en door af te wisselen gaat dit stukken beter want dan hebben mijn hersenen ook nog een andere
Tijdens mijn stage heb ik mijn doelstelling om goed te kunnen inleven in de doelgroep goed weten te volbrengen. Ik heb mijn ontwerpen goed kunnen toepassen aan de wensen van de klant. Dan kijk ik vooral naar Rolgordijnstore waar de klant naast me zat om het allemaal door te nemen.
prikkel ontvangen. Dit is voor mij erg prettig werken. Als ik het even niet meer wist ging ik meestal aan mijn blog werken of aan een ander project zitten werken. Ook noteer ik dingen die ik gedaan heb of nog moet doen of in me opkomen zodat ik daar op terug kan komen zodat ik geen dingen hoef te vragen aan anderen, zo stoor ik anderen niet met mijn vragen en
Zelfstandig werken Het zelfstandig werken ging me goed af. In het begin ging ik wel vaak naar Rob toe maar dit werd wel steeds minder. Als ik over de hele periode kijk kan ik zeggen dat ik daar vooruit gang in heb geboekt. De structuur is er langzamerhand ook goed bijge-
52
is voor hun ook prettiger.
Communiceren Communiceren naar anderen gaat mij steeds beter af. Op stage heb ik daar constant op gelet en er elke keer bij stil gestaan wat ik communiceer of hoe
ik nu moet communiceren. Het meteen reageren was dan ook essentieel voor goede communicatie en geen miscommunicatie. Ook zo uitvoerig uitleggen wat de situatie is of wat de issue is van het onderwerp. Ik merkte daarmee goed hoe de boodschap
mappen doen is voornamelijk erg essentieel voor de efficiëntie van werken. Als bijvoorbeeld de designafdeling een ontwerp overneemt wil deze uiteraard alles goed kunnen terugvinden. Hier heb ik nog meer
overkwam.
op gelet dan eerst.
Ervaring programma’s
Plannen
Dankzij de lange stageperiode kon ik me goed focusen op de ontwerpprogramma’s van voornamelijk Adobe, maar ook heb ik Sketchup gebruikt voor het otnwerpen van de stands. Doordat elke opdracht een ontwerpopdracht was, kon ik veel ervaring opdoen met Photoshop, Indesign en Illustrator. Ik heb dus ook met al deze programma’s gewerkt. Illustrator gebruikte ik voornamelijk voor vectorontwerpen die uiteindelijk gedrukt moeten worden, bijvoorbeeld een opdruk van een t-shirt. De ontwerpen voor de verschillende devices heb ik voornamelijk ik in Photoshop gedaan. De brochure heb ik gedaan in InDesign, hiermee had ik nog niet zo vaak gewerkt. Ik was dan ook blij dat ik hier nog meer ervaring mee heb kunnen opdoen. Veel weetjes zijn er voorbij gekomen waar ik veel aan had. Ook was de structuur in bijvoorbeeld Photoshop erg belangrijk, zodat anderen alle ontwerpen goed konden terug vinden. Dus naamschikking en het logisch in
Tijdens mijn stageperiode heb ik goed gelet op het plannen van mijn taken, deze schreef ik voornamelijk op. Na elke volbrenging van een taak zette ik een vinkje ernaast zodat ik het overzicht bleef behouden en daardoor eventueel mijn planning op zou kunnen aanpassen. Initiatief nemen Ik heb geprobeerd om voldoende naar collega’s toe te stappen om te vragen of ik hun nog ergens mij van dienst kon zijn. Dit wilde ik doen om te laten zien hoe graag ik hiermee bezig ben. Hiermee wilde ik ook risico’s nemen en kijken wat hiermee het resultaat is. Dit wil ik nog steeds doen. Tot nu toe heb ik gezien dat ik risico’s kan nemen en dat het verantwoordelijk is voor de kwaliteit van het werk.
Commentaar
‘Jonathan is een hardwerkende en vooruitstrevend persoon. De opdrachten welke hij tot zich heeft gekregen heeft hij naar behoren opgeleverd. Er was weinig tot geen sturing nodig om de opdrachten tot een succes te brengen. We kunnen dan ook stellen dat hij zijn stage succesvol heeft afgerond en echt werd/wordt gezien als één van het team.’ -Pascal Brouwers-
54
55
Doing what you like is freedom. Liking what you do is happiness -Frank Tyger-
56
Hier heb ik nog meer werk die ik graag wil laten zien in mijn verslag, zodat het een nog totaler beeld laat zien met wat mijn werkzaamheden waren. Ook buiten stage heb ik aan projecten gezeten, maar wel dankzij mijn stage. Hier heb ik ook veel van geleerd.
Bijlage
57
Dankzij mijn stage heb ik mijn allereerste klant gekregen, waar ik buiten stage om aan de slag mee ben gegaan. Uiteindelijk heb ik een site online weten te krijgen en heb hier ook mijn Developerskills kunnen oefenen, wat ik ook graag wilde. Helaas heb ik op stage zelf niet aan Development iets kunnen doen.