Nice Pictures are a relatively young company made up of a group of experienced and dedicated film producers focused on delivering quality feature films for cinema and DVD.

They commissioned me to develop and deploy a small website in order to create a central repository to keep investors informed of their progress, to advertise the seven films they currently hold on their slate, and to attract more interest from film viewers and investors alike.

I was given the copy for each page and a very loose open-ended brief: as long as it displayed their films, information about them, and their email addresses (they specifically asked not to have an on-line contact form), the rest was up to me.  I always enjoy this sort of project as it allows for a lot of creativity and exploration into ideas that would usually be buried under ponderous client requirements.

Nice Pictures homepage

Enlisting the talent of a good friend of mine for branding and design (more information on this process on his blog here: Latest Work – New Brand, Nice Pictures), Ant designed the slick, unique and clean interface which I then implemented into the functioning site you see today.

JQuery is well-known for it’s animation and movement abilities so I opted to built this site specifically with JQuery as a Flash alternative: all the fluidity and motion you would expect from a Flash-based site with the cross-browser compatibility and search engine friendliness you get from XHTML and CSS.

There are three main areas of dynamic interactivity:

Central Panel Slide In/Out:

Movement between pages on the site is accompanied by a smooth effect of the central panel sliding away and the new page content sliding in. I decided against using AJAX to dynamically load the page contents into an outside frame (for the SEO implications), so each new page loads and slides in, whilst each external link triggers a wait whilst the content slides out (during which the browser begins to fetch the next page contents), and then loads the new page:

Nice Pictures sliding Pane

Home Page Book Shelf

Displaying six films from the company’s slate on the main page using a carousel effect to display more information (and links to view each film’s page) in a book shelf arrangement allows for them to decide which films they want to promote in this space, and grants access to a larger amount of information than would usually fit in such a small space.

Nice Pictures Animated Bookshelf

Vertical Self-Centering

Using a listening device in JQuery this website will automatically rearrange itself to sit perfectly central in your browser window when you re-size it, keeping the important information central to the browser’s attention. A small amount of easing makes this movement less jarring, allowing the viewer’s eye to easily follow.