final process - dynamic type

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 A

Objective

Choose a word and illustrate its meaning by creat-ing a motion graphics “movie” using Flash. This project will introduce you to a more interpretive use of typography. The project will show you how time and movement affects the expression and meaning of text. Animated text can have significant emotional qualities not found in static text. Animated text can even mimic the spoken word.

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 A

Part 1 Storyboards for the Animated Word Select a word to illustrate. You may choose any word, but try to choose a word with a meaning that lends itself to illustration through motion. Some ex-amples of simple words that would be good choices for the project would be leap, spin, crawl, shrink, or expand. Examples of words that are tougher to illustrate but might be more interesting are feminine, claustrophobic, exhausted, chaotic, masculine, inde-pendent, militant, gravity, levity, magnetic, etc.Brainstorm on concepts for designing your Flash project. Your piece should be no more than 15 seconds long.

Select the concept with the most potential and begin to storyboard it. A storyboard is similar to an outline for a term paper. It is a series of drawings or dia-grams that show an approximation of how a final project will look when completed. Storyboards are used in film and video projects to plan out action scenes before a film is shot. Your storyboard must be the same proportion as a computer screen. Chose either a standard or widescreen template.

Part 2

The Animated Word Choose your font(s) for the project. This project must be designed in pure black and white using only typography as the graphic element (no shapes, photos, etc.). Begin experimenting with moving, scal-ing, rotating, flipping, and skewing type in order to illustrate your word. Remember, many times simpler is better. The main challenge to focus on is whether your Flash animation defines your word properly.

The concept for the project should be well-designed and original. The storyboard should be detailed and show the main frames (keyframes) in which move-ment occurs. The choice of fonts should complement the word’s meaning. In the Flash document, the timing and movement of the characters in the word should be fluid and engaging.

The use of motion must be used to give the viewer extra information about the word that would not be found in static type.

reform [ree-fawrm]noun1. the improvement or amendment of what is wrong, corrupt, unsatisfactory, etc.: social reform; spelling reform.2. an instance of this.3. the amendment of conduct, belief, etc.

–verb (used with object)4. to change to a better state, form, etc.; improve by alteration, substitution, abolition, etc.5. to cause (a person) to abandon wrong or evil ways of life or conduct.6. to put an end to (abuses, disorders, etc.).7. Chemistry . to subject to the process of reforming, as in refining petroleum.

Origin: 1300–50; (v.) Middle English reformen < Middle French reformer, Old French < Latin refōrmōre ( see re-, form); (noun) partly derivative of the v., partly < French réforme

blink [blingk]verb (used without object)1. to open and close the eye, especially involuntarily; wink rapidly and repeatedly.2. to look with winking or half-shut eyes: I blinked at the harsh morning light.3. to be startled, surprised, or dismayed (usually fol-lowed by at ): She blinked at his sudden fury.4. to look evasively or with indifference; ignore (often followed by at ): to blink at another’s eccentricities.5. to shine unsteadily, dimly, or intermittently; twinkle: The light on the buoy blinked in the distance.

–verb (used with object)6. to open and close (the eye or eyes), usually rap-idly and repeatedly; wink: She blinked her eyes in an effort to wake up.7. to cause (something) to blink: We blinked the flashlight frantically, but there was no response.8. to ignore deliberately; evade; shirk.

–noun9. an act of blinking: The faithful blink of the light-house.10.a gleam; glimmer: There was not a blink of light anywhere.11. Chiefly Scot. a glance or glimpse.

—Idiom13. on the blink, not in proper working order; in need of repair: The washing machine is on the blink again.

truce [troos] –noun1. a suspension of hostilities for a specified period of time by mutual agreement of the warring parties; cease-fire; armistice.2. an agreement or treaty establishing this.3. a temporary respite, as from trouble or pain.

Origin1175–1225; Middle English trewes, plural of trewe, Old English trow belief, pledge, treaty. See trow

Related formstruce·less, adjective

