Stageverslag

Thijs van Uden HET BEGINT BIJ| 2189393

STRUCTUUR ICT & Media Design

VAN CHAOTISCH MAGAZIJN NAAR EEN COMPLETE WEBSHOP!

Stageverslag: Thijs van Uden Het begint bij structuur | Pagina 1

Thijs van Uden | 2189393 ICT & Media Design

HET BEGINT BIJ STRUCTUUR AUGUSTUS 2015 - JANUARI 2016

Het begint bij structuur | Pagina 2

Thijs van Uden | 2189393 ICT & Media Design

Titelpagina Auteur Naam: Thijs van Uden Studentnummer: 2189393 E-mailadres: thijs.vanuden@student.fontys.nl Opleidingsinstituut: Fontys Hogeschool Eindhoven Major: ICT & Media Design Stagebegeleiders Naam: Jo-An Kamp E-mailadres: j.kamp@fontys.nl Naam: Erik Heijligers E-mailadres: e.heijligers@fontys.nl

Š 2015 Thijs van Uden

Het begint bij structuur | Pagina 3

Thijs van Uden | 2189393 ICT & Media Design

Voorwoord Het rapport dat voor u ligt is de afsluiting van een vijf maanden durende stageperiode bij Studio Frisselstein. Tijdens deze stageperiode heb ik me voornamelijk beziggehouden met het realiseren van een complete webshop voor 123ventilatiesysteem. Samen met Josine en Menno heb ik deze uitdaging met beiden handen aangenomen.

De enorme hoeveelheid producten, zonder enige charme, waar ik totaal geen ervaring mee had maakte het project er niet makkelijker op. Des te groter de uitdaging. Ik kan terugkijken naar een zeer geslaagd project waar beide partijen enorm veel van hebben opgeschoten.

Dankzij dit project heb ik mijn zelfstandigheid, onderzoeksvaardigheden, designkwaliteiten en kennis van online mogelijkheden in korte periode enorm verbeterd. Het is een erg leerzame periode geweest waarbij ik al mijn vaardigheden nodig had.

“Ik kan terugkijken naar een zeer geslaagd project�

Graag wil ik een bijzonder woord van dank richten aan Josine van Berlo voor haar waardevolle begeleiding, inspiratie en enthousiasme. Daarnaast wil ik ook graag de mogelijkheid gebruik maken om Menno Meijer en Stef van der Loo te bedanken voor alle hulp en inzet die zij deze periode mij hebben gegeven. Tenslotte bedank ik uiteraard Thymen Kristen voor zijn vertrouwen dat hij mij deze periode heeft gegeven en alle positieve feedback. Allemaal hartstikke bedankt!

Ik wens u veel leesplezier.

Thijs van Uden Veghel, Datum

Het begint bij structuur | Pagina 4

Thijs van Uden | 2189393 ICT & Media Design

Samenvatting Het rapport dat voor u ligt is de afsluiting van een vijf maanden durende stageperiode bij Studio Frisselstein. Tijdens deze stageperiode heb ik me voornamelijk beziggehouden met het realiseren van een complete webshop voor 123ventilatiesysteem. Samen met Josine, Menno en Thymen heb ik deze uitdaging met beiden handen aangenomen.

De enorme hoeveelheid producten, zonder enige charme, waar ik totaal geen ervaring mee had maakte het project er niet makkelijker op. Des te groter de uitdaging. Ik kan terugkijken naar een zeer geslaagd project waar beide partijen enorm veel van hebben opgeschoten.

Dankzij dit project heb ik mijn zelfstandigheid, onderzoeksvaardigheden, designkwaliteiten en kennis van online mogelijkheden (met name Wordpress) in korte periode enorm verbeterd. het is een erg leerzame periode geweest waarbij ik al mijn vaardigheden nodig had en heb verbeterd.

Graag wil ik een bijzonder woord van dank richten aan Josine van Berlo voor haar waardevolle begeleiding, inspiratie en enthousiasme. Daarnaast wil ik ook graag de mogelijkheid gebruik maken om Menno Meijer en Stef van der Loo te bedanken voor alle hulp en inzet die zij deze periode mij hebben gegeven. Tenslotte bedank ik uiteraard Thymen Kristen voor zijn vertrouwen dat hij mij deze periode heeft gegeven en alle positieve feedback. Allemaal hartstikke bedankt!

Het begint bij structuur | Pagina 5

Thijs van Uden | 2189393 ICT & Media Design

Inhoudsopgave 8

Het bedrijf Informatie over het stagebedrijf Studio Frisselstein waar ik mijn stageperiode veel heb geleerd Frisselstein waar ik

10

Aanleiding Informatie over het stagebedrijf Studio Frisselstein waar ik mijn stageperiode veel heb geleerd Frisselstein waar ik

11

