Wednesday, 27 November 2013

Visual Style

Jack Daniels has a very strong visual style. High contrast black and white. This is a very iconic and recognisable brand identity and something that works very well for Jack Daniels. That style coupled with the typography they use make for an instantly identifiable brand. It is also I feel quite limiting for something as broad and open as an app. I did try to make some images that would be suitable to the high contrast black and white imagery:

This is an image I created very early on. There is heavy film grain along with obviously the high contrast monotone colouring. This evokes feeling prominent with the brand. Strong heritage and and patriotic feelings. It is quite plain however, and I thought at risk of becoming tiresome and overused within the broad context of an app. I wanted to inject some colour and interest in without substituting factors iconic with the brand. After all the brief specifies the app needs to be tied in with a brand of alcohol. So I wanted to look for some inspiration.

I have always loved the look of old vintage instruction manuals. The illustration is always very intricate and stylised. I love the colours used and how they are imperfect over the images drawn. They are often misprinted or deliberately slap dash in a subtle, artistic way. After compiling a mood board of them I realised that it was perfect. This is the mood board I created:

This is in my pitch, I created it in keynote as it was quick and easy and I quickly saw how I could use the techniques and visual style to create an app. I adored the colours used, the typography, the composition, everything really. (It is something modern day instruction manuals could learn a lot from). My two favourite ones that inspired me the most was the french typewriter one in the top left and the blue coloured ZEISS one immediately to the right. The typography, colours, relic'd look and feel to the paper it was printed on.

This style, whilst looking very iconic, eye catching and aesthetically pleasing it also fits in with the style and theme of Jack Daniels I think. the vintage look and feel harks back to the heritage of the company. Also all the actual imagery of the product be it photographic or illustrated, it is all in black and white and high contrast. This is reminiscent of Jack's logo and colour scheme and can then be combined with colour in a way that is very authentic and tastefully done. It isn't colouring images it is applying a wash over the top and tinting the already black and white image. It is period accurate to an older style of doing things. It will simultaneously make the app more engaging, visually impacting and aesthetically pleasing whilst still adhering to the brand and not straying too far from their ideals.

After finding this I quickly mocked up two different posters/home screens in the style of the two manuals I pointed out earlier. This served to really focus in all of my design choices and finalise on a direction, feel, theme and context. The first is based on the french typewriter manual:

This second one is based on the manual for ZEISS lenses:

I do prefer the second one. It illustrates the addition of colour far more effectively and also I feel just works better as an overall design. I think that I will use this image as a home screen actually. The record can serve as a start button. I really do think that this is a very engaging and effective direction to head in. It is a very lucrative way of adding in colour and the designs it is based upon are all very engaging, colourful recognisable and will suit the environment of an app very well.

Monday, 18 November 2013

Chosen Brand

I chose a brand to create the app for very quickly. I didn't have one in mind that I like as I'm not a drinker really so I am unfamiliar with the vast majority of alcoholic brands and beverages. None of the ones I do drink really excited me that much and their brand identity is fairly wishy washy. Not too interesting or thought provoking. The majority of their target audience is teenagers. They target them through images of summer and going out with friends which is completely and utterly cliché'd and played to death. I wanted to focus on something else. 

I started looking to more complete and focussed kinds of drink. Ones with history and lineage. I started looking at Whiskeys and Ale's and the like. I came across Jack Daniel's (which I had initially thought of then crossed off). They have a very prominent visual style and brand. They also have a strong history which they are very proud of and like to display and talk about.

This appealed to me and coincided with me watching "Stephen Fry In America" on YouTube. In particular the second episode, in which Stephen visits an old distillery:

