Dancing A Road Less Travelled!

Dancing Road Website

One thing about website design, you can count on every project coming with a very unique set of challenges. Some are simple. Some are difficult. And some, you just take a few deep breaths and jump in, not really knowing the extent of the challenges that lie ahead! Such was the case with the website for Gena Ashwell and Helen Leake’s new film and screen production company, Dancing Road Productions.

http://www.dancingroad.com

The company is a subsidiary of DuoArt Productions (Black & White, Swerve, Wolf Creek 2), and aims to develop and produce high concept quality entertainment with wide international audience appeal, within market considered budgets. The culture is ‘fun’ but ‘professional’, as depicted by the name Dancing Road and also the logo, an animated upside-down projector Gena and Helen affectionately named ‘Freddy’.

Design

The website’s front-end appearance is designed to harmonise with Dancing Road‘s playful brand while still maintaining a professional tone through large amounts of negative space and flattened design elements. However, the visitor’s experience is taken a step further, adopting animated buttons, pop-up feature boxes and sliding page sections to create the ‘feel’ of a journey or road. This offers synergy with the brand, and also reflects the journey of storytelling and filmmaking. A path of discovery to engage the viewer and intuitively lead them through the site.

Technically Speaking

On the surface, it all looks pretty straight forward. And yes, a wonderful jQuery plugin, Alvarotrigo’s fullPage.js (http://alvarotrigo.com/fullPage/) provides the backbone jQuery engine behind the functionality. But, the challenge was integrating the plugin with the robust and very structured Genesis framework by StudioPress. I’ve sung the praises of Genesis before. It’s the Rolls-Royce in parent frameworks for WordPress sites. However, it seemed that fullPage.js had not yet been successfully integrated with the Genesis framework. Or at least, not that I could find. And so, with Gena and Helen already sold on the ‘sliding’ concept, the challenge was firmly set.

I won’t use this forum to detail the specifics of the solution (feel free to enquire). But in a nutshell, a customised home page template (adopting the fullPage.js coding protocols), some slightly innovative coding and a great deal of trial and error, eventually saw the Dancing Road ‘sliding’ home page come together. In addition to the plugin functionality, the site also features full responsiveness, logo-switching (between landscape and portrait) dependent on viewport ratio, Fancybox feature pop-ups, blog page, twitter feed, and all the stellar performance and security features that are heralded trademarks of the Genesis framework.

Client Feedback

I’m always very grateful for feedback from clients. And, I’d like to thank Gena and Helen for this wonderful acknowledgement …

“We are thrilled to launch the new dancing road website! Jon Barratt @ Krolyn has truly taken our vision and injected the essence of unique creativity and fun that reflects our core values.”

I wish both Gena and Helen many fortunes along their Dancing Road.

Spread the Word!
Share on FacebookTweet about this on TwitterShare on LinkedInPin on PinterestShare on StumbleUponEmail to someone

2 thoughts on “Dancing A Road Less Travelled!

  1. I found the fullpage.js solution and also have genesis framework. I was just looking around if I could find a way of inserting it in genesis framework. The only mention I found was on your site. (nice website by the way). You seem to have done it. My question is, was it very complex and complicated in the end? Or is it doable? I am no expert in coding , but i tend to learn on the way. You invite to enquire, so here i am? If you have the time and will to send me in the right direction, I would appreciate it. Thank you.

Leave a Reply to Jon Barratt Cancel reply

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

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>