Typography and Hypertextuality Exercises

30/08/2017 - 27/09/2017 (Week 1 - Week 5)
Tiffany Kezia Joe [0333043]
Typography and Hypertextuality
Exercises

-

Image 0.1 Typography http://velare-media.com/wp/wp-content/uploads/2017/01/typeography.jpg

Lectures

Lecture/Tutorial 1 - Week 1, 30/08/2017
During our first Typography & Hypertextuality class, Mr.Vinod introduced himself as well as the main concept of Typography. He asked us to create a blog as our e-portfolio that should be updated progressively every week. Some of our senior's blogs were also shown for the example. Besides of e-portfolio, he told us to read a book about typography every week in and choose a particular part which attract us to be written in our blog. 

Lecture/Tutorial 2 - Week 2, 06/09/2017
On this second week, we continued our previous exercises and started on doing the alphabet. Before class ends, Mr.Vinod gave us lecture about Typography. He asked our class, "What is Typography?" and one of my peers answered, "According to Oxford Dictionary , Typography is the style and appearance of printed matter." Then, he explained that anything that's constructed/assembled with letter form in appealing way or creating a logo type is called Typography. Before we come up with typography, it's history started from calligraphy which evolved to lettering and finally to typography as the current state. Paul Rand, Shigeo Fukuda, Ahn Sang-Soo, Ed Fella are some of typography artist as references that were mentioned by Mr.Vinod. He also explained about few terms in typography. The origin of the word "font" was from Foundry, a place where things are made through melting process. Font itself is more referring to the process, meanwhile Typefamily is group of type styles that share a name, have similar characteristic (e.g: Helvetica, News Gothic). Typeface is the specific type of font in a typefamily (e.g: Helvetica Bold, Helvetica Light, News Gothic Bold, News Gothic Roman).

Lecture/Tutorial 3 - Week 3, 13/09/2017
We started our class by presenting our calligraphy works from previous weeks, each of us were given feedback to improve our work. After all of us have done with the presentation, Mr.Vinod gave us a new task, which is doing a design of lettering that portrays our personality. Then, we need to animate our design by using Adobe Illustrator and Photoshop.


Instructions

Exercise 20%


The Brief
Exercises

Duration of Assignments
4 Weeks (Briefing on Week 1)

Deadline 
Week 5

Description
Throughout the beginning and the middle of the semester, exercises will be prescribed at various phases of the module. These exercises will aid and benefit you in your quest to gain theoretical and practical knowledge in Typography that will inform you and provide you with the necessary experience to take on the module’s projects. All exercises prescribed are to be completed and documented (labelled, clean, clear & concise) in your eportfolio and Hardcopy portfolio respectively.

The exercises are as follows: 
1) Calligraphy 
2) Lettering 
3) Type Expression 


Calligraphy: You will choose a calligraphic hand (Round Hand, Black Letter, Uncial). You will complete the prescribed exercises (vertical lines, horizontal lines, circular lines and letters a–z). Upon completion of the prescribed exercises, you shall write a small 3 or 4 line passage/poem. You have 2 weeks for this exercise; it is to be done in class and at home. (2 weeks). 

Lettering: Draw out the letters of your name (first name or nick-name). Try to capture your personality or character in the design of the letters. Using the appropriate software, animate the drawn out letters while ensuring the animated gif stays within the character and personality. (1 week). 

Type Expression: You will be given 6 words to compose and express. You will be given a set of typefaces to work with. Through iteration, use the appropriate typeface and compose the letters in a manner that allows meaning of the word to become visible. (1 week).


Requirements
To complete and to showcase mastery in the exercises prescribed in its various forms over the 13- week period. This process is repeated for all 8 weeks. The work is compiled logically and chronologically in an A3 clear sheet folder and documented on the students’ eportfolio. 

Submission 
  1. Exercises to be documented in an A4 Clear Sheet folder, logically and chronologically. The works must be labelled and dated. 
  2. Eportfolio posts at the end of the assessment task labelled and dated, with images captured well and in good light in so that the works are pleasing to the eye and legible. 

Objectives 
  1. An appreciation and understanding for the evolution of Typography. 
  2. An appreciation of the skills sets and mental discipline required in Typography 
  3. To develop necessary skills and sensibilities for effective typographic communication




Exercises

Week 1 Exercise (Calligraphy) 

Requirements:
  1. A4 Graph Papers
  2. 3.0 Calligraphy pen(s) (flat/slanted nibs)
  3. Additional papers as rough paper
  4. Name, Student ID, and date on the top left corner
Instruction:
  1. Prepare 3.0 calligraphy pen and several A4 graph papers for drills practices
  2. Before drawing the lines, ensure the position of the paper should be landscape
  3. Hold the pen lightly as if you're holding a feather and maintain the same angles when you draw the lines
  4. Draw the horizontal lines with the length of two big blocks and the thickness of a row
  5. Draw the vertical lines with a similar requirements as horizontal lines
  6. Draw each circles in 1 box, remember that the circles must have thick and thin area.

