Stageverslag 4

Naam: Laurens Verdonk

Stageplaats: Adeko

Praktijkopleider: Pim de Koster

Stagebegeleider: Peter Bijker

Inleverdatum: 12 januari 2017

Inleiding

Zoals ik in mijn derde stageverslag al heb uitgelegd, heb ik besloten om ook mijn tweede stageperiode door te brengen bij Adeko Webdesign & Development. Ik kan hier ervaring opdoen in zowel vormgeven als coderen en ik kom in aanraking met concepten waar ik voorheen nog vrijwel onbekend mee was. Het bedrijf biedt ook de mogelijkheid om specifieke richtingen te kiezen om verder in te leren.

De keuze van mijn leerdoelen heb ik gebasseerd op wat er nog ontbreekt aan mijn vakkennis. Na het afronden van Interactieve Vormgeving wil ik niet alleen een website in elkaar kunnen zetten, maar als het ware een volledig pakket kunnen bieden. Daarbij wil ik mijn werkzaamheden zo efficiënt mogelijk uitvoeren. Om deze redenen heb ik de volgende leerdoelen gekozen:

  • Sass - De basis features van Sass kunnen gebruiken en een opstap maken naar OOP
  • SEO - Leren welke services er geboden worden op het gebied van Search Engine Optimalisation
  • Parent en child thema - Een parent en child thema kunnen opzetten binnen WordPress

Leerdoelen

Sass

CSS (Cascading Style Sheets) is iets waar je als Front-End Developer altijd mee te maken zal blijven hebben. Een website kan vele regels styling bevatten en omdat het vaak precisiewerk is, kan er veel tijd in gaan zitten.

Sass is een uitbreiding op CSS en biedt de mogelijkheid om sneller en efficiënter code te schrijven en het te kunnen hergebruiken.

Ik heb Sass gekozen als leerdoel omdat de verschillende features veel tijd en moeite kunnen besparen, maar ook met het doel om mij in de nabije toekomst meer te focussen op Object Oriented Programming met Javascript en PHP. Sass leek mij een mooi opstapje om daar wat ervaring mee op te doen.

Het Lotus thema is het eerste project waar ik Sass in heb gebruikt. Het concept van 'compilen' is iets waar ik aan heb moeten wennen. Het zorgt voor een compleet andere bestanden- en mappenstructuur binnen de website, maar nu ik er een tijdje mee werk vind ik het een erg fijne manier van werken. Elk onderdeel van de website heeft zijn eigen bestand, dus als je een bepaald stukje code zoekt vind je die vrij snel.

Het enige nadeel aan het gebruik van Sass is dat compilen niet op de server kan gebeuren. Het was de bedoeling om met zowel WordPress als PrestaShop projecten Git te gaan gebruiken, maar aangezien we dat nog niet werkend hebben kunnen krijgen aan de WordPress kant, heb ik zelf steeds de bestanden op de FTP moeten vervangen om elke wijziging te kunnen testen.

SEO services

SEO (Search Engine Optimalisation) is een belangrijk onderdeel van Webdevelopment. Een website of webshop kan nog zo goed ontworpen of gebouwd zijn, je hebt er weinig aan als die niet te vinden is. Google biedt verschillende services aan om zelf je vindbaarheid te kunnen optimaliseren. Voorheen bekend als 'Webmaster Tools', is Google Search Console nu de omgeving waar deze services zijn ondergebracht.

Dit heb ik gekozen als één van mijn leerdoelen, omdat ik als het ware een volledig pakket wil kunnen bieden als ik een website maak. Het is niet zo dat ik een SEO specialist wil worden, maar vindbaarheid heeft wel degelijk invloed op de manier waarop een website gebouwd moet worden en is dus zeker niet onbelangrijk.

Het meeste dat ik nu weet over de optimalisatie van vindbaarheid komt door het doen van onderzoek en het gebruiken van Google Search Console bij mijn eigen website, hoewel ik nog niet alle tools heb kunnen uitproberen omdat mijn website enkel nog proefcontent had. Het was de bedoeling om samen met een collega een aantal werkzaamheden binnen Google Search Console te doen voor een klant, maar dat is er nog niet van gekomen. Dit is iets waar ik in de toekomst nog tijd aan ga besteden en ik ga proberen om mijzelf op de hoogte te houden van de laatste ontwikkelingen op SEO gebied.

WordPress Parent en Child thema

