user experience agency
How Typographic animation delivers your message
ResearchTypographic animation is it’s most effective form
• Typographic animations are    most effective when    combined with a narrative    voice over and/or audio    soundtrack....
• Video sharing websites like YouTube and Vimeo   house a vast variety of typographic animations,   often created to expre...
Stevadore2032’s elucidation of Tom Waits – ‘What’s he                                                                   bu...
ArchitectTypographic animation without aid of narration
This is an example of how type                                                    based animations can also               ...
This example is a promo                                                 video for a Rep role at a                         ...
Some informative motion                                                 graphics simply don’t require                     ...
DesignHow aesthetics of type dictate visual style of animation
BYU Design Students and Faculty’s typographic ‘feast’ on the 5 senses is a great example of how the aesthetics of the type...
n9ve’s Alphabetic creation incorporates an array of aesthetics that signify the letter/word(s) of the alphabet. Using a va...
ImplementTransition styles of type messages
• Typographic transitions between    messages/words/letters can vary    greatly between motion works.•   Some examples emp...
n9ve’s example of an alphabet of type has an interesting transition style, where each letter appears to possess aliquid li...
YouAreNotSoSmart’s book trailer on Procrastination has insightful content no doubt sampled from the book itself. Due to it...
EvaluateIn Conclusion
• In most cases, typographic animations are      •   When the typographic choice relates to the    most effective when com...
Thank you!Jon WardInteractions Designerjon@zabisco.com0115 948 4454
Upcoming SlideShare
Loading in …5
×

How typographic animation delivers your message

1,335 views
1,248 views

Published on

A brief look at modern typographic animation videos on the web and how it can deliver a powerful message for businesses.

