J E S S I C A L I T T L EG R D S 7 5 5 | T Y P O G R A P H Y I I | S P R I N G 2 0 1 1P R O F E S S O R M E R R I C K H E N R Y | P R O J E C T B

Objective

Choose a story or poem and illustrate its meaning by creating a motion graphics “movie” using Flash. This project will introduce you to the nuances of the non-linear use of typography. When a story is read in print, the reader will read left to right and top to bottom with no thought about the text on the page. Through animation, type can be introduced at any place on the screen, overlapped, used transpar-ently, be faded, or otherwise transitioned in and out of the composition, and also accentuated in the most important parts of the story through the use of scaling, rotation, masking, etc. These typographic options can make a story both visually and contextu-ally interesting.

Process

Your project must include a process book submitted as a PDF file that shows your thumbnails, roughs, storyboards, visual inspirations, discussions, etc. No grade is given for the process book, but a penalty is assessed if it is less than satisfactory.

P R O J E C T B

Part 1 Storyboards for the Animated Narrative Select a very short story or poem to animate. You may even choose to design one stanza of a poem or part of a story in order to truncate it, as long as there is a clear ending point. Your Flash movie should be a minimum of 30 seconds long, but can be longer if you wish. Don’t try to fit too much text into your story. Designing 30 seconds of animated type can take a lot of time. Here is an example of the amount of text that can fit into 30 seconds to a minute comfortably depending on the pacing.

Brainstorm on concepts for designing your Flash project. Research all types of Flash projects, even Web sites and e-cards, just to get ideas of what can be done in Flash. Select the concept with the most potential, and begin to storyboard it. Chose either a standard (PDF, 416 KB) or widescreen (PDF, 412 KB) template. When designing a Flash movie, careful planning and very detailed storyboards will save time when designing the story in Flash.

Part 2

The Animated NarrativeChoose your fonts) for the project. This project can be designed in color using typography and vec-tor graphics either created in Flash or Illustrator, but there should be no photos. The type should be the star of the story but the use of vector graphics can support the type’s message.

Begin experimenting with moving, scaling, rotating, flipping, and skewing type in order to illustrate your story. The main challenge is to design a story or poem that is visually interesting, but also can be read and understood as if it were a printed story.

The key to readability is timing the sentences or parts of a message so that the story is neither too slow nor too fast. Three seconds can seem like forever when a reader is waiting for something new to come up, so experiment with timing to make sure your story flows nicely.

Lawrence Weiner: On HelveticaLW is one of my favorite artists/typographers and this is a portion of an interview between him and Debbie Millman on Hillman Curtis’ Artist Series.

I chose to consider this passage because of the typo-graphical references and it could tell an interesting visual narrative of using one typeface over another and I would attempt to bring some humor to this with the animation. (Length: 40 seconds)

1. TypefaceCould use changing typefaces to tell the story of LW’s decision to abandon using Helvetica and prefers Franklin Gothic.

2. ColorIf this assignment allows for color it could be used to imply emotion.

2. WeightCertain words of this passage could be emphasized or characterized by use of weight.

2. SizeLarger sized characters imply emotion, tone of voice and volume.

2. MotionMovement, of course could be used to help illustrate the story: The characters enter, how fast, what direc-tion, how do they leave.

C O N C E P T O N E

LW: IN THE OLD DAYS, I TRIED TO FIND A TYPEFACE THAT WAS NON AUTHORITARIAN, THAT WAS STILL ELEGANT, AND I PREFER SANS SERIFS.

AH, AND EVERYONE WAS USING HELVETICA. AND IT’S ONE OF THE TYPEFACES THAT I ABSOLUTELY DETEST.

DM: WHY IS THAT?

LW: IT’S TOTALLY AUTHORITATIVE. IT IN FACT DOES NOT ADAPT ITSELF TO THINGS, AND ALL INFORMATION THAT COMES OUT OF HELVETICA IS SAYING EXACTLY THE SAME THING: IT’S TELLING YOU THAT THIS IS CULTURAL, THIS IS INTELLECTUAL AND THIS IS INTELLIGENT. AHH I’M RATHER AFRAID THAT WORDS DON’T START OFF AS CULTURAL, INTELLECTUAL OR INTELLIGENT. SO I FOUND A TYPEFACE THAT I LIKE WHICH IS FRANKLIN GOTHIC CONDENSED. REMINDED ME OF THE WORKING CLASS DUTCH LETTERS THAT I AM INTRIGUED BY.

