.

World Baking Day website

The Making of…

Introduction 

World Baking Day was launched in 2012 for cake-lovers around the world. 

This year we celebrated World Baking Day with the 'Who Will You Bake For?’ campaign. We often forget to tell the people who matter most why they make our lives a little bit easier, a lot more fun or infinitely more interesting. So we encouraged people to bake homemade cakes for someone close to them as a gesture of love or gratitude.

Alongside the website the campaign was supported by social, instore, PR events and broadcast partnerships in 13 countries around the world.

Andy Dawes and Josh King, the creative team working on the brief came up with the idea of telling little stories about why people might bake for each other. These stories would then be brought to life with illustration and simple interactions to give emphasis to the act of baking a cake for a friend or loved one. 

Many, many stories were written and these were eventually whittled down to 12 with the right mix of characters and quirky humour to hopefully raise a smile and inspire users to pledge to bake a cake for someone they know and the reasons why.

Once the simple structure for the stories was set, we began working on the art direction and user journeys that would define the design and hierarchy of the site.

Initial Development 

Using some simple wireframes and a basic working prototype, we fleshed out the site structure and user journeys over several iterations. At this point we could really start working on creating the look of the site and developing the interactions and transitions.

As part of the campaign we also had to develop an identity and some guidelines for how they should be used instore, at point of sale, and in other communications. We used a gift tag as a device to lock up the type and convey the idea of giving a present and a personal message, which tied in well with the narrative of the site.

When we first started thinking about the art direction we knew that we would use illustration to bring the stories to life. We also knew that we wanted to animate some of the illustrated elements using HTML, and make the site responsive and scalable, so using a vector based illustration style would be most appropriate for this approach. We collated mood boards of different illustrators that we liked and got a few of them to do us a style treatment based on our brief. The key thing for us was to keep the look simple but give the characters a quirky charm that would help to bring the stories to life.

Character design and animation

We were really excited to work with James Curran via Partizan, his initial treatments and previous work showed that he could really bring a sense of fun and an element of surprise to the stories with his animations. Here James gives us an insight into his approach: 

I’m much more of an animator than an illustrator, so when I’m designing characters I usually think more about how they’re going to move than how they look. With the initial character designs it was important to try to show movement to get across the quirky charm needed for the project. Using long, smooth, curved lines really helped to add a sense of motion while keeping the characters simple and fun. I tried to keep the characters always posed as if they’re ready to move - slightly bent and bouncy.

Again, being more of an animator, I’m much more comfortable using animation software so the majority of my work is done directly in After Effects from the beginning. I find shape layers to be extremely versatile for animating characters, so I almost always use them for building simple character rigs. The most complicated aspect of the characters are the limbs which are built up of multiple stroke paths of varying widths, trimmed to different lengths to create sleeves and trouser legs. Although it’s possible to achieve a similar result by using the puppet tool, I always prefer to animate the stroke paths directly. This gives you complete control over the shape of the path allowing for extreme movements that would be otherwise difficult without distorting the shape of the curve.

Typography

The homepage of the site featured the character names; each one rendered as delicious typographic cakes. James Huse, our lead designer on this project explains the process of creating the ‘Cake Type’:

We used Adobe Illustrator to create the Cake Type, first using the 3D extrude tool to create the basic form from the flat type then separating the elements out as though they were real cake layers. I then began working the unevenness into the forms to create the look of dripping icing and sponge layers and used the pencil tool but with a variable width to make the stokes look more like cream and jam fillings. The extra toppings came a bit later on in the development, but they ended up being essential to get the colour scheme working. We found that without the ingredients it was hard to imagine what sort of cakes they might be, so a lot of the early versions looked more like bits of wood with bright paint dripping off, rather than icing.

Design and interaction 

