Advanced Typography: Task 2 Key Artwork & Collateral

14.05.2025 - 11.06.2025 / Week 4 - Week 8

Brenda Wynn / 0372128

Advanced Typography / Bachelors of Design (Hons) in Creative Media / Taylor's University

Task 2

JUMP LINKS

LECTURES

Week 4

Two reasons to design a typeface:

To improve type legibility
Type design is a form of artistic expression

Adrian Frutiger

considered responsible for the development of typography to digital typography
designed Univers and Frutiger typeface, etc

Frutiger Typeface

originally made for the signage in Charles de Gaulle International Airport in France
sans serif typeface
designed in 1968
purpose= to create a clean, distinctive, functional, and legible typeface that can be seen from up-close and afar
limitations= the letterforms has to be recognizable in poor lighting conditions or when the reader is moving, so Adrian Frutiger experimented with unfocused letterforms to identify the most legible one

Matthew Carter

created fonts that has to cover technical challenges (example: the font has to be legible when the size is small on a device's screen)
created Verdana (for Microsoft), and Georgia typeface, etc
limitations= Verdana was made of pixels, making the letters "i, j, l" hard to identify
Bell Centennial typeface was created when Matthew Carter was assigned by a company to create a typeface that will be used in the company's telephone directories because it would look blur after printing (example: the strange shape on capital "B" is called an ink trap because the extra ink that flows due to the paper and fast printing covers the ink traps making it look normal)

Edward Johnston

created London "Underground" typeface, known ad Johnston Sans (1916)
Johnston Sans was created because Edward Johnston was asked to create a typeface with "bold simplicity" that is modern but comes from tradition. It is a combination of classical Roman proportions with humanist warmth
purpose= London's Underground railway wanted a new typeface for all posters and signage
limitations= Johnston had to unite all the different typefaces used in London Underground group
Johnston typeface has elegance and simplicity that fits the modern era

Eric Gill

created Gill Sans
Gill Sans success made Eric Gill feel guilty because it is heavily based on the "Underground" typeface by Edward Johnston

Figure 1.1 typefaces created (17/05/2025, week 4)

General Process in Type Design

1. Research

- understand type history, type anatomy, and type conventions

- determine the purpose and the different applications it can be used in

- examine existing fonts for reference

2. Sketching

- some sketch with digital tools and some with hands, both methods have pros and cons

- sketching with hands= is slow but has time to actually consider and think about the design

- sketching digitally= is fast but it is slow when detecting hand movements of hand strokes

3. Digitization

- pay attention to the entire form and the counter form of the typeface because it affects the readability of the typeface

4. Testing

- a process of refining parts within a typeface to see whether it is legible or readable

- if its a display type, the expression of the typeface is more important

5. Deploy

- when a typeface is deployed, it may contain a few small mistakes that were not identified during testing

- the process of improving does not stop during this step, so the testing phase is important to avoid any big mistakes

Typeface Construction

- use grids with circular forms to construct the letterforms

- Roman Capital uses a grid that includes a square and inside it is a circle that fits the square. Within the square is a rectangle that is 3/4 the size of the square and positioned in the center of the square

Figure 1.2 typeface construction (17/05/2025, week 4)

Construction Considerations

- there are a few elements of a form that can be used on other forms due to the similar design, so the work process is faster

Figure 1.3 typeface construction considerations (17/05/2025, week 4)

Visual Correction

- overshoots and curved forms are important visual corrections that must be taken into account, it also applies to vertical alignment for both curved and straight forms

- it is needed to determine the space between letters, because the letters must be distanced properly to create a uniformed visual white space

Figure 1.4 typeface visual correction (17/05/2025, week 4)

Week 5

Perception in Typography

- deals with visual navigation and interpretation of the reader from the contrast, form, and organization of the content

Contrast

- to create distinction between information

Creating contrast in typography by Rudi Ruegg=

Figure 2.5 contrast in typography by Rudi Ruegg (20/05/2025, week 5)

Carl Dair

- adds texture and direction to make the design and meaning more clear, ambiguous, and adds flair

7 Contrast by Carl Dair (mostly covered by Rudi Ruegg but uses different terms)=

1. Size

- to catch the reader's attention

2. Weight

- how bold type stand out from lighter type of the same style

3. Contrast of Form

- distinction between capital and lowercase, roman letter and its italic, condensed and expanded

4. Contrast of Structure

- uses different kinds of typefaces

5. Contrast of Texture

- uses different sizes, weights, forms, and structures by applying them to a block of text

6. Contrast of Color

- it is suggested that the second color is not as high-contrast as black on white

7. Contrast of Direction

- contrast between vertical horizontal and angles in between

Figure 2.6 contrast by Carl Dair (20/05/2025, week 5)

Form

- creates most visual impact in a design

- overall look and feel of the elements in a typographic composition

- a good form will lead the eye from point to point, entertains the mind, memorable, intriguing

- typography came from the Greek words "typos" (form) and "graphis" (writing)

- typography is writing according to the right format

- two functions in typography=

1. to represent a concept
2. to represent it in a visual form

- displaying type as a form shows the letterforms unique characteristics and abstract presentation

Figure 2.7 form (20/05/2025, week 5)

- the relationship between meaning and form creates a balanced harmony in both the function and expression

- if a typeface is perceived as a form, it is no longer legible because of the manipulation created by distortion, texture, enlargement, and extruded into a space

Figure 2.8 form poster examples (20/05/2025, week 5)

Organization

Gestalt= a German word that means "the way a thing has been placed or put together"

Gestalt Psychology is an attempt to understand the ability to maintain meaningful perceptions

Gestalt psychologist, Max Eertheimer developed "laws" (principles) that predicts how our brain organizes visual elements and groups them (Gestalt principles)

Gestalt Theory

= the entirety of something is greater than its parts, it is based on hoe we experience things as a whole.

Gestalt: Perceptual Groupings

1. Law of Similarity

= elements that are similar tend to be perceived as a group

2. Law of Proximity

= elements that are close together tend to be perceived as a group

3. Law of Closure

= how the mind see complete forms or figures even when it is incomplete

4. Law of Continuation

= humans tend to perceive two or more objects as a different and singular even if they intersect

5. Law of Symmetry

6. Law of Simplicity

Figure 2.9 organization (20/05/2025, week 5)

BACK TO TITLE

INSTRUCTIONS

BACK TO TITLE

TASK

TASK 2(A)

We were assigned to make a mind map about ourselves, a mood board, and some sketches first. Which we will then turn into a wordmark that is also an artwork.

Mind map

Figure 3.1 mind map about myself (16/05/2025, week 4)

Mood Board

Figure 3.2 mood board (16/05/2025, week 4)

Sketches

Figure 3.3 wordmark sketches (18/05/2025, week 4)

After filtering through my sketches, I picked 7 sketches that I liked the most. The idea behind the sketches I made are:

1. I tried to represent one of my favorite flowers, which is a tulip;

2&3. I implemented my goofy and weird side;

4. I emphasized my nickname from my full name;

5-7. I tried to depict my bubbly personality.

Figure 3.4 chosen sketches (18/05/2025, week 4)

From the sketches, Mr. Vinod suggested that I should develop my sixth sketch. The key word for this sketch is "Bubbly", to represent my personality. Before I started digitizing, I looked into some balloon photos as a reference.

Figure 4.1 balloon references (21/05/2025, week 5)

Firstly, I started digitizing my sketch on Illustrator first without any development. I used the "Modak" typeface as a foundation to my digitization. Then, I set some guides for the baseline and cap height for my wordmark. After that, I started forming my wordmark mainly using the smooth tool, delete and add anchor points tool, pathfinder tool, etc. I also added some other elements to emphasize the "balloon" look more by deforming a circle using the direct selection tool to move the anchor points and the strings are made using the line tool, which I made into an object using the outline stroke.

Figure 4.2 digitization progress (24/05/2025, week 5)

After the feedback, Mr. Vinod told me to develop my wordmark more. He suggested that I make the strings more balanced and ends at the same height. He advised me to keep my wordmark aligned and levelled properly and recommended me to make my counter spaces deeper to make the wordmark more readable from afar.

Figure 5.1 digitization development progress 1 (28/05/2025, week 6)

I decided to change the way my element look on the wordmark by changing its size and also making it more rounded using the direct selection tool mainly. After I was satisfied with the result, I explored and experimented different color palettes that will complement my wordmark.

Figure 5.2 digitization development progress 2 (31/05/2025, week 6)

After choosing the color palette, I also decided to make the top part of my letter "B" smaller than the bottom part because it looked more like the letter "C". I used the direct selection tool mainly, to form the top part of the letter "B".

Figure 5.3 digitization development progress 3 (31/05/2025, week 6)

WORDMARK RESULTS

Figure 5.4 wordmark results and color palette (31/05/2025, week 6)

Mr. Vinod gave me some feedbacks regarding the wordmark, he recommended me to find a color that contrasts better. He also advised me to develop my elements more. So, I decided to change my color palette first before developing my wordmark any further. After I chose a new color palette, I decided to add more shape to the string elements on my wordmark and also added a triangle on the top part of the string to somewhat represent the tied look a balloon has on the bottom part.

Figure 6.1 adding new elements (04/06/2025, week 7)

WORDMARK RESULTS

Figure 6.2 wordmark results and new color palette (04/06/2025, week 7)

After the feedback, Mr. Vinod told me that the balloon strings were not that visible. To fix that, I decided to increase the thickness of the stroke of my balloon strings.

Figure 7.1 refining wordmark (11/06/2025, week 8)

WORDMARK RESULT

Figure 7.2 refined wordmark results (11/06/2025, week 8)

TASK 2(B)

After I was satisfied with the chosen color palette and the results of my wordmark, I created some bubbles in Illustrator mainly using the ellipse tool, pathfinder, etc to support my wordmark more in the mockup. Then, I browsed some mockups that represents my wordmark and the chosen colors best. When I have already compiled the chosen mockups I wanted, I edited them in Photoshop and copy pasted elements that I made from Illustrator to Photoshop.

Figure 8.1 mockup progress (31/05/2025, week 6)

For the exploration, I decided to use the bubbles that I created on Illustrator and I colored different sections of the bubbles according to the color palette. I also experimented with the opacity to see which one looks better.

Figure 8.2 exploration progress (31/05/2025, week 6)

This is the Instagram page:

Figure 8.3 1nstagram layout page result (31/05/2025, week 6)

Mr. Vinod gave me some feedbacks regarding the mockups, he told me to not add other elements and to focus on the elements I already had on my wordmark. He advised me to develop the mock up designs with the string element, so I looked into some different balloon string shape references.

Figure 9.1 balloon string references (04/06/2025, week 7)

When I was already satisfied with how my wordmark looks, I decided to experiment with the balloon string elements first and see what will look the best on a mockup in Illustrator. I used the line tool, smooth tool, blob brush tool, etc to make the different balloon string shapes.

Figure 9.2 mockup experiment (04/06/2025, week 7)

Once I got a visual on how I want my mockups to look like, I looked into new mockups and experimented with a few mockups that will convey my wordmark best. For the elements on the mockups, I made it on Illustrator and transferred it to Photoshop. After transferring the elements, I adjusted and edited it on Photoshop.

Figure 9.3 mockup experiment (04/06/2025, week 7)

I decided to change the exploration I did, so I utilized the hearts that was created from the balloon strings and compiled it into one. I also added little hearts on some parts to define the hearts better and reduced the opacity to emphasize the "balloon string" hearts better. For the extra hearts, I used pathfinder and the ellipse tool to make it.

Figure 9.4 new exploration progress (04/06/2025, week 7)

This is the final mockup results:

Figure 9.5 Instagram layout result (04/06/2025, week 7)

After I finished my mockups, I decided to work on my animation(GIF). First, I decided to make it using Photoshop by making the each of the frames on Illustrator using ellipse tool and pathfinder to make the pop effect. However, it did not turn out as smoothly as I had hoped for.

Figure 9.6 animation experiment progress 1 (04/06/2025, week 7)

So, I decided to make the animation(GIF) on After Effects by using the ai file I made in Illustrator. Using the transform panel, I utilized the position, scale, keyframes, etc to make my GIF. I also used pre-compose to combine some elements to make the editing process much efficient and consistent. The idea of my GIF is to make the wordmark that will represent balloons float to the middle, which will then pop and fall down.

Figure 9.7 animation progress idea 1 (04/06/2025, week 7)

This is how the GIF looks:

After finishing the animation (GIF), I decided to explore the identity of my wordmark more. So, I experimented with another way by utilizing my wordmark and making it look like a knot of balloons where one of them flew away. To do so, I utilized the blob brush tool mainly to make the strings. I also decided to add the "B" letter and overlay it on top of my color palette to show the color identity that my wordmark uses better.

Figure 9.8 new exploration progress 2 (04/06/2025, week 7)

Then, I also decided to try another idea for my animation to see which one might display my wordmark better. In this idea, I decided to make the "balloon" stuck on the bottom and the letter "E" has flew away due to the strong wind. In this animation, I used the ai file I created for this specific animation and edited it on After Effects.

Figure 9.9 animation progress idea 2 (04/06/2025, week 7)

GIF Idea 2 Results:

After the feedback, Mr. Vinod told me that the balloon strings is not that visible when it is seen from afar. So, I decided to increase the size of the balloon string on both of my wordmark and my mockup.

Figure 10.1 refining mockups (11/06/2025, week 8)

Mr. Vinod also recommended me to make my first animation idea look more realistic by making the "balloons" float to the middle in a distorted way like real balloons. So, I decided to use another ai file and edited the GIF using the transform properties (scale, position, and rotation) in After Effects. I also used the ease in effect to make it more smooth.

Figure 10.2 new animation progress (11/06/2025, week 8)

GIF Result:

This is how the Instagram layout looks like with the GIF:

Figure 10.3 Instagram layout page (11/06/2025, week 8)

TASK 2(A) FINAL RESULTS

Figure 11.1 white background and black wordmark jpg (15/06/2025, week 8)

Figure 11.2 black background and white wordmark jpg (15/06/2025, week 8)

Figure 11.3 color palette jpg (15/06/2025, week 8)

Figure 11.4 lightest shade background with middle color wordmark jpg (15/06/2025, week 8)

Figure 11.5 darkest shade background with second darkest color wordmark jpg (15/06/2025, week 8)

TASK 2(A) COMPILED PDF

TASK 2(B) FINAL RESULTS

Figure 12.1 CD cover mockup 1 (15/06/2025, week 8)

Figure 12.2 Phone case mockup 2 (15/06/2025, week 8)

Figure 12.3 Magazine cover mockup 3 (15/06/2025, week 8)

Figure 12.4 Instagram layout (15/06/2025, week 8)

Instagram Link: https://www.instagram.com/brenda.wynn_8/

Figure 12.5 Instagram page screenshot (15/06/2025, week 8)

TASK 2(B) COMPILED PDF

BACK TO TITLE

FEEDBACK

Week 5

General Feedback: Mr. Vinod informed us that the wordmark has to be related to us or reflect ourselves and the chosen keywords, but not too much that it starts to resemble other things. He emphasized that we should keep our wordmarks balanced and stable. He also told us some tips on how we could judge our wordmark, one of them is by asking friends if they would buy it if the wordmark is on a shirt.

Specific Feedback: Mr. Vinod told me to further specify the keyword "Spring" and make wordmarks from words I used to describe the season spring. After I further specified the keywords, Mr. Vinod told me that the sixth sketch is possible if I can construct it well and keep the height difference between letters more minimal to reduce blank spaces.

Week 6

General Feedback: Mr. Vinod told us to use a color palette that includes a bright color, a dark color, and a middle color that compliments them. He also reminded us to keep our wordmark balanced. Lastly, he told us to mind the alignment of the wordmark and keep it consistent through out.

Specific Feedback: Mr. Vinod told me to make the variety of height look more balanced through out the wordmark. He also told me to keep it levelled and aligned. He also recommended me to make the counter spaces of my letters deeper to improve the readability.

Week 7

General Feedback: -

Specific Feedback: Mr. Vinod told me that my color palette needs more contrast and that I should utilize using my "balloon" string element to improve both the mockup and wordmark design.

Week 8

General Feedback: Mr. Vinod advised us to not overuse the pattern we made from our wordmark. He also told us to choose a portrait of ourselves, so our identity is clear. He informed us that our wordmark animation should only include the wordmark and should not be too long.

Specific Feedback: Mr. Vinod told me that the lines that I used in both my wordmark and mockup it not that visible. He also told me to make my animation shorter and advised me to make my animation more realistic to how balloons would actually fly up or float.

BACK TO TITLE

REFLECTION

Experience

When we were assigned to make our own wordmark, I already had a plan on what I want to show through my wordmark so I felt pretty excited. However, the process of making and developing my wordmark made me feel a bit anxious and frustrated. I do believe that it was hard for me since I did not know how I should develop my original wordmark sketch. But even with a frustrated mind, I know that the process helped me develop my skills and my wordmark design. After making the wordmark, we were tasked to make several mockups, exploration, and also an animation of our wordmark. I was actually quite interested to make the mockups and the animation for my wordmark. Though I did face a good amount of challenges when executing both the wordmark and the animation. I do feel that the process was worth it and I did develop my wordmark more.

Observation

During the period of making the task 2(A), where we were assigned to make our own wordmarks. My progress was slower compared to my peers when it comes to developing my wordmark. The wordmark results I made did not stand out as much compared to my peers wordmarks. Though after some more exploration and experimenting, my wordmark showed some improvement. When it came to doing task 2(B), where we had to make mockups, animation, and exploration of our wordmark. The animation process showed that I needed to develop my skills more since I was having quite a hard time with the technical skills needed. However, after I experimented with a few different software and ideas of my animation, the results were more developed than before. From these 2 tasks, I will need to keep improving on both of my developing and technical skills.

Findings

Through the making of task 2, I have experimented a lot with several software and ideas which helped me developed both my creative thinking and technical skills more. I also realized that I should invest more time into experimenting with different software because I was quite behind during the making of this task. So, to improve on my idea development and also my technical skills some more I will need to explore some work from other sources and see what works and what does not. Then I would need to invest more time into practicing my technical skills on several software.

BACK TO TITLE