how typographic animation delivers your message

PowerPoint Presentation

user experience agency

How Typographic animation delivers your message

Typographic animation is its most effective form

Research

Typographic animation is its most effective formTypographic 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 animation more easily.

Screen shots taken from jmheathers Shop vac Kinetic Typography animation regarded as the most creative and extensive typographic animation produced as non client work. Features a full length typographic portrayal of Jonathan Coultons Shop Vac song, available on iTunes.

Typographic animation is its most effective formVideo 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. ramza7337s recreation of a particularly brutal Kill Bill scene enraptures the Japanese culture of the actors and the dialogue perfectly with its type choice and background textures.

callme4bs depiction of an iconic scene from Oceans Eleven is a great example of type positioning, and using the camera to express the audio narratives messages with subtle direction and pace changes.

Typographic animation is its most effective form

Yhetiwools interpretation of a scene from The Dark Knight contains some sensational typographic effects that relate to the Jokers choice of words thus making the type more than just a visual repetition of the audio narration.

Stevadore2032s elucidation of Tom Waits Whats 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.

Typographic animation without aid of narration

Architect


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. Alextrimpes 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 for an audio input. The world is obsessed with Facebook Alextrimpe.


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 narrationSome informative motion graphics simply dont 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 stay creative are illustrated. TO-FU - 29 ways to stay creative.

How aesthetics of type dictate visual style of animation

Design

How aesthetics of type dictate visual style of animation

BYU Design Students and Facultys typographic feast on the 5 senses is a great example of how the aesthetics of the type animated relates directly to the theme of the motion graphic the type informs and illustrates on its own. Inspiring work.

How aesthetics of type dictate visual style of animationn9ves Alphabetic creation incorporates an array of aesthetics that signify the letter/word(s) of the alphabet. Using a variety of stop frame animation techniques and materials with skillful art direction makes this piece a real gem.

Transition styles of type messages

Implement

Transition styles of type messagesTypographic transitions between messages/words/letters can vary greatly between motion works. Some examples emphasise how the information strings together and 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 specimen focuses more animating its 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 based more on changes in type size, font and layout, rather than the type flowing together frame by frame.This examples type physically links together between transitions. 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 positioned to portray the audio narration as above, but the type forms physical objects, relative to the narration. *The following examples have different styles of Typographic transition, both relative to their individual purpose and art direction. One is not stronger than the other.

Transition styles of type messages

n9ves example of an alphabet of type has an interesting transition style, where each letter appears to possess a liquid 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 a spelling-video, where each character is the initial character of n9ves favourite fonts.

Transition styles of type messagesYouAreNotSoSmarts book trailer on Procrastination has insightful content no doubt sampled from the book itself. Due to its considerable length, the narration is fairly fast paced, meaning the transition style is sharp and precise with each message change. Emphasis seems to be on 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.

In Conclusion

Evaluate

In ConclusionIn most cases, 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 animation more easily 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.

When the typographic choice relates to the audios tone, it can make the type more than just a visual repetition of the audio narration. It becomes informative and illustrative art.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. Transition styles emphasise how the information strings together and flows throughout the animation. Some examples emphasise how the information strings together and flows throughout the animation, others focus more on the aesthetics of the content itself and less how the type links frame by frame.

Jon WardInteractions Designer

[email protected] 948 4454Thank you!