Synonyms 3. lull, pause, rest, stay.

W O R D S C O N S I D E R E D

Reform BrainstormI initially chose the word reform as my concept in part because of the interesting double-meaning.

1. Structural ReformationOne way to convey the idea of reformation would be to use a stylistic, or structural, approach. The letters would flip through various type weights, sizes, etc. the possibilities and combinations would suggest end-less possibilities for how the word reformation could reform. I believe this would give the word an overall sense of being alive as we are always reforming ourselves as individuals.

2. Conceptual ReformationA second approach to the word reformation would be to define the word repeatedly by using the re suf-fix and applying an assortment of definitive endings to the word that also could define reform.

Here are some notes from this initial thought.

C O N C E P T I N G

Visual Solution 1My initial thought for animating the word reform was, I felt, the strongest at the time. I chose to use the stylistic reform approach but in my keyframe story-boarding, wanted to convey a sense of the flipping, so used random letters, numbers, etc.

After posting this idea to Blackboard last week and getting both the class and professor’s feedback, I soon decided to keep thinking about possible word choices. Although reform is one interesting approach, and considering the restrictions of the project, I may be unable to do it justice.

S T O R Y B O A R D S

Storyboard Process In this first round of storyboarding I also considered other words, but did not share the process of these until now.

One word I considered using was Bouldervore, a word relating to an intern project. I abandoned this idea quickly due to the lack of information behind the word and only 15 seconds to define it!

Another possibility was the word wink. I liked the even number of characters between the two and considered animating the process of looking and then winking at someone, followed by the possible embarrassment afterward.

This was another execution I quickly abandoned be-cause I felt that again, considering the project restric-tions, this would not be the best word to work with.


Truce MindmapAfter considering a few different words, and experi-menting during with reform, I decided to explore other options.

Since I am currently working on a project relating to the word “Truce”, I decided to explore this as a potential third option.

I discovered two possible directions for visually defin-ing this word.

1. Truce as a Pause or Break in Activity.This concept falls in line with the most recognizable definition of the word. A truce, by definition, is not a permanent break in conflict, although it can lead to peaceful negotiations. In fact, a truce only requires a temporary cease to fighting, or conflict.

Visual interpretations of a pause?1. sound - visual representation of a pause, or break, in the word. This could be achieved through letter spacing, half-letters or a simple use of the pause symbol.2. motion - letters freeze while forming words, etc.3. symbolic - pause as period, comma, ellipses, pause symbol.

2. Truce as the end goal, from many to one.1. color - use of black and white and the negative space created to convey a sense of spreading peace, or reversing conflict before it gets out of control.

A truce is a simple solution to conflict world-wide. It’s simply a pause, a window of time for considering the spread of lasting peace.

C O N C E P T I N G

Visual Solution 1A truce is a simple solution to conflict world-wide. It’s simply a pause, a window of time for considering the spread of lasting peace.

It can happens just as easily between countries, as friends, colleagues and siblings.

This animation allows for a more personal definition of the word truce and the goal is to instigate and inspire calls of truce on all levels of society.

The animation begins starts with the central letter, U to communicate this thought. Perhaps larger, interna-tional problems would seem less out of our reach in terms of solving if we had more personal involvement with the word.

This storyboard I like a lot, but I’m having trouble introducing the word without additional elements, in this case, the bar-bullets(?) that would eventually form the pause/letter U.


Visual Solution 2In my brainstorming for the word truce, I began think-ing about typographic symbolism for a pause, which led to considering all the typographic emotions.

One exciting possibility in motion that is not as easily conveyed in print is storytelling.

In this board sequence I considered telling the story of how conflicts get started, usually due to a dis-agreement or misinterpretation of events. Before you know everything is out of proportion, but if we all take a moment to pause, drop our seemingly im-portant “points” and come together, a truce can be achieved.

Although parts of this execution I was a little lost on how to make the end as natural as the start. Another concern was how to tie the use of punctuation in to the visual solution in a more fluid manner.


