STAGEVERSLAG
daisy van de laar / fonq / 2015-2016
Dit is mijn stageve van het Sint Lucas. D eigentijdse webwar periode was van 26 au
In dit stageverslag lees werkzaamheden waren, POP en wat er van ter over het thema da
voorwoord S
s je wat over het bedrijf, wat mijn , hoeveel ik gewerkt heb aan mijn recht is gekomen. Daarnaast ook at ik heb gekozen en onderzocht.
F
|
erslag van de eerste stageperiode Deze stage heb ik gelopen bij het renhuis fonQ in Utrecht. De stage ugustus 2015 tot 21 januari 2016.
inhoudsopgave 06 beschrijving van het bedrijf 08 plaats binnen het bedrijf 10 pop/leerdoelen 12 werkzaamheden 20 thema 26 nawoord
BESCHRIJVING VAN HET BEDRIJF
FonQ is een webwarenhuis met veel verschillende merkproducten. Van woon tot tuin, bed, bad en slaapkamer producten, ze hebben het allemaal en meer. Ze zijn begonnen in 2003 en groeien snel. Inmiddels zijn er meer dan 40.000 producten in het assortiment en verkopen nu ook in Frankrijk, België en Duitsland. FonQ is gevestigd in Utrecht, Nederland. Er zijn twee locaties, het kantoor, magazijn en de showroom zijn op de Kobaltweg en er is nog een extra magazijn op de Sophialaan. Op het kantoor zijn verschillende afdelingen. Advertising & online acquisition, communicatie & public relations, analytics & web development, zakelijk, internationaal en visual design & creatives. Omdat fonQ een warenhuis is hebben ze de producten verdeeld in groepen. Voor elke groep is er een team, deze worden clusters genoemd. Er zijn tien clusters: GARDEN / OUTDOOR DEVICES & TOOLS / DESIGN BED & BATH / LIVING BABY & KIDS LIFESTYLE ACCESSOIRES & GADGETS / SDA COOKING & HOUSEHOLD / LIFESTYLE DEVICES Mijn stage hoort bij visual design & creatives, also known as ‘plaatjesmakers’. We werken we met een programma dat Basecamp heet. Hierin kan iemand een pagina aanmaken met daarin de opdracht uitgelegd en communiceren voor als er vragen of problemen zijn. Bij fonQ hoeven we als ontwerpers alleen maar te richten op het ontwerpen van eigen huisstijl en producten. De meeste aandacht wordt besteed aan de website, omdat dat het visitekaartje is van fonQ en waar alles natuurlijk om draait als webwarenhuis. Daarnaast worden er nieuwsbrieven, een magazine, eigen beeldmateriaal voor op de website en meer dingen voor de huisstijl ontworpen. FonQ heeft 7 kernwaarden: MAAKT VERWACHTINGEN WAAR IS ER SPECIAAL VOOR KLANTEN HEEFT PASSIE VOOR PRODUCTEN DAT WERKT PRETTIG IS ALTIJD OPEN IS VOORUITSTREVEND EN AMBITIEUS ONTWIKKEL MET FONQ MEE
7
PLAATS BINNEN HET BEDRIJF Als designer wilde ik altijd al bij een magazine werken. Dat vind ik zo interessant omdat daar alles bij komt kijken op het vlak van design; lettertypes, tekst, vormgeving, layouts, beeld. Ik had daarom ook bij veel magazines gesolliciteerd, helaas waren de stageplekken bij de meeste al weggegeven. Een bedrijf dat zich focust op alleen de ontwerpen van zichzelf en niet ontwerpt voor andere klanten is iets wat voor mij een prioriteit was. Dit vind ik veel leuker en interessanter. Ik kwam uit bij fonQ omdat ik de laatste tijd ook erg geĂŻnteresseerd ben in interieur ĂŠn ze hebben een magazine. Er waren twee stage keuzes die te maken hadden met design, grafisch vormgever en DTP-er. Ik koos voor de laatste omdat ik bij grafisch vormgever zag staan dat je moet pitchen. Voor mijn eerste stage wilde ik eerst meemaken hoe het is in een bedrijf en me op mijn plek voelen voordat ik meteen ging pitchen, iets wat niet mijn leukste bezigheid is. Achteraf heb ik daar wel spijt van, omdat ik weet dat ik toch wel meer kan dan alleen het DTP gedeelte. Dit neem ik zeker mee in de keuze van mijn volgende stage. Naast die keuze heb ik totaal geen spijt als het gaat om de keuze voor fonQ.
Bij fonQ werken we in een team dat we visual design & creatives noemen. Er zijn in totaal 7 designers, waaronder twee stagiaires, een artdirector en iemand voor de fotografie. Het is een jong en enthousiast team waardoor ik me snel geaccepteerd en thuis voelde. De opdrachten voor DTP komen binnen via de clusters, hieraan werk je bijna altijd alleen, dit vind ik fijn omdat ik dan op mijn eigen tempo aan de opdracht kan werken. Je werkt misschien wel zelfstandig maar toch heb je altijd contact met de andere designers. De ontwerpen worden vaak gecheckt om te kijken of het goed genoeg is voor de website. Ook kan je altijd hulp vragen als je iets niet weet of snapt, ze zijn heel erg behulpzaam en maken meteen tijd voor je. Je hebt ook contact met de clusters, als de opdracht goed/verkeerd is of moet worden aangepast laten zij je dit weten zodat je het kan veranderen. Verder is er een leuke en gezellige sfeer en valt er altijd wel wat te lachen.
8
explorers
POP/ LEERDOELEN Mijn eerste leerdoel van de drie voor deze stage was concepten bedenken. Hier ben ik niet zo goed in, vaak begin ik gewoon aan het ontwerpen en probeer ik dingen uit totdat ik er tevreden mee ben. Een concept hebben is belangrijk daarom leek het me een goed leerdoel. Het tweede leerdoel was mijn software vaardigheden uitbereiden. Kennis van de adobe programma’s is altijd mooi meegenomen. Het derde leerdoel was persoonlijk ontwikkelen. Ik ben rustig en terughoudend van mezelf en ik wilde hiervan een beetje loskomen en meer van mezelf laten zien.
WAT IS ER VAN > TERECHT GEKOMEN
10
SOFTWARE VAARDIG Ik vind het leuk om met heb ik voornamelijk allee ik gekozen heb voor de dit programma, maar to afbeeldingen uit te snijd zich was deze wel goed zoals de pentool, gebru Ook actions gebruikte ik goed hoe het werkte. H het sneller werkt, daard gaan gebruiken. Verder ontdekt waar door ik sn ik, als ik tijd had, Illustra erg leuk en heb vooral d
GHEDEN UITBREIDEN t het Adobe pakket te werken, hier en met Photoshop gewerkt omdat e DTP stage. Ik wist al heel wat van och heb ik nog veel bijgeleerd. Voor den gebruikte ik altijd dezelfde tool, op d maar nu ik ook andere heb gebruikt, uik ik bijna altijd deze. k soms, maar ik snapte meestal niet Hier gebruiken ze het veel omdat door ben ik het nu zelf ook vaker heb ik nog allemaal handige trucjes neller en beter kan werken. Zelf heb ator proberen te oefenen. Dit vond ik de basis geleerd.
PERSOONLIJK ONTWIKKELEN Persoonlijk ontwikkelen is natuurlijk goed, alleen zag ik er wel een beetje tegenop. Niet zozeer als designer maar in het sociale gedeelte. Van mezelf ben ik vaak stil en luister ik liever dan dat ik praat en iets vertel, vooral in grotere groepen. Ik ben al sterk gegroeid hierin door mijn werk in het ziekenhuis. Hoewel ik dacht dat het moeilijk zou worden om in een totaal nieuwe omgeving zo sociaal te zijn viel het me heel erg mee. Iedereen hier is heel aardig en behulpzaam. Ik voelde me hier meteen op mijn gemak waardoor het socializen zoveel makkelijker ging. Toch blijft dit alitjd een leerdoel voor mij. Als designer vind ik dat ik minder ben ontwikkeld. Als DTP-er werk je hier veel met templates dus je bent niet zo vrij in het designen van ontwerpen.
CONCEPTEN BEDENKEN Dit leerdoel is een beetje achter gebleven, concepten bedenken zat niet bij deze stage. We hebben een keer voor een kerst reclame concepten moeten bedenken maar daar heb ik niet veel van geleerd. Voor dit stageverslag heb ik wel geprobeerd een concept te bedenken. Een deel van mijn thema was trends en daar heb ik veel gebruik van gemaakt. Voor de layout heb ik veel vlakken gebruikt en het minimalistisch gehouden. Typografie trends heb ik ook erin verwerkt. Ook heb ik de kleuren van de woonstijl ‘industrieel’ genomen. Zo heb ik toch nog een beetje aan dit leerdoel kunnen werken.
11
WE RKZA AM HED EN VOOR DE NIEUWE WEBSITE Als DTP-er bij FonQ maak ik alle beelden die op de website komen op maat en vrijstaand. De product afbeeldingen moeten in een vierkant worden gezet met een witte achtergrond. Voor sfeerbeelden moet het hele beeld gevuld zijn of met witte randen eromheen maar nog steeds vierkant. Er zijn drie verschillende maten, de grootste maat die de afbeelding aankan wordt gekozen. Ook maak ik de merkpagina’s, shop-in-shops en categorievisuals op. Dat zijn pagina’s waarbij je beelden in een template moet zetten en de tekst moet aanpassen. Verder zijn er nog logo’s die op maat moeten worden gemaakt, omdat ze op het moment bezig zijn met een nieuwe website moeten deze op twee verschillende formaten worden gemaakt. Er zijn ook marketingacties, daarbij moet er een afbeelding in een bepaald formaat worden gezet met een ‘fonq button’ erbij, in de button staat wat voor actie en de afbeelding is het product waar de actie voor is. Daarnaast zijn er nog banners, deze zijn meestal ook voor een actie. Hierin moet de tekst worden aangepast, er zit geen afbeelding bij. Bij banners en merk-, sis- (shop-in-shop) en categorievisuals zijn er ook knoppen waar de klant op kan klikken op de website. Deze knoppen hebben ook een hoover nodig, deze balkjes worden dan donkerder of een andere kleur. Ik help ook mee met de migratie, hierbij worden alle afbeeldingen gecheckt om te kijken of ze groot genoeg zijn voor de nieuwe website.
12
FOTOBEWERKING: KLEUR, CONTRAST, WEERSPIEGELING IN APPARATEN VERMINDERD
NA DE NIEUWE WEBSITE Er is niet heel veel veranderd voor mij als DTP-er. De website is nu responsive waardoor er wel veel wordt gekeken naar het beeld op de website, het is namelijk een groot deel ervan. De beelden moeten nog steeds vierkant worden gemaakt maar dan zo groot mogelijk zodat het de beste kwaliteit heeft. Sfeerbeelden vullen heel het vierkant, zonder witte randen eromheen. Daarom wordt veel beeld nu ook gephotoshopt. De merkpagina’s, shop-in-shops, marketingacties en categorievisuals zijn er nog wel maar daarvoor hoeft alleen het beeld worden aangeleverd, de tekst en buttons staan los op de website. De logo’s worden nu alleen op de grootste maat gemaakt. De banners hoeven ook niet meer te worden gemaakt, de tekst staat los van de banner. Het designteam heeft ook andere opdrachten, maar omdat ik DTP-er ben hoef ik daar meestal niet bij mee te helpen. Als er iets nieuws is dan help ik soms mee, we bedenken dan voorstellen voor de opdracht en kiezen daarna een concept uit.
13
14
vrijstaand Vrijstaand maken is een van de dingen die ik het meeste heb gedaan deze stage. Ik heb hierdoor mijn Photoshop skills kunnen uitbereiden en zo ongeveer het hele assortiment van fonQ gezien! Wat ik niet erg vond, ik ben door mijn stage meer ge誰nteresseerd geraakt in interieur.
15
leaves
Een van mijn leerdoelen was het verbeteren van mijn Illustrator skills. Dit is een voorbeeld van hoe ik dat heb uitgevoerd. Ik kon nog niet echt met Illustrator omgaan, ik gebruikte het ook nooit. Maar mijn interesse in illustraties was toegenomen en ik werd enthousiast om het te leren! Sinds we in de herfstsfeer zaten begon ik met iets makkelijks, het maken van bladeren. Na een dag had ik eindelijk resultaat, en voor de eerste keer iets proberen in Illustrator, ben ik er best trots op.
17
coffeeshop
Om mijn Illustrator skills iets v uit te bereiden heb ik deze starb winkel gemaakt. Ik heb een tu gedaan en daarna mijn eige erin verwerkt.
open
freshly brewed coffee
verder bucks utorial en stijl
polygon Dit heb ik altijd al een keer willen uitproberen omdat het er zo gaaf uit ziet. De geraamtes van de driehoeken zijn gemaakt in Illustrator en daarna in photoshop ingekleurd met de emmer en de verloop tool.
coffee mug De basis die ik had geleerd met de Illustrator opdracht heb ik toegepast op een nieuwe opdracht die we kregen. Deze opdracht vond ik heel leuk om te doen. We moesten een ontwerp bedenken voor op een beker in kerst/ winter sfeer. Omdat ik quotes zo leuk vind had ik geprobeerd iets daarmee te creeĂŤn.
19
THEMA trends & responsive website Trends in het algemeen vind ik heel interessant, ik ga er ook meestal in mee. Omdat ik magazines en trends zo leuk vind heb ik besloten om de trends in het algemeen te onderzoeken maar die ook terugkomen in magazines en websites. FonQ is eind 2015 overgegaan naar een responsive website en daarom wilde ik er graag meer over weten, ik had er nog niet eerder over gehoord en het leek me wel een interessant en passend thema.
trend
TYPOGRA extreme groo Deze trend spreekt mij persoonlijk wel aan, ook omdat het veel w gebruikt in magazines en ik vind quotes heel leuk. Bij deze trend zijn t verschillende varianten, de tekst zo groot mogelijk of juist klein. Bij de g variant wordt er vaak over de hele pagina tekst geplaatst. Zo groot mog in dikke en dunne versies. Vaak zijn de lettertypes dan basic & sans serif. is het helemaal in kapitalen of juist het tegenovergestelde en gecombine Bij de kleine variant is de tekst vaak zwart of wit en worden er soms spa gebruikt tussen elke letter, dit zie je vaak terug op websites. Dat i volgende tr
tekst & beeld gecombine Sinds er veel one page websites zijn wordt er gebruik gemaakt van een width afbeelding die niet te druk is en daar staat dan de tekst in gecentre Hierbij moet je wel opletten omdat het wel met elkaar te maken h Daarom is het beeld vaak niet duidelijk zodat je niet ziet waar het om g Tenzij het echt bij elkaar hoort, dan matched de tekst en het beeld natu
decoratief & handgeschre Deze lettertypes zijn meestal alleen voor de looks. Het trekt de aand omdat het net iets anders is dan de standaard lettertypen. In een geschre artikel wordt dit ook niet gebruikt als de body tekst maar als titel of qu Als een woord wordt gebruikt als het logo dan zijn het ook vaak decorat lettertypes. Het belangrijkste blijft natuurlijk altijd dat het leesbaa
letters stap Dit wordt ook vaak gebruikt om iets uit te lichten uit de tekst of het is quote. Je moet je een rechthoek of vierkant inbeelden waar de tekst in s De letters zijn dan ‘opgestapeld’ met spaties ertus
20
ds
AFIE ottes wordt twee grote gelijk Ook eerd. aties is de rend.
Greece
eerd n full eerd. heeft. gaat. uurlijk wel.
even dacht even uote. tieve ar is.
sweden
STO CKH OLM
pelen s een staat. ssen.
21
VORMEN zeshoeken Zeshoeken worden heel vaak gebruikt in logo’s op verschillende manieren. In magazines worden ze ook gebruikt, meestal kleiner en dan met een paar regels tekst erin. De tekst is een tip, quote of kleine aanvulling op het artikel.
geen structuur Layouts worden opgemaakt met vlakken, omlijning en vormen om de pagina in te delen. Wat je nu veel ziet is dat je dat allemaal niet meer hebt. Het is heel minimalistisch. De volgorde van de belangrijkste informatie word nu weergeven door de keuze van kleur, plaats, typografie inplaats van de vlakken. 1>
LAYOUT beeld gesplitst Deze trend is vooral voor websites. De website word opgesplitst in twee vlakken voor content. Een reden hiervoor is dat de content even belangrijk kan zijn. Op een website wil je eerst de dingen laten zien die belangrijk zijn. Met een split screen kan je er twee laten zien die even belangrijk zijn en de gebruiker laten kiezen.
vlakken Het tegenovergestelde van de vorige trend is deze. Hierbij is het hele beeld vullend met vlakken en daarin de content. Deze trend wordt steeds groter omdat als je nieuwe content hebt je makkelijk de vlakken kan veranderen van groottes. 2>
KLEUR flat kleuren palet Overal zie je nu flat design en alles is basic met weinig tekst en veel fotografie. De kleuren worden nu gekozen uit een palet met maar een paar kleuren, maar wel in veel verschillende tinten. Dit komt ook veel terug in Illustraties, met veel verschillende tinten blijft het toch een geheel en je ziet nog steeds duidelijk wat het moet voorstellen. monotone colour schemes Dit is een duidelijke trend, de achtergrond heeft een kleur, waardoor tekst in bijvoorbeeld een witte of zwarte kleur meteen opvalt. De achtergrond hoeft niet meteen een kleur te zijn, een afbeelding met dezelfde kleur tinten kan natuurlijk ook.
22
hoge contrasten Dit zie je vaak bij zwart, wit en grijze ontwerpen. Om er toch kleur in te brengen wordt er vaak een kleur uitgekozen die dan meteen opvalt. kleuren van 2016 Rose Quartz en Serenity zijn uitgeroepen tot de Pantone kleuren van 2016. Rose Quartz is een lichte roze kleur en is volgens Pantone er een die compassie en een gevoel van kalmte uitdrukt. Serenity is een koele blauwe kleur die een gevoel van verademing en ontspanning moet geven.
1 etq
2 pull&bear
23
responsive website WAT IS HET? Wanneer je een responsive website bekijkt op een dekstop, tablet of je telefoon, dan veranderd de website mee met het type apparaat en het schermformaat waarmee je de site bezoekt. Door de indeling, en de content, te ontwerpen aan de hand van de beschikbare ruimte, ontstaat een gebruikservaring die beter past bij de manier waarop een website wordt bezocht. Teksten, afbeeldingen en video’s worden geschaald en zijn hierdoor altijd goed zichtbaar. Navigatie en knoppen worden ook aangepast. WAAROM RESPONSIVE? Toen je alleen dekstops en laptops had was het platform vaak hetzelfde. Nu er steeds meer verschillende devices zijn waar je mee op internet kan en websites bezoekt heb je te maken met verschillende schermformaten. Meer mensen gebruiken eerder hun telefoon of tablet om het internet te gebruiken dan een laptop of desktop. Daarom is het belangrijk dat je website er goed uitziet op vooral deze platformen.
De reden hiervoor is dat je als ontwerper wordt gedwongen om de content te weergeven op basis van wat het belangrijkste is, omdat je maar een beperkte ruimte hebt. Hoe groter het scherm, hoe meer ruimte voor minder belangrijke content. ADAPTIVE De manier waarop een apparaat wordt gebruikt, als je let op tijd en locatie, heet eigenlijk adaptive webdesign. Adaptive webdesign gaat een stap verder dan responsive webdesign. De functie van een website kan zich aan de gebruiker aanpassen, door het tijdstip of de locatie te gebruiken. De website past zich dan nog meer aan de gebruiker aan. Als je een smartphone gebruikt ben je vaak onderweg. Door te weten wat de locatie is, kun je erachter komen dat hij of zij op dat moment buiten loopt, een camera heeft en waarschijnlijk minder tijd heeft dan een gebruiker van een desktop. Als je dit allemaal weet kun je daar voordeel uit halen met wat voor content je gebruikt en de functie. Je kunt bijvoorbeeld als je de locatie weet een knop hebben met ‘Restaurants dicht bij mij in de buurt.’
HOE WERKT HET? De layout is gebouwd in vlakken. Bij het ontwerpen van een responsive website worden een aantal breakpoints vastgesteld. Een breakpoint geeft aan vanaf welk punt de volgende ‘regel’ met content komt. De focus ligt daarbij meestal op de verschillende apparaten, een indeling voor een smartphones is anders dan die voor een tablet of desktop. Vaak wordt de mobiele versie eerst ontworpen en pas later de versies voor grotere schermen. MET BREAKPOINTS
24
ZONDER BREAKPOINTS
VOORDELEN Met responsive kun je betere zoekresultaten behalen, er is maar een website. Google toont een URL minder hoog wanneer er twee verschillende URL’s bestaan voor dezelfde pagina. Je hoeft maar een keer een website te maken die op alle apparaten goed weergegeven wordt in plaats van meerdere keren voor verschillende platforms. Een responsive site is op alle mobiele platformen goed te bekijken. Ook op een desktop biedt een responsive website voordelen. Als je de site bezoekt via een computer en het formaat van je browservenster aanpast, dan schaalt de website automatisch mee. Met een responsive design ben je voorbereid als er weer nieuwe devices met nieuwe formaten komen. Je hoeft het niet meer aan te passen, want de website schaalt altijd mee. De vindbaarheid van je website is gekoppeld aan gebruiksvriendelijkheid. Responsive design helpt hieraan mee, je website verschijnt eerder op Google.
25
nawoord
Hoewel ik niet veel variatie had bij deze stage heb ik toch een leuke en leerzame tijd gehad, en vermoeiend. Het reizen vond ik niet erg, best fijn en leuk zelfs. Maar elke dag van 7 tot 7 van huis zijn koste me toch meer energie dan dat ik dacht, volgende keer op kamers dus! Bij een bedrijf werken vond ik heel leuk om een keer meegemaakt te hebben. Ik ga de onzin humor die mijn collegas hadden zeker missen. Nu weet ik dat ik toch meer de grafische kant op wil dan DTP.