2

4 106inleiding Leerdoelen TOEN het bedrijf

13 16 18projecten stageopdracht mailingcube tutorial

20 24 26mailingcube brochure Rolgordijnstore Finitro

3

18

26

28 32 36Backlinkbuild.nl Webwinkelvakdagen iPaddesign

38 4412Ebooks Mobile APP Goudsite.nl Intern46

48 49HTML editor BLOG

Leerdoelen NU 52

Commentaar 54

Bijlage 56

E. J. Jonathan de Roos

0828164

Communication & Multimedia Design

September 2011 - januari 2012

Synocom - Rotterdam

Bedrijfsbegeleider(s):

Pascal Brouwers - DeveloperRob Wiek - Eigenaar

Docentbegeleider:

Hogeschool RotterdamCommunication & Multimedia DesignJames(Jim) Boekbinder Docent Interaction Design

Wie ik ben

4

Voorwoord

argumenteren over waarom ik een bepaalde hande-

ling 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 in-

formatica doet. Hier heb ik veel aan gehad en heb

ook buiten mijn stage om met hem samen gewerkt

en daaruit ook nog leuke ontwerpen kunnen maken.

Daarbij hebben we samen ook een kleine project

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.

Doormiddel van dit verslag wil ik laten zien wat mij

bezigheden waren, tijdens een stageperiode van

ongeveer 17 weken. Ik probeer dit door Woord en

BEELD duidelijk te maken. Ook mijn leerdoelen zal ik

toelichten en laten zien waar ik dit tijdens mijn stage-

periode 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

bedrijf en hadden voorsprong, in mijn visie.

Gelukkig verliep alles goed en werd ik gewoon

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

duidelijkheid, zodat ik ook beter kon

5

Specifiek

Ik kan structureel werken zonder dat iemand mij me-

teen 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.

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

het probleem, problemen oplossen.

Dit vind ik een belangrijk punt binnen professionaliteit

Hier wil ik ook goed aan werken tijdens mijn stage-

periode. Als ik straks voor een echte opdrachtgever

moet werken dan wil ik niet de opdrachtgever vaak

lastig vallen omdat ik het zelf niet kan.

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

Zelfstandig werken

Leerdoel

Ik wil tijdens mijn stageperiode structureel en zelfstandig kunnen werken.

LeerdoelenAan het eind van mijn stage wil ik...

Communiceren

Zelf communiceer ik meer met beeld dan met woord.

Communictief ben ik niet sterk. Communicatie echter

is essentieel binnen een professioneel bedrijf. Er moe-

ten duidelijke afspraken gemaakt worden met zowel

collega als opdrachtgever. Ik wil niet alleen leren

communiceren in beeld, maar ook in woord. Waar-

schijnlijk zal ik gaan communiceren met klanten of

opdrachtgevers. Door goed te communiceren kunnen

de taken die ik krijg, na aanleiding van goede com-

municatie, 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 communi-

ceer en hoe ik dat doe en of de communicatie duideli-

jk 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’sHeel erg veel ervaring heb ik nog niet in Adobe

ontwerpprogramma’s zoals Indesign, Photoshop, Il-

lustrator. Ik wil me nog verder ontwikkelen door meer

dingen te leren en er vaak mee te werken en uitdag-

ingen 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 pro-

fessionals het aanpakken.

PlannenGoed mijn taken plannen zodat een deadline

gehaald kan worden en de kwaliteit van het werk

behouden wordt.

Initiatief nemenIk moet niet wachten totdat mijn opdrachtgever

naar me toestapt met een nieuwe opdracht of iets

dergelijks. In de praktijk wil ik uit mezelf naar die-

gene 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 waaromIk wil beargumenteren waarom ik sommige beslissin-

gen 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.

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

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 ver-

dieping, 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-

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 & Multime-

dia Design gestudeerd, waardoor hij wist wat hij van

me kon verwachten.

De lokatie van Synocom bevind zich aan de Walen-

burgerweg 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

Het bedrijfen mijn rol

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 zit-

ten. Deze had als opdracht om een sociaal media

platform te creeëren. Hij studeerde technische infor-

matica 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 mar-

keting moest verzorgen voor bijvoorbeeld backlink-

build wat ik later zelf heb moeten vormgeven.

12

Projecten

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 voorge-

noemde is voornamelijk de oorzaak.

StageopdrachtSynocom

14

15

Thank you for the opportunity

mentje voor mezelf want ik was hier nog niet van op de hoogte. CRM is de afkorting van Custom Relation-ship 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.