De opdracht Informatie over het stagebedrijf Studio Frisselstein waar ik mijn stageperiode veel heb geleerd Frisselstein waar ik

17

Het bedrijf Informatie over het stagebedrijf Studio Frisselstein waar ik mijn stageperiode veel heb geleerd Frisselstein waar ik

19

Het bedrijf Informatie over het stagebedrijf Studio Frisselstein waar ik mijn stageperiode veel heb geleerd Frisselstein waar ik

32

Het bedrijf Informatie over het stagebedrijf Studio Frisselstein waar ik mijn sta-

8

15 15

18 Het begint bij structuur | Pagina 6

14

Thijs van Uden | 2189393 ICT & Media Design

Verklarende woordenlijst Wordpress Een gebruiksvriendelijk systeem dat je gebruikt om online aanpassingen te maken Plugin Een aanvulling van Wordpress waardoor de site meer mogelijkheden of functies biedt.

10

SEO Search engine optimization.

Het actief optimaliseren van een website om het bezoek vanuit zoekmachines te verhogen.

Footer Onderste gedeelte van een website waarin bijvoorbeeld verwijzingen en navigatie staat.

Pixels Elk gekleurd puntje in een scherm. Hoe meer pixels, hoe scherper het beeld.

Eyecatcher Een gebruiksvriendelijk systeem dat je gebruikt om online aanpassingen te maken Php Een scripttaal om objectgeoriĂŤnteerd te programmeren.

CSV bestand Een bestand dat een tabel omzet in een tekstbestand gescheiden door een komma.

10 Het begint bij structuur | Pagina 7

Thijs van Uden | 2189393 ICT & Media Design

“UW COMMUNICATIE OP MAAT DANKZIJ STUDIO FRISSELSTEIN�

1. Het bedrijf 2.1 Studio Frisselstein

Studio Frisselstein is een communicatiebureau gevestigd in het Business Centrum Frisselstein in hartje Veghel. Een groot aantal klanten zitten in dit gebouw gevestigd of komen uit de omgeving Veghel.

Ze richten zich vooral op het bedenken en ontwikke cten: een passende huisstijl, een logo en op maat gemaakt drukwerk.

Verder zijn ze gespecialiseerd in SEO (search engine optimization).

Het begint bij structuur | Pagina 8

Thijs van Uden | 2189393 ICT & Media Design 2.2 Rollen

Josine van Berlo - Art Director

Menno Meijer - Projectmanager

Mathieu Maas - Ontwikkelaar

Josine zorgt voor de goede uitvoering van de opdracht en tegelijkertijd de creatieve kwaliteitsbewaking van de producten die ontworpen zijn naar de wensen van de klant.

Menno bewaakt projecten en het proces. Hij maakt (SMART) doelstellingen voor elk project en zorgt dat deze worden behaald. Daarnaast heeft hij veel contact met de klanten en zorgt voor een duidelijke en strakke planning.

Mathieu is na zijn stageperiode aangenomen als parttime ontwikkelaar en helpt mee met het bouwen van producten. Mathieu heeft veel kennis van Wordpress en is zeer handig met programmeren.

2.3 Organigram

Om een beter beeld te creĂŤren van Studio Frisselstein heb ik gebruik gemaakt van een organigram.

Het begint bij structuur | Pagina 9

Thijs van Uden | 2189393 ICT & Media Design

2. Aanleiding Samen met Josine en Menno ben ik de uitdaging aangegaan om een nieuwe webshop voor 123ventilatiesysteem te realiseren. De huidige webshop van 123ventilatiesysteem was erg onoverzichtelijk en er zat totaal geen structuur in. Het was onmogelijk om subcategorieĂŤn te maken en om op een geordende manier producten toe te voegen. Zou je deze site vullen met de complete inventarisatie dan wordt het een verzamelsite met allerlei verschillende producten.

Het begint bij structuur | Pagina 10

Thijs van Uden | 2189393 ICT & Media Design

3. De Opdracht Van 123ventilatiesysteem kreeg ik de opdracht om een complete webshop te realiseren waarbij alle producten 3.2 Doel Binnen een half jaar is er voor 123ventilatiesysteem een volledige webshop waarbij de klant een duidelijk overzicht heeft van alle producten die zij aanbieden.

3.3 Analyse van de opdracht Het grootste probleem op dit moment is dat ze geen duidelijk overzicht hebben op de inventarisatie en daarnaast geen idee hebben hoe ze de producten op de markt willen/kunnen zetten.

Ook weten ze niet hoe ze deze producten moeten verkopen en wat de mogelijkheden zijn. Tot nu toe zijn ze bezig met het ordenen van de inventarisatie en het kijken en vergelijken van de concurrentie.

Het begint bij structuur | Pagina 11

Thijs van Uden | 2189393 ICT & Media Design

Het begint bij structuur | Pagina 12

