Typography | Task 1 Exercises
25th August 2021 - 22nd September 2021 / Week 1 - 5
Name: Isaac Yaw Wai Zac (0343197)
Course: Bachelor of Engineering (Hons) Mechanical Engineering
Module: Typography // Mr. Vinod & Mr. Charles
Task 1: (Exercises 1 &2)
LECTURES
Week 1 / Introduction and Briefing (25th August 2021)
Figure 1.1: Class session on week 1 with Dr. Vinod and Dr. Charles
In the first class with both lecturers, it was a very fun 4 hours session as there was very much information given so as the overwhelming tasks assigned in the first class itself! However, all the information, topics, tutorials, and rules were very well established and very professionally delivered in a very interactive way. The class started with a quick run-through of the needed online tools to be used on a regular basis such as the Facebook group, Google Drive, Blogger, and Times. Then, we were given the very first task after given a brief explanation of what is needed to be done with the help of the module information booklet (MIB). We then proceeded with the setting up of the e-portfolio via blogger and it was made easier because prerecorded videos on it were already provided to us. With the help of interactive comments from Dr. Vinod, a few students' e-portfolios were picked to find any errors to be corrected. I personally find it very productive because other students with similar problems can correct their portfolios too. Then, the class was concluded with an attendance-taking session so as a voting session for the words/topics to be chosen for the first task assigned.
In this week, I viewed and learned about the very first lecture labeled as Typography_1 (Development) which in summary, the history and development of typography and writing from different parts of the world were introduced. It was a very interesting topic because this is a very uncommon topic and is very different from the main course that I and currently taking.
Figure 1.2: First lecture video watched in the first week
In the first lecture, the development and timeline of writings and forms were introduced. The initial writings started with scratching into wet clays with tools such as sharpened sticks and also onto rocks with chisels.
Figure 1.3: Development of alphabets from Phoenician alphabets
The Greeks changed the direction of writing in which the style of writing is called 'boustrophedon'. This style makes the writing go from right to left and then vice versa for subsequent lines alternatively. When the direction changed, the orientation of the letters also changes.
Figure 1.4: 'Boustrophedon' line style
Figure 1.5: Development of early letterform
In the continuation of the development, the square capitals were the written version and can be found in Roman monuments. The strokes have varieties that are achieved by using the pen at an angle of 60 degrees off the perpendicular.
Figure 1.6: Square capitals
There is also a compressed version of the square capitals which is more efficient because it will take less time to write. However, it is written at an angle of 30 degrees from perpendicular and is slightly harder to read.
Figure 1.7: Compressed square capitals
However, the use of cursive hand was introduced to allow the letterform or words to be written in a more simplified manner for speed. In this development, the beginning of lower case letterforms was seen. Next, the condensed and strongly vertical letterform known as Blackletter or Textura gained popularity. A rounder version called Rotunda was seen in the South.
Figure 1.8: Textura/Blackletter
A more developed and redefined timeline can be seen below:
- 1450 Blackletter- This is the earliest printing type based on hand-copying styles which were then used in books in Northern Europe.
- 1475 Oldstyle- Based on the lowercase form used by the Italian humanist scholars for book copying and having the uppercase forms inscribed on Roman ruins.
- 1500 Italic- The very first type was condensed and close-set to allow more words to be written on a page.
- 1550 Script- This type is not entirely appropriate in lengthy text settings but it has always been enjoyed.
- 1750 Transitional- The refinement of the old-style forms after the advancements in casting and printing.
- 1775 Modern- This style shows the further rationalization of old-style letterforms.
- 1825 Square Serif- This was originally the heavily bracketed serif and the newly developed faces need the use of heavy type in commercial printing. The brackets were then dropped.
- 1900 Sans Serif- The forms were first introduced by William Caslon IV in 1816. Occasionally, strokes were flared to suggest the calligraphic origins of the form.
If you don't know history, then you don't know anything. You are a leaf that doesn't know it is part of a tree. -Michael Crichton
Week 2 / Development (1st September 2021)
Figure 1.9: Class session on week 2 with Dr. Vinod and Dr. Charles
This week, the class session was a very interactive one as both our lecturers went through most of our work and progress to give feedback on what to work on, for task 1 (Type Expression). other than that, we were also sent to our breakout rooms to give and receive feedback from our peers which made the class more interactive and interesting. The few questions/guidelines in this breakout room session were shown and elaborated below.
Sketch
1. Are the explorations sufficient?
Relatively sufficient but some of the sketches did not fit the theme and can be further improved.
2. Does the expression match the meaning of the word?
All the expressions match the meaning of the word but can have better representation with some fine changes.
3. On a scale of 1–5, how strong is the idea?
About a 3.5/5
4. How can the work be improved?
The word 'terror' can fit well by representing the letter 'e' as a giant. The word 'melt' is very well integrated, but the lines and elements used to represent the melting effect can be made more realistic. The word 'pour' was also very well integrated, but is relatively messy and can be simplified to look cleaner and more aesthetically pleasing.
In the lecture, the 'Typo_2_Basic' video was viewed and some content can be extracted from it as shown down below.
Baseline- The imaginary line visual base of the letterforms
Median- The imaginary line defining the x-height of letterforms
X-height- The height in any typeface of the lowercase 'x'
Stroke- Lines that define the basic letterform
Apex/Vertex- Point created by joining 2 diagonal stems
Arm- Short strokes off the stem of the letterform
Ascender- Portion of the stem of a lowercase letterform that projects above the median
Barb- The half-serif finish on some curved stroke
Beak- The half-serif finish on some horizontal arms
Bowl- The rounded form that describes a counter
Bracket- Transition between serif and stem
Crossbar- horizontal stroke in a letterform and joins 2 stems together
Crotch- Interior space where 2 strokes meet
Descender- Portion of the stem of a lowercase letterform and projects below the baseline
Ear- Stroke extending out from the main stem or body of the letterform
Em/en- Width of an uppercase M
Finial- Rounded non-serif terminal to a stroke
Ligature- Character formed by the combination of 2 or more letterforms
Link- Stroke that connects the bowl and the loop of a lowercase
Serif- Right-angled or oblique foot at the end of the stroke
Spine- Curved stem of the S
Spur- Extension that articulates the junction of the curved and rectilinear stroke
Stress- Orientation of the letterform
Swash- Flourish that extends the stroke of the letterform
Terminal- Self-contained finish of a stroke without a serif
Figure 1.10: Type phases
Figure 1.11: Full font type phases
Figure 1.12: Font types
Week 3 (8th September 2021)
Figure 1.13: Week 3's session
In the third week, the Typo_3 lecture video was viewed and some of the contents were extracted and shown down below. During the session, both Dr. Vinod and Dr. Charles went through each of our progress on exercise 1 about typefaces. Then, feedbacks were given to us for further changes and the final hour of the session was given to allow us to create a short video or gif with one of the selected typefaces.
-'kerning' is the automatic adjustment of space between letters. Often mistaken as 'letterspacing', but the addition and removal of space in a word or sentence is called 'tracking'
Figure 1.14: Letter spacing illustrations
Figure 1.15: Different types of trackings
The letterspacing is important and designers often use uppercase letters but there has long been strong resistance within the type community to letter space lowercase letters within text. Uppercase letterforms are drawn to be able to stand on their own, whereas lowercase letterforms require the counter form created between letters to maintain the line reading. The counter form refers to the black spacing between the white letterforms. A sample of the difference between normal, loose, and tight tracking is shown below.
Figure 1.16: Sample of normal and loose tracking
Figure 1.17: Sample of tight tracking
The flush left format most closely mirrors the asymmetrical experience of handwriting. Each line starts at the same point but ends wherever the last word on the line ends. The centered format imposes symmetry upon the text, assigning equal value and weight to both ends of any line. Because this format creates a strong shape on the page, it is important to amend line breaks so that the text does not appear too jagged. The flush right format places emphasis on the end of a line as opposed to its start and can be useful in situations where the relationship between text and image might be ambiguous without a strong orientation to the right. The justified format imposes a symmetrical shape on the text which results in the openness of lines and can occasionally produce 'rivers' of white space running vertically through the text.
Figure 1.18: Flush left format
Figure 1.19: Centered format
Figure 1.20: Flush right format
Figure 1.21: Justified format
Rules:
Type size: the text type should be large enough to be read easily at arm's length.
Leading: the texts set too tightly encourages vertical eye movement while type that is set too loosely creates striped patterns that distract the reader from material at hand.
Line length: a good rule of thumb is to keep line length between 55-65 characters.
Compositional requirement: text should create a field that can occupy a page or a screen.
Week 4 (15th September 2021)
Figure 1.22: Week 4's session
In this week's class session, all the text formatting videos/exercises were viewed and to be done throughout the session while both Mr. Vinod and Mr. Charles were reviewing our individual e-portfolios.
Typo_4_Text_Part 2 (Lecture video)
There are several options to indicate paragraphs such as 'pilcrow', a holdover from medieval manuscripts seldom use today.
leading- the spacing between each line of the text (normally using 12 to 12.5)-2.5 to 3 points larger than the typeface point size. If the leading value is 12, the paragraph spacing value should also be 12 because we want to maintain cross alignment. Cross alignment is when we have 2 columns of text sitting next to each other. This consistency should be maintained so that we can achieve a good text spacing rhythm.
Figure 1.24: Difference between line spacing and leading
As shown above, leading is the purple spaces as illustrated above and the line spacing consists of the beige and purple region as shown. Next, the example in Figure 1.25 below shows the standard indentation in which the indent is the same size of the line spacing or the same as the point size of our text.
Figure 1.25: Illustration of indentation (standard)
Widow- a short line of type left alone at the end of a column of text
Orphan- a short line of type left alone at the start of a new column
Note:
Both orphans and widows are considered serious gaffes. Although flush right and ragged left text are somewhat wrong or not necessary, it is considered to be more forgiving when compared to widows, and more importantly, orphans. The solution to widows is to rebreak our line endings throughout our paragraph to avoid the last line being noticeably short. Orphans need more care and must be made sure that there are no column of text that starts with the last line of the preceding paragraph.
Figure 1.26: Illustration of widow and orphan in a text
There are many ways to highlight a certain phrase or text within a column of text. We can use features such as Italics or bold them so that they can stand out or contrast with the rest of the text. Other than that, we can also change the typeface whilst maintaining the type family or even changing the colour of the body text whenever necessary. Figures 1.27 and 1.28 below show the example of highlighting a certain text.
Figure 1.27: Illustration of highlighting using italics and bold
Figure 1.28: Illustration of highlighting using different typeface and colour
If we happen to highlight by bolding a word, we must also consider the consistency in terms of sizing of the fonts because it would not be consistent due to the bolding of texts. Therefore, the highlighted text should be reduced in terms of point size by 0.5.
Figure 1.29: Illustration of difference in sizing of fonts due to bolding
Sometimes, we tend to use elements such as bullet points and also highlighting a text using a different colour of text box. As shown in Figures 1.30 and 1.31 below, there is no right or wrong when using or not using indentation for this section of text because different people will have different preferences. However, I prefer having slight indentations as shown in the illustrations on the left side for both figures.
Figure 1.30: Using and without using indentation for highlighted textbox
Figure 1.31: Using and without using indentation for bullet points
Figure 1.32: Using of quotation marks to highlight texts
To deliver good work for viewers, typographers should also take note of the visual hierarchy. An example would be a good use of a headline or heading in a layout to meet the hierarchy requirement.
Figure 1.33: Different illustrations of headlines (A-head)
Figure 1.34: Different illustrations of headlines (B-head)
To further understand and illustrate the differences in these headings, a sample is shown below with all the combined A/B/C-heads to demonstrate the hierarchy system.
Figure 1.36: Combined headings to demonstrate the hierarchy system of information
As explained earlier, cross alignment is important for the soothing and balance in the layout of texts in a page or composition so that viewers will feel more comfortable and engaged when viewing the text. Figure 1.37 below demonstrated the use of single lines as guidelines to mad sure that cross alignment is obeyed.
Figure 1.37: Illustration of cross alignment in multiple text columns
Typography is two-dimensional architecture,
based on experience and imagination,
and guided by rules and readability - Hermann Zapf
Typo_5_Understanding (Lecture video)
The uppercase letterforms in Figure 1.38 below suggest symmetry but in fact, it is not symmetrical. Each bracket connecting the serif to the stem has a unique arc. Figure 1.39 has a letter form that appears to be symmetrical, but with the help of the gridlines and also upon closer inspection, it shows that the width of the left slope is thinner than the right slope.
Figure 1.38: Illustration of Baskerville strokes in the capital letter form
Figure 1.39: Illustration of Univers strokes in the capital letterforms
The complexity of each individual letterform is neatly demonstrated by examining the lowercase 'a' of two seemingly similar san-serif typefaces--Helvetica and Univers. The stems of the letterforms finish and how the bowls meet the stems quickly reveals the palpable difference in character between the two.
Figure 1.40: Illustration of Helvetica and Univers typefaces comparison
Figure 1.41: An overlay illustration of Helvetica and Univers typefaces
The x-height generally describes the size of the lowercase letterforms, but in the curved strokes such as 's', there must be a rise above the median or sink below the baseline in order to appear to be the same size as the vertical and horizontal strokes they adjoin. The space describes and is often contained, by the strokes of the form. Having the letters joined together to form words, the counter form incudes the spaces between them.
Figure 1.42: Demonstration of the use of median/baseline
We can also examine the letterforms in close detail because this way can allow us to get a good feel for how the balance between form and counter is achieved and a palpable sense of letterform's unique characteristics.
Figure 1.43: Process of examining in close detail of the forms
Figure 1.44: Example of contrast and comparison between different texts
On the streets, you look at girls [or boys]. I look at type - Hannes von Dohren
Typo_6_Screen&Print (Lecture video)
Figure 1.45: Use of typography in different mediums
Figure 1.46: Use of typography in different mediums
In the past, typography was viewed as living only when it reached paper. once a publication was edited, typeset, and printed, it was done. Nothing has changed after that. Good typography and readability were the results of skilled typesetters and designers. Today, typography not only exists on paper but also on a multitude of screens. our experience of typography today changes based on how the page is rendered because typesetting happens in the browser.
Type was designed intended for reading from print long before we read from screen. It's the designer's job to ensure that the text is smooth, flowing, and pleasant to read.
Figure 1.47: Example of type for print
Figure 1.48: Example of type for print
This type is intended for the use on the web and is often modified to enhance readability and performance onscreen in a variety of digital environments. This can include a taller x-height (or reduced ascenders and descenders), wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, as well as modified curves and angles for some designs. These typefaces are also intended for smaller sizes to improve character recognition and overall readability in the non-profit environment, which can include the web, e-books, e-readers, and mobile devices.
A hyperlink is a word, phrase, or image that you can click on to jump to a new document or a new section within the current document. They are normally found in web pages to allow users to click onto them to direct them into other pages. They are normally blue in colour and are underlined by default.
We as readers often read from a distance of a few inches away and therefore, font sizes for screens are usually set to 10 points. Some of them would go up to 12 points if viewers are viewing at about an arm's length. (12 points = 16 pixels)
Each device, of course, is pre-installed with selected fonts and are based on the operating system it is running on. The screens used by our PCs, tablets, phones, and TVs are not only different sizes, but the text we see on-screen differs in proportion too because they have different sized pixels.
Figure 1.49: Example of type for different screen sizes
Static vs Motion
Static typography has a minimal characteristic in expressing words. Traditional characteristics such as bold and italic offer only a fraction of the expressive potential of dynamic properties. We normally come across static typography with wide-ranging purposes. Whether they are informational, proportional, formal or aspirational pieces of design, the level of impression and impact they leave on the audience is closely knitted to their emotional connection with the viewers.
Figure 1.50: Example of dynamism (static design)
Motion typography offers letterforms to become 'fluid' ad 'kinetic'. Film title credits present typographic information over time, often bringing it to life through animation. Motion graphics, particularly the brand identities of film and television production companies, increasingly, contain animated type. This type of text is often overlaid onto music videos and advertisements, often set in motion following the rhythm of a soundtrack. This will then be further matched the associated content or express a set of brand values.
"A great designer knows how to work with text not just as content, he treats text as a user interface."- Oliver Reichenstein
Week 5 (22nd September 2021)
Figure 1.51: Week 5's session
In this week, Mr. Vinod briefed all of us about the new task (task 2) which will be due in 2 weeks time. While we were going through the specifications of the new exercise, Mr. Vinod went through our individual e-portfolios.
INSTRUCTIONS
Typography Module Information Booklet (MIB)
<iframe
src="https://drive.google.com/file/d/1XBs_JKa9S2trYPF_pTKXAhdb4ESEJFbK/preview"
width="640" height="480" allow="autoplay"></iframe>
EXERCISE
Task 1: Exercise 1 - Type Expression
This exercise requires us to construct at least 3 sketches in the form of a typography illustration for each of the words assigned through the voting system. Out of the 7 words assigned which are (terror, melt, pour, error, gone, light, shiver), only 4 of them need to be chosen and the word 'terror' is mandatory to be included in the 4 of them. The 4 words that I have chosen and had my first draft done were terror, melt, pour, and error.
Figure 3.1: Rough sketch for the word 'terror' (25th August 2021)
Figure 3.2: Rough sketch for the word 'melt' (25th August 2021)
Figure 3.3: Rough sketch for the word 'pour' (25th August 2021)
Figure 3.4: Rough sketch for the word 'terror' (25th August 2021)
Regarding this task, the first phase only requires us to develop a few of the sketches for all 4 chosen words. However, before choosing the best design for each word, I watched and learned the Adobe Illustrator software given by Dr. Vinod as shown in Figure 3.5 below. Meanwhile, I fiddled around with the software as there are many other features to explore as shown in the video progress labeled Figure 3.6.
Figure 3.5: Video tutorial supplied by Dr. Vinod
Figure 3.6: Video Progress for Task 1 (as of 26th August 2021)
<iframe width="560" height="315" src="https://www.youtube.com/embed/hAXLTG4aYkE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
In the progress as of (27th of August 2021), all 4 words chosen which were terror, pour, melt, and error was converted to digital form using the Adobe Illustrator software and this will only be the first draft before getting feedbacks from our lecturer to be further edited.
Figure 3.7: Progress on the first week for task 1 (as of 27th August 2021)
Figure 3.8: First draft for task 1 (as of 27th August 2021)
Figure 3.9: Video Progress for task 1 (as of 27th August 2021)
<iframe width="560" height="315" src="https://www.youtube.com/embed/io5kCm20kvE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
After the class session in the second week, there were a few feedbacks and comments that can be further improved, especially for the words, 'terror', 'melt', and 'pour'. The word terror can be improved because the first draft does not look scary enough. The word melt can be further improved because the dripping effect does not fit the overall melting effect of the word. Lastly, the word pour is creatively integrated but can be further edited to look cleaner.
Figure 3.10: Video Progress for task 1 (as of 1st September 2021)
<iframe width="560" height="315" src="https://www.youtube.com/embed/hNIn3XtCkY8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
After the slight modifications, the final draft is completed and will be further reviewed in week 3 by both Dr. Vinod and Dr. Charles. In this composition, the word 'terror' illustrates the letter 'e' as a scary giant and is trying to eat the other letters while the letter 't' is scared after seeing the horrible and terrifying scene ('o' ). The word 'error' is pretty simple and straightforward, showing the error 404 in the same line. The word 'melt' is also very straightforward, illustrating the words as ice which is melting. Lastly, the word 'pour' was used and the letter 'u' was used to mimic a cup pouring liquid out of it which in this case, are letters from the word.
Figure 3.11: Final draft for task 1 (as of 1st September 2021)
In week 3's session with both Mr. Vinod and Mr. Charles, there were some slight changes needed to be done such as the sizing of the words 'error' and 'pour' which were needed to be enlarged. Other than that, the word 'melt' can b further improved to show a more realistic melting effect. After the editing, I have chosen the word 'terror' to be animated because the idea behind the design of it can be further enhanced if movements were introduced.
Figure 3.12: Task 1 final submission in JPG (as of 8th September 2021)
<iframe src="https://drive.google.com/file/d/19IGk-F6KJc-9__ChXHj1b3ftwhLbHdvm/preview" width="640" height="480" allow="autoplay"></iframe>
Figure 3.13: Task 1 final submission in PDF (as of 8th September 2021)
Figure 3.14: Progress in doing the gif animation with the selected typeface (as of 8th September 2021)
Figure 3.15: Gif animation with the 'TERROR' typeface (as of 8th September 2021)
Throughout the week, I thought of making another typeface animation with a smoother transition or movement. Therefore, I need to spend more time and create many frames to allow this smooth effect to take place. Other than the word 'terror', I also like the word 'pour' because the typeface composition done as shown in Figure 3.12 above looks very well composed and matches the theme of the word. This time, I made 24 total frames for smoother gif animation.
Figure 3.16: Progress in making individual frames in Adobe Illustrator (as of 11th September 2021)
Figure 3.17: Progress in making animation in Adobe Photoshop (as of 11th September 2021)
Figure 3.18: Gif animation with the 'POUR' typeface (2nd draft) (as of 11th September 2021)
Figure 3.19: Gif animation with the 'POUR' typeface (3rd draft) (as of 15th September 2021)
With the slight changes needed to be made, Figures 3.19 & 3.20 demonstrate the progress in altering the animation according to Mr. Vinod's feedback. From his feedback, he suggested that when pouring the letters from the letter 'U', I should give it a slight pause so that it would look more realistic and comfortable to be viewed.
Figure 3.20: Progress in creating the individual frames for the final animation
(as of 22nd September 2021)
Figure 3.21: Progress in creating the animation for the final animation in Adobe Photoshop
(as of 22nd September 2021)
Figure 3.22: Gif animation with the 'POUR' typeface (Final Submission) (as of 22nd September 2021)
Task 1: Exercise 2 - Text Formating
In this exercise, all the text formatting layouts were tried for a given 'article' or long text. Some features to be used in this exercise were learned in lecture number 4 (Typo_4) as supplied by our lecturers. They are kerning, leading, tracking, paragraph spacing, font selection, and text alignment. With the use of Adobe InDesign software, this exercise was carried out as shown in the figures down below. For the very first part, we were to use the 10 given fonts which are labeled and shown in Figures 4.3 & 4.4 beside each of my names. My own name was used to further illustrate the differences in these fonts and to then be further developed in terms of kerning and tracking. As seen in Figures 4.3 & 4.4, they can be compared with the changes of kerning and tracking. The one with kerning and tracking done can be seen to be much more pleasant to be read even from afar. To develop this kerning and tracking process, the use of the arrow keys together with the ALT/OPTIONS key were utilised to space the letters out to look more pleasing.
Figure 4.1: Development of my name in the 10 different fonts
Figure 4.2: Further development of my name in 10 different fonts
Figure 4.3: Fonts/text before undergoing kerning and tracking
Figure 4.4: Fonts/text after undergoing kerning and tracking
In the next part, the text layout was learned in terms of choosing the right/fitting font type, font size, margin space, spaces between letters (kerning & tracking), and between paragraphs (leading). In the video tutorial given, Mr. Vinod mentioned that it is preferably better to have 55 to 65 characters in a particular column. To have a visually better composition in terms of text and image layout, it is good to utilise the white space and making sure every element is evenly spaced out. In terms of sizing, we need to look into the visual hierarchy by making the more important elements such as the title bigger in size or having strategic placement so that viewers can viewer it first and then follow up with the others.
Figure 4.5: Initial progress of text formatting (as of 15th September 2021)
Figure 4.6: Progress 1 (as of 15th September 2021)
Figure 4.7: Progress 2 (as of 15th September 2021)
Figure 4.8: Text formatting progress (before kerning and tracking) (as of 15th September 2021)
Figure 4.9: Text formatting progress (after kerning and tracking) (as of 15th September 2021)
Figure 4.10: Text formatting progress (aligning using gridlines->baseline grids) (as of 15th September 2021)
In this text formatting part, we are advised to not have different sizes of font/text even when the whole text content is separated into multiple text boxes to fit into the page. To further allow the process of ragging to be done better, the settings under preferences should be set to 5/1000 instead of the default 20/1000 and we should not space out/track more than 3 times (ALT/OPTIONS + arrow key). In terms of text alignment, it is recommended to have left-justified or left-aligned done. For the bigger texts such as title/headlines, we should change the leading spacing to a multiple of 2 so that when we align the text to the baseline grids, they do not go out in place.
Figure 4.11: Layout #1 (as of 15th September 2021)
Figure 4.12: Layout #2 (as of 15th September 2021)
Figure 4.13: Layout #3 (as of 15th September 2021)
Figure 4.14: Layout #4 (as of 15th September 2021)
Figure 4.15: Layout #5 (as of 15th September 2021)-chosen layout as the final submission
<iframe src="https://drive.google.com/file/d/1yhPyitBKlQbPBv1CL_fX-SiHSw9BEHnx/preview" width="640" height="480" allow="autoplay"></iframe>
Figure 4.16: Final layout for exercise 2-text formatting (final submission)
Duration overview:
Research - 2 hours
Sketches - 2 hours
Digitising - 8 hours
Animating - 3 hours
Kerning and Tracking - 4 hours
Documenting in Blogspot - 5 hours
Total - 24 hours
FEEDBACK
Week 1
General Feedback: During the class session, Dr. Vinod reviewed my e-portfolio, and his main concern is that it is better to stick with the given blog design layout to prevent any customization issues in the future or having trouble managing the site. Based on the given advice, I reset the layout of the blog and only stick to the basic customization tools such as changing the background image and font colors.
Specific Feedback: Under the 'Task 1 Exercise' post, a few comments such as the missing line break and spacing of the student's details were incorrectly done. The changes were made instantly to meet the requirements and feedbacks given by both Dr. Vinod and Dr. Charles.
Week 2
General Feedback: During the class session, Dr. Vinod reviewed my e-portfolio and task 1 so as 2 of my classmates, Suma Hassan and Siew Ni who were in the same breakout room as me during the feedback session. In general, the words 'terror', and 'melt' needed changes and improvements.
Specific Feedback: According to my classmates, they prefer the first design of my word 'terror' but the one in my first draft can be maintained if the alignment of the font is straight. A few suggestions were given for the word 'melt' such as trying out with the candle design to replace the letter 'L', but this creates a challenge as the illustration of a candle would fit the visual theme instead of typography. Other than that, Mr. Vinod mentioned that the 'error' and 'pour' designs are very creative but the words 'terror' and 'melt' must be reworked because they did not fit the theme of the words.
Week 3
General Feedback: In this week, all the final drafts of each typefaces were uploaded onto Facebook under the comment section of the most recent post and they were reviewed by Dr. Vinod and Dr. Charles.
Specific Feedback: From the feedbacks received, the word 'terror' is well done whereas the word 'melt' should be further improved to make the melting effect more realistic. Other than that, the words 'error' and 'pour' needed slight changes in the sizing so that they can be enlarged to fill up the empty spaces.
Week 4
General Feedback: In this week, Mr. Vinod and Mr. Charles reviewed all our individual blogs/e-portfolios while all of us viewed the 4 videos provided on text formatting.
Specific Feedback: The new task is relatively challenging because we had to learn many features or tools under the topic of text formatting such as the paragraph spacing, kerning, tracking, text alignment, font selection, and leading. The new software (Adobe InDesign) was also used, which is a very new software to me and therefore, made it even challenging. other than that, we also need to come up with our own different layouts to see which one fits and has the best overall composition.
Week 5
General Feedback: In this week, Mr. Vinod briefed all of us about the new task (task 2) which will be due in 2 weeks' time. While we were going through the specifications of the new exercise, Mr. Vinod went through our individual e-portfolios.
Specific Feedback: The new task assigned is about typographic exploration and communication.
REFLECTION
Experience
Week 1- It was a very great experience to meet new people from different schools because this module is taken under my minor.
Week 2- In this week, things become a little more challenging because we have to slowly master the different digital software to complete the tasks given.
Week 3- In this week, the class has gotten more strict especially on our artworks because there are still quite a few of our work that did not meet the requirements or expectations.
Week 4- In this week, I learned many new things such as using the new Adobe InDesign software that I have never used before after getting a headstart to exercise 2 about text formatting.
Week 5- In this week, I learned that time management is very important as I was having trouble rushing this task at the eleventh hour and had lack of sleep.
Observation
Week 1- I was a little surprised by the small number of classmates because I initially expected about 100 classmates in this module.
Week 2- The session was more interactive as the students felt more comfortable talking through the microphone so as sharing ideas in the assigned task.
Week 3- The atmosphere of the session this week did not seem productive or active because our lecturers were constantly reviewing our work one at a time. However, we should stay focus instead so that we can learn from the feedbacks given by our lecturers.
Week 4- More time and effort were needed to get exercise 2 done because there are many tools and features needed to be used and tested.
Week 5- It is important to manage my time well and seek help if needed especially from my peers as we are sharing the same problems and discussions.
Findings
Week 1- The briefing of the very first task this week gave us the opportunity to find many various designs online to get inspiration or to go fully creative all from our ideas.
Week 2- The opportunity given allowed all of us to see other classmates' works as inspirations for our idea in the given tasks.
Week 3- This week gave me the opportunity to further improve in my skills in Adobe Illustrator and to add onto that, the animations needed the Adobe Photoshop software. Therefore, it was a challenging week because I do not have any experience in using any of these softwares.
Week 4- In the headstart of the exercise 2 task, I had to make quite a few research online to find examples of texts which meet all the requirements taught in this lecture so that I can get a better comparison and understanding to know which kind of work or requirement to set myself a bar to achieve.
Week 5- I find it very interesting for the text formatting section because this task is relatively subjective and is based on our creativity to approach it.
FURTHER READING
Reference:
The read on this particular book is a very helpful and compact tool because this book covers many interesting topics under the typography module. The main parts of this book covers:
-the history and the state of the art
-the units of typographic measurement
-about typefaces
-about fonts
-about typefaces
-typesetting vs typewriting
-setting type on a personal computer
-what makes a good and bad (type)
-measure, point size, leading
-controlling hyphenation, justification
-kerning and tracking
-indentation and alignment
-special characters and situations
-document structures
-tables
-language-specific issues
-typesetting with style sheets
-resolution on print, screen, web
Of course, there are many topics under this book and most of them are extra information to further give an informative explanation to why each of the elements and features were used for example, in the text formatting exercise. I did not read most of the pages but I managed to glance through some interesting topics. For example, the examples of the good and bad types so that I can get a better view from a viewer's point of view and to raise the bar to a higher leverl in terms of expectations.
Comments
Post a Comment