WEEK 12 - WEEK 14 ; KINETIC TYPOGRAPHY

23/11/2017-6/12/2017  Week 12 - Week 14

Ashila Putri Sandi [0332938]

Typography and Hypertextuality

Final Project; Kinetic Typography

Lecture/Tutorial 11:
No lecture was conducted

Lecture/Tutorial 12: Indicating Paragraphs

The class was started with Mr. Vinod giving us our final lecture on the first semester about alignments and indicating paragraphs. There are several options for indicating paragraphs. The first example is when we see the pilcrow (indicate a new paragraph/paragraph space) a holdover from a medieval manuscript. 

Fig 1.1 Example of Pilcrow

Fig 1.2 The Example of Using Pilcrow

The next thing was told by Mr. Vinod was line spacing which is often mistaken as leading. Both are different well sometimes taken synonymously. Basically, line space is a space between two paragraph (the space between descender to the ascender. While leading space is the space between two line spaces. It is necessary to ensure a cross-alignment (when you have two paragraphs of the text on two-sided, the line should always be parallel) across columns of text. In order to maintain a cross-alignment, spacing and leading should be the same.

Then, there is Indentation. An indent should be the same size as the line spacing or the same as the point size of the text. While we're using indentation, we should make sure that it is a justified text. Moreover, we have to avoid using indentation when we're using left alignment because it will make it uneven. Therefore, when we use justified, it will be even from both right and left side. Furthermore, we also have to avoid using indentation with paragraph spacing. Contradict to indentation, we also can use extended paragraphs below create unusually wide columns of the text. Despite those obstacles, there could be strong compositional or functional reasons for choosing it.

Fig 1.3 The Example of Indent

Then, there are widow and orphan, the explanation is:

Widow is a short line of text left alone at the end of the column of text.

Orphan is a short line of text left alone at the start of the column of text.

Fig 1.4 The Example of Widow and Orphan

Widow and orphan are considered more serious in a justified type of text. The way to fix a paragraph that has widow or orphan is to reformat the text by adjusting the kerning of the letters or by increasing the number of words (widow).

To give emphasis to a word or phrase or a sentence, Mr. Vinod told us that it is okay to give emphasis in Italics with the number of lines which 5 or 10. When giving emphasis in Bold, if it's a body of text, select the entire paragraph and decrease the font size by 0.5. That is if the font is too bold. If we’re going to give emphasis by changing the typeface, never use a serif type, if all your text is using serif, the same thing with sans serif, never use a sans serif if you're typing using sans serif for the rest of your paragraph. Another thing is,  you could also give emphasis to create a highlight. When using highlight you need to decide whether you wanted to make the highlighted text a little indented so that it's in alignment with the text or you could make it not in alignment with the text.

Mr. Vinod also cleared us up to the difference between symbols used for quotation marks and symbols used for inch/feet. 

Head indicates a clear break between the topics within a section.

Subhead can be indicated by reduced separation

Sub subhead can be indicated by it being embedded in the body of text.

Fig 1.5 The Example of Head and Subhead

INSTRUCTION


Requirements:

1. Adobe Illustrator CC 2017
2. Adobe Photoshop CC 2017
3. Adobe Animate CC 2017

Instruction  :

1. Look up for kinetic typography poster online as reference
2. Search for a statement, dialogue, or quotes. Using your font's general information also acceptable
3. Try to make your poster using Adobe Illustrator and animate it using Adobe Photoshop or Animate as GIF.


WORK PROCESSES

After doing the font design project, we were required to do our last assignment which was making a poster with a font that we have already made. My Font name is Sefura which is the combination of Serifa and Futura because my font was made based on those two fonts as references. 

The first step of creating a poster to show off my own font is to do research from samples on the internet. However, I didn't find many posters that are similar or related to my font, so I decided to choose some of the designs that I think would be nice for my poster. I also search for a simple poster that could relate to my font which is simplicity. So, these are some of my references.

Fig 2.1  References

I started coming up with a couple of different poster design based on the references that I found on Pinterest. However, after I showed my work to Mr. Vinod, he said I needed to make something that more reflecting my font and showing the characteristic of it. At, first I was so confused to improve my work, I was only mimicking the style and colour scheme from the references. Eventually, Mr.Vinod helped me to make something different to my poster by making the font size bigger and showing a particular part of the letterform.

Fig 2.2  First Attempt from the first reference

Fig 2.3  Several Attempts from the second reference

After the feedback that Mr. Vinod gave me, I chose to go with the second one. I ended up making a different poster from the reference but still the same colour scheme. After I did my poster I needed to animate it. From the tutorial, Mr. Shamsul gave us a tutorial about using basic tools in Adobe Animate, but we could choose which software we want to use. I chose to use Adobe Animate because I was so curious how to operate it and I wanted to learn something new. The obstacle was, there wasn't so much thing to do on Adobe Animate because I didn't know how to operate it well. So, I ended up using simple animation for my poster.

Fig 2.4 Editing the Animated Poster in Adobe Animate

Fig 2.5 First attempt

Fig 2.6 Second Attempt

Fig 2.7  Third Attempt

FINAL OUTCOME

Fig 3.1 The Final Poster

Fig 3.2 The Animated GIF

Feedback 

Week 12

Specific Feedback : 

I have to search the feature of my own font and make the poster connected to that particular feature. Mr Vinod helped me figure out how to make my font’s characteristic stand out by making some of the letterform larger, but however, I still have to refine to make my work better. 

General Feedback :

We have to look our font’s character and make the poster based on that characteristic. Also always use guidelines to help your alignment while making a poster/any design.

Week 13

Specific Feedback: Mr. Vinod and Mr. Shamsul looked at my poster and the animated one. Mr. Vinod said the construction was good, but there was a problem of the choices of colour for some letter and also the style (I used an outline for some letters) and it wasn’t acceptable. Moreover, I used a long line for one of my letters and he said I should delete it. For the animation, Mr. Shamsul said there were too many movements going on, and I shouldn't have animated all the aspect of my poster. Mr. Shamsul also said to make it simple and told me to make the letter appear together.

General Feedback : If we want to print our poster, make sure we set the margin first. Where else, Mr. Vinod told us to print in on A3 paper first then cut it by ourselves.

Reflection

Experience

Making a good poster is not that easy. Is not only about the design and the display that we see, but it is about what we are going to tell the viewer of our own artwork. Our poster must have a message to tell. In this project, I was required to express my own font into a poster and also making a connection between those two. It was very exciting making a poster thought I had some trouble while searching for the layout because I was only thinking about the design and appearance of the poster but not the layout of the font that I needed to show.

Observation

While I was making this project I was having trouble searching for the references that I need to reflect on my poster. Also, I had trouble and lack of inspiration while making the layout of the poster. It took a lot of time for me to do research and choosing references that I wanted and also connected to the characteristic of my font. However, I've observed something new while using Adobe Animate, I learned how to use Adobe Animate and make a simple animated picture, or GIF. Although I had to do some tutorials on Youtube before using the software.

Findings

From this project, I found out that research is very important. Good references and inspiration board also mood board are also important when we want to make an artwork. Read more books, especially design book and do more research on the internet would help me gain more information and inspiration. Also, I need to keep up my time management while working on a project. Likewise, I found that every time I want to make a poster, I have to know what my concept is, so I would not be having trouble while making the poster. Moreover, I found out that It's kind of hard using Adobe Animate while animating a poster, and I think it is easier to use Adobe After Effects because there are a lot more features that we can do to animate our artwork.

Further Readings
Design and Layout: Understanding and Using Graphic by David Dabner
From this book, I only read the Poster & Display section because it is related to my lst project which was making a poster. It says that from the early of the nineteenth century, which demonstrated the early struggles of the trade unions, to the later graphic use of letterforms throughout Europe and the USA, the development of posters offers us a contemporary view of history.


This book also tells that well-designed poster need to work on two levels. The first one is they need to attract attention. The second one is they need to inform. A great poster will meet these criteria and at the same time create a sense of form and illustrate good use of colour. A poster is a big canvas to work on and this gives us the chance to exploit the use of letterform as an image. Moreover, the most important is to remember about posters is that the main message has to be immediate. Posters are often given no more than a quick glance in passing (think of roadside adverts, for example). For book cover, you can afford to use a small type, it is because it will be read from a distance of about 15-20 cm. Small type is definitely, not acceptable in poster design. In addition, do not include too many different elements. We have to make our point quickly and strongly through your use of form and colour. If you look at the most effective poster, you will see that a single, strong element is almost always more successful than a number of different elements. Audiences appreciate clarity and feel comfortable when they can assimilate an idea and information easily.
Relatively few copies of posters are printed. Silk screen printing is a good option because it produces vivid colours, bloss and metallic inks. It can also print light colours on dark paper. If thousands of copies ten to be flatter but the process is excellent at producing four-colour designs.
Graphic Design Solutions by Robin Landa
Typography Measurement
A designer measures type as well as the spatial intervals between typographic elements. These intervals occur between letters, words, and two lines of type. The spatial interval between letters is called letterspacing. Adjusting the letterspacing is called kerning. The spatial interval between words is word spacing. The spatial interval between two lines of type is line spacing, traditionally called leading in metal type, where strips of lead of varying thickness (measured in points) were used to increase the space between lines of type.

This book has 2 Part of content. The first one is Part I: Fundamentals and the second one is Part II: Application. The first part tells about an introduction, the basic of graphic design, typography, creative process, visualization and composition. While the second part shows about the application of graphic design such as a poster, publication design: covers & interiors, branding, visual identity, package design, corporate communication: brochures, annual report & more, advertising and interactive design.

I read both parts of the book but not all of the content. However, the most important and related topic with this typography subject is the typography section. These are some information that I've learned and got from the book :

The traditional system of typographic measurement utilizes two basic unit: the point and the pica. Most of the type is available in sizes ranging from 5 points until 72 points. A type that is 14 points and less is used for setting text and is called text type or body copy. Otherwise, sizes above 14 points are used for display font. Line length, which is the horizontal length of a line of type, is measured in picas. Approximately 6 picas = 1 inch; 12 points  = 1 pica; approximately 72 points = 1 inch. Determining a suitable line length for readability depends on the design of the specific typeface, type size, line spacing, and length of the content.


Alignment
The style or arrangement of setting text type is called type alignment. The primary options are as follows:

• Left-aligned: text aligned to the left margin and rangged or uneven on the right side; also called left-justification or fluch left/ragged right.

• Right-aligned: text aligned to the right margin and rangged or uneven on the left side; also called right-justification or fluch right/ragged left.

•  Justified: text aligned on both the left and right sides.

• Centered: Lines of type centered on an imaginary central vertical axis. 

• Asymmetrical: lines composed for asymmetrical balance (are conforming to a set, repetitive arrangement).