Thijs van Uden | 2189393 ICT & Media Design

4. Werkzaamheden 4.1 Huisstijl

Om de site een nieuw en fris uiterlijk te geven heb ik de huidige huisstijl van 123ventilatiesysteem aangepast. Ik ben begonnen met het kleurgebruik en heb dit doorgevoerd naar het logo en vervolgens ook naar het briefpapier.

Kleurgebruik Ik ben gaan kijken naar de betekenis van kleuren en al snel werd mij duidelijk dat de combinatie van blauw en wit goed bij de uitstraling van 123ventilatiesysteem. Vervolgens ben ik gaan kijken naar de concurrentie (Wildkamp, Wasco, Ventilatieshop, Bergschenhoek). Deze sites gebruiken allemaal als basiskleuren blauw en wit. Mijn gevoel werd hier dus sterk bevestigd.

Oud kleurgebruik

Nieuw kleurgebruik

Vervolgens ben ik gaan zoeken naar de juiste kleur blauw. Na veel kleuren testen ben ik uitgekomen op #00A3EO (RGB 0, 163, 224). Dit is een heldere, frisse kleur blauw wat mooi te combineren is met zwart en wit.

http://www.ultimatedesigns.nl/kleuren-en-hun-betekenissen/

Het begint bij structuur | Pagina 13

Thijs van Uden | 2189393 ICT & Media Design

Het Logo Om de hele site een nieuwe look and feel te geven heb ik ook het logo aangepast.

Ik heb het nieuwe kleurgebruik toegepast in het nieuwe logo wat nu veel beter past bij de website.

Briefpapier Als laatste heb ik nieuw briefpapier ontworpen met de nieuwe kleuren en het nieuwe logo.

Zie bijlage 1.

Slider De slider is de eye-catcher van de website en bepalend voor het eindresultaat.

Samen met Thymen en Josine hebben we drie onderwerpen samengesteld die we belangrijk vonden om op te laten vallen op de homepagina.

Onderwerp 1 Het verkopen van SAFE producten Onderwerp 2 Alle klanten krijgen 10% korting bij de eerste bestelling Onderwerp 3 Alle prijzen op de site zijn excl. 21% BTW

We hebben ervoor gekozen om onderwerp 3 in een banner te plaatsen zodat deze altijd gezien moet worden.

Nu valt hij goed op en is altijd duidelijk in beeld.

Het begint bij structuur | Pagina 14

Thijs van Uden | 2189393 ICT & Media Design

Samen met Josine hebben we voor de andere twee onderwerpen een slider ontwerpen.

Het was best een uitdaging om van deze producten een mooie slider te maken maar ik ben zeer tevreden met het eindresultaat.

Het begint bij structuur | Pagina 15

Thijs van Uden | 2189393 ICT & Media Design

Lettertype Het lettertype dat ik heb gekozen is "lato”.

Lato (dat zomer betekend in het pools) is een schreefloos lettertype ontworpen in 2010. http://www.latofonts.com/lato-free-fonts Lato is een veel online gebruikt lettertype. http://www.awwwards.com/20-best-webfonts-from-google-web-fonts-and-font-face. html Ik heb een aantal lettertypes getest en vond Lato het beste passen bij de rest van de website.

Ik vind het een mooi lettertype en vooral makkelijk leesbaar.

Product afmeting Om alle afbeeldingen netjes naast elkaar te zetten is het belangrijk dat alle productfoto’s even groot zijn. Ik heb gekozen om alle afbeeldingen vierkant te maken met een hoogte en breedte van 300 pixels.

Om alle afbeeldingen nog mooier te krijgen heb ik de afbeeldingen voorzien van witte achtergrond.

Dit oogt mooier en geeft de pagina meer rust.

Product prijs 123ventilatiesysteem zit zo’n 30 tot 40% onder de verkoopprijs van de concurrentie. Dit kunnen ze doen vanwege het grote magazijn en de hoeveelheid waarmee ze inkopen. Omdat ventilatiesystemen bij elk bedrijf van dezeflde kwaliteit zal zijn is het dus een groot voordeel dat je goedkoper bent dan je concurrentie.

Hierdoor hebben we ervoor gekozen om dit voordeel ook uit te stralen op de website. Een goed voorbeeld hiervan is dat alle producten op de website in de aanbieding zijn. Elk product heeft een doorgestreepte oude prijs en een duidelijkere nieuwe prijs.

Om dit te realiseren ben ik diep in de php code gedoken. Dit heeft me behoorlijk veel tijd gekost maar daarnaast heb ik er veel van geleerd.

Het begint bij structuur | Pagina 16

Thijs van Uden | 2189393 ICT & Media Design

4.2 Gebruiksvriendelijkheid

Om de bezoekers het zo makkelijk en duidelijk mogelijk te maken heb ik het veel aandacht besteedt aan de gebruiksvriendelijkheid van de website.

