Home
BPV-1

Teeling Petfood

Een van mijn leerzame projecten was Teeling Petfood. Het design had vele vormen en uitlijningen wat voor mij nog wel eens een uitdaging kon zijn. Daarnaast was het ook tweetalig, maar dit bleek uiteindelijk makkelijker te zijn dan het leek. Alleen moest je wel veel vullen door pagina's aan te maken en dan 1 met nederlandse content en de ander met engelse. Ben sowieso wel langer dan een week hiermee bezig geweest, had sneller gekunt wat mij betreft. Maar uiteindelijk ben ik blij dat die staat en kan ik met trots zeggen dat het goed is afgerond.

Oriëntatie

Teeling Petfood is een Private Label. Zij hebben fabrieken in Heerhugowaard en Hoogeveen maken ze dagelijks, met een toegewijd team, hond en kattenvoer produceren. Worsten, hamburgers tot natvoer in aluminium cups: Zij produceren het allemaal.

Definitie

De huidige site die ze hebben is ook gemaakt door ons, alleen is die al vrij oud. Ze hebben uiteindelijk een redesign gekozen en deze is uitgewerkt tot een mooi ontwerp en alles wat nog moest gebeuren is gezet in SiteWorks projectsysteem. Alles wat gedaan moet worden moet voldoen aan de klant zijn eisen, van ontwerp tot aan realisatie.

Ontwerp

Het ontwerp is ontworpen door onze designer Christiaan. Het was een vrij simpel maar toch lastig ontwerp. Er zijn veel verschillende vormen en illustraties gebruikt. Bij het maken van het ontwerp moet er natuurlijk rekening gehouden worden met of het realiseer baar is. Daarnaast is er ook gekeken naar het positioneren van de content, dus tekst en afbeeldingen goed verdeeld over de pagina. Het kleurgebruik is ook een belangrijk onderdeel en dit is ook perfect toegepast.

Christiaan heeft Figma gebruikt om het ontwerp te creëren. Dit is makkelijk te gebruiken en zeer vertrouwbaar. Ook is het fijn dat wanneer het ontwerp klaar is en goed is neergezet, je kan zien met inspect tool in Figma wat de verhoudingen zijn van blokken en grotes van fonts etc.

Keuze

Wanneer de eerste versies van het ontwerp klaar zijn gaan ze naar de klant. Er wordt altijd overlegt over gemaakte keuzes en of iets anders kan. Er worden sowieso altijd minimaal 2 versies gemaakt voor het ontwerp. Teeling Petfood heeft het ontwerp al snel goedgekeurd en was onder de indruk. Als het goedgekeurd is wordt het doorgezet naar 1 van de developers, waaronder ik nu, om het te realiseren.

Voorbereiding

Eerst verzamelen we alle materiaal wat belangrijk is voor in de site en daarna maken we een FTP account en database aan voor de klant. Dan zetten we het domein nog op een tijdelijke link zodat de wijzigingen niet live te zien zijn. Ook moet er gezorgt worden dat de mappenstructuur klopt en alles goed staat ingevuld. Nu kan de bouwfase beginnen en dit gaf ik ook aan in het projectsysteem, dat ik ermee bezig was.

Bouwen

Wanneer we gaan bouwen is het nodig om op te letten wat je doet, hoe meer fouten, hoe meer erros, hoe minder goed de site zou kunnen functioneren. Met SiteWork zijn eigen CMS zijn er standaard blokken die je kan toevoegen aan een pagina. Deze blokken worden gebruikt op de juiste en logische manier. Het stylen van de blokken is ook belangrijk, want het moet allemaal gelijk zijn. Vaak kan het zijn dat een blok die je wilt gebruiken niet bestaad, dan moet die aangemaakt worden. Ook is het belangrijk dat je niet te veel onnodige code maakt, dus gebruik maken van loops of eenmalige styling classes. Voor styling gebruiken we Tailwind, maar hebben we ook onze eigen CSS stukjes nog toegepast.

Aangezien Teeling Petfood tweetalig was moest ik hier ook mee rekening houden. Dat wanneer de NL (nederlands) in de language dropdown was geactiveerd, alleen de Nederlandse content getoont werd en dit gelde ook voor EN (engels). Er werd ook veel gebruik gemaakt van rondingen en illustraties in het ontwerp, dit heb ik ook toegepast met wat moeite aangezien ik dit nogal lastig vond in het begin. Uiteindelijk is het me toch gelukt en is het ontwerp een-op-een nagebouwd.

Reflectie

Na alle feedback dingen toegepast te hebben ben ik met het eindresultaat zeer tevreden. Het heeft wel wat tijd gekost, maar heb het wel goed en helemaal beheerbaar gemaakt. Ook was het gebruik maken van tweetalige funcites wel interessant.