Advanced Typography Task 03 - Design Exploration & Application

03/06/2022 - 24/06/2022 / Week9 - 13/14
Ellyn Saw Mei Hui / 0353358
Bachelor of Designs (Hons) in Creative Media 
Advanced Typography Task 03


LECTURES
All lectures and recordings completed in AdTypo_Task 01 - Exercise 01 & 02

 03.06.2022 Week 10
The class started with Mr Vinod informing us about a talk that a (graduated) senior from TDS (The Design School) will be holding. After that, we presented our Task 03 proposals and Mr Vinod gave his feedback. He also showed us a few examples of what/where we could apply our typeface.

 10.06.2022 Week 11 
As usual, during class Mr Vinod began the session by reviewing our work and giving his feedback. Before the class ended, Mr Vinod also asked us to do the VARK test and comment what are the results we got on the advanced typography Facebook page. Then, Mr Vinod continued by explaining the VARK test in detail and what it is about. 

 17.06.2022 Week 12
For this week, Mr Vinod started the session by asking us to complete a few surveys regarding this module. After all the surveys were done, he looked through everyone's work and gave feedback on it.

 24.06.2022 Week 13 
This week is the week before submission. Mr Vinod went through everyone's work for one last time and gave us his thoughts on it. The class ended quite early as Mr Vinod mentioned that he'll give us the remaining time to complete our work or catch up on some sleep.


INSTRUCTIONS 
<iframe src="https://drive.google.com/file/d/17VaIOdq3wHU7TwoEiPXCyTZDDFDKcqzF/preview" width="640" height="480" allow="autoplay"></iframe>

TASK 3 - DESIGN EXPLORATION & APPLICATION :
♡ explore the use of a typeface in the area of interest, understand the existing relationship and identify areas that could be IMPROVED and come up with possible solutions or combinations that may ADD VALUE to the existing typeface. The work can be manifested in any kind of format related to the issue being solved or explored. (gif/animation, 3D printing, different textures and materials etc.)

 (eg. given: typeface created out of biscuits and light reflection,  car plate typeface etc.) 
 to design and develop all 26 alphabets, numbers 0 to 9 and a few punctuations. 

PROPOSAL :
Theme - Graffiti/ Street Style
Purpose - Create a full set of typeface inspired by Nct Dream's Beatbox font. 


<iframe src="https://drive.google.com/file/d/1TwM41tBoxUc_Fj1A8EK4ybyvj2UfChIL/preview" width="640" height="480" allow="autoplay"></iframe>
Fig1.1 Task 03 Proposal

IDEATION & SKETCHES :
The idea is to create a full set of typeface inspired by NCT Dream's beatbox font, mainly the ones that are shown in fig1.2 (letters E, A and X). I wanted to do this idea because I thought the font looked unique, so it should be fun trying to develop a full set of typeface. 

Fig1.2 Ideation

After further research, I realised that there isn't any typeface that is in this style? The closest one I could find is the bubble graffiti font(Fig1.3, Link - Urban Blocker Font by Din Studio)

Fig1.3 Urban Blocker Font

PROGRESS ( 06 - 07/06/2022 ) : 
♡ 3 hours spent for sketching (uppercase + numbers & punctuation)

My idea was accepted so I started to sketch out every single alphabet (A-Z). This part took me quite some time as I was trying to figure out how to incorporate the curves into the letters.

Fig1.4 initial sketch done for proposal presentation 

Fig1.5 A-Z sketch (original picture)

After the sketching of my letters was done, I proceeded to skecth out all the numbers (0-9) and a few punctuations. I included important punctuation like a full stop, comma, question mark and the exclamation mark.

Fig1.6 Numbers and punctuations sketch (original picture)

Fig1.7 Uppercase letters (SCAN IMAGE)

FIRST DIGITISATION ( 06 - 07/06/2022 ) : 
♡ total time spent (uppercase + numbers + punctuations) 11 hours. 

