STAGEVERSLAG 2015
INHOUDSOPGAVE WIX
KANTINEDIENST VOORWOORD
14
05 06
08 CONCEPT
10 12
WEBUSER
STARTPAGINA
2
ICOONS
16 LOGO
HEADER
20
EVALUATIE
21 18
22 NAWOORD
UPDATE WP
24
3
4
VOORWOORD Mijn naam is Venice Moerman. Ik ben student aan het Mediacollege te Amsterdam en volg de opleiding Grafisch vormgever op niveau 4. Ik ben 23 jaar en ben reeds in het bezit van het diploma Allround DTP. In de periode van 16 februari tot en met 26 juni 2015 heb ik stage gelopen bij het bedrijf Webuser te Purmerend. Dit verslag gaat over mijn ervaringen en leerdoelen die ik heb opgedaan binnen betreffende bedrijf. De stageplek heeft het mediacollege voor mij geregeld. Zelf heb ik bij het bedrijf een portfoliogesprek geregeld. Na het portfolio gesprek kon ik 16 februari starten met mijn stage. Het stagebedrijf sprak mij erg aan omdat het een totaal nieuwe richting voor mij was. Mijn vorige stage was een reclamebureau en ik wou graag de wereld van de ‘websites’ beter leren kennen.
5
WEBUSER Webuser is een jong en dynamisch bedrijf die gespecialiseerd is in web oplossingen. Het bedrijf is opgericht in 1997 en is uitgegroeid tot een sterk bedrijf die blijft groeien. Webuser is een 100% web development bureau. Ze zijn gespecialiseerd in Wordpress dit is een programma om websites te bouwen ten behoeve van webwinkels. In het gebouw zitten verschillende bedrijf waaronder Webuser, SearchUser en Facilityapps. Deze bedrijven werken ook vaak samen met elkaar. Zo is SearchUser gericht op marketing en Facilityapps gericht op de faciliterende industrie die naar oplossingen zoeken en dit vervolgens in een app verder ontwikkelen. Klanten van Webuser zijn verschillend, van kleine ondernemers tot grote bedrijven. Van muziek fanfare tot bouwbedrijven. De diversiteit is enorm en daarom erg interessant. Niets is het zelfde is en daarom alles een eigen aanpak nodig heeft (maatwerk).
JORIS
DAPHNE
DIRECTEUR
DESIGNER
6
SEM
HUUB
DEVELOPER DEVELOPER
Dit zijn een aantal klanten van Webuser: • Brasserie alles met liefde; • Dennis verheugd; • Work academie; • KBC siergrind; • Diana Kortbeek; • Xeloq; • Bouwintentie;
7
CONCEPT Het maken van een portfolio website met daarin mijn stageverslag van Webuser, tevens komt er werk in dat ik in eerdere stadia heb gemaakt. de website bestaat uit een: - home pagina - portfolio pagina - over mij pagina - contact pagina
HET PLAN: De bedoeling is om een website te maken in dreamweaver en deze om te zetten naar wordpress om deze makkelijk te veranderen in de toekomst. Als dit geen optie is maak ik de website in dreamweaver met een template of een website die website’s aanbied. (wix.nl ect.) Het stageverslag zit verwerk in de portfolio website. Mijn vorige stageverslag wil ik graag als online magazine presenteren dit kan door middel van issuu met een plugin van wordpress of de embad code.
HET DOEL VAN DE WEBSITE De portfoliowebsite wordt met behulp van een Wordpress thema gemaakt. Omdat mijn werk het belangrijkste is in mijn site en ik niet de techniek heb om een site te bouwen, heb ik een oplossing gezocht om toch mijn werk goed te presenteren. Met deze website wil ik mijn ontwikkeling en vakkennis laten zien. Het doel is om mijn werk wat gepresenteerd word in de site zo duidelijk en mooi mogelijk weer te geven en te laten zien wat ik allemaal kan. Het doel van de website is om mijn werk te laten zien aan: - School voor afstuderen - Kunstacademie om veder te studeren - werkgever om te solliciteren ook is het belangrijk om de website in het engels te hebben omdat ik in het buitenland wil studeren.
8
STAGEVERSLAG Het stageverslag ga ik als digitaal magazine presenteren in mijn portfolio pagina. zo hou ik het compact en duidelijk bij elkaar. Het stageverslag is onderdeel van mijn portfoliowebsite en heeft daarom het zelfde concept. hier onder zie je de kernwoorden. dit verslag gaat over de ervaringen en leerdoelen van het bedrijf Webuser. het magazine word gepubliceerd op issuu.com en op de website zelf door middel van een plugin of een embad code. dit magazine word opgemaakt in Indesign.
DE DOELGROEP De doelgroep zijn mensen met de vakkennis van grafisch vormgeven, media en ervaringen. Die geleerd hebben of ervaring hebben in het grafische vak, die jou kunnen beoordelen of jij het vak goed beheerst en het vak goed uitoefent.
KERNWOORDEN IK Het concept is IK het is mijn product met de eisen van school er in. Rust: ik vind het belangrijk om voor de bezoeker zoveel mogelijk rust te creĂŤren zodat er prettig naar mijn werk gekeken kan worden. Dit doe ik door middel van kleur indeling en teksten zo klein mogelijk te houden. Ontwikkeling: ik vind het belangrijk dat de bezoeker een duidelijk beeld krijgt van mijn groei in het vak. Dit realiseer ik door middel van een tijdlijn. Uitnodigend: Ik vind het belangrijk dat de bezoeker het prettig vinden om op de site te zijn. Dit realiseer ik door middel van goede tekst gebruik, kleur en door het persoonlijk te maken. Dit realiseer ik door middel van rust, indeling en gebruiksvriendelijke website te maken. Lief: Ik vind het belangrijk dat dit kenmerk van mij in de webiste verwerkt word met een element van verrassing. Dit realiseer ik door middel van mijn karakter terug te laten komen in de site. persoonlijke dingen terug te laten komen zoals hobby interesse. Uniek: Ik vind het belangrijk dat ik echt mij laten zien, wat mijn kwaliteiten zijn en die laten stralen. Dit realiseer ik door mijn unieke portfolio te laten zien want iedereen is uniek. Vernieuwing: Ik vind het belangrijk om mensen te inspireren met mij werk. Dit realiseer ik door middel van mijn werk te presenteren.
9
KANTINEDIENST Eerste opdracht van Webuser het maken van een kantine rooster voor de bedrijven Webuser, Searchuser en Facility Apps
HET CONCEPT Ik mocht het ontwerp zelf bedenken en heb als inspiratie de keuken genomen die was altijd vol met vieze vaat.
UITVOERING Ik heb een foto genomen van de keuken van Webuser. De foto heb ik overgetrokken in Illustrator met de pen tool en met stalen de kleuren van de 3 bedrijven ingevuld. Door middel van het logo kan het bedrijf zien of ze deze week kantinedienst hebben. Het ontwerp is een flat design.
10
FLAT DESIGN Flat design is rustig en heeft doorgaans een zachte kleurgebruik en maakt gebruik van abstracte elementen. Webpagina’s kunnen door deze opzet snel geladen worden in verband met de lage load van een website. Door deze stijl zijn pagina’s ook goed responsive te maken. Met de grote dichtheid van mobiele devices (smartphone en tablet) is dit een groot voordeel.
11
STARTPAGINA Het maken van een startpagina voor Webuser.
HET CONCEPT Op de startpagina van webuser.nl komen alle site die gebruikt worden voor Webuser. De startpagina moet overzichtelijk zijn voor de gene die het gebruikt. In de startpagina moest herkenning zitten van webuser dit heb ik met de kleuren gedaan van Webuser. Ook heb ik icoontjes gebruikt voor de startpagina zodat het makkelijker te herkennen is.
UITVOERING Ik heb het ontwerp in Illustrator gemaakt en de stijl is in flat design. De groene kleur is overheersend omdat het de kleur van Webuser is. Na dat ik goedkeuring heb gekregen is er een designerpackages gemaakt voor de developer. Hierin staan de specificaties zoals hoogte, grote en breedte. In website gebruik je altijd pixels en dit staat ook zo aangegeven voor de developer.
12
13
14
WIX.COM LADINGSPAGINA De opdracht is het maken van een ladingspagina op wix.com. Dit is om sneller gevonden te worden op het internet.
HET CONCEPT Wix.com is een website waar je websites kan bouwen en online kan zetten dit is gratis maar je domainnaam is altijd.wix. com. Ook adverteren ze op jouw pagina. Wil je dit niet dan moet je betalen. De landingspagina moest een verwijzing worden naar webuser.nl. Ook mocht er een kleine introductie zijn van Webuser.
UITVOERING Wix.com is een open source CMS programma dat betekend dat je geen achtergrond nodig heb van code zoals PHP, Html of Javascript. Wix.com bied je verschillende tools aan om teksten en afbeeldingen te plaatsen in de pagina en deze heb ik dan ook gebruikt om de ladingspagina te maken.
15
16
lettertype goudy
LOGO WSP WSP
WSP
De opdracht is het maken van een logo voor de nieuwe website wordpresservicepackage.com.
WSP
WSP
HET CONCEPT Het logo heeft een paar kenmerken Het lettertype wat ik gebruikt is Aller Bold. Deheb bloem is gebaseerd op de zonnebloem de lagen staan voor veiligheid en voorspoed, heelheid, verandering ten goede. bestaat uitde transparante lagen we en zijn fantastisch, Dit lettertypehet pas goed bij website omdat, die staat voor bewondering, diepgang van het product. de druppel is Ook is een cirkel het symbool van het Het een herkenbaarlettertype in het midden een kern. Ook de vorm is naar weuser en kracht en loyaliteid. door dat de bloem halfde krachtige kern van het wsp. niets, de leegte, de oneindigheid en vandoor de absolute speelt is een rol hethalve logo. de simpelheid en van de vertegeoordigt letter enduidelijkheid hetineen cirkel door dat de kern vloeibaar is zijn vrijheid, door niets gebonden. transparante lagen staan voor de past dit heelDe goed bij de website. betekent het ook ontlasting asl in van een last zeggen wij dat we felxibel en voor een Wordpress lettertype goudy het aantal producten die het pakket ontdoen omdatService het woord staat staan we wringen ons overal tu packageonder de bloem uitdaging Oud logo aanbied. Door al die producten beschermt de bloe het wsp. het lettertype wat gebruikt is, is aller. samenlettertype te voegengoudy krijg je de kern.
W
Wordpress Service Package
W
De kern staat voor de kracht van het pakket verschillende elementen worden een krachtig element. De vorm die gebruikt ik gebruikt heb is een vijfhoek dit staat voor de veelzijdigheid van het pakket.
WSP
WSP
Wordpress Wordpress Het logo is ontworpen in Illustrator. Service package
W
UITVOERING
Wordpress WSP Service Package
W
dit logo is zo krachtig door Het lettertype wat ik heb gebruikt is Goudy bold Service package Ik heb eerst schetsen gemaakt op de lagen vloeistof die niet in contact is met een die samenmet het pakket vormen en hetDe samen hetstaat symbool vooren veilighei cirkel voor vierkan absolutestaat vrijheid dat oldstyle figures. Dit lettertype past goed bij website dede lagen staan voor veiligheid en Joris papier en samen gekeken andere vloeistof. bescherming van de omgeving brengt tot een fantastisch pakket. doormiddel integriteit en eerlijkheid heb je evenwicht, als je het wsp neemt. ook saat het door dat het lettertype balans en sierlijkheid van devan letter. diepgang het dewou, druppel wat hijproduct. ongeveer het is logo doordat de druppel uit meerdere lagen van diepgang, bescherming belangrijketen dingen die wij uitstralen. voor verandering goedeen veligheid de letter straalt klassen uit en dat doet het ook.bestaat uithet drie, vijf hoeken die de en veiligheid depakket krachtige kern van wsp. bestaat straalt het veiligheid, rust en diepgang uit.l geef jevan zekerheid met dit logo. door debinnen lagen vorm je weer een krachtig Alles wat zich een cirkel bevindt ook is de punt een diamant voor. het Wordpress door dat deveelzijdigheid kern vloeibaar is zijn lettertype Goudy kern. tegen. de cirkel is op gebouwd service pakket en uitbeeld de vijf package is beschermd zeggen wij dat we felxibel voor Service een Service package lettertype in lagen voor eenaller nog krachtigere kern. hoeken zijn iets wat transparant waar uitdaging staan we wringen ons overal tussen. lettertype goudy door jegebruikt duidelijke kan zien. het lettertype wat is, lagen is aller.
WSP Wordpress
W
Wordpress
Service package Wordpress
WSP
W
Service Package
Wordpress
Dit heb ik met de dekking transparant gemaakt. Het font is Overpass regular een mooi stevig lettertype kan voor Service package web en print gebruikt worden.
W
Wordpress Service Package
W
Wordpress
Wordpress
Service package
De bloem is gebaseerd Service op de zonnebloem package die staat voor bewondering, we zijn fantastisch, het symbool vierkan staat voor veiligheid, kracht en loyaliteid. alles wat het pakket is! evenwicht, integriteit en eerlijkheid door de lagen geef je aan dat het pakket krachtig is. belangrijke dingen die wij uitstralen. lettertype goudy door de lagen vorm je weer een krachtige kern. Service Service package
WSP Wordpress
WSP
WSP Wordpress
W Wordpress Service Package
WSP
W
symbol heeft de vorm van een web door voorspoed, heelheid, verandering ten goede. door een krachtige opbouw vaan een web 17 Ook isen een cirkel het symbool van het de lagen die leiden naar een krachtge kern niets, dat de leegte, oneindigheid en van dekan absolute zo iets de kleins zo een krachtig iets make package vrijheid, door niets gebonden. lettertype aller
WSP Wordpress
WSP
18
HEADER WEBUSER Opdracht het maken van een header voor de Pasen/lente.
CONCEPT De boodschap goed te communiceren naar de klant met als elementen de lente.
UITVOERING De headers zijn in Illustrator ontworpen. Ik heb elementen gemaakt zoals schapen, konijnen en insecten. Ook heb ik gebruik gemaakt van symbolen, dit zijn standaard elementen in Illustrator. De tools die ik heb gebruikt zijn de pen tool, vloeiend maken en verloop. Ook heb ik symbolen gebruikt dit zijn standaard afbeeldingen in Illustrator.
19
ICOONTJES WEBUSER.NL Het maken van icoontjes voor de nieuwe website van webuser.nl voor de mogelijkheden en home pagina.
HET CONCEPT Inspiratie heb ik op gedaan van de Webuser site. En hierbij een leuke stijl bedacht voor webuser.nl. Ik heb gekeken naar de laatste trends van 2015 in webdesign en inspiratie opgedaan op het internet met bij voorbeeld Pinterest.
UITVOERING De icoontjes zijn gemaakt in Illustrator. Ik heb in Illustrator gewerkt met vormen, hierdoor krijg je een Flat design. Dit heb ik gekozen omdat de website met vlaken werkt en dit mooi tot zijn recht komt.
20
UPDATE WORDPRESS 4.2 Opdracht alle Websites update naar Wordpress 4.2, daarnaast moeten ook plugins en thema up to date zijn. Er is een procedure geschreven zo dat ik het updaten stap voor stap kan volgen. In IWP bekijk ik wanneer er voor het laatst een back up gemaakt is en hoe groot de back up is. De back up word bewaard in het buitenland. Dit is voor als er wat gebeurd in Nederland of het bedrijf dat de back-ups veilig zijn. Na het back-uppen maak ik een aantal print screens van de website, dit is als er wat veranderd in de website we terug kunnen zien hoe het origineel was. Het kan wel eens voorkomen dat er na een update iets kapot gaat in de website. Na de print screens controleer ik of de back up in IWP goed gelukt is. Als de back up gelukt is, dan open ik de admin dit is de beheerder van de site. Bij updates, update ik Wordpress 4.2 als de update goed gegaan is controleer ik de website en bekijk ik de website of er nog veranderingen zijn. Als er niets veranderd is ga ik veder met de plug-ins update. Sommige plug-ins hebben een verhoogd risico dit betekend dat ze de website snel slopen. Na het update van de plug-ins worden de thema’s geßpdatet. Als alles is gelukt en er zijn geen veranderingen aan de website, maakt ik nog een back-up zodat de laatste veranderingen in de back-up staan. Deze updates heb ik bij meer dan 100 website uitgevoerd.
21
22
EVALUATIE De web wereld is groot, dat heb ik bij Webuser wel geleerd! Maar enorm interessant met veel technische aspecten welke ik soms moeilijk kon volgen. Hierdoor heb ik echter wel wat van de techniek meegekregen tijdens mijn stage. Tevens ben ik tijdens mijn stage veel meer gaan opletten met wat ik zeg en hoe ik het zeg. Dit komt door Joris (mijn stagebegeleider) die enorm goed is met woorden en zinsopbouw(en). Dit was vanwege mijn dyslectisch nogal eens een uitdaging voor mij. Het resultaat is dat ik nu beter een idee onder woorden kan brengen. Hierdoor begrijpen mensen mij beter en sneller. De voorontwerpfase heb ik ook beter onder de knie gekregen. Zo is het enorm belangrijk om je idee op papier te krijgen met daarbij de juiste uitleg en onderbouwing. Hierbij heb ik geleerd dat het essentieel is om onderzoek te doen. Dit is soms een lang en moeizaam proces, maar onmisbaar om een mooi resultaat neer te zetten. Ik ben voor mijn gevoel flink gegroeid in de web wereld en heb het tijdens mijn stage erg naar mijn zin gehad.
23
24
NAWOORD Het maken van een stageverslag is het eind verslag van mijn stage. In het verslag heb ik de pixel gebruikt om de digitale wereld duidelijk te maken. Zo heb ik mijn werk gepresenteerd in mockups om dit zo profecioneel mogelijk neer te zetten. Het lettertype die ik heb gebruikt zijn voor de kop Lato en bodytekst Verdana dit zijn font die goed leesbaar zijn op zowel beeld als papier.
25