Loading ...

Responses by Ben Marsh, lead designer, Nick Lewis, creative technologist and Marj Newnham, account executive, Fiasco Design

Background: Our weeklong creative holiday gives us time to explore untapped ideas and find new technologies and programs to play with. With a focus on branding and web design, we use side projects to experiment and flex creative muscles in disciplines totally outside of the day-to-day commercial work and comfort zone. Self-initiated projects are a great way to explore in-house creative pursuits, evolving skill sets and promoting the talents and energy of the studio. The project was run in the form of design sprints, with daily stand-ups, sketching sessions and the creation of quick prototypes, before fine-tuning and final production towards the end of the week. The result was New Life, an online interactive journey through the dark but touching parable, about a mother’s struggle with grief.

Challenges: Since we had limited time, our main character and overall design aesthetic had to be simple, with a fairly abstract form. The pared-back design also helped to detract from the written word, and speed up the render process.

Favorite details: This was our first foray into a 3-D animation project of this scale. To begin, we asked our head of creative Tom Morris to define the pace of the storytelling and work on the flow of the narrative, while drawing upon the artistic skills of our account executive Marj Newnham to illustrate the storyboards. Our designer Ben Marsh tinkered with music production to add depth and a sense of drama to the experience. Creative technologist Nick Lewis tied everything together, developing a neat digital platform, as well as animating the New Life titles created by our designer Jules Darze. If a member of the studio wasn’t directly hands on with the project, they were certainly involved with reviews and direction guiding. It was a solid team effort.

Technical features: With such a quick turn around, we needed to try and keep things simple. The main interactive layer was made with a number of buttons that could be clicked. The rest of the site uses a few non-interactive layers to add the text and additional animations from Bodymovin, and canvas elements to add texture and depth. The main development challenge was how to handle the looping sounds, mouse interactions and large video files while keeping the pace feeling smooth. A lot of timing functions and a little math went into manually coding the text layers and delaying videos to ensure they played in time with each other. The code may not be that beautiful to look at, but the end result certainly is.

a-new.life

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In