Als derde leerdoel heb ik ervoor gekozen om een Parent en Child WordPress thema te maken. Hierbij maak je één thema die alle basis styling en functionaliteiten bevat, dit thema dient als 'parent'. Alles dat in het child thema wordt gedaan, overschrijft hetgene dat in het parent thema staat aangegeven. Dit heeft als nut dat je één thema kunt hergebruiken in verschillende websites en deze ook allemaal tegelijk kunt updaten. Alles dat enkel bij een specifieke website hoort komt in het child thema te staan en kan dus niet verloren gaan bij een update.

Bij Adeko zijn we bezig met het maken van WordPress thema's voor allerlei soorten doelgroepen. Dit doen we om potentiële klanten een simpele website aan te kunnen bieden waar alleen nog hun content in hoeft te staan. We maken op het moment gebruik van één parent thema die wij het Adeko Start thema noemen. Tot nu toe heb ik aan twee websites gewerkt die dit thema gebruiken, maar omdat ik nog niet eerder zelf een Parent en Child thema heb opgezet, heb ik bij het maken van dit stageverslag het Twentysixteen thema van WordPress veranderd in een Parent en Child thema.

Lotus is het thema waar ik het meeste aan gewerkt heb en het is al een aantal keer voorgekomen dat ik verbeteringen heb doorgevoerd als een update. Op ten duur leer je waar je van tevoren allemaal aan moet denken bij het opzetten van een website.

Deze manier van werken heeft veel voordelen. Dit zorgt ervoor dat je in principe maar enkele thema's hoeft te maken en vervolgens talloze unieke layouts kunt maken aan de hand van deze thema's. Dit scheelt tijd en moeite en heeft direct invloed op je winst. Ik verwacht hier in de toekomst nog veel gebruik van te blijven maken.

Werkzaamheden

Hieronder beschrijf ik de werkzaamheden waar ik het grootste gedeelte van mijn tijd aan heb besteed tijdens deze periode.

Het Moves thema is één van de thema's die we van tevoren maken om vervolgens goedkoop aan te kunnen bieden aan de desbetreffende doelgroep. Moves is gericht op verhuisbedrijven en het is het eerste thema waar ik het ontwerp voor heb mogen maken.

Allereerst heb ik gezocht naar websites van verhuisbedrijven om te zien wat er precies centraal moet staan in de website. Ik kwam tot de conclusie dat zowel de diensten als contactgegevens vrijwel gelijk zichtbaar moeten zijn en dat bezoekers gelijk bij de offerte moeten kunnen komen. Met dat in gedachte heb ik er een one-scroll-page van gemaak, met de belangrijkste contactgegevens in de header en een knop voor het aanvragen van de offerte bovenaan de startpagina. Elke achterliggende pagina heeft zijn eigen sectie op de startpagina, zodat alle globale informatie op de startpagina te vinden is.

Na het onderzoek ben ik begonnen met het ontwerpen van een logo, omdat het bepalend is voor de uiteindelijke huisstijl. Ik vind het persoonlijk makkelijker om een huisstijl te maken aan de hand van een logo dan andersom.

Eerst heb ik geëxperimenteerd met de vorm van een doos. Ik was er zelf niet helemaal tevreden mee en na wat feedback ben ik meer aan een tekstueel logo gaan denken.

Ik werk niet vaak met Adobe Illustrator, maar ik heb figuren uit andere figuren gesneden om neer te kunnen zetten wat ik in gedachte had. Om meer nadruk te leggen op de snelheid, heb ik de tekst schuingedrukt gemaakt en de vleugels aan de rechter kant heb ik getekend met de pen tool.

Nadat het logo af was heb ik opgeschreven welke informatie en elementen op de startpagina moeten staan en welke primaire kleuren ik ging gebruiken. Hierna ben ik begonnen met het neerzetten van elementen in Adobe Photoshop. Hieronder staan de definitieve ontwerpen. De website zit momenteel in de ontwikkelfase en de voortgang kunt u hier bekijken.


De verschillende iconen die gebruikt worden om de diensten te visualiseren heb ik ze omgezet naar een lettertype. Dit heeft als voordeel dat de iconen van kleur kunnen veranderen, maar als nadeel dat ze niet vervangen kunnen worden door een gewone afbeelding wanneer de klant iets anders wil.

Het Lotus thema is net als Moves een thema dat we van tevoren hebben gemaakt. Lotus is gericht op hoveniers en het is het eerste thema dat we verkocht hebben. Dit is een leerzaam project geweest om verschillende redenen. Ten eerste is het de eerste website waarbij ik in een Parent-Child thema heb gewerkt en waarbij ik Sass heb gebruikt.

