Advanced Typography | Task 2: Key Artwork and Collateral

22.4.2024 - 29.05.24 ( Week 1 - Week 6 )

Lam Hui Zhen / 0374770

Advanced Typography / Bachelor of Design (Honors) in Creative Media / Taylors University

Task 2: Exercise

LECTURES
INSTRUCTIONS
TASKS
FEEDBACK
REFLECTIONS
FURTHER READING

LECTURES

Type design carries a social responsibility
Type design is a form of artistic expression.

Univers and Frutiger from Adrian Frutiger

Fig 1.1 Univers by Adobe Illustrator.

Adrian Frutiger is a sans serif typeface.
The goal for this new typeface is clean, distinctive and legible typeface

Georgia from Matthew Carter

Fig 1.2 Georgia and Verdana

Carter's fonts were created to address specific technical challenges
The font was tuned to be extremely legible even in a very small sizes on the screen.
Considerations/limitations: The Verdana fonts exhibit characteristics derived from the pixel rather than the pen.

Johnston Sans from Edward Johnston

Fig 1.3 Johnston Sans

A typeface with "bold simplicity"
Use for London's Underground railway.

General Process of Type Design

Research- examine existing fonts that are presently being used for inspiration/ides/reference etc.
Sketching- can use different tools to create your sketches.
Digitization - Professional software that use are Fontlab and Glyphs
Testing - Important component Test the readability and legibility of the typeface
Deploy

Typeface Construction

Roman Capital: The grid consists of a square, and inside it a circle that just touches the lines of the square in four places.
The grids can use facilitate the construction of a letterforms.

Fig 1.4 Construction and considerations

Most typefaces come about due to a need or demand. The need/motivation can be intrinsic and extrinsic.

Intrinsic: The designer interest and seeks out a form that comes close to fulfilling a desire.

The designer can identifies a gap/problem that to be solve it.

Extrinsic: The designer commissioned or student has a task to complete that involves designing a typeface.

A design to be successful the designer needs to be invested in the idea and understand the requirement/limitations/use/stakeholder.

AdTypo_5_Perception And Organisation

Perception

Means deal with the visual navigation and interpretation of the reader via contrast, form and organisation.
The content cand textual, visual, graphical or in the form of color.

Fig 1.5 Methods in typography to create contrast

Contrast

7 kinds of contrast - 1. Size 2. weight 3. contrast of form 4.Contrast of structure 5.Contrast of texture 6.Contrast of colour 7.Contrast of direction

1.Size

Contrast of size provides a point to which the reader's attention is drawn.

Common use of size is contrast between the title/heading and body text

Fig 1.6 Contrast of Size

2.Weight

Weight describes how bold type can stand out in the middle of lighter type of the same style.

Fig 1.7 Contrast of weight

3. Structure

Structure means the different letterforms of different kinds of typefaces.

Fig 1.7 Contrast of Structure

4. Texture

Texture refers to the way the lines of type look as a whole up close and from a distance

This depends partly on the letterforms themselves and partly on how they're arranged

Fig 1.8 & 1.9 Contrast of texture

5. Direction

Contrast of direction is the opposition between vertical and horizontal and the angles in between.

Turning words on its side can create dramatic effect.
Text blocks also have their directions
Mixing wide blocks of long lines with tall columns of short line also create contrast.

Fig 1.10 Contrast of Direction

6. Colour

The use of colour is suggested that a second color is often less emphatic in values than plain black on white.

Fig 1.11 & 1.12 Contrast of Color

Form

Refer to the overall look and feel of the elements that make up the typographic composition
Plays a role in visual impact and first impressions
lead eye from point to point

Fig 1.13 Example for form

Typography can be seen as having two functions:

to represent a concept
to do so in a visual form

INSTRUCTIONS

Fig 2.0 Module information pdf

TASK 2A-Key Artwork

In this task we are ask to create our own name mark based on our keyword about our personalities.

The final key artwork must be an elegant solution, well balanced and composed, not complicated or confusing that leads to a functional and communicable key artwork.

Before I create my sketches, I create a simple moodboard for my whloe design direction.

Fig 3.0 Moodbaord

Sketches

Moving to the sketch stage I create 3 different sketches based on different keyword of my personalities. After getting feedback from Mr.Vinod, I realize that most of my sketches didn't bring out the keyword well.

Fig 3.1 Sketches 1

So I focus in the first keyword (Introvert but talkative).I use bold type in my name mark.

The two dots in between the words represent the keyword "Introvert".

Fig 3.2 Sketches 2

Digitization

During the digitization I add on a bubble and also "HI", to enhance the feeling of talkative.

Fig 3.3 Digitizing process (1st process)

Mr.Vinod suggest to remove the white stroke in the words to keep it simple. Besides that the space in between the words need to be enlarge. So the viewer still can read while the logo in a smaller size.

Fig 3.4 Final Digitized name mark

Moving to the color application stage, I use color hunt to look for different color combinations. I prefer the color combinations can bring out a bright feeling.

Fig 3.5 Final color palette

Key Artwork Animation

For animation of the namemark, I used Adobe effects to create it.Since I have no idea about After Effects so i go through some tutorial video in youtube.

Fig 3.6 & 3.7 Learning process

After go through some tutorial video I start to create the animation.

Fig 3.8 & 3.9 Process in After Effects

Fig 3.10 Final Animation

Task 2A Final Outcome

Fig 3.11 Black wordmark on white background

Fig 3.12 White wordmark on black background

Fig 3.13 Colour Palette

Fig 3.14 Wordmark in actual colours on lightest shade of colour palette

Fig 3.15 Wordmark in lightest shade of colour palette on darkest shade of colour palette

Fig 3.16 Final Animation

Fig 3.17 Final Outcome pdf

Task 2B Collateral

Fig 4.0 Final NameMark

Fig 4.1 Collateral T-shirt

Fig 4.2 Final Logo Expand from namemark

Fig 4.3 Final Collateral Tote Bag

Fig 4.4 Final Collateral Application Logo

Fig 4.5 Screenshot of Instagram Page

Fig 4.6 Final Out for Task 2B

Instagram link : https://www.instagram.com/zzz.hen_/

FEEDBACK

Week 5

Specific feedback:

Design 1 lack of showing the keyword.

Design 3 is okay.

Need to look for more reference.

Week 6

Specific feedback:

Design approve. Pay more attention at the small details.

Need to enlarge the space between the word.

Color palette is good.

Week 7

Specific feedback:

Some of collateral not so good. Need explore more.

And some of the expand looks similar.

Reduce the blue color.

REFLECTION

Experience

This task is more let us to explore about business and entertainment design. It was fun to create our own name mark from zero to the final outcome. In this task I have learn a lot different skills cause we need to use different software to complete this task. I have never learn about Adobe Effects before, in this task I have a chance to learn Adobe After effects. Although the final outcome of the animation is simple but I'm happy with that cause I learning a new skill in this task.

Observations

In this exercise I learn to observed the gap between the letter while creating the name mark. We must make sure the readability of the name mark while zoom out the name mark. Besides that during Task 2B I think I gain a better observation skill while creating the post in the Instagram. I need to always pay attention to maintain the harmony of the page.

Findings

While browsing the pentagram, this website always give me different idea during the Task 2A.In this website involve a lot of design idea and always how to create a good branding. Futhermore, I also notice that a good design not only look nice but need to bring out the correct information.

Lam Hui Zhen (0374770)

Search This Blog