(Click the here or on the image below to watch the part I'm talking about from episode 2).

In the episode he talks about the prohibition and samples some bourbon from an old classic American distillery. This inspired me as you can see the passion that the man guiding Stephen around has for the drink and how keen he is to express his passion and knowledge. This speaks for the American way of life as a whole I think. When America has an industry or past time that it loves and is proud of it goes out it's way to ensure it's of the highest quality and something to be proud of. It happens with music, instruments, whiskey, machinery, it's space program, loads of things. They are all world famous down to the sheer amount of passion and quality poured into each and every one of them.

For this reason I focussed in on Jack Daniel's. I loved the heritage the brand the colour scheme and overall look and feel the company has. I then also remembered a TV spot they recently commissioned. It details the musical history that has surrounded Nashville, Tennessee and how Jack Daniel's has been an integral cog in the musical lineage around the city. And by extension how the creator (Jack himself) has sat in on countless legendary recordings and played live with bands on Sunset strip because the bottle he produced had been with them at the time. This is the ad:

It is really strong and impacting. You feel as though you have been transported back in time to when those bands and artists were playing and you feel as though you were in the room. That I realised was exactly what I wanted to re-create and suddenly I had an idea. A Jack Daniel's Time Capsule for Music.

AF202 (& AF201) - The Brief

So this is our second project in the second year of this foundation degree. This time it's all about an app. We are not actually building an app more designing, conceptualising and marketing the app. We are tasked with creating the app for an alcoholic brand of our choice.

We need to research and look at regulations and laws concerning the apps content as there are certain things that you can and can't do. We need to research heavily the brand we choose and look at their colour schemes, visual language, typography etc.

The app needs to be accompanied by a TV teaser spot which we will create in After Effects. It will detail some of the features of the app and try to promote it for people to download.

Wednesday, 6 November 2013

Evaluation of AF201

All in all this unit has been a blast. As I have previously mentioned I had never used After Effects to create an animation made entirely out of still assets and I have definitely learnt a lot about how to do that successfully. I feel as though I have learnt a lot about typography, Illustrator and Cinema 4D as well. 

I have also learnt that limitations are sometimes a good thing. Limiting the movement of the machine, the character's screen time and the movement of the camera made for a very elegant, sophisticated soft feel that works really well with the message I was trying to get across and with the brief.

The brief specifies that you need to not have an accusing or threatening tone to your animation and I feel the combination of the voice over and style makes for an animation that straddles the line between serious and informal very well. I also think the graphic I created for the end really encapsulates that as well. It is impactful and eye catching, with quite a serious message yet it is friendly, soft, cartoony and playful. That was my overall goal with this animation and I feel as though I achieved it well!

Typography Re-think

After exporting, watching and analysing my final animation the typography bothered me. There wasn't enough weight, impact or eye grabbing attention to the font face or colours. Also if you watch the animation the way the text draws the eye along with the movement and various song effects really confuse the viewer. There appears to be too many things happening at once all in different places and that is quite disorientating. 

Watch the end of the animation here:

You can see it is cluttered and the typography is nowhere near as impactful. I said from the start I wanted to have a calligraphic typeface accompanied by a serif or sans serif type face as the two compliment each other nicely and make a really aesthetically pleasing pair. So I went into Illustrator  with the aim to create a graphic to place at the end and here is what I came up with:

I really like this. The class had a problem with the "TURN IT OFF" font (Mesquite Std.) as they thought it came a bit out of the blue and didn't really fit. To compensate for this I gave it grounding with somewhat of a carnival background. I think this creates a little world of it's own around the typography and makes it so that it just works by itself. I also separated the tagline at the top from the image so I could fade that in by itself and then add the rest of the graphic to it.

This along with some other very minor tweaks that aren't worth going into all culminated to create this. This is the final export of the final version of my animation:

Everything works together beautifully and the end graphic along with the slight restructuring and timing of the clips works really nicely to create a final image and bookend to the video that works all together really well and is something I am definitely proud of!

Crit & Changes

This is the animation I showed for class crit. I am happy with how it came out hover, it was not completely finished. Almost all the details were there it just needed some polish and refinement. Some of it I saw and some the group pointed out.

Change #1: Typography

The main thing that the group pointed out was the text. They weren't sure of it. They thought it was a bit out of the blue and flamboyant in a design that didn't really encapsulate any of those elements in such a brash fashion before hand. It seemed somewhat isolated too and half way between two points. I agree with that it is a little garish however, it was meant to be eye catching. None the less I set about changing the typography and the positioning to create something a little more modern and sleek to fit with the design. This is what I came up with:

These screenshots are in sequential order of how the typography changes through time in both colour and position. I thought that this looked really nice. It was clean, slick, sophisticated and modern. It does lack punch and weight however.

Change #2: Seating

The next aspect raised by the teacher was the inclusion of a chair and character. This is something I was contemplating before but was unsure as to whether it would be a wise venture. However, I gave it a go. I again turned to Turbosquid for a model of a chair which I textured to be leather and then created some assets for a character to be seated upon the chair:

The Chair:

The Character:

The Final Product:

I think it all looks far better and gives infinitely more grounding to the beginning portion and end of the animation as a whole. I am very glad I incorporated the chair.

Change #3: The Intro

I again changed what is played on the TV during the intro as I thought someone getting their arm bitten into and spewing blood isn't what would be deemed acceptable on prime time TV. I instead again added grounding by creating a fake music channel and putting one of my guitar covers I post to YouTube (yes I make guitar covers on YouTube in my spare time) into it and I think it works a lot better:

Change #4: Miscellaneous 

This isn't so much a big change as it is little tweaks. I made the money fly in faster so that it looked more realistic, sped parts up, moved audio around the usual perfectionist things I end every project with really!

And here is the new and improved version:

I am really happy with this and I think the addition of the sofa and the few other minor tweaks really bring it together as a whole.


This is the first time I have created an entire animation out of still images. It was a challenge but a lot of fun. I used Adobe Illustrator and Cinema 4D to create the assets then After Effects to composite and animate them. (The reason I changed from Flash to Illustrator is that I changed the idea from an animated character to a box and I thought that Illustrator was a much better fit for creating that art style.) I used the majority of After Effect's standard tools to create movement. Mainly I used  position, scale, rotation, pan-behind, opacity, masking, duplication, colour curves etc. It was good limiting myself to these tools and not going over the top and using extravagant designs.

A lot of the animation is quite simplistic and straight forward which I think really goes hand in hand with the art style which is very minimalistic and clean itself. Nothing is to elaborate and there is a discernible look and feel to the colours and shapes used.

I really liked the process of animating still images there is still a lot of play that you have, it isn't as limiting as you first think. I am able to create a really nice, controlled, clean animation and rotoscoping/masking in general is almost a completely painless experience!

Changes to the Animatic

Above is my animatic which was shown during my pitch. I am very pleased with how it came out and I thought it illustrated well the idea that I had at the time. However, there were some changes that needed doing to it. Here I will address those changes.

Change #1: The Character

The first and most glaring change was the main concept of the character. As discussed in the previous post I was going to change that from a character to a machine. And so I did. These are some of the frames I had before of the character:

They were too innocent and cute. I instead traded them out for the idea of a machine. I wanted the machine to be simplistic. A few intricacies and hidden easter eggs but for the most part be simplistic. This was to make it easier to see and understand as sometimes it would be at a distance from the camera/viewer. I wanted to keep it straight forward. This is what I ended up creating:

As you can see it a very simplistic, minimalistic design that borrows from flat design (the latest craze of designing for the web right now). Although it is simplistic though I still added areas for intricacy and flair to take place. Smoke will protrude from the chimney, paper will print from the right hand slot, the lever will move, glowing text will write across the little screen in the bottom left and a light will flash on the siren in the top right.

Change #2: The TV

This wasn't mentioned in the pitch but was something I was meaning to change. The TV I created for the animatic was a very simplistic design that was just two cubes textured differently. It was too basic for my liking and was immediately obvious it was a TV. I changed it slightly adding more cubes and changing some of the texture. It went from this:

To this: (Ignore the lamp, I'm getting to that!)

I think it's a much more naturalistic looking TV that not only is more aesthetically pleasing but also more instantaneously recognisable as a TV. You can also see the subtle darkening I did to the scene as a whole. This was a stylistic choice again not brought up in the pitch but I thought had a more sophisticated, suave look to it.

Change #3: The Lamp

Yes you've already seen it but heres where I get to explain it! For this all I wanted to do was create more of a sense of depth. For this I wanted an object that would sit in the background behind the TV. I could then use Cinema 4D's relatively recent and stunningly beautiful depth of field renderer to create a physical camera and blur it on the closer shots:

Both of these images are rendered straight from Cinema 4D without going through any external dog renderers like Frischluft etc. If you know anything about 3D or moving images that is seriously impressive. Anyway! I knew Cinema 4D had the power to create depth I just needed a model of something in the background to work from. For this I used Turbosquid:

This is a online store where people can buy and submit 3D models to work in a wide array of (if not all) 3D rendering programs. Originally I didn't know what to look for. I knew I wanted some kind of furniture but I wasn't sure what exactly. A desk maybe? A chair? After some brainstorming I found the lamp you have just seen. I really liked the shape of it as the legs would create some really interesting and aesthetically pleasing bokeh. I could also use it to add to the storyline as the TV could power up the lamp adding more weight to the "not only wastes energy" line.

I got it off the site, pulled it into cinema, positioned and textured it, set the cameras up at f/1.0 and captured the images and here are some before and afters:





You can see a big difference in the images in that there is a far better sense of depth and realism. I am really happy with how this came out!

Change #4: The Intro

This is a very minor change again not picked up on in the pitch but something I felt needed changing. The opening video the character is watching is one I made over the summer. It is a little animation I made in Flash. The only shot I had long enough to include (that didn't contain profane language or gore) didn't make much sense and was a little intense and abrupt. I changed it to a short film I made a year or two ago about zombies as there's more of a story and it is a little more grounded (which sounds strange but I think is true).


The pitch went off, almost, without a hitch! Everything I detailed was looked upon favourably by the class. It was a great time to justify my choices. Everything is under scrutiny and there needs to be a good reason behind every choice from font to sound design. I felt as though I justified everything to a good extent and every choice seemed to be applicable and make sense.

There was however, one detail that the class highlighted. That was the character in my animation. The class, and the teacher, thought that the character was too innocent and happy. You feel sorry for and empathise with the character who is advocating the exact opposite of the adverts intention. There were a few solutions to this I had immediately thought of. The first was to make him look more evil with a cape, top hat, monocle, cane, moustache etc. I also thought of giving him a voice and dialogue to express evil intent. However, Both of those option I think were too complicated and time consuming. Lip syncing and complicated re-drawing are something that is difficult and I think in the time constraints my time would be better used changing the subject somewhat and focussing on another design or storyline.

I then came up with a machine. A faceless box that would be doing wrong and then be shut off by the TV turning off.

Blog Archive