FRANKLIN GOTHIC AND HELVETICAMy research of typefaces was centered around the narrative of the passage on the previous slide. My concept, illustrated on the next page, is to have the two typefaces interact as the narrative goes on.

If flourishes or line is allowed in this project I would like to incorporate them in my animation. I also have been inspired by textures and colors that you can see here. I also included a few links to videos I find close to the look I hope to achieve.

My research will continue as this project develops.

T Y P E F A C E S E L E C T I O N

F R A N K L I N G O T H I CA B C D E F G H I J K L M NO P Q R S T U V W X Y ZFRANKLIN GOTHIC BOOK FRANKLIN GOTHIC BOOK ITALIC FRANKLIN GOTHIC MEDIUM FRANKLIN GOTHIC MEDIUM ITALIC F R A N K L I N G O T H I C E X T R A C O N D E N S E D FRANKLIN GOTHIC CONDENSED FRANKLIN GOTHIC NO 2 ROMAN

HELVETICAABCDEFGHIJKLMNOPQRSTUVWXYZL IGHT CONDENSED L IGHT CONDENSED OBLIQUE CONDENSED CONDENSED OBLIQUE BOLD CONDENSED BOLD CONDESNED OBLIQUE BLACK CONDENSED BLACK CONDENSEDLIGHT LIGHT OBLIQUE ROMAN OBLIQUE BOLD BOLD OBLIQUE BLACKBLACK OBLIQUE

The Motion used in this sequence and the background texture used were a nice way to introduce blocks of type.http://www.youtube.com/watch?v=4FF3cp6Z72k

I like the use of panning and the appearance/disappear-ance of type in this example http://www.youtube.com/watch?v=4FF3cp6Z72k

Nice animation transitions of typography.http://vimeo.com/10326317

Nice use of motion and a similar typeface. Elegant animation as well.http://www.youtube.com/watch?v=4FF3cp6Z72k

Visual SolutionThis reads left to right, top to bottom in case it’s con-fusing. I will also include a separate PDF.

S T O R Y B O A R D S

The Universal Declaration of Human Rights Listed here are 13 of the 30 Articles of the Universal Declaration, signed in 1948 by the United Nations.

1. VoiceThis reads to me like a mini manifesto and I would use a typeface that reflects voice. I plan to explore transitional typefaces such as Baskerville and Garamond. I hope to explore more with sketches in the next couple of days.

2. WeightCertain words of this passage could be emphasized or characterized by use of weight.

3. SizeLarger sized characters imply emotion, tone of voice and volume.

4. MotionMovement, of course could be used to help illustrate the story: The characters enter, how fast, what direc-tion, how do they leave.

C O N C E P T T W O

Article 1.All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood.

Article 2.Everyone is entitled to all the rights and freedoms set forth in this Declaration, without distinction of any kind, such as race, colour, sex, language, religion, political or other opinion, national or social origin, property, birth or other status. Furthermore, no distinction shall be made on the basis of the political, jurisdictional or international status of the country or territory to which a person belongs, whether it be indepen-dent, trust, non-self-governing or under any other limitation of sovereignty.

Article 3.Everyone has the right to life, liberty and security of person.

Article 4.No one shall be held in slavery or servitude; slavery and the slave trade shall be prohibited in all their forms.

Article 5.No one shall be subjected to torture or to cruel, inhuman or degrading treatment or punishment.

Article 6.Everyone has the right to recognition everywhere as a person before the law.

Article 7. All are equal before the law and are entitled without any dis-crimination to equal protection of the law. All are entitled to equal protection against any discrimination in violation of this Declaration and against any incitement to such discrimination.

Article 8. Everyone has the right to an effective remedy by the compe-tent national tribunals for acts violating the fundamental rights granted him by the constitution or by law.

Article 9.No one shall be subjected to arbitrary arrest, detention or exile.

Article 10.Everyone is entitled in full equality to a fair and public hearing by an independent and impartial tribunal, in the determination of his rights and obligations and of any criminal charge against him.

Article 11. (1) Everyone charged with a penal offence has the right to be presumed innocent until proved guilty according to law in a public trial at which he has had all the guaran-tees necessary for his defence. (2) No one shall be held guilty of any penal offence on account of any act or omission which did not constitute a penal offence, under national or international law, at the time when it was committed. Nor shall a heavier penalty be imposed than the one that was applicable at the time the penal offence was committed.

