The Just Isn’t Music (JIM) website, launched last week, was conceived way back in early 2010 in a Shoreditch cafe. The idea was to create a website that would build on existing visual assets into something totally new that would remain fresh over the months and (hopefully) years …. oh, and the entire website had to be displayed on a single page. No problem, I said.

Fast-forward to July 2011 and the new JIM website is finally launched. But what happened in the eighteen months since it all began?

We already had the look and feel created for a previous incarnation of the website (credit: George Wu) that never left the launchpad so this gave us a strong starting-point for the visual style. But the layout needed a complete overhaul to realise the one page concept and it was critical to get the user experience right first time to ensure visitors instantly understood how to navigate the site.

The modular panel layout was designed to be re-ordered and added to easily (panel background colours can also be changed to suit requirements). A system of colour-coded hyperlinks was developed that would distinguish internal links (navigation, tabs, buttons) from external links, so the user experience was never disrupted by abrupt jumps to external websites. The navigation remains anchored at the top of the page so the quick-links and music player are always visible.

Because of the single page layout and the high amount of information to display we had to use Javascript to show and hide content dynamically. I turned to JQuery for most of the core UI functionality and animation effects. These are just some of the plugins I used:

— jScrollPane by Kelvin Luck plugin is used to customise the styling of the panel scrollbars;
— JQuery AviaSlider slideshow plugin powers the Featured panel;
— jQuery.LocalScroll and jQuery.scrollTo plugins by Ariel Flesler enable the animated page scrolling and #hash address linking;
— ExternalInterface plugin allows Javascript to trigger play/stop actions in the Flash audio & video players.

What goes on behind the website is also worth mentioning. The site is integrated with a WordPress CMS with a few extra plugins installed to enable the advanced features of the site, including the MagicFields plugin that allows uploading of images, music tracks, and videos. The WordPress theme was built from scratch to display everything on one page and bypass a lot of the standard WordPress functionality.

Future developments include HTML5 audio/video players to replace the current Flash-based players, and a web-app version of the size optimised for mobile devices. So stay tuned!

Client: Ninja Tune / Just Isn’t Music
Design + Build: SuperNova
Creative: Ben Stevens, George Wu

www.justisntmusic.com »

New showreel website for director, Nick Jones.

Nick’s directing credits include over 75 TV Commercials, online virals and sponsorship idents alongside 40 hours of broadcast television – across Comedy, Drama and Factual Entertainment genres.

http://nickjones.uk.com »

I worked with LCI during March/April 2011 to create a number of interactive games and applications for the new Our Planet visitors centre in St Lucia.

Games include ‘Invaders’ where players have to protect an island’s native species from invasive species on visiting boats, and an ‘Iguana game’ where players have to guide a family of baby iguanas to the safety of the tree canopy while avoiding predatory cats.

Flash development: Ben Stevens
Design: LCI

Letter Layers approached SuperNova to create an educational app for iPhone / iPod touch based on their patented method of teaching cursive writing.

We helped Letter Layers to bring their ideas to reality; from the initial briefing meetings, through the complex design process and the programming of the application, to distribution on the App Store.

Given the limited screen size of the iPhone & iPod touch we faced a number of design challenges. It was important that the letter outlines were drawn so that a child could easily trace them with their finger and work equally well as a single letter, a two-letter join, or as part of a word. We also needed to make the process of constructing each letter (using their patented letter layers technique) as clear and easy-to-understand as possible.

We commissioned voiceover artists to record a narrated guide for each step of the app, which supports and encourages the child as they are using the app. Voiceovers were recorded in both UK and American accents.

An iPad version of ‘abc Joined Up’ was later released in March 2011.

Client: Letter Layers
Design: SuperNova
Creative: Ben Stevens, Darren Walters
Programming: Lloyd Harrison

www.abcjoinedup.com »
iTunes link »

Physics-based Flash game for Cadbury Spots vs Stripes campaign.
Awarded FWA Site of the Day 31 October 2010.

