JESSICA LITTLE
GRDS 755 | TYPOGRAPHY II | SPRING 2011 PROFESSOR MERRICK HENRY | PROJECT B
PROJECT B
Objective
Part 1
Part 2
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 transparently, 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 contextually interesting.
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.
The Animated Narrative Choose your fonts) for the project. This project can be designed in color using typography and vector 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.
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.
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.
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.
CONCEPT ONE
LW: IN THE OLD DAYS, I TRIED TO FIND A TYPEFACE THAT WAS NON AUTHORITARIAN, THAT WAS STILL ELEGANT, AND I PREFER SANS SERIFS.
Lawrence Weiner: On Helvetica LW 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.
AH, AND EVERYONE WAS USING HELVETICA. AND IT’S ONE OF THE TYPEFACES THAT I ABSOLUTELY DETEST.
I chose to consider this passage because of the typographical 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)
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.
1. Typeface Could use changing typefaces to tell the story of LW’s decision to abandon using Helvetica and prefers Franklin Gothic. 2. Color If this assignment allows for color it could be used to imply emotion. 2. Weight Certain words of this passage could be emphasized or characterized by use of weight. 2. Size Larger sized characters imply emotion, tone of voice and volume. 2. Motion Movement, of course could be used to help illustrate the story: The characters enter, how fast, what direction, how do they leave.
T Y P E FA C E S E L E C T I O N
FRANKLIN GOTHIC AND HELVETICA My 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. Nice animation transitions of typography. http://vimeo.com/10326317
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
My research will continue as this project develops.
FABCDE R AF GHINJKLKM LN I N G O T H I C OP QRS T UV W X Y Z
F R A NK L I N G OT HI C B O O K F R A N KLI N G OT H I C BO O K I TA LI C F RA N K LI N G OT H I C M ED I U M F RA N K L IN G OT H IC M ED IU M ITAL IC F R A N K L I N G O TH I C E X TR A C O N D E N S E D F RANKL I N GOTHI C CONDENSED F R A N K L I N G O TH I C N O 2 R O M A N
HELVETICA A B CDE F G HIJ K L M N O P Q RS T UV W X Y Z I like the use of panning and the appearance/disappearance of type in this example http://www.youtube.com/watch?v=4FF3cp6Z72k
Nice use of motion and a similar typeface. Elegant animation as well. http://www.youtube.com/watch?v=4FF3cp6Z72k
L I GHT CONDE NSE D L I GHT CONDE NSE D OBL I QUE CONDENSED CONDENSED OBLI QUE BOLD CONDENSED BOLD CONDESNED OBLI QUE BL ACK CONDENSED BL ACK CONDENSED LI G HT LI G HT O B LI Q UE RO M A N O BLI Q UE BO LD BO LD O BLI Q UE B L A C K BLACK OBLIQUE
STORYBOARDS
Visual Solution This reads left to right, top to bottom in case it’s confusing. I will also include a separate PDF.
CONCEPT TWO
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 independent, 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 discrimination 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 competent 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 guarantees 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 attacks upon his honour and reputation. Everyone has the right to the protection of the law against such interference 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, including 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 prosecutions genuinely arising from non-political crimes or from acts contrary to the purposes and principles of the United Nations.
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. Voice This 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. Weight Certain words of this passage could be emphasized or characterized by use of weight. 3. Size Larger sized characters imply emotion, tone of voice and volume. 4. Motion Movement, of course could be used to help illustrate the story: The characters enter, how fast, what direction, how do they leave.
TYPOGRAPHIC RESEARCH
BASKERVILLE OR GARAMOND My research of typefaces was centered around the timeframe that brought about this Universal Declaration 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.
BA SK E RV I L LE AB C DE FGHIJK LMN O PQ RST UVW XYZ
R EG U L A R ITA LIC S E M I B O L D S E IM IB O L D ITAL IC BO L D B O LD I TA LI C
Nice use of motion and a similar typeface. Elegant animation as well. http://www.youtube.com/watch?v=14MIXCA8shs&fea ture=related
Nice typographic look and feel
GARAMOND AB CDE FGHIJ K L M N O PQR ST U VWX Y Z
L I GHT C ONDE NS E D L I GHT C ONDE NS E D I TA L I C B O O K C O N D E N S E D B O O K CO ND ENS ED I TAL I C BOL D C ON DE N S E D B O L D CO ND ES NED O B L IQUE L I G H T N A RROW L I GH T NA RROW I TA L I C BO O K N A R ROW BO O K NARROW ITALIC B OLD NA R ROW BOLD NA R ROW ITA LIC U LT R A NA R R OW ULT R A NA R ROW I TA L I C L I GHT LI G HT I TA LI C B O O K B O O K I TALI C BO L D B OL D ITA L IC U LT R A U LT R A I TA L I C
CONCEPT THREE
1. A Brief Typographic History of the Title 2. A Brief Typographic History of the Logo This is my own attempt at a narrative and was inspired by a similar video that addressed title sequences, 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 animations. 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. Typeface Many typefaces would be used depending on the era and TV show. 2. Motion I 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-oflogos.html
FINAL CONCEPT
Visual Solution I 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 upcoming animated poster project. The narrative that is given by Lawrence Weiner is a story that describes how he formed his love for Franklin 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 execution simple, respectful and elegant. However, I may explore ideas on how to convey his age as well.
DESIGN RESEARCH
Lawrence Weiner His 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.
DESIGN PROCESS
On-Screen My 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. Illustrator I 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 storyboard 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. Flash Once 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.