New website: face-box.co.za

Background

Face-box is a portable photo booth that’s been touring the country, snapping away at private and corporate functions. It seems to have taken off and people are loving it. It gives users a very slick service, basically allowing you to pose, press the shutter button and collect a large, high quality print 15 seconds later. Fresh on the heels of Markex, the new site has gone up and should meet the needs of clients for the foreseeable future. Visit the site here.

The Brief

The brief was simple: make something that looks good, helps to sell the product and captures the fun of the brand without compromising the value of professionalism inherent in the product. The site needed to be produced on a modest budget, allowing for easy updates without a CMS, and no HTML knowledge necessary. The site is both a new business tool as well as a place for people to view their snapshots from the event.

The Solution

The approach to the site combined a fun visual style with a flexible, easily configurable back-end. The application logic allows for a lot of flexibility from a maintenance and user point of view, considering no database or CMS was used. The site quickly communicates product intrinsics and benefits up front, allowing the user to find out more or take a look at the latest galleries immediately.

The gallery index offers predictive search functionality, allowing users to access any gallery within a maximum of two clicks on the site. The individual gallery page thumbnail system uses a table-less row structure, which allows for less code and very little configuration on the update side. Just drop the client’s images and logo in a new folder, give the gallery a name, decide how many thumbnails per page and it figures out the rest. A modal dialog for image zooming allows for faster loading and browsing of images (page reloads were a weakness of the old site). The custom LightBox script includes AJAX send-to-friend functionality and smart navigation buttons.

From a structural point of view, a div-based layout was implemented, with SIFR header tags. This allows for the preservation of content structure for SEO and acessibility purposes, while still looking great on the front end. The site relies heavily on jQuery core and plugins for cross-browser interactivity. This saved a LOT of time on the dev lifecycle. And, yes, it does work in IE6:)

At a glance:

Home page

1. User can quickly come to grips with what the product does. Flash slideshow quickly conveys how much fun people have in the box.
2. Floating front layer with dynamically resizing back shadow and filmstrip
3. Latest galleries quickly accessible from the home page

Gallery index page

4. Dropdown of active galleries listed chronologically. Administrator can easily hide galleries from public viewing and allow private viewing.
5. Predictive search functionality

Individual gallery

6. SIFR text allows for custom fonts without losing page structure. Gracefully degrades without Javascript.
7. Table-less thumbnails allow images to shuffle and fit according to width. Number of thumbs displayed can be changed by user or preset by administrator.

Full size image popup

8. AJAX send to friend mail form
9. Skinned interface with smart back / forward buttons