Ian James Cox - Interactive designer in web and print

New Work - Supponor 2

Filed in Code / Design

My first real piece of creative since I returned to Flame Digital. It was an interesting brief. To completely revamp Supponor’s online presence, to showcase and communicate clearly their state of the art offering. It gave us the chance to create something Unique. With the aid of PNG masking and funky Jquery action we have delivered. Here’s what the client had to say..

“Like our product, Flame Digital’s design is fresh, cutting edge and pushes boundaries. They’ve successfully taken a technically complex idea and communicated it clearly, and in the most accessible way.”

PNG Masks

I wanted each page to be different. To aid that I've used a clever technique that let's the logo color change. I've used transparent PNG's to create a mask that lets the layers underneath peer through. I'll be writing another blog post about this effect soon. As you can see below The combination of the section strip and the background image create a different tint, texture for each page.

Grid Indicator

Another nice little feature is the little location dot in the bottom right of the screen. Using Jquery again to swap the images it adds the overall effect. You could do some pretty nifty stuff with the combination of the Jquery slide and the indicator. i will be using them in other projects in the future.

More reading

Visit the Supponor web site.

View the Flame Digital press release

View the How-do article