Visual Solution 3Positive/Negative space is an attractive concept for this word given the dual meaning.

In this storyboard, I considered more symbolic inter-pretations of the word and incorporated at the start a period, which could grow until it filled the screen after one or two seconds.

I had trouble decided how it could, but thought about using a spreading white shape, possibly a pause symbol to create positive space once again.

The pause symbol would eventually transform into a U, from which the rest of the word would appear.


Visual Solution 4My best visual solution for animating the word “Truce” borrowed elements from various stages of research. One of the biggest challenges for me with this project was forcing myself to use only the letters of the word. As was evident in most of my story-boards, I kept reaching for symbols and shapes to help get my visual definition across.

This solution, however, was successful in using only the letters of the word in a meaningful, definitive way. The letter “U” in the first few seconds represents conflict as they fly towards each other and also con-trast with each other in terms of weight, size, etc. all within the typeface family used, Futura.

The escalating typographic “conflict” eases into a black screen and is disrupted a second later by the white pause symbol, the colors reverse to imply a switch or change of direction.

The two strokes that make up the pause symbol trans-form towards one another, creating a bridge as well as the letter “U”. This central letter of the word eases backwards as the remaining letters either ease in from both sides, or appear as the animation ends.

This execution directly relates my original concept:1. Truce as a Pause or Break in Activity.2. Truce as the end goal, from many to one.1. color - use of black and white and the negative space created to convey a sense of spreading peace, or reversing conflict before it gets out of control.

A truce is a simple solution to conflict world-wide. It’s simply a pause, a window of time for considering the spread of lasting peace.


Abandoned Truce Ideas I’ve now shown you what I felt were the best solu-tions to this project, now here are the worst!


INTERNATIONAL TYPOGRAPHYIn my research I looked at a ton of global initiatives, communications of organizations such as UNICEF and peace memorials. What I found was a trend of sans serif typefaces that also exhibited a personable visual style.

T Y P E F A C E R E S E A R C H

TRUCE TYPEFACE: FUTURA My research of typefaces was centered around the international design research on the previous slide. I noticed the trend of sans serif typefaces as a friendly, universal voice.

My final three options are shown here. I was looking for a typeface with a wide range of weights in order to execute my concept of contrasting characters prop-erly. Futura and Gotham both afford a wide range. These are also both personable sans serif options, and read as sophisticated rather than sterile.

Arial Italic was a close third simply because of the elegant, active slant. I did not settle on this option due to the limited range of weights and my general dislike of non-italic Arial.

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

FUTURAABCDEFGHIJKLMNOPQRSTUVWXYZLIGHT BOOK MEDIUM HEAVY BOLD EXTRA BOLDL I GHT CONDENSED MEDIUM CONDENSED BOLD CONDENSED EXTRA BOLD CONDENSED

ARIAL ITALICABCDEFGHIJKLMNOPQRSTUVWXYZ

GOTHAMABCDEFGHIJKLMNOPQRSTUVWXYZTHIN XLIGHT LIGHT BOOK MEDIUM BOLD BLACK ULTRAG OT H A M CO N D E N S E D L I G H T G OT H A M CO N D E N S E D B O O K G OT H A M CO N D E N S E D M E D I U M G O T H A M CO N D E N S E D B O L D

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.


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

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 H E N R Y | T H E P R I N T E D P O S T E R

Objective

Design a printed poster in Adobe Illustrator or Photo-shop that will showcase a classical font or font fam-ily. If you use Photoshop, be sure to use design your poster in layers so that each piece can be imported separately into After Effects for use in your animated poster.

Your font poster should include:

* the name of the chosen font used as a headline * the designer who created the font * the classification of typeface of the font (Old style, Transitional, etc.) * the date the font was created * special characteristics of the font * a brief paragraph about the font’s history * the entire alphabet written in the font in upper- and lowercase letters.

T H E P R I N T E D P O S T E R

Process