Image 1.1 First attempt in horizontal lines

Image 1.2 Practice of horizontal lines

Image 1.3 FINAL of Horizontal lines

Image 1.4 FINAL of Vertical lines

Image 1.5 Practice of circles

Image 1.6 FINAL of Circles

Image 1.7 Additional practices



Week 2 Exercise (Calligraphy)

The calligraphy hand that I chose for this assignment is Black Letter hand. Initially, I wanted to choose Round Hand since it suits my handwriting. But after some consideration, I decided to challenge myself and pick the Black Letter.

Image 2.1 Blackletter Calligraphy

Image 2.2 First attempt in alphabet a-l

Image 2.3 First attempt in alphabet m-x

Image 2.4 First attempt in alphabet y-z

Image 2.5 FINAL of alphabet a-l

Image 2.6 FINAL of alphabet m-z

Image 2.7 Practices on rough paper before doing it on graph paper

Image 2.8 First attempt in writing sentence

Image 2.9 Practicing a-z for warm up before writing sentence

Image 2.10 Practicing several sentences
Image 2.11 FINAL sentence on graph paper

Image 2.12 FINAL sentence on blank paper






Week 3 Exercise (Lettering)

Requirements:
  • Adobe Illustrator
  • Photoshop
  • Pencil/pen & paper to sketch
In today's class, we were told to design our own lettering which portrays our personality. At first, I sketched some designs with pens and pencils. After some consideration, I realized that block letters isn't exactly my style so I decided to design my letters with brush pens. Then, I took a picture of it and transferred to my laptop. I began by tracing it with pens in Adobe Illustrator and then create the animation in Photoshop.


Image 3.1 The sketch before deciding final design

The final design that I chose is a simple brush stroke lettering, decorated with petite flowers. The brush strokes were created in one firm stroke, which defines my bold personality. At the same time, the style also gives a sense of informality/casual. Meanwhile, the flowers which decorated my lettering adds a hint of feminine side of myself. 
Image 3.2 Animated version of my design. The brush strokes defines my casual and bold personality, decorated by flowers which portrays my feminine side.


Image 3.3 Thumbnails of the animation




Week 4 Exercise (Six Words Type Expression)


Requirements:
  • Adobe Illustrator
  • Photoshop
  • Pencil/pen & paper to sketch
Words: 
  • Jumbo
  • Noisy
  • Crooked
  • Hollow
  • Deep
  • Dig
On previous week, Mr. Vinod gave us 6 words and we need to express those words only with limited choices of  fonts (Garamond, Janson, Caslon, Baskerville, Bodoni, Serifa, Futura, Gill Sans, Univers) in order to focus on portraying the words better, and we also restricted from distorting the letters.

Image 4.1 Initial design (Before receiving feedback)
After Mr. Vinod looked at my artwork, he told me that Jumbo is already good, Mr. Shamsul also mentioned that he liked it. As for the other words (noisy, crooked, hollow, deep) it needs to be adjusted slightly. However, for the word "dig", Mr. Vinod asked me to re-do it since he doesn't know what's happening there lmao.

Image 4.2 Final design of 6 words Type Expression

Then, we should choose one of the type expression to animate it as a gif and I chose "deep".

Image 4.3 Animated gif of Deep

Image 4.4 Artboards 1-12
Image 4.5 Artboards 13-20



Feedback

Week 1:
On our first class, Mr. Vinod briefly explained about typography to us. Then he told us to make a design blog as our e-portfolio and gave us a calligraphy assignment which we need to practice horizontal lines, vertical lines, and circles on graph paper using 3.0 calligraphy pen.

Week 2:
We should not put too much pressure when we're doing calligraphy and hold the pen as if we're holding feathers. We also need to maintain our specific angles when gripping the pen. He reminded us to update our blogs continuously.

Week 3:
Specific feedback: When my hardcopy portfolio was being evaluated, he mentioned that my work was quite good. The alphabet drills were almost consistent since I worked in the same row for each alphabet except for the Ds and Gs because as I continue the work, the size of the Gs are getting bigger and the strokes for Ds were ended in different rows. Meanwhile for the poems in graph paper, he pointed that the inconsistency of my Ds are obvious and if I try to practice harder, my calligraphy will become better. As for the poems in blank paper, the letters seems to bled and he told me to consider about trying the calligraphy in different types of paper such as glossy, etc. I also shouldn't make the guidelines too thick.

Week 4:
General Feedback: We should read books diligently so we would know the basic knowledge before Mr. Vinod gave the lecture. For the type expression assignment, he said to only use 10 types of fonts that he has given last week so we could focus better on how we visualize. When Mr.Vinod are giving feedback to our peers, we need to follow him therefore we can learn from the other's feedback and gain inspiration from it instead of staying at our own seat.

