T&H Week 1 - Week 5 Exercises
30/08/2017 - 27/09/17 (Week 1 - Week5)
Gilbert Evander Aligoey [0332508]
Typography & Hypertextuality
Exercise
Lecture Notes
Lecture 1 - Introduction30/08/2017(Week 1)
On the first week of class, Mr.Vinod briefly explained what is typography all about. He walked us through the module outline and examples of previous students portofolios.
We were told to make our own academic blog for showcase all the work we do, after that our first task was to go online and search for a type of calligraphic hand that we think is suitable for us. I chose Fraktur, a black letter type that was developed in 16th century.
Lecture 2 - Calligraphy
06/09/2017(Week 2)
Mr.Vinod Started off by introducing about what is typography all about. The general consensus was that typography is a style or appereance of printed matters (oxforddictionaries.com)
To understand typography, Mr. Vinod walked us through the history of how typography evolved through time. In the beginning calligraphy essentially led to lettering, which then led to typography. Typography has accepted rules and norms, which most typographers generally follow. They are 3 terminologies that we learnt, they are :
● Font : the individual letter of a typeface, for example; a, b, or C
● Typeface : is the family of font, for example; Helvetica Bold or Georgia Regular
● Typefamily : is a family of Typeface, for example; Helvetica, Georgia, or Verdana
Mr. Vinod show us how important a word is through a "game" called Pictionary, where you have to guess the name of an object that is drawn. From that, we could understand how important and accurate a word can be, rather than just an image.
Lecture 3 - Lettering
13/09/2017(Week 3)
There was no lecture given, because we were presenting our calligraphy works and creating the type expression with the animation of it.
20/09/2017(Week 4)
In this week, Mr Vinod started the class by introducing the basics of letterforms. We were shown some of the components of the parts of letterforms. Some example of the components are Arm, Barb, Crossbar, Ear, Apex, Vertex, etc. He told us that this basic knowledge have to be understood by designers, so we have to learn these basic knowledge of Typography.
 |
Fig 1.1 Typographic Anatomy
|
Baseline : Imaginary line on the visual base of letterform
Median : Imaginary line defining the X-Height of letterform
X-Height : The height in any typeface of lowercase
Ascender : Upper part for the lowercase letters such as b,d,h,k,l,etc.
Descender : Lower part for the lowercase letters such g,j,p,q,etc.
What is the purpose of typography?
The main purpose of typography is to make life easier for your readership by making it easier to read what you’ve written:
It makes it possible to to quickly scan your text.
It entices your readers to engage with your text.
When done well, it enhances the message it presents.
It conserves that most precious and scarce commodity: reader attention.
And, while good typography can make all of this possible, bad typography can make all of this impossible.
Instructions
Exercises (20%)
The Brief
Exercises
Duration of Assignment
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.
The Brief
Exercises
Duration of Assignment
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
Work Process
Our first task was to go online and search for a particular calligraphic hand that we think is suitable for us. I chose Fraktur, a black letter type that was developed in 16th century.
The next exercise was to draw horizontal, vertical, and circular lines on the graph paper, with a purpose for making us comfortable with our pen.
 |
Img 1.1 Practicing all Horizontal, Vertical,Circular lines and some other things
|
 |
Img 1.2 Horizontal Strokes
|
 |
Img 1.3 Vertical Strokes
|
 |
Img 1.4 Circular Strokes
|
 |
Img 1.5 Horizontal, Vertical, and Circular Strokes
|
After that exercise, we focused on learning how to write the letters that we chose individually. I chose Fraktur black letter, I used 3.0 Artline Pen for this exercise, but then the ink runs out, so i change it to 2.0 on the way, because 3.0 Artline Pens are just out of stock. At first i was'nt quite used with using this pen to draw each letter, i don't have a steady hand to write something repetitively, so it's quite difficult, but eventually i was able to get used to it.
 |
Img 2.1 Practices for each letter
|
 |
Img 2.2 Fraktur Fonts 1
|
 |
Img 2.3 Fraktur Fonts 2
|
 |
Img 2.4 Fraktur Fonts 3
|
Then we were told to make 3 sentence using the Calligraphic letter that we chose.
 |
Img 3.1 Practice sentence
|
 |
Img 3.2 The 3 Sentences
|
 |