Digitisation of alphabets took me about 7 hours (8:30pm to 2:30am), worked on numbers and punctuations the next day, which took me about 4 hours.

Fig2.1 First digitisation of letters

Once I was done with the first round of digitising, I tried a few variations for some of the letters because I didn't like how they look initially. Below (Fig2.2) are all of the different variations that I've tried out, some have more than one option. The common area I changed is trying to make them look a little more (fat?) curvy and round.

Fig2.2 Changes to some letters and numbers

SECOND DIGITISATION (
 12/06/2022 ) :
♡ total time spent 25 hours, including sketching lowercase + 2nd digitisation + generating font etc.

After the feedback session on Week 11 (feedback down below), Mr Vinod mentioned that I could add thicker strokes or shadows to my letters to make them different. So that is what I did. Below are my attempts at the stroke sizes and how thick I wanted my shadow to be. 7pt was too thin so I decided to go with a 10pt stroke as it looks nicer with the shadow. I also chose not to make the shadow thicker (as seen in Fig2.3 attempt #2) as it looks weird to me? (I didn't like how thick it was) 

Fig2.3 Attempts 1 - 4

Below (Fig2,4) is the comparison of both letters with stroke and shadow. Fig2.4 left - 10pt stroke without shadow, Fig2.4 right 10pt stroke with shadow.

Fig2.4 comparison

During the feedback session, Mr Vinod also encouraged me to complete the typeface by designing lowercase letters. Before sketching I realised letters like "Ww", "Xx", and "Cc" don't look too different from the uppercase so I decided to only sketch some of the lowercase. 

♡ lowercase time spent from 5pm - 11:30pm.

Fig2.5 Lowercase sketch (original picture)

Fig2.6 Lowercase sketch (SCAN IMAGE)

After sketching, I proceeded with the digitisation of lowercase letters. Fig2.7 shows the completed digitisation of all th alphabets, numbers and punctuations.

Fig2.7 Uppercase, lowercase + punctuation

GENERATING FONT_FONTLAB (
 12/06/2022 ) :
The next step is to generate the fonts using Font Forge but when I tried to import my letters it says "operation not permitted". Not sure why this happened but maybe it's because I'm using another software (Xquartz) to launch Font Forge? I'm unable to launch Font Forge because of MacOS's security. On Font Forge's website, they also mentioned that without Xquartz, Font Forge will only load a dock icon and will not open any further. ( Font forge website )


Fig3.1 Font Forge issue

I looked into the accessibility settings thinking I could change it to allow Font Forge to access my desktop folders but I couldn't even find the Font Forge option. As I didn't want to waste more time trying to figure out this issue, I just downloaded Font Lab and accessed the free trial version.

Fig3.2 MacOS accessibility

Now I can finally start importing all of my letters into Fontlab! This is actually my first time using Fontlab so I had to look up tutorials on youtube. Another friend of mine also sent me a video of Mr Vinod from the Typography module so I also referred to that video on how to use Fontlab.

Fig3.3 Importing letters into Fontlab

Finally importing is done and I can start kerning the letters now~ I started with the uppercase letters and then only worked with the lowercase. Then I also kerned my numbers and punctuations. After that, I paired random letters/phrases, numbers and punctuations together and tried to kern them. This part was quite tedious to do since I had to pair different types of letters etc. I also did a quick type test (Fig3.5) to see the kerning of the letters. 

Fig3.4 Kerning uppercase letters

Fig3.5 Type test after kerning

APPLICATION PROGRESS: 
♡ total hours spent 18 hours (including the time spent looking for inspirations, amendments etc.)
♡ images are sourced from Pinterest.

Originally my idea was to go for a more monochromatic and simple look for all of my applications since I thought it fitted the style of my typeface more. I decided to go with creating merchandise for NCT Dream's Beatbox pop-up store. 

Fig4.1 Moodboard
POSTER:
After figuring out how I wanted my applications to go about, I started with designing the poster. In Fig4.2, I tried out 3 different versions of the poster. I couldn't decide between the 1st and 2nd versions but ultimately I went with the 1st one.

Fig4.2 Poster attempts 1 - 3

Fig4.3 Poster Version 1 mock up

KEYCHAIN:
Then I worked on the keychain design. I decided to do the front and back of the keychains. I used shapes to create the checkered background to maintain the monochromatic look I was going for. To make things realistic, I applied them to mock-ups to see if they fit.

Fig4.4 Keychain design

Fig4.5 Keychain front and back

MUG:
Continuing, I also designed 3 different versions of mugs. In Fig4.6 there are coloured and outlined versions of the mugs whereas in Fig4.7 the mug is transparent with a similar design in Fig4.6.

Fig4.6 Mug design (coloured & outline version)

Fig4.7 Mug transparent version

SHOPPING BAG:
Since this is a pop-up store event, I also thought of incorporating my typeface into shopping bags. However, after the feedback session on Week 13 (feedback down below), Mr Vinod told me to dispense this shopping bag application.

Fig4.8 Shopping bag (front)

Fig4.9 Shopping bag (back)

APPLICATION AMENDMENTS ( 25/06/2022 ) :
Some changes were made to my poster design as during the feedback session on Week13 Mr Vinod advised me to use 1 colour instead of just grey. Below are the different colour schemes that I've applied to my poster design. I was also advised to not distort the texts on the keychains.

Fig5.1 Attempts 4 - 9

Fig5.2 Keychain amendments

Honestly I had a hard time choosing which poster I would go for. On one hand I still really liked the grey one but on the other the coloured one looks livelier. My final two choices are the ones shown in Fig5.3 below.

Fig5.3 Option 1 or option 2 poster

Besides, I was also told to think about more applications so I decided to go with T-shirt, bucket hat and a coaster to match the mug. For the 
T-shirts, I decided to create 3 versions (White, Black and Acid wash). For b&w the design on the font and back is similar whereas for the acid wash version it just has the word "Beatbox" on it.

Fig5.4 T-shirt #1 white

Fig5.5 T-shirt #2 black

Fig5.6 T-shirt #3 acid wash (light and dark)

There are also 2 versions of the bucket hats, Neocity and Nctzen. 
Neocity = NCT stands for Neo Culture Technology / Nctzen = Nct Dream's fandom name

Fig5.7 Bucket hats

Lastly for the coaster, I used back the colour scheme from my poster and made it a radial gradient to fit the coaster's size. 

Fig5.8 Sugar pop star coaster

TASK 03 - DESIGN EXPLORATION & APPLICATION FINAL SUBMISSION


Fig6.1 FINAL beatbox type JPEG

<iframe src="https://drive.google.com/file/d/1vqcXSxAqFm0wZVflYpfkzcsmCdp-vRte/preview" width="640" height="480" allow="autoplay"></iframe>
Fig6.2 FINAL beatbox type PDF

Fig6.3 FINAL A3 poster JPEG (coloured)

Fig6.4 FINAL A3 poster JPEG (monochromatic)


Fig6.5 FINAL A3 poster mockup JPEG (coloured)

Fig6.6 FINAL A3 poster mockup JPEG (monochromatic)

Fig6.7 FINAL keychain JPEG

Fig6.8 FINAL keychain front & back JPEG

Fig6.9 FINAL mug coloured & outlined JPEG

Fig6.10 FINAL T-shirt (black and white) JPEG

Fig6.11 FINAL acid wash T-shirt (light and dark) JPEG

Fig6.12 FINAL Bucket hats JPEG

Fig6.13 FINAL Sugar pop star coaster JPEG

TASK 03 - DESIGN EXPLORATION & APPLICATION COMPILATION

Fig7.1 FINAL task 03 compilation JPEG

<iframe src="https://drive.google.com/file/d/1zY2qOFIhx7Z30Ji7G2SUSYWcJru_9mCQ/preview" width="640" height="480" allow="autoplay"></iframe>
Fig7.2 FINAL TASK 03 PDF



FEEDBACKS  

Week 10 - 03/06/2022
General Feedback: 
Show as much progression for next week's class since we do not have much time left to complete this task. Make good use of the facilities provided at Taylor's such as 3D printing, etc as we are paying for the resource fees. 

Lecturer Feedback:
Mr Vinod said that my idea is good to go and maybe I could design merchandise based on my theme after finishing the typeface.

Week 11 - 10/06/2022
General Feedback:
Need to think about applications for the typeface asap. Don't just take comments to face value but use the comments to improve our own work. 

Lecturer Feedback:
Everything looks consistent and good. To make my typeface different from the other student (that has a similar idea as me), Mr Vinod suggested that I could add shadows to the letters or maybe make the strokes of the letters thicker.

Week 12 - 17/06/2022
General Feedback:
Be sure to include the download link to our final typeface in our e-portfolio.
Can start generating the fonts and work on the application asap as the submission is on next Friday (24/6). For those who are only doing uppercase letters, when generating the fonts make sure to fill in the lowercase part with the uppercase letters for the whole thing to look fuller.

Lecturer Feedback:
Excellent job, work on lowercase alphabets if possible but make sure to do it after finishing all the application design.

Week 13 - 24/06/2022
General Feedback:
Make sure to complete our e-portfolio as it is due before the 1st of July, 6AM.

Lecturer Feedback:
The cup design is interesting, the glass mug can be discarded since I already have cups. Paper bags can be dispensed. Keychain is good too but try not to distort the letters (maintain the original shape of the typeface). The poster needs a little bit more work as the fonts used don't really work with my typeface design. I was also advised to add 1 colour to my poster instead of using just greys (can look into examples of 1 or 2 colour prints). Think more on further application, t-shirt or pillowcase?


REFLECTIONS :  
Experience -
Overall I quite enjoyed doing this task as it allowed me to explore more on my own style more and also design something that I like. I'm really happy and satisfied with the outcome. This task was also very beneficial to me as I get the full experience of how to design a typeface. I believe that I will be using my own typeface for my future works. I would say the toughest part of this task is to complete the work within the given time frame. Since it was almost near the end of the semester, I had quite a few group projects and also individual assignments due while this task was ongoing. Halfway through the task, I was encouraged to complete lowercase letters, Honestly, I thought I couldn't do it but I decided to give it a shot. At first, I struggled with time management leading to multiple sleepless nights working on this task. However, once I started to allocate my time better, I managed to complete everything on time. 

Observations -
The experimental part of this task sounded very interesting to do but sadly my mind went blank trying to think of something experimental. I observed that some of the experimental works from my classmates are really amazing and it reminds me that I should try to explore more out of my comfort zone. Besides, I also observed that perseverance is important. When something doesn't work it is important that we keep trying until it does instead of giving up halfway. I also observed that punctuations and letters have varying sizes. An example would be the period dot would be slightly larger than the dot on 'i'. 

Findings - 
From the start, I knew designing a typeface wasn't easy but after trying to design one myself, I found that it is very time-consuming and you will encounter ups and downs while designing it. This task just made me respect and admire those who do typeface designs for a living. I also found that having a clear idea or sense of direction to anything you're doing could benefit you greatly as you won't get lost along the way while trying to reach the goal. Not sure if this could be added as a finding but I found that Font Forge is so difficult to use? I haven't even begun to generate my letters and I've already encountered issues with it (couldn't even import my letters into the software for some reason).


FURTHER READING: 


Fig8.1 Grilli Type guide

Fig8.2 About punctuations

Fig8.3 Comma construction

This whole Instagram guide by Grilli Type is so helpful in understanding the construction and design of punctuations! By reading the guide, I gained more knowledge on the features and sizes of punctuations. As explained in my reflection, I learnt that the exclamation dot should be smaller than the period. As for the size of the period dot, it should be sligtly larger than the dot on 'i'.

Comments

Popular Posts