Focus op storytelling bij nieuwe site voor DENK

DENK!, 2015 - 2016

Hoe creëer je een visueel pareltje voor een creatief marketingbureau dat zelf ijzersterk is in design en huisstijlen? Dat was de uitdaging toen we aan het project begonnen met DENK!.

We stonden in voor Digital branding, Webdesign, Development

DENK! showcase

Mission briefing

DENK! wil een verhaal vertellen. Ze willen weg van een klassieke voorstelling op basis van het bedrijf en de interne structuur. De content moet je daarom uitnodigend maken. Bezoekers worden meegezogen in de verhalen van klanten om zo overtuigd te raken van een samenwerking met DENK!. Dit doe je niet enkel met tekst, maar zeker ook met beelden.

De meest pakkende verhalen zijn persoonlijke getuigenissen en conversaties. We laten daarom zoveel mogelijk de klanten van DENK! aan het woord. Zij vertellen hun ervaring, DENK! kadert het binnen het grotere geheel. De bezoeker is de derde partij die de conversatie vervoegt.

Mission preparation

Knappe koppen samen aan tafel. De basis voor een snelle en efficiënte aanpak. We startten het project met een kickoff meeting. Hierbij waren zowel mensen van Wijs aanwezig als medewerkers van DENK!.

Vrij snel kwamen we tot een concept. Zodra je op de website komt, moet je meegezogen worden in de verhalen over DENK!. Geen droge bedrijfsvoorstelling. Wel oprechte getuigenissen met een sterke focus op sprekende visuals.

Het Oostendse marketingbureau ontwikkelt zelf onder andere huisstijlen en (offline) designs voor hun klanten. Het spreekt voor zich dat onze voorstellen dan ook door een strenge filter gingen.

Bezoekers ervaren emoties als ze op een website komen. Het juiste gevoel overbrengen is belangrijk om je boodschap zo “plakkend” mogelijk te maken. Tijdens de kickoff vertrokken we vanuit een uitgebreide moodboard. Na de boeiende workshop, waarbij de mensen van DENK! in detail hun mening gaven over de elementen op het bord, hadden we een basis om op voort te bouwen.

Mission execution

Bij Wijs bouwen we strategische partnerships uit. We werken niet vóór onze klanten, we werken mét onze klanten. Tijdens de eerste workshop werden zowat alle details vastgelegd van de huisstijl en look & feel. Typografie, kleuren, gevoel en sfeer; allemaal zaken waar onze doorwinterde designer Jonas De Geest onmiddellijk mee aan de slag kon. Stefan Jenart werkte na de workshop een high level structuur uit. Tom Hudders werkte met zijn 3 jaar ervaring als front-ender bij Wijs in tandem met de designer. Het duo stuurde van daaruit Tommy Van de Velde aan, de developer die voor technische elementen zorgde waar ze nodig waren. Een mooie demonstratie van werken als één geïntegreerd team. Het hele project werd in goede banen geleid door Marinka Van de Walle.

Schoonheid zit in details

Het verschil tussen “goed” en “uitstekend” is meestal maar een paar details. Het is daar waar wij die stap verder gaan.

Een grabbel uit de elementen die de site een niveau hoger tillen:

  • Losse pagina’s en een blog. De blog zetten we op een bijzondere manier op, zodat het een alternatief kan zijn voor de standaard navigatie.
  • De website is dynamisch en er is interactie mogelijk. Bijvoorbeeld lichtjes bewegende afbeeldingen bij het scrollen. Dit dankzij een grondige kennis van CSS 3.
  • Een indicatie van de leestijd. Op basis van het aantal woorden zorgt JavaScript bovenaan automatisch voor het aantal minuten dat je zal besteden aan het lezen.
  • Opvallende quotes van klanten onderaan elke pagina. Deze kunnen door DENK! met veel vrijheid ingevoerd en bewerkt worden. Quotes zetten de getuigenissen van klanten extra kracht bij. Social proof is een uitstekende manier om met verhalen bezoekers te overtuigen.

Ook mobiel moet de gebruikerservaring optimaal zijn

De mobiele ervaring van de website moet minstens even krachtig zijn als die op laptops en tablets. Focussen op visueel brengt een paar uitdagingen met zich mee. Grote, zware afbeeldingen laden veel trager op mobile devices én het kan voor schokken zorgen bij het scrollen.

Hoe hebben we dit opgelost? Bij het opladen van een afbeelding maakt het systeem automatisch twee versies aan: de grote versie en een gecomprimeerde versie voor mobile. Jouw browser kijkt bij het laden van een pagina hoe groot de ruimte is (mobiel of niet) en beslist dan of de lichte of zwaardere foto weergegeven wordt.

Met de html-tag <img src="x.jpg"/> voeg je een afbeelding toe op een pagina. Met sourceset (srcset) kan je dan meerdere groottes meegeven met de browser. Die kiest automatisch de optimale versie. Firefox en Internet Explorer ondersteunen dit helaas niet standaard. Daarom hebben we Picturefill gebruikt. Een JavaScript-file die aan Firefox en Internet Explorer vertelt wat de bedoeling is van “srcset”.

Tenslotte: onderaan een aantal pagina’s staat het plan van aanpak van DENK!. Op een groot scherm zie je dit als 5 stappen die naast elkaar staan. Schakel je over naar mobiel of verklein je je browser, dan verandert dit in een slider. Je ziet telkens één stap die het scherm vult en je kan swipen naar de volgende of de vorige.

DENK! plan van aanpak

Duidelijke afspraken maken goede vrienden

Een website waar storytelling en visuele ondersteuning centraal staat, komt pas tot zijn recht als enkel de meest geschikte afbeeldingen gebruikt worden. Afmetingen, kleuren en grootte van het bestand zijn zaken waar je best duidelijke afspraken over maakt.

We werkten eerst met dummy-afbeeldingen om de klant te laten zien wat de bedoeling is. Als ze bijvoorbeeld met een foto willen werken waar al tekst op staat, dan zetten ze dat tekstelement best zoveel mogelijk in het midden of naar rechts. Zo komt de titel van de pagina er niet over.

Voor alle zekerheid leverden we ook foto’s aan met “safe zones” om een “minimum ratio” mee te geven. Met andere woorden: het deel van de foto dat met zekerheid altijd te zien is op gelijk welk scherm en op om het even welk toestel. Dit kan soms verschillen omdat we de verhouding van het beeld (16/9) behouden, waardoor een deel onzichtbaar wordt. De belangrijkste elementen komen dus in die safe zone.

DENK! crops safezone

Mission debrief

We hebben ondervonden dat elk project een eigen aanpak verdient. We proberen de wensen van een klant dus niet te forceren binnen een kader dat we zelf uitgetekend hebben. We laten het kader mee vormgeven door de klant.

Ook voor een berg van een uitdaging met je merk? Bel ons voor een creatieve sprint.

Maak een afspraak

Bel ons +32 09 335 22 80

Sales Stijn

Laatste nieuwe pareltjes