When a New York catering company approached me last year and asked if I'd like to work with them, little did I know at the time that it would become one of my biggest projects to date; it overhauled the entire way I work, I explored and worked with technologies that I rarely had a chance to work with, and it amounted to over 30,000 lines of handwritten JavaScript.

Project Background & Planning

The client, Creative Edge Parties, were fans of my work to date, and after a few initial meet and greets via Skype they gave me my idea of design heaven - a blank slate to create an experimental site for them that was truly cutting edge.

This was the sort of opportunity that rarely presented itself in my time working in an agency, and after going full-time freelance earlier last year I had a point to prove. The goal was simple, Creative Edge were as keen as I was to push the boundaries of the web and create something that was a combination of fun, quirky, experimental and engaging and they were happy to follow my lead.

From concept to creation, the site was a solo project - an extremely daunting task looking back on it, but it meant a blue-sky opportunity to really push abilities and technical understanding, taking it as an opportunity to reshape the way I worked on larger-scale applications and combine that with new techniques and technologies.

Visual Style, Direction & Inspiration

For the overall concept and the look and feel for the new site, both the name 'Creative Edge' and their slogan 'Not Just Another Chicken Dinner' were two fantastic angles to work with, and they helped form the two key creative principles behind the site.

The first in that visually it needed to blend the organic (think food, free-range and fresh) with technology (think mechanical, structured, and hard edges). This resulted in the style of sharp-edged mechanical shapes that morphed and changed form organically as users interacted with them which carried throughout the site.

The second in being that every aspect of the site should reflect the notion of 'Not just another...'. Such as 'not just another menu', 'not just another button', 'not just another page' and so on, which fed back in nicely to the first principle.

Because of the heavy focus in interactivity and animation throughout, it became ever more important to balance that out so the result didn't feel overweighed, resulting in a focus on minimalism and uniformity over the interface.

The Concept

The experimental nature of the site became a big focus for the overall concept that sat behind it. It aimed to use a series of engaging and interactive 'experiments' that could tell a story of Creative Edge Parties that reflected their ethos, values, and business.

The way they approach food is exciting, their personalised and individualistic approach to every event is refreshing, and their brand is all about engagement; to do them justice, the new site had to reflect this in every way.

I loved this idea of creating a shared experience rather than an insular one, so social aspects were crucial to the way the site worked. It isn't just about showing visitors what Creative Edge Parties are about, it is also about visitors being able to explore their own "Creative Edge" and share that with others, and in the process encourage them to learn more about Creative Edge Parties and what they offer in a more natural way.

Experiment, Experiment, Experiment

I love to experiment in my work; it's how we learn, it's how we find new ways of working, and it's how we discover exciting new avenues and directions to our work that we may not have been able to fathom before. Creative Edge Parties was no exception.

Coming from a design background, I hold the belief that when it comes to the web, and particularly interactive, there's just some things that you'd never be able to design as static visuals, or at least would be exceptionally difficult or impractical to. Which is where the blend between design and code becomes essential.

Experimentation made up a huge aspect of the Creative Edge Parties site, especially because at that point I was working in technologies that I'd previously only ever scratched the surface of. A large portion of the time during the site build was made up of experimenting with ideas, while learning advanced methods to work in these technologies (and the quirks, performance and cross-browser challenges they bring), particularly when it came to WebGL.

This meant lots and lots of prototyping - creating working examples of my ideas and building on them. I'm fortunate enough to be at a technical level where my key limitations in creating things I've never made before is in learning the ins-and-outs of the various APIs while using existing knowledge to expand on them - while I knew what I wanted to do, I had to learn how to achieve it, and it wouldn't have been possible without experimenting.

Technologies Behind The Project

The Creative Edge Parties site is a heavily JavaScript based application. It uses Backbone (+Marionette) and Browserify for its base web application structure.

Standard HTML5 and CSS3 implementations aside, the site uses a lot of WebGL/Canvas (Three. js) and inline SVG (I wrote a large number of utilities for working with and directly manipulating inline SVG content). CSS is compiled from Compass SCSS, and for core animation, the site utilizes GSAP.

For task automation (such as auto-compiling code, images, sprites, SCSS etc) I use Gulp as my task runner.

Challenges

Because of the experimental nature of the site, learning challenges aside, there were a number of technical challenges to overcome.

Working with modern and cutting-edge technologies on web such as WebGL/Canvas or even inline SVG is like walking a tight rope; especially when it comes to catering between the capabilities of the browser or the device it's being viewed on.

In an ideal world, we'd never have to cater for older browsers, everyone should just be on the latest and greatest version of Chrome/Firefox/Safari and on the best device etc. and everything would just be fabulous; but it's just not the case, for the moment at least.

It's probably the biggest challenge when working with these new technologies, they offer so much potential and opportunity to make things bigger, better and faster; but always at the back of your mind you have to be considering older browsers and mitigate it as much as possible.

Pretty much all aspects of functionality within the Creative Edge Parties site exist in two (or in some cases even three!) functional states based on feature and capability detection.

In layman's terms, the "conversations" the site has with the browser go a bit like this:

"Don't have WebGL? Ok, how about a simpler Canvas version? What!? No canvas!?, OK here's a standard version."

"Don't support inline SVG? That's a shame, no problem, have static images instead."

"Hmm, you're on a tablet/mobile device, I worry that some of these effects might slow you down a bit, I'm going to simplify them for you a bit if that's OK!?"<?

Of course, it's never going to be perfect, and I like to see it as more of a way to have the application make allowances and be flexible where it can to ensure users can still get a decent experience while still allowing the site to use some stunning technologies, because it'd be a shame not to!

Mobile And Tablet Devices

A key aspect to my work is in being able to target mobile and tablet devices; it was a huge deal for me that iOS8 finally enabled WebGL in the browser, and a number of high-end android devices have it enabled already. So the site was heavily built and tested with touch devices in mind as well as carefully trying to balance between performance and functionality.

Closing Note

This has been one of those projects that's a rollercoaster journey; from the slightly daunting prospect of having the whole design and build in front of you, to the extremely daunting prospect of taking it as an opportunity to totally overhauling the way you work, to going as far outside of your comfort zone as humanly possible, to getting some really great feedback to drive you forward, to changing your mind about aspects or functionality that you feel doesn't work and taking it on the chin, to the hundreds if not thousands of times the browser has been refreshed in testing, to getting everything up and running, to sharing and being receptive to feedback, to reflecting back on what you've produced, to being excited to launch it.

I couldn't recommend enough to everyone that it's worth every ounce of effort to go outside of your comfort zone when trying to be better at what you do, whether that's a singular or team effort, the amount of new things you'll learn in the process is worth it in itself!

Visit Creative Edge Parties site »     |     See more sites by Adam »