1. Select a font or font family that you will advertise in a 14 inch x 20 inch poster. The poster can be either horizontal or vertical. 2. Brainstorm on concepts for designing your printed poster. Research types of fonts and choose your font for the project. For this project you may only use the one font family you have chosen. This project should be designed in color using typography, flat colors, and photography. The type should be the star of the story and the use of colors, photographs, etc., should support the type’s message. 3. Begin sketching thumbnails (20) for your poster. After choosing your best concepts, complete thumbnails and color roughs and post for feed back on the Discussion Board by Day 3 of the unit at 11:59 p.m. US EST/EDT. After receiving feedback, choose your strongest design and begin creating the poster. 4. Remember that posters are a very unique form of media. You want your poster to be original and stand out from the rest of the group. Use your research as you develop your poster to find ways to treat the visual aspects of your poster. Try to find something in the history of your font that could become a concept for your poster. 5. Save your Photoshop or Illustrator file as a PDF file and upload it via the Submission link by the last day of the unit at 11:59 p.m. US EST/EDT.

Assignment Criteria

* The concept for the poster should be well- designed and original. * The color roughs should be tight and show enough detail so that your peers can give feedback on them. * The characteristics of the classical font should be supported by the visual elements of the poster. * The typography, composition, colors, and graphic elements should form a strong composi tion and visual hierarchy that engages the viewer. * The content (text and image), form (shape, color, typography), and message (specific information about your font family) should be clear to the viewer.

B R A I N S T O R M I N G

QFranklin GothicMy natural choice following our last assignment is Franklin Gothic.

Typeface HistoryA realist sans-serif typeface originated by Morris Fuller Benton (1872–1948) in 1902.

An extra-bold sans-serif type which can be distin-guished from other sans serif typefaces, as it has a more traditional double-story g and a. Other main distinguishing characteristics are the tail of the Q and the ear of the g. The tail of the Q curls down from the bottom center of the letterform in the book weight and shifts slightly to the right in the bolder fonts. It was named in honor of a prolific American printer, Benjamin Franklin. Toward the end of his life, he freed his slaves and became one of the most prominent abolitionists.

Franklin Gothic Concepts:Use the letter Q to emphasise the question of it’s ori-gin, as well as highlight how the tail shifts to the right slightly in varying weights.

Benjamin Franklin also had questionable practices beyond his print style and makes me of tabloid post-ers, town-crier style.

Franklin was also a social entrepreneur. He was a primary abolitionist in his old age and worked to free many slaves.

Franklin was the inventor of the first library, one of his many social pay-it-forward initiatives. The poster could be a time-era appropriate book cover design, or include elements that hint to this, such as misregis-tration, printers marks, etc.

C O N C E P T 1

QQ

NeutrafaceElegant typeface that is geometrically sound and inspired by utility in architecture.

Typeface HistoryAlthough better known for his residential buildings, Richard Neutra’s commercial projects nevertheless resonate the same holistic ecology—unity with the surrounding landscape and uncompromising Functionalism. His attention to detail even extended to the selection of signage for his buildings. It is no wonder that Neutra specified lettering that was open and unobtrusive, the same characteristics which typified his progressive architecture. House Indus-tries brings the same linear geometry to Neutraface without sacrificing an unmistakably warm and human feel. Christian Schwartz’ Neutraface is classic and refined.

Neutraface Concepts1. Incorporate Neutra’s architecture through use of photography. The letters could define the structure of the layout, allowing only the negative space of the letters to let the image beneath show.

2. Architecture drawings, plans, measurements of the typeface letterforms could bring this poster to life. Outlined letterforms also make sense considering the open architectural style of Richard Neutra.

4. In 1954, Neutra made another contribution to architectural history with his book Survival Through Design. This philosophical treatise outlined his at-titude toward the discipline: “Design to contribute to survival of the race is more than design as...a lubrication of bigger and better trade.”

C O N C E P T 2

NEUTRAFACE

Out WestEd Fella (born 1938) is an artist, educator and graphic designer whose work has had an important influence on contemporary typography. His 1993 contribution was OutWest.