ScreenFlowVoor het maken van de tutorials heb ik het pro-gramma ScreenFlow voor de Mac gebruikt. Dit is een programma die het hele scherm opneemt. Elke be-weging 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 achter-grondgeluiden automatisch mee opgenomen werd. Uiteindelijk heb ik het in een aparte ruimte gedaan, maar ook hier hoorde je nog veel achtergrondgelu-iden. Uiteindelijk heb ik het thuis moeten doen.

PresentatieNadat ik het helemaal afgerond had moest ik het voor Drecomm en Synocom zelf presenteren, hier-mee 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.

Dit is het eerste project binnen mijn stageperiode waar ik mee ben begonnen.

In het kortMailingcube 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.

OpdrachtEr 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-

MailingcubeTutorials

16

Ik heb van elk ‘hoofdstuk’ een aparte afbeelding ge-

bruikt. Dit laat het onderdeeld zien uit de applicatie

wat erbij hoort.

In het begin had ik moeite met het inschatten van

hoe groot het lettertype moest, omdat ik geen beeld

had van hoe het gedrukt eruit kwam te zien. Daarom

hebben we eerst een testprint gedaan. Hieruit bleek

dus dat het font te klein was en dus groter moest.

Ook de plaatjes moesten groter zodat het geheel

meer opgevuld werd. Sommige formuleringen van

begrippen waar niet goed omschreven volgens Rob,

dit moest dus ook verandert worden. Ook moesten

de features die de applicatie bevatte gerangschikt

worden op hoe belangrijk het is.

Conclusie

Dankzij de vele feedback heb ik veel kunnen leren

hoe InDesign werkt en hoe ik een informatie bro-

chure vorm moet geven. Ook heb ik nu veel aan mijn

grammatica kunnen doen, want ik merkte dat ik last

had van zinsopbouw. Ik had de neiginng om te lange

zinnen te maken, zodat de lezer snel zou kunnen

afhaken vanwege de lengte.

Naast het maken van tutorials moest ik ook een bro-

chure ontwerpen.

Programma

Het prorgamma waar ik het in gemaakt heb is In-

Design. Met dit programma heb ik niet veel mee

gewerkt en daarom was dit een groot leermoment

voor mij. Ik kreeg allerlei tips van anderen, zodat ik

het drukklaar kon maken. Ik moest er voor zorgen

dat bij afbeeldingen of dergelijke een paar centim-

eter uitsteekt aan de snij-zijkanten. Ook heb ik goed

gebruikt gemaakt van grids en andere hulplijnen om

zo een goed en gelijk ritme te kunnen krijgen in de

tekst, die gelezen gaat worden.

De inhoud

Het was moeilijk de vorm van de brochure te bepal-

den aangezien MailingCube niet echt een eigen huis-

stijl heeft. Daarom heb ik het paars eruit genomen

die in de applicatie terug te vinden is. Daarom heb

ik er meerdere kleuren ingezet. Hiermee wilde ik de

ééntonigheid van paars verbreken.

MailingcubeBrochure

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/wit te brekenIk 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 was ook een leerdoel van mij en nu weet ik hoe het is om een klant naast me te hebben en daarmee te com-municeren om tot een goed en duidelijk resultaat neer te zetten.

De technische kant van deze website werd in de handen van Justin geschoven, een Media en Technologie stagiair. Met het opzetten van de site had Justin me zo nu en dan 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 zelf-standig 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.

Dit was de eerste website die ik moest vormgeven op mijn stage.

BedrijfHet was een bedrijf dat zich bezig houdt met rolgordijnen en alles wat met raambekleding te maken heeft.

Wat de klant wilHij 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 raambekled-ing komen, verschillende categorieën genaamd houtenja-loezieen.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

Rolgordijnstore.nlWebdesign

24

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

de lichtinval was. In Photoshop heb ik geprobeerd

dit na te bootsen.

Daarna moest het etiket vanuit InDesign naar het

photoshopbestand worden geplaatst. Ook deze

moest helemaal bewerkt worden aangezien deze

afbeelding plat is zonder effect. Deze effecten moest

ik dus zelf aanbrengen om het zo realistisch mogelijk

te maken.

Het etiket moest een beetje glimmend effect krijgen.

Ik zelf vond dit erg moeilijk om te doen. Ik vond het

moeilijk om de juiste balans te kunnen vinden zonder

dat het de afbeelding in zijn geheel stoort. Ik heb

veel op internet moeten zoeken om te kijken of ze

tutorials hadden om dit effect zo goed mogelijk na te

bootsen. Uiteindelijk na wat feedback van klant en

Rob Wiek is dit goed gelukt.

Deze afbeeldingen van de producten worden uitein-

delijk op de site geplaatst.

Finitro is een bedrijf dat zich bezig houd met pil-

