Epica Microsite

Working at Visual Jazz I tend to get to involved with some pretty cool Holden projects – a lot of which are flash based microsites.

One of those sites was for the Holden Epica.

Built entirely in flash, I was responsible for coding most of this site. In comparison to some of the other websites I’ve worked on it wasn’t very big, but it did come up looking pretty cool with a very cool / clean look that I really liked.

Read on to get a bit of a spiel and then check it out at here.

Using the angle of ticking all the boxes, the designer created a very clean approach for the Epica site. Nice clean images with a lot of white space and green highlighting created a look that could best be described as ‘fresh’.

The home page uses a pretty cool ‘parallax’ effect, with the main features floating around a central image of the car. When one of these features are clicked, it expands to show an image of the related feature page, as well as a small sub-menu allowing direct access to specific parts of that section.

One of my favourite parts of the site is the ‘Clever Design’ section. It uses a floating ‘tick’ technique that glides around the image of the car before expanding to display an exploded view of the details. It was a pretty simple technique to create, using different tween equations for the x and y axis to create the overshooting effect.

The transition / wipe effect on the main images was created using a simple gradient mask which was tweened across the width of the screen.

The ‘Key Features’ section of the site uses a similar but different approach. It has an accordian-style list of the different features, using the ‘tick’ as a highlight to show where that particular feature is in the car.

Other sections of the site include a model comparison page, a photo gallery, and the almost mandatory ‘colour picker’, where you can check out all the available colours.

Go and check it out at the Holden Epica Site if you haven’t already.

{lang: 'en-GB'}
Posted in Online Showcase | Tagged , , , | Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *


nine × 1 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>