Style Tiles

To demonstrate our visual style for the pitch I need to design a 'Style Tile' showing my visual choices. Style tiles contain all of your visual design but with little to no reference to the actual structure of your website. Below are some good examples of style tiles I've found with researching the topic:

Research Into Responsive Design

To help me keep my design relevant I decided to some research into existing responsive design. One site that I really liked was the Mozilla website, below is the full sized desktop view:

The first break-point (tablet view) only restructures the second banner, bringing the list items below the 'Different by Design' text. The logo and top navigation are also scaled to give the site cleaner vertical alignment.

The next break point (mobile/small tablet view) brings the first drastic change to the structure of the site. The top navigation is condensed into a drop-down box to help optimise space. The logo and banner are also totally restructured, losing the bullet points.
The content boxes are stacked vertically, rather than arranged side by side.

The site also accommodates much smaller mobile phones with its last break point. Apart from scaling, the only thing that changes is the 'Different by design text is stacked.

From looking at this website and others (Starbucks, Mashable) the most drastic changes happen when changing from tablet down to mobile view (structure and navigational changes), with the difference in tablet and desktop view mostly being about visual reordering.

Gathering Assets

For the content of my website I've been using the Weather Explained site (http://www.weatherexplained.com/Vol-1/Tornadoes.html) as a source for most of my text, as its a fairly exhaustive and well ordered article on every aspect of a Tornado. Images I've gathered so far have been from a combination of Google image searches, scientific websites and personal blogs, including storm-chasing blogs.

Tornado at Union City, Oklahoma Credit: NOAA Photo Library

Hierarchy of Information

Now that I've decided that my chosen angle on storms is going to be tornadoes, I organised my information groups to help inform the structure of my website and iBook. 

Intro to AF103/AF106

In this assignment you are going to produce a piece of interactive documentary narrative which utilises a wide range of media, delivered as an iBook for the iPad, and as a responsive Website that will display on Desktop, Tablet and Smartphone devices. 

Although all of these products will be part of a ‘Series’ there will be no overarching ‘theme’. You will all develop your own visual approach that will be consistent across your own products.

  
I think this project is going to be more demanding than the previous ones and that time management is going to be crucial to succeed. I think working on 2 projects for the same content is going to be refreshing but I'll have to make an effort to make sure neither is neglected.

Summary of AF105

Overall I really enjoyed this project, having not worked with much video before. Learning all the software from scratch was a bit of a challenge but I feel that I adapted enough that my final product didn't suffer as a result. I felt that my storyboard wasn't that much help to me because I ended up changing most of what I planned during the editing process. I feel that my final clip satisfies the brief and provides a flavour of what the time period and circumstances of the speech were.

Final Changes

Before final hand-in I made some changes based on feedback from my classmates after showing them my rough version. The main things I changed were the timings of the kinetic text to improve accuracy and pace, as well as the font in the kinetic text being changed from Myriad Pro Bold to Myriad Pro Bold Condensed.

 

Filming

Even though in the brief it says we dont need to do any of our own filming, I thought it would be a much better experience if I included some footage that I shot myself. For this I went up to the Chattri war memorial and filmed a variety of clips that I could use in my final sequence. 

 

Premiere Pro and Motion

For this project, Adobe Premiere Pro CS5 and Apple Motion 5 have been the software programs I've used for all my editing.

For all visual effects, motion graphics and kinetic text I've used Motion, making extensive use of the masking function for most of my text and video effects

 
For the general assembly of the clips and transitions, I used Premiere Pro CS5 to organise the clips I'd made using Motion. I also used MPEGStreamClip to cut up pieces of documentary film quickly and then export them into Premiere Pro using a lossless format.
 

 

Kinetic Type

For my kinetic type I've decided to use a much more simple approach than traditional kinetic text. A god example of what I want to achieve are the text effects used in the series Wonders of Life. I particularly like their use of motion tracking to anchor the text to the contents of the film and intend to replicate this in my final clip. I will still have the words coming up in time to the speech to qualify them as kinetic text.

Typography Research

For my kinetic text I decided to do some research into British fonts of the 1940s to ensure I capture the look and feel of the time period accurately. Most of the good examples I found are all hand drawn, one off fonts which makes it very difficult to find the exact font. I wanted to use a bold sans serif font to give a certain amount of impact, seeing as the kinetic type needs to emphasise the important parts of the speech and found these 'Dig for Victory' posters:

I decided that Myriad Pro Bold and Myriad Pro Bold Condensed would be a good enough approximation:

 

About Winston Churchill

For our research task we put together a short presentation about Churchill and his speech. In our presentation we included some facts about Churchill, the speech and the era, plus a mood board of the war and 40s culture. As part of my more personal research I decided to watch 3 documentaries about Winston Churchill and his role in the war effort.