I wanted an easy to navigate website where the viewer felt they were actually walking into the African bush and experience its "magic".  FLUID7 did not disappoint.

Rowena Paxton, Owner

I was looking for a small team of talented individuals  that could think "out of the box", understand my vision, interpret my ideas and then produce something exceptional.  Not an easy brief!  I wanted branding and logo design, business cards and an easy to navigate website where the viewer felt they were actually walking into the African bush and experience its "magic".  FLUID7 did not disappoint.

Interactive Journey

Interactive Journey

We knew quite quickly that we wanted a "single page site" that set the landscape for users to scroll through, and we had to do it without using Flash. We also knew that we wanted the site to be photo-based, but needed to strike a balance between the realism of the photos and the enchanted fiction of the tales, all told under the full moon. The result is a pallet of rich colours and textures all brought together by an HTML5/JQuery site that stitches together multiple layers of images to create 'depth of field' to be experienced as the scenes slide past at different speeds, creating the illusion of strolling through Africa

View it for yourself: talesofthefullmoon.com

Inline Audio Player

Inline Audio Player

The AudioBook previews needed to be integral to the design of each scene, so the signpost was adopted to present a familiar place for users to click to listen and buy the tale. An HTML5 audio player was chosen to allow audio playback, allowing the different tales to be be aware of each other and not overlap any other audio that was already playing.

Browsing The Magical Tales

Browsing The Magical Tales

11 scenes were created to display the introduction and the 10 tales. Each was created to provide a balance of uniqueness to represent the principle characters of the tale, whilst maintaining common elements to allow all the scenes to flow together as one. A simple next and previous system was suspended from the top of the viewing area to allow users to flick through, with an index board that allows user to see where they are in the site as well as jump-to a different tale.

Tweaking Performance

Tweaking Performance

Being an imaged-based site with 11 scenes stitched together with some images being thousands of pixels wide, we knew page load times were going to be higher than normal, despite our image optimising. So we developed a pre-loader that displays the first scene to visitors whilst disabling the navigation until the other scenes are ready to go.

Characters Photoshop'd With Love

Characters Photoshop'd With Love

The process to the final artwork was quite involved. We started by flicking through hundreds of photos that we were supplied from a recent safari, shortlisting the photos that best represented the characters and that could be used to create the landscape. We then pitched our selection to Planet Afryca for the final pick before beginning the heavy task of extracting each of the characters from their actual photos ready for inclusion in the final composite. The final result was a uniquely realistic African experience.