Webdesign proces Fit & Fruitig

Het altijd enthousiaste en energieke Fit & Fruitig benaderde ons om te verkennen wat de mogelijkheden waren voor het herprofilering van hun corporate website. Als vaste 'IT-leverancier' van Fit & Fruitig wilden we de kans aangrijpen om het voorstel te doen een nieuwe website te ontwikkelen. Hierbij zouden we niet, zoals de vorige website van Fit & Fruitig een complete Flashwebsite maken, maar een XHTML/PHP website. Aangezien Fit & Fruitig een jong, dynamisch en progressief bedrijf is, zou een PHP een betere ondergrond bieden voor toekomstige uitbreidingen op de website.

Schetsfase

Na elk oriënterend gesprek bruisen onze hoofden altijd van creativiteit en inspiratie. Zo ook na een uitgebreide meeting met Fit & Fruitig (F&F), waarin we geïnformeerd werden over hún idee van de herprofilering en onze visie hierop gaven. Na de meeting is het eerste wat we doen nog eens rustig de content van de website doornemen. We bekijken hoeveel er pagina's en moeten komen en wat voor soort pagina's er komen (zijn het voornamelijk informatieve tekstpagina's, zijn er Javascript en/of AJAX oplossingen geboden, zijn er pagina's die formulieren bevatten enz. enz.). Tientallen websites bekijken om de creatieve juices te laten flowen is ook een onderdeel dat we zeker niet overslaan. Daarna bekijken we per pagina welke elementen voorkomen, en maken op basis daarvan ouderwets met pen en papier een schets. Wij verkiezen pen en papier in deze fase boven het schetsen in Photoshop. Dit omdat je zo snel veel schetsen kunt maken, en er minder tijd verloren gaat als het idee toch niet zo geschikt leek als je het in je hoofd had.

Pas nadat we de basis vlakverdeling hadden op papier, en alle spreekwoordelijke stukjes op hun plaats waren gevallen, werd de computer aangeraakt. In deze fase begonnen we, zoals altijd, met het maken van een indeling in Photoshop om vervolgens alles te polijsten (invulling content, font-keuze, gradients, dropshadows, innershadows).

Feedback Fit & Fruitig

Nadat we ons ontwerp hadden geupload via onze klantenlogin, kregen we een erg positieve reactie terug. F&F kon zich goed vinden in het ontwerp en onze toelichting op het ontwerp. Het is toch altijd even een spannend moment wanneer we weer iets verder buiten de lijntjes hebben gekleurd dan voorheen. Zo hadden we het voorstel gedaan voor een andere typeface.

Ontwikkelingsfase

Na de feedback was het tijd voor hardcoding, oftewel het duiken in de PHP en CSS.

Aangezien alle tekstuele content voorhanden was, konden we hiermee snel aan de slag. Wat in het begin nog een redelijke uitdaging bleek, was het feit dat F&F de teksten hadden gebaseerd op de indeling zoals die op de oude Flashwebsite bestond. Hierdoor waren er in de tekst veel kleine alinea's. We konden dit uiteindelijk goed oplossen door gebruik te maken van custom fields, die de teksten voor F&F aanpasbaar zouden maken. F&F greep de herprofilering van de website aan om een nieuwe weg in te slaan. Het gebruik van een @ (apenstaartje) zetten zij in om hun veelzijdigheid te tonen. Zo hadden zij het apenstaartje in pagina-titels verwerkt om aan te geven op welke locaties en gebieden Fit & Fruitig actief is. Op de @the gym-pagina zouden alle activiteiten komen te staan die F&F onderneemt op locaties anders dan hun eigen locatie. Wij vonden het een erg leuke en verfrissende aanpak. We stelden F&F voor om het voor de bezoeker iets overzichtelijker te maken. F&F stemde hiermee in, en leverde korte teksten aan die op de homepage de inhoud van de @-pagina's weergaven. Op de oude Flashwebsite bestond een simpele lifestyle checkt in de vorm van een online-test, welkedoor veel bezoekers goed werd ontvangen. F&F wilde daarom graag de test behouden. Het interactieve karakter van de test wilden we graag behouden. Dit deden we door gebruik te maken van Javascript/AJAX. Daarnaast ontwierpen we een icoon voor de test waarin we het door ons eerder onworpen F&F icoon verwerkten. Ook ontwierpen we icons om de test-resultaten visueel aantrekkelijker te maken.

Het groot aantal onderwerpen dat F&F wilden aansnijden op de nieuwe website, verdeelden we met behulp van Javascript gestuurde tabbladen. Deze verdeling van onderwerpen pasten wij onder andere toe op de @ The Lifestyle Studio-pagina, waarop de verschillende eigenschappen van F&F arrangementen onder de verschillende tabbladen kwam te staan. Uiteraard ontwierpen we ook een login-pagina, die zowel F&F klanten als potentiële klanten moest aanspreken. Website-bezoekers die al klant zijn van F&F zouden op deze pagina kunnen inloggen op hun persoonlijke Fit & Fruitig Klantenprofiel-account. Potentiële klanten zouden op deze pagina gewezen worden op wat ze missen wanneer ze geen klant zijn bij F&F.

Een pagina die al bestond op de oude F&F-website was de media-pagina; een resource waar de website-bezoeker een voorproefje krijgt op lifestyle managament op de 'de Fit & Fruitig manier'. Aangezien dit onderdeel het op de oude website goed deed, kwam de pagina ook de nieuwe website terug, maar dan in een nieuwe jasje gestoken.

Oplevering

Op 27 juni jl. organiseerde Fit & Fruitig een open dag ter promotie van hun eigen ruimte; de Lifestyle Studio aan de Amsteldijk in Amsterdam. Ze wilden de website dan ook op de vooravond van de open dag online hebben.De open dag zelf was een groot succes, hopelijk stiekem ook een beetje door de nieuwe Fit & Fruitig website.