Typeface History I took my inspiration from Ed Fella’s OutWest typeface that he created with a 15 degree ellipse template

Outwest Concepts1. Ed Fella incorporates illustration, typography and photography in most works. I would use a fisheye photography to depict the west. This image would serve as the background for a type specimen poster.

2. Taco-truck Outwest poster. Compose a scene where fresh typography is served 24/7, in the most picturesque western setting.

3. This typeface was created using a cylinder grid. This feature could be made more obvious with il-lustrative elements that highlight this feature in the lettering, perhaps with color and line.

C O N C E P T 3

UniversIs the name of a realist sans-serif typeface designed by Adrian Frutiger in 1954.

Typeface HistoryUnivers is one of a group of neo-grotesque sans-serif typefaces, all released in 1957, that includes Folio and Neue Haas Grotesk (later renamed Helvetica). These three faces are sometimes confused with each other, because each is based on the 1898 typeface Akzidenz-Grotesk. These typefaces figure prominently in the Swiss Style of graphic design.

Different weights and variations within the type fam-ily are designated by the use of numbers rather than names, a system since adopted by Frutiger for other type designs. Frutiger envisioned a large family with multiple widths and weights that maintained a unified design idiom. However, the actual typeface names within Univers family include both number and letter suffixes.

The Frutiger numbering system

Adrian Frutiger designed his unique classification sys-tem to eliminate naming and specifying confusion. It was first used with Univers, and was adopted for use in the Frutiger, Avenir, and Neue Helvetica typeface families.

The number used in a font is a concatenation of two numbers. The first set defines weight, while the sec-ond defines width and position.

C O N C E P T 4

UNIVERS

Univers Concepts1. Highlight the numbering system utilized in this type family by Frutiger by using a giant grid-, plotting the coordinates of each typeface.

F I N A L C O N C E P T S K E T C H

Univers Concepts2. Science inspired solar system poster that utilizes the numbering system and grid plots to identify each typeface in the Univers family.

I am considering typographic weights and spacing of lines to convey the order behind the numeric nam-ing system. The lower third could be used to explain further.


Univers Concepts3. Frutiger’s Univers - Use color and graphics to explain the number system conceived by Frutiger for this typeface.

Use spacey graphics. One example would be to use those such as moon-cycle diagrams to indicate the weight for that given coordinate/typeface #.


Univers ConceptsAlthough I felt my last poster could work, I wasn’t fully satisfied with the conceptual depth and lack of clarity.

I decided to revisit the drawing board.

B A C K T O D R A W I N G

C O L O R R O U G H S

ULTRA LIGHT THIN LIGHT ROMAN BOLD BLACK EXTRA BLACK BLACK ULTRA

F R U T I G E R ’ S N U M E R I C S YS T E M

A B C D E F G H I J K L M N O P Q R S T U V W X Y Za b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 ! @ # $ % ^ & * ( ) _ +

19:57YEAR

WEIGHTSUNI VERS 9

Uses of Univers Fonts

Univers is well known for its legibility and clear lines and this has led to a number of nation-al and multinational companies and organizations using it. Univers fonts were largely used in the 1960s to 1970s. Currently, a modified version of this font is being used by the Swiss international Airlines, Deutsche bank, Munich Re group (also uses a modified version) as well as all over the world for signage. Between 1986 and 2004, General Electric Company also used Univers. San Francisco BART, Montreal Metro, numerous Toronto transit stations, Walt Disney World and Frankfurt airport also made use of the Univers typeface.

Univers font typeface was designed in 1954 by Adrian Frutiger and it was originally released and conceived in 1957 by Peignot and Deberny and in 1972 its type library was acquired by Haas. Basically Univers is a like a group of three typefaces which includes the Univers fonts, the Neue Haas Grotesk which was later renames as Helvetica and Folio. All the three typefaces are based on Akzidenz-Grotesk typeface of 1898 and this makes each of them to be confused for another. To differentiate the three typefaces, its designer Frutiger decided to use numbers instead of names.