Daarnaast heb ik kunnen ervaren hoe belangrijk het is om aan de klant duidelijk te maken wat hij of zij koopt. Nadat het thema verkocht was en de gewenste content ingevoerd was, kregen we drie bladzijden met feedback toegestuurd met zowel styling als functionaliteiten. Het is te begrijpen dat een thema niet compleet overeen komt met iemands wensen, maar dit waren genoeg aanpassingen om het een 'op maat website' te kunnen noemen. Dat terwijl de bedoeling van deze thema's is om ze enkel te vullen met content en vervolgens goedkoop te kunnen verkopen omdat er relatief weinig tijd in zou zitten.

Hieronder ziet u de startpagina van beide websites, met het originele ontwerp van Lotus aan de linker kant.

Tijdens het maken van het Lotus thema heb ik verschillende ontwerpen voor social media iconen gemaakt. Deze heb ik vervolgens omgezet naar lettertypes om in de toekomst te kunnen hergebruiken en makkelijk te kunnen vervangen.

Bubbels Consult is een consultancy bureau waarvoor ik de opdracht kreeg om een website neer te zetten met een forum en de mogelijkheid voor het maken en beheren van een account. Dit heb ik gedaan met de plugins 'BBpress' en 'Buddypress'. Dit kostte meer tijd dan verwacht. De plugins zetten namelijk het meeste automatisch neer op de pagina's, maar het was niet responsive.

Een aantal maanden nadat de opdracht afgerond was, kregen wij een ontwerp doorgestuurd met de opdracht om de startpagina van dat ontwerp te bouwen. Wanneer de klant hier tevreden mee was, mocht ik de rest van de opdracht ook oppakken. Inmiddels is de startpagina af en wachten we op feedback van de klant. Hieronder staat een screenshot van de startpagina.

Bronvermelding

    Collega's: Aan mijn collega's heb ik advies kunnen vragen over vormgeving en functionaliteiten.

    Pexels en Pixabay: Voornamelijk deze websites zijn mijn bron geweest voor het vinden van afbeeldingen die geschikt zijn voor commercieel gebruik.

    Flatuitcolors en Adobe Kuler: Deze websites heb ik een aantal keer gebruikt voor het vinden van geschikte en bijpassende kleuren.

    Website layouts: Voor elke specifieke website heb ik als eerst een aantal dergelijke websites bezocht om inspiratie op te doen. Dit is voor elk soort website verschillend.

Stageverslag

Concept

Ik heb ervoor gekozen om dit verslag zo strak mogelijk te houden, zonder afbeeldingen weg te laten. Bij dit verslag heb ik veel meer visueel materiaal om te laten zien en dit wilde ik dus ook gebruiken.

Beeldmateriaal

Om projecten duidelijk te onderscheiden heb ik de logo's van desbetreffende websites bovenaan de secties neergezet. In het derde stageverslag heb ik niet veel afbeeldingen gebruikt, op de logo's na. Dit deed ik om het verslag "schoon" te houden. Dat heb ik deze keer anders gedaan omdat ik nu meer visueel materiaal heb.

Indeling

Ik heb geprobeerd een logische volgorde aan te houden voor de inhoud van het verslag. De werkzaamheden heb ik gesorteerd op grootte, met de grootste bovenaan. Daarnaast heb ik geprobeerd om al het visuele materiaal dat ik heb te gebruiken en om het zo compact mogelijk te houden.

Kleurgebruik

In tegenstelling tot mijn vorige stageverslag heb ik voornamelijk donkere kleuren gebruikt. Zwart en wit zijn sterke kleuren, dus heb ik zachtere tinten gebruikt voor de achtergronden en tekst om het fijner aan te laten voelen voor de ogen. De alinea's heb ik een iets lichtere kleur grijs gegeven om de aandacht daar naartoe te trekken. Als secundaire kleur heb ik een rode tint gebruikt omdat ik persoonlijk vind dat zwart, wit en rood een mooie combinatie is.

Typografie

Om een duidelijk onderscheid te maken tussen menu-items en bepaalde elementen, heb ik het lettertype 'Montserrat' gebruikt voor de menu items en inhoudsopgave en deze uitsluitend weergegeven in kapitalen. Daarnaast heb ik Helvetica gebruikt voor de content. Ik heb voor deze twee lettertypes gekozen omdat ze beide schreefloos zijn en ik het persoonlijk fijne lettertypes vind om te lezen.