Img 3.3 The Final work on blank paper
|
Exercise 3 (Week 3) - Lettering
13/09/2017
Requirements :
- Adobe Illustrator
- Adobe Photoshop
After we presented our exercise from week 2, we were given another exercise, we have to make our name with any type of lettering as long as it defines our character or personality, then create an animation out of it.
Img 4.1 Early Concept Sketches for Lettering Exercise
Img 4.2 Digitalized Lettering
At that time, i don't really have much idea to how should i animate this, but this is what i come up with. it took about 10 artboards to create all the individual frames, which i will export it into photoshop and save it as a GIF file.
Img 4.3 ArtBoard frames for the animation
Img 4.5 The Animation
I made the animation like that because i think it kinda show that i am that person who get nervous easily sometimes.
Exercise 4 (Week 4) - Type Expression
Requirements :
- Adobe Illustrator
- Adobe Photoshop
We were given another exercise about type expression, which is to compose and express 6 words ( Jumbo, Noisy, Crooked, Hollow, Deep, Dig ), with Adobe Illustrator. But when we express it, the word have to stand out more than the other things ( dots, lines, etc ).
Img 5.2 Second Attempt of The Type Expressions
Img 5.1 First Attempt of The Type Expressions
I realized that i made the wrong word (Follow) for Hollow, i think i misheard it when i wrote it in my book. After that i just remembered that these type expressions have to be made by the chosen typefaces..., so i changed it.
Then i got feedback from the lecturer that my design for these type expressions are too common and the "noisy" one is too heavy on the illustration side.
I changed it again. The lecturers said that these are good, so now i had to choose 1 that will be animated. So i chose Dig.
Img 6.1 Type Expression : Dig
Img 6.2 Thumbnail for 6 frames from 49 frames
Img 6.3 Animated Version of Type Expression; Dig
Feedback
Week 1
Mr. Vinod told us to buy the stuff that we need for the calligraphy lesson, which we will use to make horizontal,vertical and circular lines, also other letters that we need to do. Also we need to make a blog using blogger to document everything we do
Week 2
Mr. Vinod told me that the pen have to be held at 35 degrees not vertically. The space between the lines have to be as thick as your lines, and you can make the sharp edges by using the side/sharp edge of the pen.
Week 3
When we were presentating our calligraphy exercises, Mr. Vinod told us that we have to understaand our own calligraphic hand that we chose, so that it'll be easier for us to improvise. He told us to manage our time better or it'll get us in trouble later on.
Week 4
Mr. Vinod reminded us that every work that we do have to be on Adobe Illustrator. When he sees my work for the 6 words, he told me that there are some designs that is similar with what others has made, he said that we should look around so that we could avoid the common ones.
Reflection
Experience
On the First Week, it feels tiring to do the exercise ( horizontal line, vertical line, and circular ), it was hard to make my hand used to using the artline pen to draw the lines.
On the Second Week, I was told by Mr. Vinod that i hold the pen in the wrong angle, so i have to redo all of it again but only in 3 Columns each.
On the Third Week, i was out of idea on how i should make the design of my name that suits my character and personality, but i still get it done by time.
On the Fourth Week, I came with lots of design ideas for the type expression that i made, but i kinda feel tired to do it, because it feels like a lot of work.
Observation
On the First Week I observed that i have to hold the pen at a certain angle to make the letterforms come out right, and i should take my time in drawing the lines, because what matters is that the letters is accurate and in a good form.
On the Second Week, I noticed that I just keep on drawing the letters faster each time, and making the letterforms incorrect.
On the Third Week, I was out of idea on how i should design and animate my name, so i just came up with the idea of making the whole word in black, then just lower the opacity down until the word appear clearly.
On the Fourth Week, I realized that I have to keep on asking for feedbacks, which will improve or make my works better than before.
Findings
On the First Week, I found out that I need a lot of practice in order to get used to drawing the lines or circular line.
On the Second Week, I find that if i draw slower then the lines would be much better and more organized.
On the Third Week, I found that I have to be more diligent in animating, because i tend to be lazy at making many frames.
On the Fourth Week, I found that the simpler the design is, then it would look better.
Book of The Week
Week 1 & 2
Texts on Type Critical Writings on Typography
Edited by : Steven Heller and Philip B. Meggs
Img 1.1 Front Cover of the Book
this book will enrich their understanding of 20th century type design and typography with this unique anthology. I was just stumbled upon this book and it's related to typography, so i take it and it actually quite interesting.
Img 1.2 Pg 252 & 253
it explains that a typeletters can make an impression like heavy, light, etc.
Or about a certain design that could make a sort of impression or an emotion.
For example ;
HEAVY, it feels light even though it is read as heavy
LIGHT , and light feels kinda heavier than heavy
and in color ;
RED means something like evil, something urgent or emergency.
BLUE means something like good, cold, fresh, or something that is still in the safe zone
So typeletters could work with the message that it wants to send, and make it more "valuable" than just ordinary type letters.
So typeletters could work with the message that it wants to send, and make it more "valuable" than just ordinary type letters.
Week 3 & 4
The Layout Look Book
by Max Weber
Img 2.1 The Front Cover of The Book
 |