Published in: Design, Business, Technology
1 Comment
0 Likes
Statistics
Notes
  • Best to get the spelling right too (it's = it is, its = possessive).
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
1,335
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
24
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

How typographic animation delivers your message

  1. 1. user experience agency
  2. 2. How Typographic animation delivers your message
  3. 3. ResearchTypographic animation is it’s most effective form
  4. 4. • Typographic animations are most effective when combined with a narrative voice over and/or audio soundtrack.• The composition of both visual and audio mediums provide a more effective message, allowing the user to absorb the information in the Screen shots taken from jmheather’s ‘Shop vac – Kinetic Typography animation more easily. animation’ regarded as the most creative and extensive typographic animation produced as non client work. Features a full length typographic portrayal of Jonathan Coulton’s Shop Vac song, available on iTunes.Typographic animation is it’s most effective form
  5. 5. • Video sharing websites like YouTube and Vimeo house a vast variety of typographic animations, often created to express a certain scene or segment of any given media e.g. film, TV, music. ramza7337’s recreation of a particularly brutal ‘Kill Bill’ callme4b’s depiction of an iconic scene from ‘Oceans scene enraptures the Japanese culture of the actors and Eleven’ is a great example of type positioning, and using the dialogue perfectly with it’s type choice and the camera to express the audio narrative’s messages background textures. with subtle direction and pace changes.Typographic animation is it’s most effective form
  6. 6. Stevadore2032’s elucidation of Tom Waits – ‘What’s he building in there’ actually shapes the type formations to create what the narration is suggesting, certainly more effective that just listening the audio or reading the text alone.Yhetiwool’s interpretation of a scene from ‘The Dark Knight’contains some sensational typographic effects that relate to theJoker’s choice of words – thus making the type more than just avisual repetition of the audio narration.Typographic animation is it’s most effective form
  7. 7. ArchitectTypographic animation without aid of narration
  8. 8. This is an example of how type based animations can also work without narrative audio. In order for messages to communicated successfully to end users without the same information being presented in two mediums, more visual aids are often used. Alextrimpe’s example uses clean, clear graphics to symbolise the accompanying type messages. Stats and figures are represented in a similar format typical of infographics, allowing the user to absorb the information in sequence without the need forThe world is obsessed with Facebook – Alextrimpe. an audio input.Typographic animation without aid of narration
  9. 9. This example is a promo video for a Rep role at a festival. A large volume of information had to be communicated to the user via small messages of type and accompanying graphics, footage and imagery, without the aid of audio narration. A music soundtrack was included to convey the vibrancy and energy required with the role at the festival, meaning the animation sequences could be sync to an audio format.Beach Break Rep promotional video – Zabisco.Typographic animation without aid of narration
  10. 10. Some informative motion graphics simply don’t require audio narration to effectively communicate their respective message(s). This can actually stimulate a more personal response from the user, as they may absorb the messages and relate them to their own lives more than if someone is dictating the words to them verbally. This example has a fitting instrumental soundtrack which progresses and alters as the 29 ways to stayTO-FU - 29 ways to stay creative. creative are illustrated.Typographic animation without aid of narration
  11. 11. DesignHow aesthetics of type dictate visual style of animation
  12. 12. BYU Design Students and Faculty’s typographic ‘feast’ on the 5 senses is a great example of how the aesthetics of the typeanimated relates directly to the theme of the motion graphic – the type informs and illustrates on it’s own. Inspiring work.How aesthetics of type dictate visual style of animation
  13. 13. n9ve’s Alphabetic creation incorporates an array of aesthetics that signify the letter/word(s) of the alphabet. Using a varietyof stop frame animation techniques and materials with skillful art direction makes this piece a real gem.How aesthetics of type dictate visual style of animation
  14. 14. ImplementTransition styles of type messages
  15. 15. • Typographic transitions between messages/words/letters can vary greatly between motion works.• Some examples emphasise how the This specimen focuses more animating it’s content with a lot of jerky camera movements and rotations to portray the flow of fast paced audio narration speaking the words. The typographic transitions are information strings together and based more on changes in type size, font and layout, rather than the type flowing together frame by frame. flows throughout the animation. Others focus more on the aesthetics of the content itself and how type links frame by frame, message by message is not as crucial to the overall success of the piece. This example’s type physically links together between transitions. *The following examples have different styles of Typographic Letters in some words animate to form the next and other words lead on to form part of the next message. The words are shaped and transition, both relative to their individual purpose and art positioned to portray the audio narration as above, but the type forms direction. One is not stronger than the other. physical objects, relative to the narration.Transition styles of type messages
  16. 16. n9ve’s example of an alphabet of type has an interesting transition style, where each letter appears to possess aliquid like state as it breaks and reforms to create the shape of the next in a different typeface.This simple but effective transition style contains the perfect aesthetics to mirror the purpose of the animation – aspelling-video, where each character is the initial character of n9ve’s favourite fonts.Transition styles of type messages
  17. 17. YouAreNotSoSmart’s book trailer on Procrastination has insightful content no doubt sampled from the book itself. Due to it’s considerablelength, the narration is fairly fast paced, meaning the transition style is sharp and precise with each message change. Emphasis seems to beon clean, sharp type often illustrated with accompanying graphics illustrating the point more visually. Transition style seems to naturally develop throughout a typographic animation. If the purpose of the original piece, the art direction and in a lot of cases, the audio dictation are in place, then animator already has the blueprints to work form to piece together the messages.Transition styles of type messages
  18. 18. EvaluateIn Conclusion
  19. 19. • In most cases, typographic animations are • When the typographic choice relates to the most effective when combined with a audio’s tone, it can make the type more than narrative voice over and/or audio just a visual repetition of the audio narration. soundtrack. The composition of both visual It becomes informative and illustrative art. and audio mediums provide a more • In order for messages to communicated effective message, allowing the user to successfully to end users without the same absorb the information in the animation information being presented in two more easily mediums, more visual aids are often used.• Video sharing websites like YouTube and • Transition styles emphasise how the information strings together and flows Vimeo house a vast variety of typographic throughout the animation. Some examples animations, often created to express a emphasise how the information strings certain scene or segment of any given together and flows throughout the animation, media e.g. film, TV, music. others focus more on the aesthetics of the content itself and less how the type links frame by frame.In Conclusion
  20. 20. Thank you!Jon WardInteractions Designerjon@zabisco.com0115 948 4454

×