Specific Feedback: On previous week, Mr.Vinod said that my lettering idea was interesting. Today Mr.Vinod and Mr.Shamsul walked around the class to give feedback and when it was my turn I explained that my lettering describes my bold personality, Mr. Vinod said my lettering looks informal/casual due to the letter's strokes then he concluded that my lettering is "casually bold and feminine. Regarding to type expression assignment, he said that "hollow" and "jumbo" were already good and Mr. Shamsul mentioned that he liked the "jumbo". For the word "noise, initially Mr. Vinod told me to make it fuller and he liked the final work for "noise". As for the dig, he suggested to create it as if there's cavity. After we have done with 6-words expression, he said to choose one word to animate. I chose the "deep" and when I've finished with the animation, he told me to adjust the letters to come up from below to create the "deep" effect.

Week 5:
General feedback: The initial and the final artwork must be documented so we can see the progress and learn from our mistakes. Instead of keep staying when we were working on our work, we should see the others' work to learn and gain inspiration. For our portfolio, do not put unnecessary labels since it might be confusing. We just need to put the module name as the label.

Specific feedback: At the beginning of the class, Mr. Vinod looked around to view our e-portfolio. When he was looking at my animated type expression, he said that the flow is already there, but it still not enough since it moves too slow and a bit lagging. He also mentioned that the difference between first and final work for type expression can be seen clearly. In the first attempt, it lacks of impact and seems to have a lot of space. Since today is the final submission, Mr. Vinod and Mr. Shamsul reviewed our e-portfolio as each of us showed our hardcopy portfolio. Mr. Vinod said that the structure of my blog needs to be fixed because I don't have the reflection part. The photos in my blog also needs to be re-taken as it still have shadows.


Reflection

Experience
Week 1; I was super excited when the assignment was given since I could try out new things, however it's not as easy as it seems to be.
Week 2; I enjoy doing the alphabet drills more than the basic drills (horizontal, vertical, circles).
Week 3; Initially, I was confused because I literally had no idea when we were told to design our name. Fortunately, on the last minutes of class I managed to finish my design in time.
Week 4; For this week assignment, it was quite satisfying as I already had plan on how to express the words.

Observation
Week 1; I was having a hard time and slightly frustrated in doing the drills because I kept failing to do "perfect" straight lines.
Week 2; After trying several angles and controlling my grips, I finally became comfortable when doing the strokes.
Week 3; I realized that I felt a bit lost when doing something without a vivid guidelines. Therefore, I need time to reflect on my ideas and then start to do the given task.
Week 4; When I already have clear vision of the final work, I could complete the task in short time.

Findings
Week 1; I need to be consistent in doing the drills in order to achieve satisfying result.
Week 2; The calligraphy pen needs to constantly replaced since a blunt tip will make the ink bled.
Week 3; Combining 2 medias between digital and traditional is really helpful because it could complements each other.
Week 4; I discovered that working in last minute is more effective for me since I need a long time to dissect my ideas instead of working bits by bits.


Books of the Week

Week 1&2's book

Type Matters! by Jim Williams


Image 1.1 Cover of Type Mattters!
Type Matters! became my first typography book that I read. At first glance, I simply attracted by its leather cover and when I saw the content of the book, I decided to borrow it.

This book is absolutely recommended to those who just started to learn typography like me. It guides the readers through the history of type design, the origins of typographic terminology, type measurement, Roman type and a very helpful spread entitled The Anatomy of Letterforms.

When I was doing my Type expression assignment, I applied some of the guides from this book and I found it really helpful because it makes me understand how to use the typefaces correctly.

"Good typography is about visualising language through the arrangement, composition and choice of type."

Image 1.2 



The Typographic Universe: Letterforms found in Nature, the Built World and Human Imagination by Steven Heller and Gail Anderson

Image 2.1 Cover 
Basically, this book compiled the photography of letterforms that uniquely created by human or naturally produced by nature.

Contrary to previous book which is has more text, this book mostly contains photos. The works that displayed on this book ignites my inspiration and creativity in creating more unique typography.

Image 2.2 Letterforms created with vegetables

Image 2.3 Metal Sculpture designed with alphabets
Image 2.4 Close up picture of metal sculpture

Week 3&4's book

Typography by Ambrose/Harris

still on progress.........

Comments

  1. Nice blog!! Thanks for sharing it, it’s really helpful. I know the best blog where you learn about Tips of Typography in Web Designing And in this blog post, we are going to share some of the typography in web designing. To transmit the messages to the end-user. Sure, text in the form of web typography is the most obvious means of doing text. Headlines, text, fonts, sizes, line spacing and paragraph spacing all affect the way information is obtained. The more text a website has, the larger the font it requires.

    ReplyDelete

Post a Comment

Popular Posts