IN PROGRESS STAGEVERSLAG - CHANTAL LINSSEN
IN PROGRESS SEPTEMBER - DECEMBER 2014
Stageverslag van: Chantal Linssen Studentnummer: 402231 Klas: 4va1
School: Grafisch Lyceum Utrecht Vondellaan 178 Utrecht Stagebegeleider: Henk Bijkerk
Stagebedrijf: Frismedia Goedestraat 37 Utrecht Praktijkbegeleider: Donald Harting
Voorwoord
4
Concept
6
Leerdoelen
8
leerdoel 1
10
leerdoel 2
18
leerdoel 3
22
Frismedia
28
Opdrachten
32
PAX
34
Podium Cadeaukaart
36
Theatergroep Playback
38
AT Osborne
40
Zelfreflectie
42
Begrippenlijst
44
Bronvermelding
45
Nawoord
46
3
4
Tijdens mijn tweede stageperiode ben ik gaan werken bij Frismedia. Een hele nieuwe uitdaging en totaal iets anders dan mijn eerste stage. Mijn eerste stage was bij het kledingbedrijf Only for Men, daarom wilde ik voor mijn tweede stage opzoek gaan naar een echt ontwerpbureau. Die heb je natuurlijk in veel vormen en maten. Ik heb bij een aantal verschillende bedrijven gesolliciteerd en zo ook bij Frismedia. Frismedia onderscheidt zich van deze bedrijven omdat het bedrijf gericht is op online media. Dit maakt dat ik het als een grote uitdaging zie om hier stage te lopen, want veel ervaring met online media heb ik nog niet. Bij Only for Men hield ik mij vooral bezig met drukwerk, nu dus vooral met de online wereld en daar komt veel bij kijken. Ik vind het dan ook heel spannend. Ik wil natuurlijk goed werk leveren maar vooral ook veel leren. Dat moet bij deze stage helemaal goed gaan komen! In dit stageverslag zul je meer te weten komen over mijn stageperiode hier, die loopt van september 2014 tot februari 2015. Ik zal eerst het concept van dit verslag toelichten, dan presenteer ik mijn leerdoelen. Verder vertel ik wat over Frismedia en licht ik een aantal opdrachten toe. Ik sluit af met mijn zelfreflectie en ervaring en eindig met een nawoord. Veel leesplezier,
5
Aan dit stageverslag zit een concept vast. Graag laat ik zien waar het concept ‘IN PROGRESS’ voor staat. Aan het begin van mijn stage ben ik gaan brainstormen over een concept. Ik wilde dat het concept zou aansluiten op mijzelf, maar ook op het bedrijf waar ik nu stage loop. Als uitgangspunt heb ik daarom het woord Fris genomen. Met dat woord ben ik gaan associeren. Met fris kun je veel kanten op, maar wat sluit nu echt aan op mij en Frismedia? Woorden als ‘helder’, ‘duidelijk’, ‘overzichtelijk’, ‘structuur’, ‘geordend’ en ‘planning’ spraken mij erg aan. Ik houd namelijk van overzicht en duidelijkheid. Hier bij frismedia is alles ook heel overzichtelijk en open. Iedere dag om half 10 hebben we een stand-up om te bespreken waar iedereen mee bezig is geweest de vorige dag en waar hij vandaag mee bezig gaat zijn.
Zo is iedereen op de hoogte. Daarnaast hangt hier een groot bord, het scrumbord, waar alle huidige opdrachten op verwerkt zijn. Er zijn vier fases te zien op het bord, TO DO, IN PROGRESS, VERIFY en DONE. Hiermee ziet iedereen wat er nog gedaan moet worden, wat er in behandeling is, wat bevestigd moet worden en tenslotte wat af is. De titel van mijn stageverslag is dan ook afgeleid van het bord. ‘IN PROGRESS’ staat o.a. voor in behandeling, voortgang, vooruitgang en ontwikkeling. Dit sluit weer aan op mij. Een mens is zijn hele leven natuurlijk in ontwikkeling, maar op dit moment is de focus op ontwikkeling natuurlijk erg groot. Ik probeer tijdens mijn stage te groeien in mijn vaardigheden op het gebied van ontwerpen, in het gebruik van de software maar zeker ook op communicatief vlak. De vormgeving van mijn verslag moet aansluiten op wat ik zojuist 6
heb verteld. Elementen die terug komen zijn bijvoorbeeld structuur en orde. De kleur groen is een frisse kleur. Ik wilde geen standaard groene kleur gebruiken zoals grasgroen, maar een variant die niet te hard of te fel is. Ik heb uiteindelijk voor mintgroen gekozen. Het font wat ik voor mijn tekst gebruik is KievitOT, deze komt uit de huisstijl van Frismedia en vind ik goed werken voor zowel web als print. Voor de koppen gebruik ik een speels font wat aansluit op de getekende letters op het scrumbord. Het formaat van dit verslag vind ik passend bij het concept omdat het een overzichtelijke en open indeling ondersteunt. Het is een landscape formaat wat maakt dat er geen ruimte is voor hele lange stukken tekst. Ik heb gekozen voor een driekoloms stramien wat de stukken tekst ook compact maakt. Ik zal mijn verslag ook online aanbieden op een speciale webpagina. Dit vind ik passend bij mijn stagebedrijf. (www.chantallinssen.nl/stage)
chic
planning
elegant
esthetisch
wolken structuur
smaakvol
stijlvol
lucht
overzichtelijk
levendig
zacht
jeugdig
duidelijk
glas
sterren
jong groente
mooi
smaak eten
blij
schoon
kleuren
spectrum
belletjes
relaxen bruisend
fruitig zon
ochtend
het weer
bubbels kippenvel
strand
opstaan
beleving
alcohol
genieten zee
dauw
ervaring bier
vakantie
golven
sfeer
brrrr drinken
duinen oceaan
7
gezelligheid
drupjes
koud
frisdrank
briesje
rust
bos
lampjes
kil bloei
stemming
groen
natuur
lente
aangenaam
gevoel
nat
koel
flora
prettig
water
groei
bellen blazen
druppels gemoedstoestand
licht
ontwikkeling
sop
douchen
helder
verfrissend
euforie
vrolijk
regen
zuiver
opgewekt
lekker
gelukkig
regenboog
vers
nieuw aantrekkelijk
snack
hemel
doorzichtig
open
verfijnd schoonheid
geordend
emotie turquoise
sporten beweging wandelen
blauw
zonsopkomst mentaal fit
gezond
fysiek
Ik heb voor deze stage leerdoelen opgesteld. Deze zijn gekoppeld aan beroepsvaardigheden waar ik in wil groeien en ook aan persoonlijke competenties. Tijdens deze stage wil ik onderzoek doen naar dingen op het gebied van vormgeving, maar ook de technische aspecten hiervan. Daarnaast vind ik het belangrijk dat ik mezelf uitdaag. Ik wil dus iets doen wat ik spannend vind of zelfs eng, om zo mijn grenzen te verleggen en te groeien in mijn sociale vaardigheden. Frismedia is denk ik hĂŠt bedrijf om mij hierin te begeleiden. De leerdoelen zijn in overleg met mijn praktijkbegeleider tot stand gekomen en samen hebben we gekeken of deze haalbaar zijn. Omdat het stageverslag al vrij snel af moest zijn, had ik mijn twijfels over
de haalbaarheid van de leerdoelen. Na een gesprek met mijn praktijkbegeleider ben ik er achter dat de focus vooral op het proces moet liggen, dit is namelijk ook erg leerzaam. Ik zal mijn best doen om zo goed mogelijk onderzoek te doen naar de vraagstukken die gekoppeld zijn aan mijn leerdoelen. Daarnaast wil ik dat mijn stageverslag duidelijk geschreven is en hoop ik dat mensen die geen verstand hebben van de onderwerpen die ik behandel het ook begrijpen. Ik heb daarom ook een begrippenlijst toegevoegd aan dit verslag ter verklaring van bepaalde vaktaal.
8
“ Hoe maak je een website zo
“ Hoe verloopt de communicatie
“ Webtypografie:
Als je een website ontwerpt zul je uiteraard met een aantal dingen rekening moeten houden. Een van die dingen is, hoe ontwerp je een website die op verschillende devices en schermen werkt? Dit kan o.a. door middel van Responsive Webdesign oftewel RWD. Maar wat is RWD en waar is het eigenlijk goed voor?
Dit leerdoel gaat vooral over communicatie, over hoe het contact verloopt tussen een (potentiële) klant en Frismedia, van begin tot eind dus van het tot stand komen van een opdracht tot het opleveren van het uiteindelijke product.
Dit leerdoel gaat over webtypografie. Wat is het verschil nou eigenlijk tussen fonts op een beeldscherm en fonts op papier? Lang niet alle fonts die je gebruikt voor een print kunnen gebruikt worden voor het web. Waarom niet? Wat maakt een font wel geschikt voor het web?
optimaal mogelijk voor verschillende devices? ”
met de klant gedurende het traject van een opdracht? ”
Zoals je ziet roept dit leerdoel veel vragen op, vragen die ik ga proberen te beantwoorden door middel van observatie en onderzoek. Daarnaast hoop ik zelf ook mee te mogen helpen met het ontwerpen van een responsive website.
Om dit leerdoel te realiseren wil ik een paar gesprekken met klanten bijwonen. Ik zal observeren hoe het gesprek verloopt en wat bijvoorbeeld de rol is van de ontwerper tijdens zo’n gesprek. Indien mogelijk zou ik zelf ook graag een keer participeren in een gesprek. Dit is iets wat ik niet goed durf en daarom lijkt het me juist goed om dit op stage uit te proberen.
Lees verder op pagina 10 >>
Lees verder op pagina 18 >> 9
Waar moet je als ontwerper rekening mee houden? ”
Naast het technische gedeelte komt er natuurlijk vormgeving bij typografie kijken. Wat zijn bijvoorbeeld de trends op dit gebied in 2014? Om dit leerdoel te realiseren zal ik onderzoek gaan doen naar webtypografie met behulp van internet en boeken over dit onderwerp. Daarnaast weet Frismedia hier ook veel vanaf. Lees verder op pagina 22 >>
“ Hoe maak je een website zo optimaal mogelijk voor verschillende devices? ”
Door de opkomst van steeds meer mobiele apparaten en grotere beeldschermen met verschillende resoluties is het niet meer mogelijk om een ontwerp met een standaard resolutie te maken. Door deze opkomst is er nieuwe stroming ontstaan die dit ‘probleem’ moest oplossen: Responsive Webdesign (RWD). RWD is bedacht door Ethan Marcotte in 2010. Het is inmiddels bijna niet meer weg te denken in de online wereld. RWD is een efficiënte en doeltreffende manier om een website toegankelijk te maken voor zowel tablets, smartphones, laptops als de computer. Websites die gebouwd worden volgens het principe van RWD passen zich aan het gebruikte formaat beeldscherm aan.
Voordelen Responsive Webdesign
• Je hoeft maar één keer een website te laten ontwikkelen die op alle apparaten goed weergegeven wordt in plaats van meerdere keren voor verschillende platforms. Makkelijk te onderhouden dus. • Met een responsive website kun je betere zoekresultaten behalen want er is maar één website en geen duplicate content, wat je wel hebt bij een aparte mobiele website. Google rankt een URL namelijk minder hoog wanneer er twee verschillende URL’s bestaan voor dezelfde pagina. • Met Responsive Webdesign kun je alle bezoekers dezelfde content bieden. Maar je kunt ook dingen weglaten wanneer nodig, zoals grote afbeeldingen op de mobiele website, omdat het anders misschien te veel en te druk wordt. 10
• Een responsive website is op alle mobiele platformen goed te bekijken. Maar ook op een desktopcomputer biedt een responsive website voordelen: De content van een website zal zich verplaatsen en vervormen wanneer de afmetingen van een webbrowser veranderen zodat deze er altijd goed uitziet. • Bij een non-responsive website die je bekijkt op je telefoon, zal er bijna altijd ingezoomd moeten worden. Je zult je telefoon wellicht kantelen en bent druk bezig met van links naar rechts te scrollen. Bij Responsive Webdesign wordt er juist gekeken naar het formaat scherm wat er op dat moment gebruikt wordt. De tekst wordt daarvoor geoptimaliseerd, zo is de tekst dus altijd leesbaar. • Met Responsive Webdesign ben je beter voorbereid op de komst van nieuwe mobiele apparaten. Het bestaande CSS-bestand zorgt
ervoor dat de site automatisch de juiste vorm krijgt. Werd er in het begin van Responsive Webdesign gekeken naar op welk device je aan het surfen was, zo wordt er nu alleen gekeken naar de afmetingen van het scherm. Dus als de iPhone 7 op de markt komt zal alles er gelijk goed uitzien. • De techniek is te combineren met een CMS. Dit betekent dat de artikelen en afbeeldingen van de website beheerd kunnen worden in een Content Management System. Er hoeft ook geen speciale software geïnstalleerd te worden om een responsive website te kunnen bekijken of beheren.
Voorbeeld Adaptive Webdesign
www.iens.nl is een responsive website waar je restaurants en eettentjes kunt vinden. Echter, als je de webbrowser schaalt zie je naast verandering in de plaatsing van de content ook dat er dingen vervangen en toegevoegd worden. Op het formaat van een mobiele telefoon verschijnen er ineens duidelijk de knoppen ‘bel’ en ‘kaart’, waardoor je direct het restaurant kunt bellen of de kaart plus routeplanner in beeld krijgt. De belfunctie werkt uiteraard alleen op een echte telefoon en niet in de browser op de computer. Aan deze toevoeging zie je dat er ook gebruik gemaakt is van AWD.
Adaptive Webdesign
Naast Responsive Webdesign speelt Adaptive Webdesign oftewel AWD ook een grote rol in de optimaliteit van een website. Het focust zich op de functionaliteit van een website en past zich aan het soort device aan. De combinatie van RWD en AWD zorgt dus eigenlijk voor een optimale ervaring. Responsive Webdesign focust zich op de resolutie en de schermgrootte (browser), Adaptive Webdesign focust zich op de gebruiker van een website. Ik wil niet al te diep in gaan op de verschillen tussen RWD en AWD maar vooral op wat voor toevoeging AWD is aan een website. AWD houdt zich bezig met bepaalde functies die tevoorschijn komen als iemand bijvoorbeeld zijn telefoon of tablet gebruikt. Hoe dat zich uit is afhankelijk van welk apparaat je gebruikt, maar bijvoorbeeld ook van de tijd en plaats waar iemand zich in bevindt. Ergonomie, touch mogelijkheden en locatievoorzieningen zijn onderdelen die gekoppeld zijn aan AWD.
11
Rijksmuseum website ontworpen door Fabrique www.fabrique.nl www.rijksmuseum.nl
Uitgangspunten
Een belangrijk punt voor je begint met ontwerpen van een website is het vaststellen van de doelgroep. Voor wie is de pagina eigenlijk bedoeld? Steeds meer mensen gebruiken hun tablet of smartphone om van internet gebruik te maken. Zo kan het dus zijn dat de website die je ontwerpt een tablet of telefoon als uitgangspunt kan nemen. Wanneer de tablet het meest aansluit bij de doelgroep begin je dus te ontwerpen vanuit het formaat van een tablet. Dit principe heet; tablet first. Daarnaast heb je ook mobile first en desktop first.
Tablet first
De website van het Rijksmuseum is een goed voorbeeld van een website die vanuit het tablet first principe ontworpen is. De pagina’s zijn duidelijk en wat simpel gelaten met duidelijke knoppen, zodat de site zelfs werkt op de kleinste schermen. De site oogt ook goed op mobiel en desktop. Een Responsive Webdesign heeft de mogelijkheid om content anders te plaatsen op de verschillende devices (zoals ik eerder heb beschreven bij de voordelen van Responsive Webdesign). Bij de website van het Rijksmuseum is dat dus haast niet nodig, het ontwerp voldoet op ieder apparaat zoals het origineel ontworpen is. Alleen de achtergerond afbeelding schaalt mee en de tekst wordt bijvoorbeeld maar in één kolom gezet bij de mobiele versie.
12
13
Redesign
Één van Frismedia’s grotere klanten is EkhartYoga. Frismedia heeft voor EkhartYoga een website ontworpen en gebouwd in 2011. Deze was toen nog niet responsive. De website is daardoor op een telefoon niet erg fijn om te bekijken en vooral niet in portrait mode (verticaal). De letters zijn dan namelijk veel te klein en dus nauwelijks leesbaar. Begin 2014 kreeg Frismedia de opdracht om voor www.ekhartyoga.com een redesign uit te voeren. Uit de gegevens van Google Analytics bleek dat de meerderheid van de gebruikers van de website deze bekeek op een tablet en er ook steeds meer mobiele gebruikers waren. Een goede reden om de website responsive te gaan maken en te optimaliseren voor alle devices.
Applicatie
In sommige gevallen kan een aparte applicatie voor een website een grote toevoeging hebben. De website van EkhartYoga responsive maken is een grote stap richting een betere gebruiksvriendelijkheid. Een van de vorige stagiaires, Evert van der Horst, heeft uitvoerig onderzoek gedaan naar wat een aparte applicatie zou kunnen toevoegen. Een app zou namelijk vele extra’s kunnen bieden. Zo zou een app veel persoonlijker zijn, je kunt er dingen mee bijhouden en bijvoorbeeld video’s mee opslaan en vervolgens offline bekijken. Dit zou zorgen voor het behoud van klanten. Tijdens de zomer is er namelijk een daling waar te nemen in het aantal members omdat ze hun abonnement (tijdelijk) stopzetten. Nu de nieuwe website bijna online staat wil EkhartYoga gaan investeren in een app.
14
EkhartYoga is een online yoga platform met meer dan 1000 video’s.
15
Conclusie:
Om een website ontwerp zo optimaal mogelijk te tonen op verschillende devices kun je gebruik maken van Responsive Webdesign. Door dit principe toe te passen zal het ontwerp er op elk apparaat goed uitzien. Door Adaptive Webdesign toe te passen zullen websites op bepaalde devices nog meer op bepaalde behoeften inspelen. Voordat men begint met ontwerpen kunnen er verschillende keuzes gemaakt worden omtrent de manier van ontwerpen. Zo kan een ontwerp met als uitgangspunt de tablet, ook heel verfrissend werken op de desktop en de telefoon en blijft het ontwerp heel minimaal. In sommige gevallen is het handig om naast de standaard responsive website ook een app aan te bieden die meer functies te bieden heeft dan de normale website.
16
Schets Responsive Webdesign
17
“ Hoe verloopt de communicatie met de klant gedurende het traject van een opdracht? ”
Als bedrijf heb je natuurlijk te maken met klanten, zij zorgen immers voor de opdrachten en dus het inkomen. Frismedia wil graag goed werk leveren, hiervoor is goede communicatie met de klant nodig. Maar hoe verloopt de communicatie tijdens het traject van een opdracht nou eigenlijk? Frismedia heeft verschillende opdrachtgevers. Sommigen zijn al jaren klant en anderen zijn nieuw. Ik ben erg benieuwd naar hoe het klantcontact verloopt. Frismedia heeft op een aantal manieren contact met de klant. Zo kan dat via de mail, de telefoon of middels een gesprek op locatie, bij de klant of bij Frismedia zelf. Het komt ook voor dat de klant toena-
dering zoekt op social media als Twitter en Facebook. Bij dit leerdoel wil ik me richten op het directe contact met de klant tijdens een gesprek aan tafel bij Frismedia. Dit omdat ik zo van dichtbij kan mee maken hoe dit werkt in een klein bedrijf. Ik heb een aantal gesprekken mogen bijwonen waardoor ik beter zicht heb op hoe bepaalde opdrachten tot stand komen en hoe de gesprekken tussen Frismedia en de klant verlopen. Er zijn verschillende redenen voor een gesprek tussen Frismedia en een klant. Vaak is het eerste gesprek met een nieuwe klant een kennismakingsgesprek. Dit gesprek kan gepaard gaan met een inventarisatie. Bij een inventarisatie vertelt de klant wat zijn wensen zijn en wordt er gekeken naar wat Frismedia voor de klant kan betekenen. In sommige gevallen weet de klant niet precies wat hij wil en zal de ontwerper proberen om de wensen van de 18
klant in kaart te brengen. Dit kan onder andere door met grafische voorbeelden te komen of door aan te geven wat er technisch allemaal mogelijk is. Als vervolgens de klant enthousiast is geworden en in zee wil gaan met Frismedia zal er een offerte gemaakt worden. Hierin staat de opdracht omschreven, wat Frismedia zal leveren en daarnaast wat dit zal gaan kosten. Meestal vindt er na zo’n offerte nog een kick-off meeting plaats, in deze meeting wordt de offerte nog even samen doorgenomen en wordt er gekeken of alles helder is voor beide partijen. Er is dan nog ruimte voor eventuele wijzigingen. Vervolgens gaat de opdracht van start. Het eerst volgende gesprek wat daarop volgt zal een presentatie zijn van het concept. De ontwerper heeft dan wat beelden uitgewerkt
en laat dit aan de klant zien. Hij onderbouwt de keuzes gemaakt in het concept waar nodig en de klant kan hier feedback op geven. Als het naar wens is gaat de ontwerper aan de slag met het functioneel ontwerp (FO). Deze wordt vervolgens ook gepresenteerd. Hier zal de ontwerper laten zien hoe bijvoorbeeld de website of app zal gaan werken. Dit is dus gericht op de technische kant en de vormgeving van dit ontwerp is dus niet grafisch. Vaak worden er dan ook alleen zwart, wit en grijstinten gebruikt om het functioneel ontwerp visueel te maken. In de volgende fase gaat de ontwerper aan de slag met het grafisch ontwerp (GO) en zal dan, als dit klaar is, presenteren hoe de vormgeving er uitziet. Als dit allemaal in orde is dan wordt het product gebouwd. In de tussentijd is het mogelijk dat de klant een soort update gesprek krijgt, dan laat Frismedia zien hoe het ervoor staat en of alles volgens schema loopt. Als het product af is en opgeleverd is/online staat, dan kan er nog een evaluatiegesprek plaatsvinden. Hierin kan de klant feedback geven, en laten weten of hij tevreden is met het product en met de samenwerking.
In gesprek met EkhartYoga
Één van de gesprekken die ik bijgewoond heb was een bespreking met EkhartYoga over een nieuwe app voor hun website. Omdat de nieuwe versie van de website nog niet online staat was dit gesprek een combinatie van een inventarisatiegesprek en een update gesprek over de website. Het gesprek begon
niet echt inleidend omdat er al in een vorig gesprek en via de mail werd gesproken over de mogelijkheden van een app. De klant begon daardoor eigenlijk gelijk met vragen over de eventuele app. De vragen werden beantwoord met voorbeelden waardoor de klant gelijk een beeld had. Het grote voordeel van deze app moet zijn dat klanten zonder internet ook hun yoga abonnement kunnen benutten en gewoon video’s kunnen bekijken. Maar EkhartYoga wil natuurlijk niet dat men alle video’s in de app gaat downloaden en vervolgens hun lidmaatschap beëindigt. Hiervoor moest dus een oplossing bedacht worden. Een van die oplossingen is om een maar een maximaal aantal video’s te kunnen downloaden. Een andere oplossing is om bij het gebruik van internet de app op de achtergrond te verversen en zo ‘weet’ de app of de gebruiker nog wel lid is. Omdat er wat nieuwe wensen aan het licht kwamen moet er een nieuwe begroting gemaakt worden. Maar EkhartYoga wekte wel de indruk dat ze de opdracht voor de app willen doorzetten. Nadat alles helder was voor zowel Frismedia als EkhartYoga werd het gesprek over de app beïndigd. Toen werd er nog gesproken over de nieuwe website die eind dit jaar online zal gaan. Voordat de nieuwe website online gaat zal hij getest worden door een aantal klanten van EkhartYoga. Door middel van hun feedback kan Frismedia zorgen voor een betere gebruiksvriendelijkheid. Daarnaast wordt de website intern ook gecheckt. Met behulp van een checklist die door EkhartYoga en hier bij Frismedia aangevuld kan worden, wordt de nieuwe website ook verbeterd. Ik vind dit een 19
goede manier van werken, zo zal het eindresultaat optimaal zijn. Het hele gesprek bestond uit vragen vanuit de klant en gezamenlijk oplossingen bedenken. Wat me opviel is dat beide ‘partijen’ goed naar elkaar luisterden. De klant stond open voor nieuwe ideeën, maar kwam zelf ook met suggesties. Hierdoor was er een goede dynamiek. Ook waren ze beide ongeveer evenveel aan het woord. Ik denk dat het gesprek goed verliep. Enerzijds zal dit komen omdat EkhartYoga al een aantal jaar een goede klant is van Frismedia en ze elkaar ook dagelijks spreken via de mail of telefoon. Het gesprek leek hierdoor meer een gesprek tussen vrienden. Daardoor was een soort inleiding van het gesprek ook niet echt nodig. Bij een meer formele klant was dat waarschijnlijk wel gebeurd. Anderzijds verliep het gesprek ook goed omdat iedereen redelijk op één lijn lag. Het was vrij duidelijk wat er verwacht wordt van Frismedia.
Nieuwe klant
Ik heb ook een aantal gesprekken bijgewoond met een nieuwe klant. Deze gesprekken liepen heel anders. Ditmaal ook voor een app, maar de opdracht is veel complexer. Ik zal wat dieper ingaan op het laatste gesprek tot nu toe met deze klant, dit was voor het FO. Het gesprek begon met een uitleg van Ronald (grafisch vormgever) over wat hij zou gaan presenteren. Dit keer wel een inleiding dus. Maar de klant checkte voor de zekerheid wat ze nu precies kon verwachten van de presentatie. Donald (grafisch vormgever en mijn praktijkbegeleider) legde dit vervolgens uit. Daarna begon Ronald met zijn presentatie van het FO. Aan de hand van zijn telefoon liet hij zien hoe de app ongeveer zal gaan werken. De beelden
waren ook nog op groot scherm te zien. Ronald praatte duidelijk en zijn verhaal was helder. Na een paar minuten onderbrak de klant hem met een vraag, deze werd beantwoord en Ronald pikte daarna makkelijk zijn verhaal weer op. Naarmate de presentatie van Ronald vorderde waren er steeds meer onderbrekingen vanuit de klant. Dit waren vragen of toevoegingen. Er werd op zich wel goed geluisterd naar elkaar. Er werd goed oogcontact gemaakt en de klant knikte vaak haar hoofd om te laten zien dat ze begreep wat haar verteld werd. De klant was erg kritisch en nadat ze Ronald voor de zoveelste keer onderbroken had zei ze hier zelf wat van, ze wilde Ronald laten uitpraten. Ronald’s presentatie werd af en toe aangevuld door Donald. Donald maakte veel gebruik van zijn handen tijdens het praten ter ondersteuning van zijn uitleg. Hij had een open houding. In het begin zat iedereen rechtop maar na verloop van tijd zakte iedereen een beetje onderuit en ging wat relaxter zitten. Halverwege het gesprek kwam Sander (programmeur) er ook bij zitten om de technische kant toe te lichten. Uiteindelijk werden er van beide kanten veel vragen gesteld. Het werd duidelijk dat de klant nog niet helemaal op een rijtje had hoe ze het precies wilde hebben. Daar speelde de rest op in door bepaalde opties uit te leggen. De klant luisterde naar alle ideeën maar had wel overal iets op aan te merken. Over het algemeen was de klant ook meer aan het woord. Haar telefoon ging af tijdens de bespreking, dit negeerde ze niet en ging even kijken. Na dat alle ideeën en suggesties waren uitgesproken kwam er als conclusie uit dat de klant eerst voor zichzelf moest gaan uitzoeken hoe ze het precies wilde hebben. Daarna kan er gekeken worden of dat allemaal mogelijk is en zal het
FO hierop worden aangepast. Frismedia kan goed handelen in het geval er onduidelijkheden zijn. Door actief mee te denken en met ideeën te komen proberen ze samen met de klant tot een oplossing te komen. Ik vind het goed dat Ronald na een aantal onderbrekingen toch goed de draad wist op te pikken. Dit is iets wat ik zelf denk ik wel moeilijk zou vinden.
Conclusie
De besprekingen die ik heb bijgewoond van EkhartYoga en de ‘nieuwe klant’ waren heel verschillend. Frismedia houdt rekening met het soort klant die ze voor zich hebben, is de klant nieuw of inmiddels bekend, is het een formele of informele klant, weet hij goed wat hij wil of eigenlijk (nog) niet zo? Daar wordt op ingespeeld. Bij EkhartYoga verliep het gesprek heel soepel, terwijl het bij de ‘nieuwe klant’ wat lastiger ging. Ik merk dat Frismedia er wel alles aan doet om het voor de klant zo duidelijk mogelijk te maken. Sommige klanten hebben meer sturing nodig. In dit geval waren beide gesprekken niet echt formeel, maar Frismedia heeft er wel formele klanten tussen zitten. Vaak zijn gesprekken met die klanten bij de klant zelf, dat ligt aan de voorkeur van de klant. Frismedia vindt een goede communicatie erg belangrijk en doet dan ook zijn uiterste best om de klant tevreden te houden. Zo wordt de klant van veel dingen op de hoogte gehouden en vinden er tijdens het traject van een opdracht dus veel gesprekken plaats. Ik vind het goed dat Frismedia op verschillende manieren rekening houdt met de klant maar er niet in doorslaat. De mensen die bij Frismedia werken 20
blijven wel bij zichzelf. Zo zal Donald niet ineens in een pak naar een afspraak gaan. Er zit dus een goede balans in het aanpassen en het bij jezelf blijven bij Frismedia. Deze manier van werken en communiceren spreekt mij zeker aan. Wat ik zelf anders zou doen is toch proberen bij ieder gesprek, ongeacht welke klant, te beginnen met een soort inleiding, zodat iedereen goed weet wat er komen gaat en kan verwachten van het gesprek. Ik wilde bij dit leerdoel ook participeren in een gesprek met de klant. Bij een paar gesprekken heb ik vragen gesteld of mijn mening gegeven. Als ik er de kans voor krijg wil ik aankomende maanden nog een stapje verder gaan en een iets actievere rol aannemen bij een klantgesprek.
Functioneel ontwerp detail - EkhartYoga
21
“ Webtypografie: Waar moet je als ontwerper rekening mee houden? ”
We hebben onbewust iedere dag te maken met typografie. Als je een krant leest, als je achter je computer zit of als je televisie kijkt, typografie is overal. Een ontwerper is juist heel bewust met typografie bezig. Bij het begrip typografie komt heel veel kijken, maar bij typografie op het web is dat net even iets meer dan bij drukwerk. Een paar jaar terug werden er nog standaard fonts gebruikt voor het web, er zat weinig variatie in. Fonts als Verdana, Helvetica, Tahoma en Arial waren veilig in het gebruik omdat ze duidelijk te lezen zijn en omdat iedereen wel in het bezit was van deze fonts op zijn computer. Men kon wel andere letter-
type’s gebruiken voor een website, maar of dat lettertype werd weergegeven was afhankelijk van de gebruiker, als deze het lettertype niet geïnstalleerd had op de computer dan werd deze ook niet getoond en werd er een ander (standaard) font voor in de plaats getoond. Met de komst van CSS2 kwam hier een einde aan. Sindsdien is het namelijk mogelijk om een font in te laden op een website. Maar dit kon nog wel eens in strijd zijn met bepaalde rechten van de ontwerper (van het font). Als reactie daarop kwam Google met Google Fonts en Adobe met Typekit. Deze websites (en andere soortgelijke websites) bieden een breed assortiment aan font-families aan die geschikt zijn voor het web en die je dus ook echt mag gebruiken, gratis of tegen betaling. In sommige gevallen worden er twee varianten aangeboden, één voor het web en één voor de desktop, oftewel print en drukwerk. Er zit namelijk een verschil tussen fonts voor het 22
web en fonts voor print.
Dots & pixels
Fonts voor print worden gebruikt om afgedrukt te worden, zo’n letter wordt door de printer dan opgebouwd uit puntjes. Hoe scherp zo’n letter uit de printer komt hangt af van de soort printer en hoeveel puntjes per centimeter hij kan afdrukken. Dit wordt aangegeven met DPI wat dots per inch betekend. Voor drukwerk is 300 DPI de minimum standaard en dat wil dus zeggen dat er 300 puntjes afgedrukt worden per inch (2.54 cm). De letters op je beeldscherm zijn niet opgebouwd uit puntjes maar uit pixels, kleine vierkantjes. Dit levert problemen op bij sommige fonts op je beeldscherm en maakt dat niet ieder font geschikt is voor het web. Fonts die er misschien heel mooi uitzien op papier, kunnen heel rafelig, onverzorgd en lelijk
uitzien op je beeldscherm. Dit komt omdat de minimale breedte van zo’n font altijd één pixel zal zijn. Daarom zullen de twee versies (web en desktop) van een aangeboden font-family op Google Fonts of Typekit een aantal kleine verschillen hebben zodat het font er ook goed uitziet op het web.
Readability
Er zijn bepaalde manieren om teksten en fonts er beter uit te laten zien op het web zodat het prettiger is om naar te kijken. Dit kan door met een aantal dingen rekening te houden en bepaalde technieken toe te passen. Waar men rekening mee moet houden is dat we te maken hebben met verschillende webbrowsers, verschillende besturingssystemen en verschillende beeldschermen/resoluties. Een font wordt namelijk nergens hetzelfde weergegeven. Je kunt een aantal problemen met fonts op het web uit de weg gaan door bepaalde eigenschappen aan te passen. Denk hierbij aan: • De fontstyle, afhankelijk van hoeveel stijlen er aangeboden worden bij een font-family. Bijvoorbeeld de regular, medium, italic en bold. Een haarfijn font zal bijvoorbeeld niet overeind blijven op het web aangezien het altijd minimaal als een pixel breed getoond zal worden. • De grootte. Ieder font heeft een minimale grootte waarbij het toonbaar is. Zo kan een dun font misschien wel als de tekst bijvoorbeeld niet kleiner dan 18 px is. Daarnaast worden op klein formaat serif lettertypes slechter weergegeven i.v.m. het omzetten van een schreef (het onderdeel van een lettertype
dat aan de “pootjes” van de letters uitsteekt) in een gebied kleiner dan een pixel. • De afstanden. Denk hierbij aan de afstanden tussen de letters in een woord en de witruimte tussen de regels. Dit heet kerning en tracking. Readability is erg belangrijk, de tekst moet zo vormgegeven zijn dat mensen graag de content bekijken en niet afgeschrikt worden.
1. 2. 3. aliased
anti-aliased
4. 5.
Anti-aliasing
Ook door middel van anti-aliasing (renderen) kan een letter er beter uitzien. De afbeelding of letter wordt dan in feite vager gemaakt. Maar je oog ziet weer schuine lijnen en ronde cirkels. Er ontstaat een illusie van een vloeiend lijnenverloop. Iedere webbrowser doet het renderen van fonts verschillend. Dat is best frustrerend voor een ontwerper. Door onderzoek te doen naar hoe het gekozen font er op de verschillende browsers en besturingssystemen uitziet kan de ontwerper van een soort middenweg uitgaan, die zo voordelig mogelijk is voor alle browsers. Door middel van Google Analytics te raadplegen kan er ook gekeken worden naar welke browser het meest gebruikt wordt voor juist die ene website, dan kan de typografie ook daar op aangepast worden. 23
6. 7. 8. 9. 10.
Bron: www.typewolf.com / www.google.com/fonts#
Trends 2014
Verder hebben we ook te maken met hedendaagse trends. Tegenwoordig zie je op veel websites grote body text, dit maakt dat er weer meer keuze is in het type font wat er gebruikt kan worden. Fancy letterypes die misschien niet als body text werken kunnen gebruikt worden voor koppen of citaten. Zo kan er echt uitgepakt worden waar dat nodig is. De trend van 2014 is echter gericht op less is more. In de vormgeving van websites wordt dit begrip breed toegepast. Zo zie je bijvoorbeeld grote blokken met beeldvullende foto’s, minimalistische illustraties zonder kleurverloopjes of opvallende schaduwen. Er wordt ook vaak maar één kleur in combinatie met zwart, wit en grijs gebruikt. Qua fonts mag het alle-maal lekker groot en wat je vaak ziet is witte tekst op mooie grote fotografie. Fonts worden ook steeds vaker met de hand aangepast en gebruikt als echte eyecatcher. De typografie wordt daarmee een kunstwerk op zich.
24
Conclusie
Het is wel duidelijk dat het een kunst is om een mooi ontwerp neer te zetten met webtypografie wanneer je met zoveel dingen rekening moet houden. Sommigen ontwerpers kiezen hierdoor nog steeds voor een veilig font voor de body text, schreefloos en basic en maar 12 px groot. Anderen gaan de uitdaging wel aan met web fonts van bijvoorbeeld Typekit en Google Fonts. Doordat beeldschermen steeds hogere resoluties krijgen zullen deze problemen met webtypografie steeds kleiner worden. Toch zullen er altijd mensen zijn met een minder modern beeldscherm, dit is iets waar men rekening mee zal moeten blijven houden.
25
26
27
Frismedia is een online media bedrijf opgericht door twee vrienden in 2000. Het bedrijf is gevestigd aan de Goedestraat 37 in Utrecht.
Werken bij Frismedia is leuk. Dat is misschien wat simpel omschreven, maar daar komt het op neer. Er hangt hier een leuke sfeer en het is eigenlijk altijd wel gezellig. Het is een informele werkplek maar er wordt hier door iedereen hard gewerkt en vooral ook hard samengewerkt.
Frismedia houdt zich bezig met nieuwe -en online media. Het team bestaat uit acht man die zich enerzijds bezig houden met webdesign en anderzijds met webontwikkeling. Ontwerp en techniek gaan hand in hand bij Frismedia.
Iedere donderdag is er de ‘frisborrel’ en wordt het laatste uurtje met een biertje aan ieders zijde doorgebracht. Bij mij staat er dan een wijntje want ik ben geen bierdrinker. Daarna gaan we vaak nog gezellig met z’n allen de kroeg in om nog een paar drankjes te doen. Naast de frisborrel worden er ook regelmatig concertjes gepakt met z’n allen. Hierdoor is Fris echt een soort vriendenclubje waar je je gauw op je gemak zult voelen.
Het bedrijf levert verschillende diensten en producten. Zo ontwerpt en ontwikkelt het team bijvoorbeeld mobiele apps, bedenken ze verrassende concepten, ontwerpen en bouwen ze responsive websites, bieden ze hun zelf ontwikkelde CMS aan en blazen ze oude bestaande website nieuw leven in.
28
Eigenaar en programmeur.
Eigenaar, grafisch vormgever en mijn praktijkbegeleider.
Grafisch vormgever. Zorgt er samen met Donald voor dat alle ontwerpen er frisjes uitzien. Project manager. Zorgt o.a. voor de communicatie tussen het team en de klanten. Front-end developer. Houdt zich bezig met html, css en templates bouwen. Web-developer. Houdt zich bezig met back-end, front-end en javascript.
29
Programmeur. Houdt zich bezig met javascript en PHP en bouwt graag apps. Programmeur. Houdt zich bezig met back- end en PHP
30
31
Ik heb tijdens mijn stage aan verschillende opdrachten mogen werken. De opdrachten zijn divers en ik heb er veel van kunnen leren. Op mijn eerste dag bij Frismedia kreeg ik gelijk een echte opdracht. Spannend, maar wel heel goed. Ik kwam er toen al snel achter dat ik goed begeleid werd. De mensen hier denken met je mee en laten je ook zien waar je op moet letten. Daarnaast werd ik gelijk gestuurd om het maximale uit mezelf te halen. Door bijvoorbeeld niet te snel tevreden te zijn met een paar ontwerpen, maar veel varianten te maken en daarbij telkens jezelf vragen te stellen zoals: “Wat gebeurt er als ik dit doe?”, “Wat levert het op als ik dat weglaat?”. Op deze manier kun je echt achter je ontwerp staan als het klaar is en aan de klant getoond mag worden. 32
33
Take-over ontwerpen www.paxvoorvrede.nl Een take-over is een tijdelijk beeld wat voor de homepage wordt getoond met vaak een actie die onder de aandacht gebracht moet worden. De take-over is weg te klikken door bijvoorbeeld een kruisje, daarna volgt de homepage. Daarnaast kan de take-over ook nog naar een andere pagina verwijzen. De take-over die ik ging ontwerpen moest men aansporen om te tekenen tegen kernwapens. Het moest aansluiten op de huisstijl van de website en er moest een aangeleverde illustratie in verwerkt worden. Door de tekst opvallend vorm te geven en een button te onwerpen hoopte ik mensen te activeren om te tekenen. Met het kruisje rechts bovenin ga je verder naar de homepage. Door een trans34
parante gradient te gebruiken als achtergrond is het duidelijk dat de homepage achter dit beeld zit. De aangeleverde illustratie heb ik een beetje aangepast door de zwarte lijn onderin verder door te trekken naar rechts, wat het totaalbeeld meer een geheel maakte. Ik heb tijdens deze opdracht geleerd om veel schetsen te maken en niet te snel tevreden te zijn met wat ik maak. Daarnaast heb ik veel typografie studies gemaakt en geprobeerd daarmee de boodschap zo duidelijk mogelijk naar voren te laten komen.
Typografie studies
35
Een e-mail van Podium Cadeaukaart re-stylen Via www.podiumcadeaukaart.nl kun je iemand verrassen met, jawel, een Podium cadeaukaart. De e-mail die je dan ontvangt moest vernieuwd worden omdat er nu meerdere kaarten met een ander uiterlijk worden aangeboden, de zogenaamde co-branded kaarten van verschillende podia. Het oude ontwerp ging niet samen met de nieuwe kaarten. Daarnaast kon de rest van de vormgeving ook wel een kritische blik gebruiken. Het leek mij een leuk effect als de kaart uit een enveloppe zou komen. Ik had een paar ontwerpjes gemaakt bij dit idee en heb vervolgens een animated gif gemaakt, een bewegend plaatje waardoor de kaart echt uit de enveloppe komt. Daarnaast heb ik de interlinie
aangepast zodat de tekst meer zou ademen en meer leesbaar zou zijn. Verder heb ik de verschillende onderdelen wat meer uit elkaar getrokken want alles stond erg dicht op elkaar. Om aan te geven dat de kaart geactiveerd moet worden heb ik nog een opvallende button toegevoegd. Na wat onderzoek gedaan te hebben bleek dat een klein deel van de mensen de gif in de e-mail niet zouden kunnen zien. Dit vond Podium Cadeaukaart toch niet zo handig. Er moest dus een nieuw ontwerp komen, een die door iedereen goed gezien kan worden. Als er toch gekozen zou worden voor een animated gif, dan moest er rekening gehouden worden met het eerste frame. De klanten die dan geen 36
gifjes kunnen zien in hun mailbox zouden het eerste frame zien. Omdat het verrassende effect van een kaart die uit een enveloppe komt dan zou komen te vervallen, heb ik de animated gif achterwege gelaten. In het uiteindelijke ontwerp ligt de kaart schuin op de enveloppe, hierdoor heeft het toch nog het effect van een verrassing. Ik vond het jammer dat ze uiteindelijk toch van de gif afzagen. Die 5% die het bewegende plaatje niet kan zien had ik zelf voor lief genomen, maar de klant is koning. Dat is zeker iets wat ik geleerd heb. Het gaat uiteindelijk niet om wat ik het mooiste of het beste vind en dat is jammer maar zo gaan die dingen!
37
Een menu-item toevoegen Theatergroep Playback wilde een nieuw menu-item toegevoegd hebben aan hun website, namelijk het item ‘TIPS’. Ik moest gaan bedenken hoe dit het beste gedaan kon worden. Hiervoor moest ik eerst de website bestuderen en kijken hoe de andere content is vormgegeven en wat de structuur is. Ik ben toen eerst wat schetsen gaan maken van een aantal mogelijkheden waarop dit gedaan kon worden. Die schetsen heb ik vervolgens digitaal gemaakt in Photoshop. Ik heb toen drie versies laten zien aan Donald en ben toen samen met hem gaan kijken welke het beste werkte. Er is vervolgens één versie naar de klant opgestuurd. Deze had het verzoek of het groene nieuws blokje nog toegevoegd kon worden, maar verder was het ontwerp in orde. 38
Dit was zeker een leerzame opdracht omdat ik hiervoor een website echt moest gaan analyseren. Ik ging daarna ook heel anders kijken naar andere websites. Bijvoorbeeld hoe daar de content geplaatst wordt en waarin de eenheid gevonden kan worden. Daarnaast ben ik handiger geworden in het digitaal maken van schetsen in Photoshop.
39
Homepage voorstel maken voor AT Osborne AT Osborne is een klant van Frismedia. De website die Frismedia rond 2008 heeft gemaakt is toe aan vernieuwing. Binnen AT Osborne zijn ze druk bezig met bedenken hoe zij de website graag willen hebben. Daarom vroeg Donald aan mij en Ronald of we zelf met voorstellen aan de slag konden gaan. Hiermee moesten wij laten zien hoe wij het zouden aanpakken. Ik had van te voren niet gedacht hoe ontzettend lastig het zou zijn om een bestaande website een nieuw jasje te geven. De structuur van deze website bleek heel ingewikkeld te zijn. Ik vond het zelf niet allemaal even logisch in elkaar steken en wilde kijken hoe dat beter kon. Daar heb ik heel veel tijd aan besteed. Ik probeerde de structuur uit te schetsen maar kwam er al gauw achter
dat het echt een zware klus was om zelf met een logische structuur te komen. Uiteindelijk heb ik dat gelaten voor wat het was en ben ik mij bezig gaan houden met hoe de vernieuwde homepage er volgens mij zou moeten uitzien. Hierbij moest ik nadenken over wat de aandacht zal trekken op een homepage en wat mensen zal activeren om verder te kijken. Daarbij wilde AT Osborne een wat meer menselijke uitstraling, dus dat is ook iets wat ik meenam in mijn voorstel. Daarnaast moest ik ook rekening houden met de huisstijl van AT Osborne. Hier en daar werd er een standaard web font gebruikt voor de website, dat is iets wat in deze tijd niet meer hoeft en dit font kon ik dus achterwege laten. Ik heb geprobeerd in te spelen op de webdesign trends van nu. 40
Deze opdracht was een goede oefening. Ik kwam er achter dat een ontwerper soms veel dieper moet gaan om tot een goed ontwerp te komen en daarbij bijvoorbeeld de structuur van een bestaande website ook een nieuwe vorm moet geven. Dit is wel iets waar je echt ervaring voor nodig hebt. Hoewel ik een poging heb gedaan kritisch naar die structuur te kijken, denk ik dat dit nog net iets te hoog gegrepen is voor mij. Ik vind het wel heel erg interessant en als deze opdracht nog van start zal gaan binnen mijn stageperiode, ga ik zeker actief meedoen met Donald en Ronald en observeren hoe zij te werk gaan.
Huidige homepage AT Osborne www.atosborne.nl
Detail homepage voorstel
41
Hoewel ik nog een paar maanden te gaan heb hier bij Frismedia ga ik voor dit verslag toch een zelfreflectie schrijven over de afgelopen paar maanden. Ik zal proberen duidelijk te maken wat ik van mijn eigen functioneren vind, wat ik goed vond gaan en minder goed etc. Ik ben hier 8 september 2014 begonnen als stagiaire grafische vormgeving. Frismedia heeft voor dat ik hier kwam alleen met stagiaires van het hbo gewerkt. Ik voelde me best wel ‘vereerd’ dat ze mij hebben aangenomen terwijl ik nu een mbo-opleiding doe. Donald vertelde mij dat ze vooral probeerde te kijken met wie ze te maken hebben, wat voor persoon ze voor zich hebben en dus niet alleen te
kijken naar het opleidingsniveau. Ik heb wel 1,5 jaar op de kunstacademie gestudeerd en dat is mooi meegenomen, maar ze zochten vooral naar iemand die bij het team zou passen, ook qua leeftijd. Mbo-ers zijn vaak wat jonger en onervaren. Hoewel ik heel blij ben dat ze voor mij gekozen hebben, was ik ook wel een beetje bang dat ik niet aan bepaalde verwachtingen zou voldoen. Ik vond het erg spannend om weer in een nieuwe omgeving terecht te komen. Ik heb dit ook aangegeven en iedereen had daar wel begrip voor. Maar na een week voelde ik me eigenlijk al ‘thuis’. Iedereen is namelijk heel vriendelijk waardoor ik me snel op mijn gemak voelde. De eerste dag ben ik gelijk aan het werk gezet, ik kreeg een echte opdracht. Hierdoor voelde ik wel wat druk maar besefte wel dat ik het als 42
stagiaire niet meteen perfect hoef te doen en dat ik hier tenslotte zit om te leren en ervaring op te doen. Tijdens deze opdracht merkte ik gelijk dat ik goede begeleiding kreeg. Er werd af en toe meegekeken en ook meegedacht. Ook werd ik gestuurd om een bepaalde manier naar dingen te kijken: Erg onderzoekend. Dit vond ik fijn werken en was me daardoor wat bewuster van bepaalde keuzes die ik maakte tijdens het ontwerpen. De eerste opdracht verliep goed en werd ook gelijk goedgekeurd door de klant. Dit gaf me wel wat meer zelfvertrouwen. In het begin van mijn stage kreeg ik de meeste opdrachten. Ik probeerde daar zo zelfstandig mogelijk aan te werken maar vroeg wel om hulp wanneer dat nodig was. De opdrachten varieerden best wel en de ene was wat groter dan de ander. Ik heb ook best wel wat kleine dingen tussendoor moeten doen, maar ook die
opdrachten zijn leerzaam. Uiteindelijk kreeg ik wat minder opdrachten omdat het wat rustiger was bij Frismedia. Op die momenten heb ik vooral veel onderzoek gedaan voor dit stageverslag en teksten getypt. Ik ben blij dat daar ruimte voor was want ik merkte al gauw dat het best veel was om dit na werktijd nog allemaal te doen. Daarnaast is het fijn dat ik ook bij mijn collega’s van stage terecht kon voor hulp bij mijn leerdoelen/stageverslag.
Mijn functioneren
Ik vind dat ik over het algemeen goed functioneer hier. Waar ik wel wat moeite mee heb is dat als ik wat minder goed in mijn vel zit, ik dit moeilijk kan verbergen hier op stage. Nu is het hier geen hele formele werkplek en word je daar dus ook niet op afgekeurd, maar ik hoop daar in de toekomst wel beter mee te kunnen dealen. Verder staat mijn onzekerheid me op het moment nog veel in de weg. Soms als ik op een dag alleen aan mijn stageverslag had gewerkt omdat er geen andere opdrachten waren, vond ik het erg moeilijk om dit tijdens de stand-up ‘s ochtends te vertellen. Iedereen vertelt dan namelijk waar hij mee bezig is geweest de vorige dag, als ik dan moest vertellen dat ik alleen aan het verslag had gewerkt, voelde ik me ergens schuldig en niet gemakkelijk omdat het iets voor mezelf was. Ik snap dat ik daar zelf verder weinig aan kan doen als er even geen opdrachten zijn voor mij, maar het voelde erg vervelend. Mijn onzekerheid is echt iets waar ik aan moet werken.
Plus -en minpunten
Mijn minpunten zijn dat ik best onzeker kan zijn, het soms lastig vind werk en privé gescheiden te houden en mijn werktempo zou wat omhoog kunnen. Mijn pluspunten zijn dat ik goed instructies op kan volgen, gemotiveerd ben en redelijk zelfstandig ben. Daarnaast werk ik ook netjes.
Wat ik heb geleerd
Ik heb veel geleerd hier tijdens de eerste maanden van deze stage. Zo weet ik nu veel meer van online media af maar ben ik bijvoorbeeld ook handiger geworden met Photoshop. Twee van mijn leerdoelen waren echt kleine onderzoeken en deze hebben mij veel inzicht gegeven op het gebied van online media. Dingen waar ik als toekomstig grafisch vormgever echt wat aan heb. Ik vind dit echt een 43
pluspunt. Het andere leerdoel heeft me geleerd hoe het contact met klanten kan gaan in een klein bedrijf. Goed om te weten, omdat ik later liever bij een klein bedrijf wil werken dan bij een groot bedrijf. Ik heb ondervonden dat alles veel persoonlijker en overzichtelijker is in een klein bedrijf en dat past beter bij mij dan een groot bedrijf waar dit veel minder is.
Begrippenlijst Adaptive Webdesign - is een aanvulling op Responsive Webdesign en staat voor het aanbieden van contextafhankelijke ervaringen waarbij de beleving van de gebruiker centraal staat. Animated gif - een afbeelding met meerdere lagen die na elkaar getoond worden en daarmee beweging suggereren. Anti-Aliasing - zijn technieken die worden toegepast in digitale beeldverwerking om een bepaald soort kartelvorming te verhelpen. Back-end - de back-end van een toepassing is het gedeelte dat niet zichtbaar is voor de gebruiker. Vaak heeft dit de vorm van een dashboard, waarin beheerders bijvoorbeeld wijzigingen kunnen doorvoeren en nieuwe data kunnen toevoegen. Het back-end gedeelte van een toepassing ondersteunt de front-end (dat wat de gebruiker daadwerkelijk ziet) en zorgt er meestal voor dat de front-end kan communiceren met andere programma’s en applicaties. CMS - staat voor Content Management System. Het is een toepassing die het mogelijk maakt om op eenvoudige wijze een internetsite te beheren. Met een CMS kan een gebruiker zelf, zonder hulp van een websitebouwer, teksten wijzigen, pagina’s toevoegen en/of afbeeldingen plaatsen op zijn site. CSS - staat voor Cascading Style Sheets. Met CSS kunnen HTML-documenten worden
opgemaakt. DPI - staat voor dots per inch. Dit is een waarde waarmee in relatie tot afdrukkwaliteit wordt aangegeven hoeveel beeldpunten op één inch worden afgedrukt. Hoe groter het aantal beeldpunten per inch, des te hoger is de kwaliteit van de afdruk. FO - staat voor functioneel ontwerp en is een uitwerking van de functionaliteiten van een website of een applicatie. Front-end - het omzetten van een grafisch ontwerp (plaatjes) naar HTML en CSS. GO - staat voor grafisch ontwerp en is een uitwerking van de visuele aspecten voor een website of applicatie. Google Chromecast - een mediastreamingapparaat waarmee je media op je telefoon of tablet op je tv kunt bekijken. HTML - de opmaaktaal die browsers gebruiken om informatie weer te geven. Javascript - een programmeertaal die veel gebruikt wordt om webpagina’s interactief te maken en om web programma’s mee te maken. Mobile/tablet/desktop first - uitgangspunt die stelt dat websites moeten worden ontwikkeld met allereerst de primaire gebruiker in gedachten. 44
PHP - staat voor Hypertext Preprocessor en is een scripttaal die bedoeld is om dynamische webpagina’s te creëren. Pixel - samenvoeging van ‘picture element’. Het kleinste element van een afbeelding op een beeldscherm. PPI - staat voor pixels per inch. Dit is een waarde waarmee in relatie tot de resolutie van het scherm wordt aangegeven hoeveel pixels op één inch kunnen worden weergegeven. Hoe groter het aantal pixels, des te scherper wordt het beeld. Readability - een term die staat voor de gebruiksvriendelijkheid van een te lezen tekst. Responsive Webdesign - het ontwerp van een responsive website schaalt mee met de afmetingen van een scherm of internetvenster. Template - is een sjabloon voor een stuk code. Met behulp van templates is het mogelijk een stuk broncode te genereren, zodat het voor meer object types bruikbaar is.
Bronnen Leerdoel 1: http://www.fabrique.nl/responsive-design/ http://www.tweepixels.nl/kennisbank/32responsive-webdesign#.VEeEU75YREU http://www.tweepixels.nl/blog/20webdesignen/81-responsive-webdesign-ofadaptive-webdesign#.VE9ugkuGbnk
Leerdoel 3: Lupton, E (Ed.) (2014) ‘’Type on screen’’. New York: Princeton Architectural Press
Fotografie: Chantal Linssen: pagina 6, 8, 18, 22, 26-27, 28, 30-31, 42
http://valkmedia.com/serif-of-sans-serif/
Iztok Klancar: pagina 29
http://www.creativepro.com/article/print-vsweb-fonts-what-s-the-difference
Robin Volbeda: pagina 5, 46
http://tweakers.net/reviews/3483/2/responsive-web-design-tweakers-rwd-onder-de-loepwat-is-responsive-design-precies.html
http://www.frankwatching.com/archive/2013/08/13/leesbare-lettertypes-beinvloed-het-gedrag-van-je-sitebezoekers-mettypografie/
http://www.tomorrowmobile.nl/de-3-voordelen-van-responsive-design/
http://hildemaassen.blogspot.nl/2013/12/textlettertype-fonts-aca.html
http://www.frankwatching.com/archive/2014/01/09/hoe-komt-een-goede-responsive-website-tot-stand/
http://www.weballey.nl/webdesign/antialiasing.html
http://www.frankwatching.com/archive/2013/12/05/wat-je-moet-weten-overresponsive-webdesign/#more-271687
http://www.html5rocks.com/en/tutorials/internals/antialiasing-101/ http://www.awwwards.com/
http://bradfrost.com/blog/post/the-manyfaces-of-adaptive-design/
http://codeboxr.com/blogs/latest-trends-inweb-typography-2014
http://nextlead.nl/nieuws/responsive-en-adaptive-webdesign.html
http://blog.typekit.com/2010/10/15/type-rendering-operating-systems/
van der Horst, E. W. (2013) “EkhartYoga, het ontwikkelen van een tablet applicatie” (Scriptie, Hogeschool Utrecht, Utrecht)
http://www.frankwatching.com/ archive/2013/11/26/10-webdesigntrendsvoor-2014/
45
We zijn beland bij het einde van mijn stageverslag. Ik ben hier over twee maanden pas klaar maar ik kan al met zekerheid zeggen dat dit een leuke en leerzame stage is! Mijn doel was om hier meer ervaring op te doen op het gebied van online media zodat ik als ontwerper van beide, web en print, verstand heb en voor beide ook ingezet kan worden. Ik denk dan ook dat ik in de nabije toekomst bij een grafisch bureau wil werken waar de opdrachten op zowel web en print gericht zijn. Ik weet nog niet of ik direct aan de slag zal gaan als grafisch vormgever als ik mijn dipoma in the pocket heb, omdat ik overweeg om nog verder te studeren. Zo lijkt mij de opleiding Crossmediale Communicatie (hbo Associate-degree) een goede toevoeging voor een grafisch vormgever. Ik ben er dus nog niet uit. Hoewel het me af en toe flink wat stress heeft opgeleverd heb ik wel met plezier aan dit verslag gewerkt. Daarnaast vond ik het leuk om naast alle online media, op deze manier toch ook nog bezig te kunnen zijn met print. 46
Ik wil Frismedia bedanken voor de leerzame en gezellige tijd hier! In het bijzonder wil ik bedanken: Donald, mijn praktijkbegeleider, voor de goede begeleiding. Hij liet me zelfstandig werken en hielp wanneer dat nodig was. Ronald voor alle tips, inspiratie, weetjes en handige websites. Rosanne voor haar hulp bij het opstellen van mijn leerdoelen samen met Donald, voor het checken van dit verslag en voor haar steun als ik het even moeilijk had. Daarnaast kon ik met iedere vraag bij haar terecht. Remo, Bart, Mitchel en Niki voor de check, check, dubbelcheck van o.a. de spelling en grammatica in mijn verslag. Ik ben jullie allen dankbaar! Bedankt voor het lezen,