Bekijk de demo header hier online.

De interactieve header voor vtwonen bestaat uit een beeld met meerdere salontafels die op mouse-over in een illustratie of icoon veranderen. Bij mouse-over verschijnt naast een outline ook een blokje met daarin de naam, het materiaal en de prijs van de salontafel. Voor mobile devices geldt hetzelfde principe maar dan als er op het product wordt geklikt.

Het is de bedoeling dat de salontafel en het blokje klikbaar zijn en doorlinken naar de productpagina van de aangeklikte salontafel. Ik wilde dat het product zichtbaar zou blijven en geen complete illustratie zou worden zodat een geïnteresseerde bezoeker blijft zien hoe het product eruit ziet. Om duidelijk te maken dat de bezoeker over de salontafel kan gaan met de muis voor meer informatie heb ik het hartje toegevoegd dat vaker op vtwonen.nl gebruikt wordt.

Op de volgende beelden is te zien hoe ik de banner stapsgewijs heb gemaakt:

Sanne-Smulders-vtwonen-1

In het beeld stond al een salontafel, daar heb ik er nog twee uit de vtwonen collectie aan toegevoegd.

Sanne-Smulders-vtwonen-2

 

Sanne-Smulders-vtwonen-4

Vervolgens heb ik de rest van de elementen in Illustrator gemaakt en in op de juiste plek in het Photoshop document geplaatst.

Sanne-Smulders-vtwonen-5

 

Sanne-Smulders-vtwonen-6

 

Sanne-Smulders-vtwonen-7

 

Sanne-Smulders-vtwonen-9