Een nieuwe website in pastelkleuren voor Lief & Stoer Babymassage

Tussen Den Haag en Delft, in het centrum van Nootdorp, is een bijzondere praktijk gevestigd. De initiatiefnemer is Colinda Fierlier. De praktijk: Lief & Stoer Babymassage. Dat ze veel meer doet dan alleen babymassage, daar kwam ik pas achter toen ik van Colinda de opdracht kreeg om een nieuwe website te ontwikkelen. We hebben het gedegen aangepakt, aangezien de oude site verouderd was en onoverzichtelijk was geworden door het breder geworden aanbod van producten en diensten. Ik maakte niet alleen een nieuw ontwerp (webdesign), maar bedacht ook de indeling en navigatie van de site en verzorgde de content (fotoselectie en het schrijven van alle teksten).

 

Het werken aan een nieuwe website voor Lief & Stoer gaf mij weer een beetje dat ‘roze wolk’ gevoel. Terug naar de tijd van zwangerschap en baby’s. En alles in zachte tinten en vriendelijke letters, en herkenbare klachten en vragen. Tja. Als ik Colinda zo’n 10 jaar eerder had leren kennen, dan was ik zeker klant bij haar geworden. Als gecertificeerd BabyCoach biedt ze in haar praktijk namelijk een veelheid aan diensten voor aanstaande en jonge moeders en hun baby: massages, workshops en persoonlijk advies. Hoog tijd dus om dit op een overzichtelijke en laagdrempelige manier online te gaan communiceren.

Over de oude website was Colinda kort: die voldeed in z’n geheel niet meer en was door de vele tussentijds aanpassingen een warboel van pagina’s en teksten geworden. Ze was op zoek naar iemand die haar zowel met de vorm als met de inhoud en bouw kon helpen. Colinda: “Ik ben naar Gaby doorverwezen omdat Oil4 prettige ervaringen met haar had qua ontwerp van websites. Ik richt me op (aanstaande) en jonge moeders  en dit vereist een ontwerper die zich kan inleven in de doelgroep en mijn diensten. Door eerdere negatieve ervaringen met een website-ontwerper had ik er zelf niet zoveel zin meer in. Maar dat weerhield Gaby er niet van om vol enthousiasme een mooie website te ontwikkelen.”

“Ik was op achterstand gezet door een webbouwer die meer beloofde dan leverde. Gaby heeft alsnog een mooie website voor Lief & Stoer weten te realiseren.”

“Gaby had aan een half woord genoeg en is zo heerlijk proactief. Dat had ik nodig! Ze zegt wat ze doet en doet wat ze zegt, heel prettig.”

Na een kennismakingsgesprek waarin ik Colinda heb uitgelegd hoe ik te werk zou gaan, ben ik aan de opdracht begonnen.

Stap 1. Inventarisatie van de inhoud

Om een goede en logische navigatiestructuur te maken (welke stappen wil je de bezoekers laten nemen, wat is de Call tot Action, hoe deel je de website in e.d.), moet je weten wat je wilt vertellen. Wat zijn je producten/diensten, waarom zouden mensen dat bij jou (en niet bij iemand anders) moeten afnemen, hoe kunnen ze in contact met je komen enz.

Al snel werd me duidelijk dat de diensten van Lief & Stoer in 3 categorieën kunnen worden ingedeeld: Massages, Workshops en Persoonlijk advies. Die thema’s werden het uitgangspunt van het aanbod. Op de homepage zijn ze niet alleen in de menubalk bovenin zichtbaar, je ziet ze ook terug met een passende illustratie en korte tekst, als je naar beneden scrollt.

Stap 2. Navigatiestructuur maken

Voordat ik met het ontwerpen van de homepage begin, maak ik een navigatiestructuur op een A4’tje. Dat geeft mijzelf, maar ook de webbouwer en de klant inzicht in de opbouw van de site. De items in de menubalk, landingspagina’s en de verbindingen leg ik vast in zo’n schema. Als de opdrachtgever zich kan vinden in de structuur, ga ik verder met het webdesign.

Stap 3. Schetsontwerp homepage

De homepage is de belangrijkste pagina van je website. Het is de eerste indruk, en je krijgt geen tweede kans om je bezoekers vast te houden. Dat betekent dat het ontwerp beeldend, informatief en inspirerend moet zijn, maar ook dat de bezoeker het antwoord vindt op de vraag die hij/zij heeft. To-the-point dus, in woord en beeld. Hieronder een deel van de schets van de homepage, ‘boven de vouw’. Hier vind je het resultaat online.

Stap 4. Wireframes maken

Na akkoord op het ontwerp voor de homepage, ben ik de andere pagina’s gaan ontwerpen. Dit kan door soortgelijke schetsen te maken, maar vaak kun je volstaan met het maken van wireframes, een blokkenschema van de indeling van de pagina, waarbij je aangeeft wat tekst is en wat beeld. Het kleurenpalet, de webfonts en andere huisstijlelementen zijn immers al bepaald en gebruikt in het ontwerp van de homepage. Hieronder drie schetsen: van de blogpagina’s (links en midden) en van de pagina met workshops (rechts).

Stap 5. Briefing en bestanden bij webbouwer aanleveren

De website van Lief & Stoer is gebouwd door Oil4. Nadat alle ontwerpen en de indeling zijn goedgekeurd door de opdrachtgever, lever ik de bestanden bij de webbouwer aan. Denk daarbij aan kleurenschema, letterfonts, logo en huisstijlelementen, en ook alle illustraties (gemaakt door Debbi Verbakel), foto’s, teksten per pagina enz. enz. Kortom, een hele berg, maar ik zorg er wel altijd voor dat alles overzichtelijk in mapjes is ingedeeld, zodat het goed werkbaar is voor een web developer.

Wil je meer weten over wat ik voor de Lief & Stoer en andere bedrijven heb gemaakt en gedaan? Neem dan gerust even contact met me op via deze button:

Webdevelopment by Oil4.