Img 2.1 The Front Cover of The Book
|
When undertaking a new project, the first thing that must be decided on is the layout. Organized so as to encourage creativity, serendipitous discovery, and inspiration, The Layout Look Book is a great guide for both amateur and professional designers. The book includes techniques that can be used to enhance any layout, as well as insights into the factors that helped make each layout an effective piece. The styles covered in the volume range from traditional to cutting edge, and will enable any designer to become a more creative thinker and produce fantastic work. Here are some examples in the book
Img 2.2 Don't Panic (pg 143)
Don't Panic, When Patrick Duffy received the order from the London-based design firm No Days Off to design a poster to advertise medical vision test, he remembered images that had already fascinated him as a child: the Ishihara color test boards. The Japanese Professor Dr. Shinobu Ishihara developed his test patterns in 1917 to diagnose color-blindness.
Img 2.2 Inter Medum Institute : ColorCode (pg 142)
Shinnoske Sugisakis strength in designing appealing posters from abstract surfaces and geometric patterns is also shown in a poster for the exhibition of the Inter Medium Institute in Japan. The exhibition's topic of discussion is a new color code system, which allows internet users to access websites by scanning a color code with their mobile phone.
This book mostly talks about the layout design that has been made all over the world. How it was made, what is the idea behind it, who made it, and what's the purpose of the design is all explained or being told briefly in this book. Overall this book is great at being the guide for amateur and professional designer.
When undertaking a new project, the first thing that must be decided on is the layout. Organized so as to encourage creativity, serendipitous discovery, and inspiration, The Layout Look Book is a great guide for both amateur and professional designers. The book includes techniques that can be used to enhance any layout, as well as insights into the factors that helped make each layout an effective piece. The styles covered in the volume range from traditional to cutting edge, and will enable any designer to become a more creative thinker and produce fantastic work. Here are some examples in the book
 |
Img 2.2 Don't Panic (pg 143)
|
Don't Panic, When Patrick Duffy received the order from the London-based design firm No Days Off to design a poster to advertise medical vision test, he remembered images that had already fascinated him as a child: the Ishihara color test boards. The Japanese Professor Dr. Shinobu Ishihara developed his test patterns in 1917 to diagnose color-blindness.
 |
