Use of text in TV advertisements and in film

My supervisor showed me Stella Artois ad, where the theme of the ad is about creating perfection. There is a shot of a man measuring the length of the grass at Wimbledon and there is a faint outline of the measurements involved in typography. This reminded me of some of the figures in Ellen Lupton's ‘Thinking With Type’ book where she describes all of the elements of different letters. I decided add a little to the logo to include some of the detail and to faintly show some of the precision that has gone in to creating a particular font. Whilst doing this I created lines for the x-height and the caps height, which almost looked like staff and bar lines in music notation.

As well as this, I’ve been going through some Javascript tutorials, nothing amazing to show yet but I’ve a much better understanding of ‘for’ loops.

https://www.youtube.com/user/stellaartoisuk?gclid=CJL17O3j4r4CFYXKtAodjygAiA

http://designshack.net/articles/typography/8-rules-for-creating-effective-typography/

Further experimentation

Testing

I am attempting to fade my background image so that it changes with each page, no luck so far http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_01/rnb_text_index5.html I have looked at a demo on http://css3.bradshawenterprises.com/cfimg/ to try and get a nice smooth cross fade. I am also trying this method http://www.coding-dude.com/wp/web-design/create-dynamic-backgrounds-website-using-html5-canvas/

Here is a PDF outline of how I am visualising the site http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_01/images/rnb_website_plan_draft_01.pdf

Experimenting with HTML5 elements 'nav' and 'footer'

I started putting together the background and other elements

http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_01/rnb_text_index2.html

Logo Ideas

I probably spent too long on this

Textures

I started by photographing paper and creating textures in Photoshop. I decided to create a background image to use on the site. I wanted the texture of the hardback books to be clear, and to offer a sense of depth to the layout. My goal is to create a family of animations, similar to a series of books created by Carolie Brickford Smith but for an online experience.

Creating a tactile feel

Many e-Book companies have tried to make reading on screen similar to reading on paper. iBooks recently created a library of books with a wooden bookshelf layout, while also using a  page turning effect. Kindle keep their screens plain to mimic a paperback. I am aiming to give the user an experience of reading an extract from a book by trying to evoke a feeling of holding the pages.  I sketched out some ideas and began putting it together online.

A Magazine Is an iPad That Does Not Work

After viewing some sites using full-bleed images, I thought that would be an interesting design to start with because it allows for more options than a regular 960px grid. I have also chosen to attempt this because it is an area I would like to delve into.

The purpose of my website will be to use kinetic typography to capture the viewer’s attention and improve the overall reading performance. Kinetic type has been used successfully in film and I hope to recreate that experience, whilst trying to mimic the look and feel of a physical object. http://www.torre.it/en has a full-bleed image with the layout adapting fluidly to different viewports. The background also uses shadows and a graininess that has a paper texture I would like to use on my site.

http://www.scientificamerican.com/article/reading-paper-screens/

HTML 5 full-bleed backgrounds

When considering a layout for my website I searched for current trends in website design at http://www.awwwards.com/websites/html5/?page=1 . Photography and video are playing a huge part in the site design, often with artwork filling the viewport with full-bleed images. An article in A List Apart describe the importance of getting the right balance right between image quality and the overall page weight and how these types of design transfer to smaller screen. Breaking content into chunks allows the reader to process the information

http://alistapart.com/article/surveying-the-big-screen?utm_source=twitter.com&utm_medium=tweet&utm_campaign=daytona.se

Animating text

I experimented with some basic text animations such as scrolling text, fade in and out and growing the text from small to large

http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_01/rnb_text_effects_01.html

http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_01/rnb_text_effects_02.html

http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_01/rnb_text_effects_03.html

HTML5 experiments with text

Andrew Hoyer has done some interesting experiments with text using the HTML5 canvas

http://andrew-hoyer.com/experiments/rain/

HTML5 testing

I started with some basic ball animation, played around with changing the colour, the speed of the ball and the size.

http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_01/rnb_text_effects_ball.html

Animation on the web and response time

My first impression of animation online, in particular animated text, is that it is something I'd rather ignore as I associate it with advertisements or dodgy websites. My aim in using animated text is to use it in a tasteful way to engage the reader in the same way some opening credits do for films. Jakob Neilson offers some good tips on do's and don't's of animation on the web.

http://www.nngroup.com/articles/guidelines-for-multimedia-on-the-web/

