Home
BPV-2

SVDO Tourbuffels

Het leukste en mijn laatste project was SVDO Tourbuffels. Ook dit design had vele vormen en uitlingen wat lastig kon zijn, maar uiteindelijk is alles goed doorlopen. Er zit zelfs een animatie in de footer op de homepage. Opzich ben ik hier korter mee bezig geweest dan gedacht en ben ik tevreden over hoe alles liep. Er is gelachen en het is zeer goed agerond.

Oriëntatie

De Tourbuffels zijn te herkennen aan hun roze fietspakken, want echte mannen kunnen roze hebben. Dit hebben ze ook gedaan, omdat de Giro dit als kleur heeft. SVDO (Snot Voor De Ogen) Tourbuffels is een vereniging van ongeveer 18 leden, waarvan gemiddeld 2 zonder fiets zitten. Ze organiseren elk jaar het inmiddels landelijk bekende MOUNTAINBIKE MANIA.

Definitie

De huidige site is nogal matig en was wel toe aan een nieuw design. De Tourbuffels hebben aan ons gevraagd of wij dit zouden kunnen oplossen en dit kunnen we natuurlijk wel. Er zijn wat versies gemaakt van het ontwerp die voldoen aan de eisen van de klant, hieruit hebben ze een keuze mogen maken en feedback op mogen geven.

Ontwerp

Ook dit ontwerp is ontworpen door Christaan, alles wordt eigenlijk momenteel ontworpen door de designer. Vrij leuke en uitdagend ontwerp. Er is ook rekening gehouden met realiseerbaarheid, want het is me gelukt. Content is goed geplaatst en zeer leuk vormgegeven. Ook dit ontwerp is gemaakt in Figma. Daarnaast heeft Christiaan ook nog de buffels op de fiets geanimeerd zodat ze een soort fietsbeweging maken, deze buffels heb ik later weer geanimeerd op de site.

Keuze

Van de gemaakte versies is het bovenstaande ontwerp gekozen. Er was nog veel gespar over de animaties en content heb ik meegekregen, maar dit is uiteindelijk helemaal opgelost en er is wat zeer moois uitgekomen. Het ontwerp was goedgekeurd, klaar om gerealiseerd te worden en dit mocht ik doen.

Voorbereiding

Alle content was al verzameld en kon ik ook mooi van hun huidige site overnemen. Ook voor de Tourbuffels is een FTP account aangemaakt en database. Domein op een tijdelijke link en mappenstructuur gefixt. Over het ontwerp heb ik ook nog wat dingen gevraagd om zo goed voorbereid te zijn en alvast wat ideeën uit te werken in mijn hoofd.

Bouwen

Met het binnen van bouwen begin ik vaak met de header helemaal volgens het ontwerp te maken, aangezien ik van boven naar beneden werk, maar ook omdat de header vaak het eerste is wat bezoekers zien. Het bouwen van Tourbuffels ging op het begin nogal wat stroef, maar uiteindelijk liep het heel soepel door en had ik al gauw het eind in zicht. De dingen waar ik vooral mee zat was de pijl die langs en onder de tekst doorging, de afbeeldingen daarachter links en rechts viel nog wel mee en de slider. Het blok van de Aftermovie ging wel makkelijker dan verwacht alleen het responsive maken was nogal een gedoe. Maar het responsive maken van de hele site is vaak al een tricky iets soms, vooral bij drukke blokken, maar meestal gebruiken we dan 'display: none;' op onbelangrijke illustraties enzo.

De animatie onder in de footer, alleen op de landingspagina, was ook een leuk project. Het idee was om een paar buffels te laten fietsen en dat is aardig goed gelukt. Christiaan onze designer heeft de buffels nog een bewegingsanimatie gegeven en ik heb daarna alle onderdelen van de lucht tot aan de struiken erin gezet en de buffels van links naar rechts geanimeerd met CSS

Reflectie

Er is vrij weinig feedback uitgekomen, alleen iets met de responsiveheid van de navigatie pijlen in de slider en voor de rest kwam ik later nog achter dat een image niet meeschaalde op grotere schermen. Maar na dit gefixt te hebben was ik zeer trots en tevreden over het eindresultaat.