TYPOGRAPHY - TASK 1

April 13, 2021

TYPOGRAPHY - TASK 1

March 27th - April 27th (WEEK 1 - WEEK 4)

NG VEYHAN (0349223) / Bachelor of Design (Hons) in Creative Media

TYPOGRAPHY

TASK 1

Lectures:

Week 1 / Introduction and Briefing

Today, Mr. Vinod introduced our class to Adobe Illustrator, the program that we will be using to create Task 1 for the next few weeks. We were also introduced to the website Blogger, which we are supposed to record our progress for the next few weeks.

Week 2 / Font Sketching

Lesson introducing the various typefaces and how it can be modified into different fonts was conducted today. A short sketch of fonts to establish a sense of vision before designing a font digitally was assigned to us. A short sketch of fonts to establish a sense of vision before designing a font digitally was assigned to us.

Week 3 / GIF animation

The assignment given this week came in the form of animating the text that we have designed over the course of the past 2 weeks. The form of animation we were tasked with was quite rudimentary, but as a person with no background in animation whatsoever, this still came as a huge challenge.

Week 4 / Introduction to Text Formatting

For this week, we settled the final stages of the GIF animation and are largely finished with that portion of the task. Mr. Vinod also briefly introduced us to the basic premise of the next task, which was text formatting. He instructed us to watch the lectures provided to us and dip our toes and try formatting our first page of text.

Week 5 / Review of Text Formatting Exercise

Today Mr. Vinod took the day to review our very first attempts at formatting text as assigned from the previous week. Needless to say, there was much room for improvement. He noted that it was very rough around the edges, with certain aspects lacking despite being a good attempt. We were then instructed to further refine said compositions for the next week.

Instruction:

PRACTICAL:

To start everything off, we were assigned to sketch some rough designs for text on a piece a paper.

(Fig 01, First sketches)

Teacher's feedback: Visual cues are not allowed.

Unfortunately, I didn't get the message that we weren't supposed to include visual cues into the designs the first time around. Ideally, we were to perform minimal alterations on the anatomy or structure of the letter but still try to convey a mood or message with the word. Scrapping the ideas, I began again from scratch.

(Fig 02, Plot/idea sketch, 6/4/2021)

Afterwards, I spent some time mulling over the meanings and interpretations that each word could carry, and I began to list adjectives that could be associated with each action of the words that I have chosen. A rough sketching process began, I tried to keep the words looking as simple as possible but somehow fit the words into the shape I had designed.

(Fig 03, Digitisation of Sketches, 7/4/2021)

After deciding the overall shapes that I wanted the text to take, I began trying to implement the words in a digital format. Making progress while saving every so often, I tried to get a bit more adventurous with how I designed the text. My technical skills in Illustrator may have been a little lacking, and I did find some difficulty fully realizing the designs on a screen, or more specifically a vector format.

(Fig 04, SLICE, 13/4/2021)

Now I began with animating the GIF. Picking the design above out of the 4 that I had designed the week before, I thought that it would be the simplest to animate as the only portion that had a motion was a simple horizontal motion of the black bar in the middle. I was mistaken, even such a simple endeavor would cause a lot of head scratching.

(Fig 05, Frame Designing, 14/4/2021)

Initially charting out the keyframes and drawing them at first seemed simple enough, as each frame was similar to the previous one, only with slight variations. I wanted to leave a space from where the black bar had and would travel through, as such I resorted to place a white duplicate of the black bar, using it as a sort of makeshift eraser tool.

(Fig 06, Completed Frame Stack, 14/4/2021)

The final step was to render the GIF. Completing the stack of frames to be used for the animation, I booted up Photoshop to prepare the resulting gif for export. Surprisingly, I found it quite tedious as I had to individually set the duration of each frame that appears in the cycle. Perhaps there was a shortcut for this process, but I was distracted and hadn't thought of referring to the lecture video at the moment.

(Fig 07, Setting the gif, 14/4/2021)

When previewing the final gif, the problem I had made itself apparent. The small edits I made in certain individual frames (as sometimes there were a stray row of pixels showing) ended up creating very noticeable inconsistencies the structure of the font. Testing to see if it was a rendering bug, I had tested rendering it on Blender's 2D video module, but to the same result.

(Fig 08, Slice.gif, 15/4/2021)

The resulting gif had a rather smooth animation, which I rendered at 24fps, but the slightly jiggling "trail" of the black bar was really distracting. I also should have added more frames of the first/final

frames as to give a larger pause and ample time to read the text while its fully formed.

Moving on from the GIF animation, we were assigned our first text formatting exercise, which we were instructed to attach onto this blog post. I followed the steps provided by the lecture in order to complete the 2 small exercises we were assigned.

Firstly I attempted the exercise where we were to get familiar with creating layouts and margins. The lecture video instructed us to type our own names in various typefaces, font is left to our own discretion.

(Fig 09, Testing Typefaces, 25/4/2021)

It was a fairly simple exercise, and the end result was an image with my name repeated multiple times, with a different font each time. Afterwards, I would work on the assigned exercise for the coming week.

(Fig 10, Exercise 2 Part 1, 25/4/2021)

For the first attempt at this exercise, I tried to use three columns instead of the standard two, as I wanted to try something new and explore. Setting the basic margins of the file and pasting the text into the file, I was deciding on my next step for this assignment.

(Fig 11, Starting Out, 26/4/2021)