Each story was made up of a few elements, the name of the character, the reason for baking, the illustrated scene and the call to action to get users to pledge to bake. Visually we wanted to make the stories as simple as possible and first we looked at combining all these elements into one composition but we quickly realised there was just too much going on and decided to separate the elements into a sequence. We wanted to give the story copy its own visual importance and make a link between the character’s name and the illustrated scene. We looked at children’s storybooks and illuminated manuscripts as a reference. This influenced how we set the story type and used things like the ‘cake type' initial and objects from the illustration to link the elements together.

The interface interactions and transitions were also an important aspect of the site design. We wanted to get a very fluid feel to the way you moved between stories and the recipe content. Again we looked at the storybook reference and tried to convey a sense of flicking, lifting and sliding through pages but without using clichéd page turn effects.

For the stories themselves, once the copy was agreed, Andy and Josh (Creative Team) roughly sketched out each scene with what the characters would be doing and how the user would interact with them. Our original plan was to make the interactivity more involved and for each one to be like a mini game but tight timings meant that we had to find a compromise and simplify things. The key thing however was to make the interactions part of presenting the cake to the other character and to do this in a fun and surprising way.

Development 

The time we had in development was tight, especially the time we had with finished animations. Because of this, it was important we put as much groundwork in as possible. A big part of this was the creation of our own animation library, so that when we did receive final animation assets we could drop them in as quickly and efficiently as possible. 

We decided to build our own library rather using one of the existing ones out there, it gave us the granular level of control we needed whilst keeping it lightweight by only having the functionality we required. The library we created allowed us to play, pause and loop animations, go to frames, create sequences of animations, handle sprite sheets and more. 

We used two different techniques for animating, one using a sprite sheet as a large background image and positioning it based on the current frame and one changing the src attribute on an image element.  We tried animating with canvas but found the performance to be more variable across browsers and devices. We used a combination of the two techniques because each would work better for certain animations, depending on dimensions and duration. 

As you can imagine the file size of all the assets soon added up, so to keep load and requests to a minimum we optimised all the images with TinyPNG, then used Magipack.js to combine all image data into one file, reducing the server requests for image assets to one per interaction.

For some of the more complicated interactions, we wrote bespoke code for simple physics and hit detection; this kept file size down compared to using larger 3rd party libraries.

The user journey was something really important for us on this website. We built several prototypes for the navigation until we reached the final version. During this process, we were really focused on keeping the entire experience as fluid as possible, engaging the user to explore every bit of the website. 

We managed to do it by including CSS transitions and animations that were not only for aesthetic, but would also guide the user through the experience. So when the user selects a story, instead of changing to a new page, the story quickly expands like an accordion to reveal more information. As a result, navigating through the different stories was quick and fun. 

And to keep up with the performance, we used only CSS3 transitions that didn't trigger new layout calculations, such as translate, scale and opacity. By doing this, we managed to add multiple animations running at the same time without affecting any of the experience.

Conclusions

For the second year in a row the World Baking Day site has won an FWA SOTD and that’s testimony to the great sense of collaboration between the various teams working on the project. From Creative to Design and Tech everyone had an input and was part of crafting a beautiful, fun and engaging experience. We’ve had some great feedback from our baking community and the World Baking Day campaign as a whole reached over 90 million people around the world.

 

Author

Tom Butler - Head of Design

Credit List

Sam Ball - Creative Partner

Andy Dawes - Creative

Josh King - Creative

Tom Butler - Head of Design

James Huse - Designer

James Curran - Illustrator & Animator @ Partizan

Fraser Hobbs - Head of Tech

Lucas Motta - Senior Developer

Stuart Keith - Developer

Daniel Fuller - Developer

Steph Chybowski - Senior Producer

Laura Stevenson - Account Director

Laura Hernando - Account Manager

Henry Yorke - Account Executive


Links

hr
























All rights reserved © 2000 - 2014 Favourite Website Awards (FWA) -  Terms & Conditions -  Privacy statement -  Cookie Policy -  Advertise -  About FWA -  Contact