9 44WIDTHS FACES

ADRIAN FRUTIGER

ADRIAN

FRUTI

GER

COND–

EXT

MAY 24, 1928 UNTERSEENTYPE DESIGNER

WEIG

HTS

UNIVER

S99

44WIDTHS

FACES

19:57

1 2 3 4 5 6 7 8 9 10

Ultra Light Thin Light Roman Medium Bold Heavy Black Extra Black

Ultra Ultra Extended Extended Extended Normal Oblique Condensed Condensed Ultra Extended Oblique Oblique Oblique Condensed

Number

Weight

Width andposition

Light

Roman

BoldBlack

Extra Black

Extra Black Extended

Thin Ultra Condensed

Light Ultra Condensed

Light Condensed

Condensed

ExtendedBold Extended

Black Extended

Bold Condensed

Ultra Condensed

Univers Animated Poster ConceptDue to the fact that the Univers family of typefaces has consistently been used in wayfinding and metro transport across the globe, my concept focuses on this aspect, as well as the unique numeric ID system as a naming device.

In both my Type I and Type II classes at SCAD-Atlanta with Barry Roseman, we were only allowed to use the Univers family, and all we designed were flight itineraries. Perhaps this is another reason I’m drawn back to this typeface and the role it plays inairports, metro systems and wayfinding.

My goal with this project is to use both visual and auditory cues reminiscent of travel, airports and subway systems.

This framework will allow me to define visually the numeric system in place with this typeface and will remain relevant to the typeface history and uses.

S T O R Y B O A R D S K E T C H E S

S T O R Y B O A R D S K E T C H E S

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 H E N R Y | P R O J E C T D : M O V I E T I T L E S

TYPOGRAPHY & COLOR

Final Concept: Fish Tank TypographyAfter mulling over my choices, and recieving feedback from the class, I decided to go with the initial concept of Fish Tank.

My first typeface choice is The Sans for it’s sim-plicity and likeness to the typography used in the film.

A close second would be a slab serif, also used in the film as a secondary typeface. The round-ness and full counters of Lubalin Graph were particularly attractive considering my concept.

Knockout is a third typeface I’ve considered due to the similarities to the movie poster and printed materials I’v seen.

Final Concept: Fish Tank ColorsThe opening scene of the film is the main char-acter, “Mia”, standing in front of a blue wall.She’s out of breath.

Therefore, I’d like the color palatte to be subtle, changing and based of an underwater or ma-rine palatte. No pastels here, but deep blues, purples, contrasted with yellows and pinks.

The Sans Extra Light Capsabcdefghijklmnopqrstuvwxyz1234567890

The Sans Light Capsabcdefghijklmnopqrstuvwxyz1234567890

The Sans Capsabcdefghijklmnopqrstuvwxyz1234567890

The Sans Semibold Capsabcdefghijklmnopqrstuvwxyz1234567890

The Sans Bold Capsabcdefghijklmnopqrstuvwxyz1234567890

The Sans Extra Bold Capsabcdefghijklmnopqrstuvwxyz1234567890

The Sans Black Capsabcdefghijklmnopqrstuvwxyz1234567890

Lubalin Graph Book ABCDEFGHIJKLMNOPQRSTU-VWXYZ1234567890

Lubalin Graph Demi ABCDEFGHIJKLMNOPQRSTU-VWXYZ1234567890

Knockout ABCDEFGHIJKLMNOPQRSTU-VWXYZ1234567890

PROCESS

Final Animation StillsI considered using my own video for this stage of my design, and if time permits, I may still give it a go.

However, I wanted to master the art of the floating titles and was exposed to the world of expressions in After Effects.

Through these thumbnails, you may track the progression of my animation.

final process - dynamic type

Documents

animated word

e r r i c

flash project

p r o f e s s o r

spoken word

s p r i n g

t y p o g r

j e s s i c