Thesis writing

I’ve started setting up my document, I’d forgotten some little tips but this YouTube tutorial has helped http://www.youtube.com/watch?v=ZxQn8ywWSY0&list=PLDC080BDC8B7F2F04 I called into CallPrint (https://www.callprint.co.uk/news/edinburgh-office/) to explain my project and to chat to them about my options. They directed me to Binding By Crawford http://bookbindingbycrawford.co.uk/ who might be able to help me do some interesting print options.

xtine burrough

http://www.youtube.com/watch?v=l0dcExSco18&feature=youtube_gdata_player

Comics & Illustrated books

I was looking to see if some eBooks had illustrated text or animated images but found it hard to come across anything (for free)! I noticed the Avengers comic which is visually engaging but it still reads like a book, where you flip the pages over. Comics as a visual medium will be important for me to study as the arrangement of panels and narrative pacing will play a key role in animating text on the web.   

Interactive Books

There is free access to some interactive books developed by the BBC, one of which is based on World War II and D Day. The book offers another way of viewing information with interactive timelines, full screen video’s and images to illustrate the events. It is a great source of learning which may help those who prefer to read smaller pieces of text along with watching a short documentary. I think these elements add to the readers experience rather than distract but I suppose it also depends on the individual.

https://itunes.apple.com/gb/book/bbc-d-days-last-heroes/id659400023?mt=11

Type Machine - Glasgow College of Art

A similar project to that of Gebhardt and Mulnot is Victoria Kerr’s Type Machine created at the Glasgow College of Art in 2013. It is a project, which allows the reader to visually interpret speech, and provides the ability to read text as the originator would have spoken it.

Image courtesy of Qianqian Hu

Google's speech-to-text API

Jonas Gebhardt and Nishita Mulnot (http://www.binxed.com/typo.html) built an HTML5 website that connects Google’s speech-to-text API with a HTML5 audio API, each word is mapped out on the canvas based on the loudness of each syllable.

Messaging and the use of emoticons

Lee et al. state that text alone and its form does not readily support expressing emotion, and with email and text messaging becoming the dominant form of communication, some emotion gets lost along the way and messages can be interpreted in the wrong way. Emoticons is one way to respond to the need to express one’s emotional state, however, there are limitations to this, certain elements are missing such as tone of voice or the intensity of the emotion. Sometimes several emoticons are used together or an overuse of exclamation marks used instead.

Saul Bass - Film Title Sequences

Saul Bass, most famous for his work on corporate logos, posters but particularly his innovative work on title sequences for films such as The Man with the Golden Arm, North by Northwest and Psycho. Before the 1950’s, title sequences were generally static and separate from the movie but Bass decided to try to visualise what the movie was about and evoke the essence of the story with his titles. This is something I would like to create for readers who read on screen, an introductory piece of text to set the mood or the theme of the text to follow.

Opening credits, typography and rhythm

I’m finding the final project a little daunting so to ease myself into the day I looked at clips of opening sequences to films and TV programmes. Typography has been used on screen for intertitles as well as credits and can often set the tone of the film/show when used correctly. Some of the best film credits that I’ve seen are in Dr. Strangelove, Catch Me If You Can and Juno. One TV opening sequence that I think has worked well is the opening sequence to True Blood, not so much for the use of typography but for the music and use of imagery. Other interesting shows include Twilight Zone, Downton Abbey, Star Trek and Mad Men. The use of type and where it is placed alludes to how the story to follow might unfold. Timing and rhythm is another area that I will have to study.

http://www.creativebloq.com/typography/10-great-uses-typography-movies-10134995

Kinedit and Codepen

After reading a journal on the use of effective messaging using dynamic text, I thought more about how the idea of creating a website using kinetic typography would differ from an animation. The Kinedit system created by Forlizzi et al., is a basic authoring tool that allows users to input text and animate specific segments and reuse effects.  Forlizzi’s article provided some good insights into kinetic text. Kinedit seems to be more specific to text alone with a comparison to how a designer uses After Effects and Kinedit. While I do not intend to create a program like Kinedit, I would like the user to have the ability to interact with the text in some way, either by mouse movement, swiping or with the use of sliders or buttons. I began to search how some text effects have been created  using the HTML5 canvas and came across this motion graphic typeface http://codepen.io/ara_node/pen/nuJCG which displays some amazing text effects using HTML, CSS & Javascript.