len. Ze bieden allerlei verschillende pillen aan voor

verschillende doelgroepen. Van kalmeringspillen tot

energiepillen tot multivitaminepillen voor 50+ en ga

zo maar door.

Voor elk van dit soort pillen moest een productaf-

beelding komen.

Het begin uiteraard met eerst een foto van het

product te maken. Deze werd gemaakt door Luc

Moers die een kleine studio had gemaakt waar in

het product zich bevond zodat later het gemakkelijk

bewerkt kon worden en dat door middel van bepaal-

de belichting het product goed tot zijn recht kwam.

Er waren drie verschillende soorten doosjes voor de

pillen. Een smalle, een brede kleine en een brede

groten. Hierbij hoorde dan ook verschillende maten

etiketten bij. Deze etiketten kreeg ik in een InDesign-

bestand toegestuurd van de klant.

Eerst moest ik het doosje in Photoshop zelf mooi

maken. Dit houdt in dat ik het netjes moet uitknip-

FinitroProductbewerking

26

27

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 op-

dracht 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 mak-

en 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.

BacklinkbuildWebdesign

28

31

Creativity is thinking up new things.

Innovation is doing new things.

- Theodore Levitt-

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 ge-

probeerd door veel oranje te gebruiken.

Demobox

Er moest ook een verrassingsbox komen. Vorig jaar

had Drecomm en Synocom een demobox gemaakt

met daarin informatie over wat ze te bieden hadden

op het gebied van Magento. Dit jaar moest er iets

anders komen.

Er is nu ook gekozen voor een box. Het idee was

om alleen een kaartje in de box te stoppen. Hierop

staan dan contactgegevens om contact op te ne-

men op het gebied van B2B en B2C. Ook in de box

wilden we een ballon doen met helium, zodat als de

bezoeker van de stand het doosje openmaakt dat

er een ballon van Synocom of Drecomm eruit komt

zweven. Hierdoor wilde ik een wauw-effect geven

zodat de aandacht er meteen is en ze dan in het

doosjes kijken waarin het kaartje met ‘Maak een

afspraak en dan geven wij u echt iets om mee naar

huis te nemen’ erin zit.

De Webwinkelvakdagen worden elk jaar in Jaar-

beurs in Utrecht gehouden. Dit is een beurs waar

alle vragen en antwoorden elkaar ontmoeten op het

gebied van webshops. Synocom en Drecomm zijn

steeds meer bezig met Magento en willen dat op de

beurs laten zijn, maar ook willen ze laten zien dat

ze nog meer kennis in huis hebben dan alleen Ma-

gento.

Ik heb als opdracht gekregen om vorm te geven aan

de uiting van Magento binnen Drecomm Synocom.

Hiervoor moest echter nog veel gedaan worden.

Stand

Allereerst moest er een stand komen deze moest

gedesignd worden. Ik heb de keuze gemaakt om dit

in Google Sketchup te maken. Met dit programma

heb ik nooit gewerkt en wilde wel leren hoe ik een

WebwinkelvakdagenDesign

32

33

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 webwinkel-vakdagen 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 ter-men zag die alleen Developers begrijpen en met die termen omgaan. Dan heb ik het over-Clusteropbouw, 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 ge-maakt met daarin de drie features waar het om gaat. Ik wilde het visueel zo duidelijk mogelijk

Magento AppiPad Design

36

37

boeken die ook op de website zijn, want ze hebben dezelfde database. Als eerste zie je me-teen een afbeelding van het boek waar het om gaat. Daaronder de prijs, deze heb ik expres een andere kleur gegeven, zodat de gebruiker in één keer kan zien hoeveel het boek is. Daar-naast 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 hoeveel-heid 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

12eBooks is een online webwinkel die eBooks verkopen. Deze kun je downloaden voor eRead-ers, smartphones, tablets etc.

OpdrachtDe 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 ne-men. Dus eigenlijk een soort visuele flowchart.

Hierbij kwam als eerst natuurlijk een ‘home-page’ 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

12eBooksMobile Design

38

gebruikt.

Het lastigste was het ontwerpen van de buttons bovenin. Hiervoor heb ik veel onderzocht en inspiratie op gedaan.* Uiteindelijk heb ik er-voor gekozen om er een beetje 3D-effect eraan te geven om een echte buttongevoel eraan te geven. Dat wil zeggen geneigd om erop te klik-ken 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

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 resultaat kreeg.

Een leermoment hierbij was dat ik meer met een website kan doen. In dit geval was het randje wat ik een klein beetje laat omslaan en zo een goud gevoel wil creëeren. Ook dit heeft te 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 om tot een goed design te komen.