Img 2.2 Inter Medum Institute : ColorCode (pg 142)
|
Shinnoske Sugisakis strength in designing appealing posters from abstract surfaces and geometric patterns is also shown in a poster for the exhibition of the Inter Medium Institute in Japan. The exhibition's topic of discussion is a new color code system, which allows internet users to access websites by scanning a color code with their mobile phone.
This book mostly talks about the layout design that has been made all over the world. How it was made, what is the idea behind it, who made it, and what's the purpose of the design is all explained or being told briefly in this book. Overall this book is great at being the guide for amateur and professional designer.
Week 5
Basics Design - Typography
by Ambrose / Harris
Img 3.1 The Front Cover of The Book
Typography is the means by which a written idea is given a visual form. Effective use of typography can produce a neutral effect or rouse the passions, symbolise artistic, political or philosophical movements, or express the personality of a person or organization. This book aims to impart a comprehensive understanding of typography, to explore its history, theory and practice.
Aimed at both students and practising designers, it provides a thorough examination of how typography informs other aspects of creative design.
Basically this book tells you about all you need to know about typography stuff and the basics of it.
Img 3.2 Hot-metal Printing
Hot-metal Printing or cast-metal composition was developed from letterpress printing and originally invovled the casting of lines of type in molten metal. This made it possible to create large quantities type in a relatively inexpensive fashion. Nowadays text is typed into a machine to produce a punched paper tape, which then controls the characters cast by a casting machine. The resulting block - with its raised letters and fine detail can then be used to print from. The impression made, unlike lithography, is rich with texture and depth. Combined with a suitably pulpy paper stock, the results are very apparent and stepped in historical reference.
by Ambrose / Harris
Img 3.1 The Front Cover of The Book
Typography is the means by which a written idea is given a visual form. Effective use of typography can produce a neutral effect or rouse the passions, symbolise artistic, political or philosophical movements, or express the personality of a person or organization. This book aims to impart a comprehensive understanding of typography, to explore its history, theory and practice.
Aimed at both students and practising designers, it provides a thorough examination of how typography informs other aspects of creative design.
Basically this book tells you about all you need to know about typography stuff and the basics of it.
Img 3.2 Hot-metal Printing
Hot-metal Printing or cast-metal composition was developed from letterpress printing and originally invovled the casting of lines of type in molten metal. This made it possible to create large quantities type in a relatively inexpensive fashion. Nowadays text is typed into a machine to produce a punched paper tape, which then controls the characters cast by a casting machine. The resulting block - with its raised letters and fine detail can then be used to print from. The impression made, unlike lithography, is rich with texture and depth. Combined with a suitably pulpy paper stock, the results are very apparent and stepped in historical reference.
Week 6
Basics Design - Colours
by Ambrose / Harris
by Ambrose / Harris
Img 4.1 The Front Cover of The Book
This book explores in depth what colours mean, their inherent associations and their cultural connotations. Building on this information, it then tackles how to control colour in a design in order to achieve a desired effect or fulfil a specific brief. Starting with the basic principles of colour – how light works, colour wheels, colour combinations and harmonies – the book builds on these principles and explains how the designer can accurately and intentionally control colour.
I think this book is good for understanding the basic of colours and getting started with using it.
Img 4.2 The Front Cover of The Book
This Page is kinda interesting for me, because it tells you the basic and affiliated terms of colours. There are :
- Primary Colours - Additive (colours that are obtained by emitted light) and Subtractive (those associated with the subtraction of light).
- Secondary Colours - colours that is created from combining any two primary colours in equal proportions.
- Tertiary Colours - colours that is produced by combining a secondary colour with the remaining primary colour.
Img 4.3 Diagram of Primary Colours
Img 4.1 The Front Cover of The Book
I think this book is good for understanding the basic of colours and getting started with using it.
Img 4.2 The Front Cover of The Book
This Page is kinda interesting for me, because it tells you the basic and affiliated terms of colours. There are :
- Primary Colours - Additive (colours that are obtained by emitted light) and Subtractive (those associated with the subtraction of light).
- Secondary Colours - colours that is created from combining any two primary colours in equal proportions.
- Tertiary Colours - colours that is produced by combining a secondary colour with the remaining primary colour.
Img 4.3 Diagram of Primary Colours
Week 7
Basics Design - Layout
by Ambrose / Harris
by Ambrose / Harris
Img 5.1 The Front Cover of The Book
Layout is the arrangement of the elements of design in relation to the space that it occupies according to an overall design scheme. It could also be called the management of form and space. The objective of layout is to present the visual and textural elements that are to be communicated in a manner that enables the reader to receive it with the minimum of effort. With good layout, a reader can be navigated through quite complex information in both print and electronic media. The second title in the Basics Design series Layout addresses the practical and aesthetic considerations of the job in hand such as where and how the content will be viewed, regardless of whether the final format is a magazine, website, television graphic or bottle of bubble bath.
Img 5.2 The Golden Section
The Golden Section was thought by ancients to represent infallibly beautiful proportions. Dividing a line by approximate ratio 8:13 means that the relationship between the greater part of the line to the smaller is the same as that of the greater part to the whole.
Objects that have these proportions are both pleasing to the eye and echoed in the natural world.
Img 5.3 Examples of Layout in Magazines
Img 5.1 The Front Cover of The Book
Layout is the arrangement of the elements of design in relation to the space that it occupies according to an overall design scheme. It could also be called the management of form and space. The objective of layout is to present the visual and textural elements that are to be communicated in a manner that enables the reader to receive it with the minimum of effort. With good layout, a reader can be navigated through quite complex information in both print and electronic media. The second title in the Basics Design series Layout addresses the practical and aesthetic considerations of the job in hand such as where and how the content will be viewed, regardless of whether the final format is a magazine, website, television graphic or bottle of bubble bath.
Img 5.2 The Golden Section
Objects that have these proportions are both pleasing to the eye and echoed in the natural world.
Img 5.3 Examples of Layout in Magazines
Week 8
Basics Design - Virtual Typography
by Ambrose / Harris
by Ambrose / Harris
Img 6.1 The Front Cover of The Book
Typography is the means by which a written idea is given a visual form. Effective use of typography can produce a neutral effect or rouse the passions, symbolise artistic, political or philosophical movements, or express the personality of a person or organization.
Typography is full of illustrated examples, it can be fun and somehow catch the attention of the readers by the design of typography that the designer made.
Img 6.2 Rabelais Bottle - Francois Panard
This typographic arrangement by Charles-Francois Panard(1694-1765) proves that visual poetry existed long before the turn of the nineteenth century when figurative arrangements of type became popular.
Img 6.3 Show of Force
Chermayeff & Geismar remain active and still produce highly innovative design solutions. The Show of Force identity, which Chermayeff & Geismar created for a television production company, proves that this well-established design agency has learned to apply its creative skills to transitional media.
Typography is the means by which a written idea is given a visual form. Effective use of typography can produce a neutral effect or rouse the passions, symbolise artistic, political or philosophical movements, or express the personality of a person or organization.
Typography is full of illustrated examples, it can be fun and somehow catch the attention of the readers by the design of typography that the designer made.
Img 6.2 Rabelais Bottle - Francois Panard
This typographic arrangement by Charles-Francois Panard(1694-1765) proves that visual poetry existed long before the turn of the nineteenth century when figurative arrangements of type became popular.
Img 6.3 Show of Force
Chermayeff & Geismar remain active and still produce highly innovative design solutions. The Show of Force identity, which Chermayeff & Geismar created for a television production company, proves that this well-established design agency has learned to apply its creative skills to transitional media.
