Player Design

I wanted the players to be contextual to the era selected. I wanted it to be like a mini time machine. You will be transported back to the era you have selected and the app will place you in a typical scene from the time period. I wanted to keep it similar to the iPod app on iPhones (or just original iPods for that matter). I did this because I think that players in apps have a tendency to, when given the chance, overdo it somewhat. They create a very elaborate player that is so drastically different to anything seen before and unique. This can make it difficult and confusing to navigate and use. I wanted to create something familiar and user friendly. However, I did want to create a unique space that would evoke nostalgia and look fitting to the music playing. This posed an issue.

How was I going to create something historically accurate to the 30's and 40's yet still retain a modern method for controlling the music playing that is intuitive and not distracting/glaring. What I came up with is separating the two. The controls would be a self contained overlay. This gives them there own space and rationale. This makes them separate to the player and gives them the free reign to be completely different to their surroundings and not be glaring and distracting. They are merely functional and the fact that they are separate to the player itself and the fact that you can toggle them makes them able to be modern and not break the atmosphere. This is the player for the 1940's:

I wanted to include things that fit in to the time era. The cigarette, plectrum and newspaper place you in the time along with the table beneath them all. The coffee and money place the user in America adding some geographical relevance. I think this works well as it is simple and I don't think that I overdid the contextual objects around the record. It's enough to create an atmosphere and setting but not so much that it becomes overpowering and a gimmick. Now here are the controls I created:

(Ignore the fact that it looks strange. It is semi-transparent and that for some reason made it look weird in the preview when I screen shotted it). However, this is the controls system I created. It is simple, clean, familiar and easy to use. When overlaid onto the player it fits nicely and works effortlessly. I think that this is one of the best methods for combining ease of use with detail and atmosphere. And what's more because the controls are contained within themselves I didn't need to worry about changing them from player to player as they would just work over any player created. This creates unity over the app and makes it so that the user will never be lost will know how to control the app at any point without having to think about it.

Visual Progression

I had a direction, rationale and theme sorted out, I just needed to produce the assets. I took to Photoshop with the ideas sketched out in my sketchbook and then wanted to try to create what I saw in my head. There was an issue however,. In my sketchbook I had a low down, front on view of each player that was popular in the era everything from the gramophone to an iPod. Being a student trying to get assets and imagery for free and not having the resources or means to access an early 1870's gramophone I came across problems trying to acquire images that met up to the expectations I had from my sketches. After trying to make them work I was forced to abandon the idea. I managed to friend images I thought were well composed and appealing and tried to do what I could with them. This is the original menu system that I thought I would go with:

I did like this idea and felt as though it worked as a design. However I felt as though it didn't really adhere to the overall theme I felt was important. I really liked the instruction manual feel and I felt it justified adding colour as I mentioned in the previous post. It was a printing technique rather than just a photograph. Also this style doesn't really evoke the same time properties and chronological themes I felt were important. IT does show musical evolution and the colouring/picture quality does loosely allude to the time periods mentioned however, I felt as though I could do better.

With that in mind I went back to Photoshop with the goal of creating a menu system that linked a lot closer to the home screen. I thought that this would help to tie the app together as a whole and add an overall theme and tone. I also much preferred how the home screen looked to a more photographic and modern style I feel exudes from the above image. This is what I ended up creating:

I think that this works far better than the image above. It links to the home screen much more clearly and effectively, It looks nicer I think and it has a more defined difference between the era's selectable by having such vastly different colours. From this I then quickly came up with a loading screen idea:

I will add an ellipses in After Effects that will animate. This again ties into the menu screen and the home screen and allows the app as a whole to have a consistent solid theme and tone. The colour is contextual with the era selected as is the image at the bottom.

So that is the reasoning between the apps look and feel and why I strayed from the original idea. I will go over the decisions behind the player in the next post.

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.

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.

Source: http://www.art2day4u.com/shopimages/products/normal/JACK-DANIELS/D042-Jack-Daniels-Black.jpg

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).

Source: http://www.isky.co.nz/catalogues/sky/sections/tv-shows/files/29699/Stephen-Fry-In-America-LP.jpg

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.

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!