In de toekomst wil ik me nog wel meer focussen op inspiratie en hoe ik dit goed moet aanpak-ken om vanuit inspiratie en schetsen om tot een mooi en professioneel ontwerp te komen.

Deze opdracht heeft ondanks wat miscommu-nicatie toch wel wat leuks naar voren weten te brengen. Uiteindelijk heb ik zelf te veel gedaan dan wat de bedoeling was.

Het was de bedoeling dat ik de content in een afgesloten ruimte moest zetten. Ik vatte het op dat ik de hele interface opnieuw moest ontwer-pen. Dit heb ik gedaan, met leuk resultaat. Ech-ter was dit niet helemaal de bedoeling.

Bij dit ontwerp heb ik vooral gekeken wat ik 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 terug-komen 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 donk-ere gedeelte zit. Goud heb ik hiervoor gekozen. Hiervoor heb ik mijn photoshopvaardigheden

GoudsiteWebdesign

44

45

Serious Requist 2011Ook 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 Se-rious Requist eraan en toen dacht ik: ‘We kun-nen 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 kan-toor ging er niet aan voorbij. Uiteindelijk heb-ben we een megabedraf van €370,- opgehaald en directeur van de lokatie uit Amersfoort heeft dit zelfs verdubbeld. Uiteraard moesten de na-men van Synocom en Drecomm ook vermeld worden.

InternSynocom/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 met z’n allen naar Delft toe om daar een snel-heidslimiet 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 col-lega’s te leren kennen

KerstdinerErgens in december hebben we ook nog kerst-diner gehad, wederom in Delft vlakbij de oude kerk. Het was behoorlijk druk want alle lokaties van Drecomm; Amersfoort, Groningen en Rotter-dam. Iedereen had ook aanhang meegenomen, dus het was extra druk.

46

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 lijken zodat de gebruiker kan zien dat de button iets kan doen. Uiteraard moet je bij sommige buttons ook een derde ontwerp maken, omdat de gebruikeren erop geklikt heeft en daardoor geselecteerd is. Bijvoorbeeld als men in de HTML iets vetgedrukt of schuingedrukt wild heb-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 vergelijkbare buttons bovenin.

Het was erg precisie werk want ik moest vaak 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 be-langrijk gegeven. Dit heb ik bij de Goudsite al

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 gedaan.

Dit was een ontwerpopdracht om de interface van een applicatie eigen te maken, met een eigen look en feel. Dit heb ik geprobeerd door het paars van Mailing Cube te gebruiken. Daar-naast moest er uiteraard buttons voor de HTML-Editor 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 bij hoort en ook apart ontworpen is.

Het was er goed om dit te ontwerpen om mijn 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

HTML EditorWebdesign

48

geleerd en erop gelet. Ik ben ook erg tevre-den met het resultaat ervan.

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. 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 bijvoor-beeld 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.

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 bijge-houden 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-

Blogjonathanderoos.blog.com

50

Leerdoelen AFTER

52

komen alleen dit kan nog wel stukken beter. Het blijft

nog wel een zwak van me. Gelukkig heb ik vooruit-

gang geboekt tijdens mijn stageperiode en dat was

voor mij wel een leerdoel.

Uiteindelijk kon ik geheel zelfstandig werken. Hier-

mee heb ik voor mij een soort van werkstijl voor mez-

elf 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

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

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

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.

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-

LeerdoelenNU

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 onder-

werp. Ik merkte daarmee goed hoe de boodschap

overkwam.

Ervaring programma’s

Dankzij de lange stageperiode kon ik me goed fo-

cusen 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 op-

doen met Photoshop, Indesign en Illustrator. Ik heb

dus ook met al deze programma’s gewerkt. Illustra-

tor 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 bel-

angrijk, zodat anderen alle ontwerpen goed konden

terug vinden. Dus naamschikking en het logisch in

mappen doen is voornamelijk erg essentieel voor de

efficiëntie van werken. Als bijvoorbeeld de desig-

nafdeling een ontwerp overneemt wil deze uiteraard

alles goed kunnen terugvinden. Hier heb ik nog meer

op gelet dan eerst.

Plannen

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 re-

sultaat is. Dit wil ik nog steeds doen. Tot nu toe heb

ik gezien dat ik risico’s kan nemen en dat het verant-

woordelijk is voor de kwaliteit van het werk.

‘Jonathan is een hardwerkende en vooruitstrevend persoon. De op-drachten 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-

Commentaar

54

55

56

Doing what you like is freedom.Liking what you do is happiness

-Frank Tyger-

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 werkzaam-heden waren. Ook buiten stage heb ik aanprojecten 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.