I wanted to arrange text with a clear visual hierarchy, and therefore when arranging the text into three separate columns, I decided to place the starting line of each column below the starting line of the previous column. As such, I hoped that it could direct the reader as to start from which column.

(Fig 12, First layout, 26/4/2021)

I then worked on adding images into the file to be used in the final text formatting composition. I picked two examples which use an example of the subject font: Helvetica. It came as a surprise to me that the logo of the NBA logo used the Helvetica typeface. I used the images to fill up the empty spaces in the page to make it seem uniform.

(Fig 13, First Layout, 26/4/2021)

After the lesson reviewing this page that I had designed, there was an extreme amount of design errors that I had made. Therefore, largely scrapping the design of this page, I worked on designing a new one from scratch. Abandoning the three column layout, I went for the more basic two column layout.

I had also redesigned the headline to be less distracting, as recommended by Mr. Vinod. I had also used two images in the previous composition which exceeded the limit of only one. Thus, I opted to use a large image to create an element that could somewhat be considered part of the background.

(Fig 14, Experimenting with Image Placement, 1/5/2021)

I realized that placing the image on the bottom of text pushes the rest upwards and could disrupt the visual hierarchy of the text if I wasn't careful enough. The page seemed kind of "restricted" when I confined the image within the columns created by the layout, thus I used an image large enough that it would intrude on the page margins. Cross alignment was also an aspect that I paid extra attention on as it was a major fault in the previous work.

(Fig 15, Second Attempt, 1/5/2021)

I think this composition has a lot more of a "cleaner" look as opposed to the work that I have done previously. Generally, I feel it is an improvement from the one before, but aspects such as the kerning of each line and getting a good column interval could use some improvements either way.

PDF submission:

Feedback:

Week 1: No feedback for the week, due to late enrolment into my course.

Week 2: We were assigned to individual breakout rooms in order to comment and evaluate on the works of our peers. The work presented by each of us did give us some ideas on how each text could be designed that we might not be able to think of on our own.

The reception for my design of "EAT" was generally received to be not as expressive of the other text that I had designed, and that the contrast between large and small font was not so original.
"SLICE" had a relatively good response, as the thin strokes of the letters conveyed the sharpness that was associated with the word.
"SCREAM" was reminiscent of title cards from old horror movies from the 70s to 80s. It was effective enough at conveying its message.
"PUNCH" was also received quite well, as the compressed nature of the text really lent to the effect that force was being applied onto the text.

Week 3: Mr. Vinod gave some comments on the GIF that I have rendered beforehand. The very quick motion of the horizontal bar was distracting. He had also recommended that my GIF only perform one cycle rather than 3 rapid cycles.

For peer feedback, my animation was considered quite representative of the word "slice" and that the text was reasonably legible. It reflects quite well on the meaning of the word by directly showing the action that it represented. The form of the text, while I would prefer the profile to be slimmer, was still appropriate with sharp, angular corners in the letters. It might not be something that brings a smile to someone's face, but it does its job.

Week 4: For the GIF animation, my submission was settled in the week prior as such for this week, there hadn't been much to critique in terms of work. We were also introduced to text formatting, which was an entirely new topic, which meant there was no work to be critiqued for the week.

Week 5: This week, we were done with the initial draft for the text formatting exercise that was to be submitted. As such, we were assigned to do peer evaluation for each others work.

The three columns that I used made it difficult control the kerning for each line.
There were also multiple instances of widows appearing at the end of a paragraph.
Cross alignment was also not properly done.

Mr Vinod also gave his feedback for my work this week, which was pretty similar to what I had received in the peer evaluation prior, and then some.

Line length was too short.
The column intervals were too small.
Lack of cross alignment.
I used more than one image, which was the assigned limit.
The headline was also considered overly distracting.

Reflection:

Week 1: I was unable to attend the course on the first week due to my late enrolment, thus I was unable to do the tutorials associated with the week.

Week 2: Currently, I'm still testing the waters with Illustrator. It's quite the far cry when compared to Photoshop, many of the hotkeys were different too! This resulted in a slightly annoying ordeal when what I thought were hotkeys standard across all Adobe products had an undesired function. In terms of designing the text itself, it was interesting in a way that its less expressive than something with colour such as the illustration module, but it was the lack of colour which made it challenging, I did have a good time trying to see how far my technical knowledge could take me in my current state, and needless to say there's very much room for improvement.

Week 3: This was surprisingly difficult. While it may not be the most technically challenging, but the lack of attention to detail really shows in the final product. Overall, I think I could've done better in a lot of aspects, like timing and consistency, more attention should be given to these issues. In terms of software, I'm beginning to get the hang of using Illustrator, though not as proficiently as programs such as Clip Studio or Photoshop, which I'm much more accustomed to.

Week 4: I am still trying to wrap my head around what I had learned in the task of GIF animation, but we were also introduced to an entirely different challenge this week. Frankly it was slightly overwhelming, however I we were given ample time to digest the new information, which was helpful. The exercise given was a bit confusing, given my complete lack of experience using InDesign.

Week 5: It was painfully obvious that there was lots of room for improvement in my work. I would likely require to refer back to the lecture tutorials we were assigned. The work was by no means difficult on its own, but it did pose a challenge to be able to properly grasp at the core concepts of text formatting. In summary, no punches were pulled this week.

Search This Blog

NG VEYHAN (349223)