4ify - Channel 4 Rebrand

4ify was created in answer to a brief from Channel 4 regarding how their new on air, 3D rendered motion graphics branding could work in a digital space.

Tool kit

To find this out I proposed we investigate canvas and physics and some kind of interface where we could adjust settings to get things looking just right. I called it 4ify.

I felt it was also a good idea to have come kind of "save" and "approve" functionality so that the Channel 4's Creative Director and Marketing clients could play around with settings, save and share them.

So, in short 4ify is:
A place to experiment, save and share 2D Canvas treatments for the Channel 4 re-brand

View Project

There's a lovely video piece here from DBLG who created the on air look and feel.

The on air treatments had been created in Cinema 4D but the "animation" could only be output in video format and at a 16:9 aspect ratio or as static images of the individual blocks.

We needed to find a way to re-create the same physics driven "animation" but without outputting the effect as video.

There's a full breakdown of the problems we face when working with video under The Challenges section. We used this "why" section of the site.

Heres my starting point, a wireframe interface we could use to test and tweak settings.


Here's a bit more of a breakdown of the project in scamp form which outlines the interface and some of the features I wanted to include. I tend to do all my scamps in Illustrator as it allows for easy amends.

These scamps also acted as the IA and were what I used to brief in the two other developers at Super natural that worked on the project with me.

Jonny Blok who wrote the 4ify physics engine using Matter.js

Steve Utting who wrote the interpreter (slider values to JSON) and server side "save" functionality. Steve also worked on the gif capture element.

My role, other than creative was the front end interface development using Materialize. Interestingly as I was investigating Materialize, I found that that it might not be entirely necessary to complete a design phase for the project. Materialize has pretty much everything you'd want and so I just designed as I developed so to speak.

A key part to solving this creative problem wasn't so much could we code something that would look and feel like the on air treatment but could we code something in around 150kb. The reason this number was so important is that we tend to work to a max rich load file weight of 300kb. This appears to be acceptable with most publishers for cross-platform display advertising and forms part of the Super natural base-line spec.

Within this 300kb file size limit we're also required to execute the creative idea for any given show that Channel 4 wish to advertise. The creative idea is usually just an image from the print ad with some copy that fades on followed by a video. If the branding were to take up any more than 150kb we'd be left with very little file weight for the creative idea.

If you have a play around with the settings in 4ify you'll see the "Weight-o-meter" increases and decreases depending on what settings you've used. This was an all important element in that art directors and clients could clearly see what effect these settings had on the file weight.

If the background and blocks are both set to use bitmap data the file weight is too much.


If background and blocks are both set to solid the file weight is much lower.


The understandable problem here is that the solid versions which are naturally much more digital friendly don't "exactly" much the on air equivalents.

A key feature is the fourifyObject that is made up of values from sliders and tick boxes in the interface. I hoped that at some point creative teams at Channel would use 4ify to make their perfect block animation...just hit save, have it approved then we'd simply be able to copy the JSON object and paste it into our ad template. This method could have potentially sped up production and would put creative control back into the hands of the creative people.

Another great feature of the project was the ability to capture the animation as a gif. I was thinking this would be great for the Channel 4 social media team who could quickly create animations, add show titles and be able to advertise shows on Twitter, Instagram etc without the need to brief in designers / animators and so on.

The project took the three of us about a month to get it to this state, the meeting went well and the lead producer stated it was "the best meeting ever" Alas none of it was meant to be as a few weeks later we heard Channel 4 were opting to go for a static logo in digital.