Article 12. No one shall be subjected to arbitrary interference with his privacy, family, home or correspondence, nor to at-tacks upon his honour and reputation. Everyone has the right to the protection of the law against such interfer-ence or attacks.

Article 13. (1) Everyone has the right to freedom of movement and residence within the borders of each state. (2) Everyone has the right to leave any country, includ-ing his own, and to return to his country.

Article 14. (1) Everyone has the right to seek and to enjoy in other countries asylum from persecution. (2) This right may not be invoked in the case of prosecu-tions genuinely arising from non-political crimes or from acts contrary to the purposes and principles of the United Nations.

BASKERVILLE OR GARAMONDMy research of typefaces was centered around the timeframe that brought about this Universal Declara-tion of Human Rights.

I considered Sans Serif but it seems to read less sophisticated or human for some reason.

On the next page you will see that my approach with this concept with be graceful and my hope is to convey a sense of ideas coming together during the UN General Assembly which brought about these declarations.

T Y P O G R A P H I C R E S E A R C H

BASKERVILLEABCDEFGHIJKLMNOPQRSTUVWXYZREGULAR ITALIC SEMIBOLD SEIMIBOLD ITALIC BOLD BOLD ITALIC

GARAMONDABCDEFGHIJKLMNOPQRSTUVWXYZL I G H T C O N D E N S E D L IGHT CONDENSED ITAL IC BOOK CONDENSED BOOK CONDENSED ITAL IC BOLD CONDENSED BOLD CONDESNED OBLIQUE LIGHT NARROW L IGHT NARROW ITAL ICBOOK NARROW BOOK NARROW ITALIC BOLD NARROW BOLD NARROW ITALIC ULTRA NARROW ULTRA NARROW ITALIC LIGHT LIGHT ITALIC BOOK BOOK ITALIC BOLD BOLD ITALIC ULTRA ULTRA ITALIC

Nice use of motion and a similar typeface. Elegant animation as well.http://www.youtube.com/watch?v=14MIXCA8shs&feature=related

Nice typographic look and feel

1. A Brief Typographic History of the Title2. A Brief Typographic History of the LogoThis is my own attempt at a narrative and was inspired by a similar video that addressed title se-quences, but with graphics and animated characters as well. In my take on a similar subject, I’d like to use typography only, reminiscent of TV Show title anima-tions. Here are some examples of the shows I would re-create.

I also considered a similar study on the history of the logotype, inspired by an earlier post in this class. It’s not a book or a poem but I thought an interesting translation of the assignment of animated narrative.

1. TypefaceMany typefaces would be used depending on the era and TV show.

2. MotionI would use motion to introduce each show to either re-create the original or express my own take on it.

Title Reference:http://www.smashingmagazine.com/2010/10/04/the-art-of-the-film-title-throughout-cinema-history/

Logo Reference:http://best-ad.blogspot.com/2008/08/evolution-of-logos.html

C O N C E P T T H R E E

Visual SolutionI returned to my first idea for this project since it fit the criteria better than my other two concept options, although I will remember these for the upcominganimated poster project.

The narrative that is given by Lawrence Weiner is a story that describes how he formed his love for Frank-lin Gothic over Helvetica, a popular choice at the time. Weiner’s insight and opinions are considerably more valuable when you factor his age and years of experience. I wanted to keep this design execu-tion simple, respectful and elegant. However, I may explore ideas on how to convey his age as well.

F I N A L C O N C E P T

Lawrence WeinerHis portfolio is amazing, if you have the time to look.Since this project is quoting him directly, the look and feel will aim to reflect his voice.

D E S I G N R E S E A R C H

On-ScreenMy experience when dealing with large bodies of text is to first consider the look & feel for the project in Illustrator/Photoshop, then translate into motion.

IllustratorI used Illustrator to set up my project keyframes and determine the overall look& feel, where I plan to make line breaks, etc. I basically translated my sto-ryboard sketches into keyframe designs, or when the most important actions occur.

This is not to say that I restricted myself from creative decision making at this stage of my process. When working on-screen I find it extremely fluid to make better-informed decisions on early design thinking.

FlashOnce I determined keyframes and then timed them against my voice sample, I began to plus my design into Flash.

I wanted to let my typography be the main focus of this exercise, which is why I decided to use minimal color and supporting graphics.

D E S I G N P R O C E S S