Quantity Om makkelijk grote aantallen te bestellen heb ik ervoor gezorgd dat de bezoeker meerdere producten in een keer kan toevoegen in de winkelwagen. Het aantal staat standaard op 1 en kan met een druk op de knop worden aangepast.

Het product wordt pas in de winkelwagen toegevoegd wanneer er op “bestellen” wordt gedrukt.

Deze functie kijkt ook naar het aantal producten op voorraad zodat er nooit producten worden besteld die niet op voorraad zijn.

Betalingen De bezoekers kunnen kiezen om de producten contant te betalen bij afhalen of te betalen met Ideal. Om Ideal te implementeren hebben we contact opgenomen met Sisow.

Sisow is gespecialiseerd in digitale betaalmogelijkheden en met een paar simpele handelingen was Ideal geïmplementeerd op de website.

Het begint bij structuur | Pagina 17

Thijs van Uden | 2189393 ICT & Media Design

Responsive design

Het begint bij structuur | Pagina 18

Thijs van Uden | 2189393 ICT & Media Design

Responsive Uit onderzoek (bijlage ...) blijft dat ....% van de gebruikers de site bezoekt via een pc. Toch is het belangrijk dat de site volledig responsive is. Elke gebruiker moet de site zo optimaal mogelijk te zien krijgen voor de beste beleving en gebruiksgemak.

Bezorging Omdat PostNL werkt met maximum lengte van 176cm en veel producten veel groter zijn heeft Thymen ervoor gekozen zijn pakketten zelf te gaan bezorgen. Om alle kosten te berekenen heeft Thymen aan de hand van postcodes zijn bezorg tarief opgesteld die ik heb doorgevoerd in de site.

A.d.h.v. de postcode van de gebruiker berekend de site hoeveel kosten de besteller extra moet betalen om de producten te laten bezorgen. De klant kan er ook voor kiezen om de producten gratis op te halen. Vanaf 400 euro bezorgd Thymen de producten gratis. Ook dit wordt automatisch berekend en weergegeven in het afrekenscherm

Ook kan er een gewenste bezorgdatum worden gekozen.

Dit heb ik gerealiseerd d.m.v. de “order delivery date� plugin. Hierin heb ik aangegeven dat er alleen een doordeweekse dag gekozen kan worden. Ook word deze informatie meegegeven in de mail zodat zowel Thymen als de klant hiervan op de hoogte wordt gebracht.

Het begint bij structuur | Pagina 19

Thijs van Uden | 2189393 ICT & Media Design

Producten inladen In totaal staan er 531 verschillende producten op de site onderverdeeld in 54 categorieën.

8 hoofdcategorieën en 46 subcategorieën.

Al deze producten heb ik per hoofdcategorie ingeladen d.m.v. een .csv bestand.

Voor Thymen heb ik een opzet gemaakt hoe dit bestand eruit moest komen te zien en dit heeft hij keurig per categorie aangeleverd in een Excel bestand.

Hierin stond vermeld: • • • • • • • •

Productnaam Productomschrijving Categorie Sub categorie Sub sub categorie (optioneel) Doorgestreepte prijs Prijs Aantal (voorraad)

Vervolgens moest ik per product een afbeelding toevoegen en exporteren naar een .CSV bestand. Daarna heb ik deze bestanden per hoofdcategorie ingeladen via de plugin “All import”.

Ik moest hier met veel aspecten rekening houden en heb dit ook verschillende keren opnieuw in moeten voeren. Zo moest ik zorgen dat alle kolommen in het juiste veld stonden, alle producten belastbaar waren, categorieën en subcategorieën goed achter elkaar stonden en dat alle afbeeldingen pasten bij het juiste product. Wanneer ik alle producten juist had ingeladen heb ik alle categoerieën voorzien van bepaalde instellingen en de juiste afbeeldingen.

Het begint bij structuur | Pagina 20

Thijs van Uden | 2189393 ICT & Media Design

Het begint bij structuur | Pagina 21

Thijs van Uden | 2189393 ICT & Media Design

Het begint bij structuur | Pagina 22

Thijs van Uden | 2189393 ICT & Media Design

Het begint bij structuur | Pagina 23

Thijs van Uden | 2189393 ICT & Media Design

Het begint bij structuur | Pagina 24

Thijs van Uden | 2189393 ICT & Media Design

Het begint bij structuur | Pagina 25

Thijs van Uden | 2189393 ICT & Media Design

Het begint bij structuur | Pagina 26

Thijs van Uden | 2189393 ICT & Media Design

Het begint bij structuur | Pagina 27

Thijs van Uden | 2189393 ICT & Media Design

Het begint bij structuur | Pagina 28

Thijs van Uden | 2189393 ICT & Media Design

Het begint bij structuur | Pagina 29