Flash development: Ben Stevens, Willian Munhoz
Design: rehabstudio / Fallon

More details on rehab website »

A nice little website for my old studio mates, Household.

Build: Ben Stevens / SuperNova
Design: Household

www.house-hold.org »

Showreel Flash website for Backwater – a promotional film & content company.

backwater.co.uk »

New logo design for Rock Constructions. The guys at Rock were reluctant to change their existing hand-drawn logo having been the identity for the company for nearly twenty years. So after (what seems like) a couple years of gentle persuasion and numerous logo proposals, we came up with this bold new identity that retains the ‘ethos’ of the original while updating it with a refined and modern esthetic. The new geometric 3D-style logo was designed to represent the company’s stage design & construction capabilities.

The Rock Constructions website was also updated with a comprehensive portfolio of their work from the past thirty years.

rockconstructions.co.uk »

Flash website for the UK-based music producer, Matt Rowe.

The website, created using Flash, is an immersive and interactive 3D music studio. Visitors are able to explore the website using interactive elements in the studio – for example, clicking on the synthesizer opens the ‘Music’ panel were visitors can listen to clips of tracks produced by Matt Rowe. The website was designed by Form and build by rehabstudio.

Flash development: Ben Stevens
Build: rehabstudio
Art direction: Form

Flash/Papervision3D build for the KangaROOS Global website.

User-submitted photos are mapped by country of origin on a 3D globe that visitors can drag and rotate. The site has several innovative features, including different graphics for night and day (the graphics switch over at local sunset/sunrise times), geographic location lookup by IP-address, and localised data such as weather conditions updated via an external XML feed.

The animated 3D ribbons are based on original code by Soulwire »

Flash/Papervision3D development: Ben Stevens
Design: rehabstudio

I have worked with production company WorldWide Pictures on interactive projects for Visa Europe over the last few years.

Together we have produced interactive tools and CD/DVD e-brochures for Visa’s internal and external communications, including an interactive product globe (pictured above) and e-brochures for their International Travel and Premium product propositions.

Design & development: Ben Stevens / SuperNova
Production: WWP

PRELUDE is a interactive project for the European Environment Agency that explores five possible futures for Europe based on land usage. The rather unexciting subject matter was brought to life with animated movies and visually exciting interactive tools – including an interactive data library that supports the key arguments behind each of the five scenarios.

Flash development & animation: Ben Stevens
Design: N1 Creative
Agency: WorldWidePictures

A multi-lingual game (25 languages) created for the European Environment Agency that aims to educate kids how to make the right choices to help the environment.

Flash development: Ben Stevens
Design: N1 Creative
Agency: WorldWidePictures

First up is Nick Jones, a director who has worked on commercials for the likes of Subway, 118 118, Match.com, and Ebay, as well as directing several TV dramas and comedy sketches. More info here.

Visit Nick Jones’ website

Next is a website for freelance film editor, Mark Easton. Having previously been a lead editor at the BBC, he’s been involved with some very high-profile Panorama documentaries over the last few years. More info here.

Visit Mark Easton’s website

New website for ex-BBC, now freelance film editor – Mark Easton.

Mark has edited a number of high-profile documentaries for the BBC and other networks, including: ‘Panorama Undercover Care: The Abuse Exposed’, ‘BP: $30 Billion Blowout’, and ‘Total Recall: The Total Story’.

www.markeaston.tv »

Amazing interactive music video created using HTML5 & WebGL. You’ll probably need to use Google Chrome web browser to view the video in all its glory.

http://ro.me

A fun project by the guys at FWA streaming live video from studios around the world.

theFWA.tv

Video of an original Eames ‘Powers Of Ten’ flipbook (via @motherlondon)

Flash website build for Santhosh.

Flash development: Ben Stevens
Design: ETV Online

www.santhoshdance.com »

Website design & build for Spalding florists, Daisies Flower Shop. Background illustrations by the multi-talented Emma Peake.

www.daisiesflowershop.com »