Laminex: Website rebuild & front-end development

2011

Laminex: Website rebuild & front-end development

Brief

Build a custom front-end the laminex.com.au rebuild and integrate with a custom back-end framework built in Yii.

Context

This was during the years I was freelancing and consulting with MacDux in Melbourne. The client was Simon Richards Group (later part of CHE Proximity) who were leading a complete digital overhaul for Laminex.

The new site was to be built on a custom framework (Yii) and feature a rich catalogue of imagery and resources of all the Laminex products.

Solution

I was brought on board to bring the front-end to life. Specifically there were some 'hotspot' rollovers that need to be mapped to different background images.

When the user hovered over those hotspots they would bring up overlays of the material/product used in that part of the hero image. Users could then click into the popup to go directly the relevant product landing page.

Hotspot example, 2011

This was achieved by setting X and Y co-ords of hotspots that were mapped to specific products and background hero images. A custom slider in jQuery was then built that cycled through these images and rendered the hotspots and content above.

The site also included a feature where users could browse various materials and drag/drop these into a temporary cart so they can later order samples:

Materials, 2011

These could also be dragged and dropped from the site content to the footer - which was an ambitious bit of front-end work at the time:

Drag and drop footer, 2011

Most of my work revolved around taking the finished PSDs, converting to HTML/CSS and also building the custom JS that powered the hotspots and other interactions.