Advanced Typography / Task 1

01.04.2022 - 05.04.2022 (Week 1 - Week 5)
Abigail Kartika Darmowinoto / 0350525 / Bachelor of Design in Creative Media
Advanced Typography / Taylor's University
Task 1 : Exercises; Typographic Systems & Type & Play

LIST

OTHER POST

LECTURES
<back to top>

Week 1 (01/04/2022)

On the first meeting, Mr. Vinod introduced us to the MIB, Google sheet and briefed us the activity that will be done in this module. Then, we were tasked to listen to Mr. Vinod's lecture.

AdTypo_1_Typographic Systems

- all design are based on structural system"

- no communication, no point slide 2

hierarchy order -> contrast are important

- typographic systems = shape grammars

- complex information + direction = help understand better.

There are 8 systems:

Axial System = all elements organized to left to right of a single axis, information are grouped.
Radial System = all elements are extended from point of focus
Dilatational System = all elements expand from a central point in a circular fashion - more complex, well organized
Random System = no specific part or relationship
Grid System = a system of vertical and horizontal divisions to create emphasis and hierarchy
Transitional System = informal system of layer branding
Modular System = series of non objective elements that are constructed as standardized units (similar size, etc)
Bilateral System = all texts arranged symmetrically on a single axis (invitation card, formal invitations)

fig 1.1, Typography System Compiled, Week 1 (01/04/2022)

*All image source: Mr. Vinod's Lecture

It seems awkward, and boring, but as work develops and understanding of the system emerges, creative potential started to be realized. Understanding systems, it allows designer to understand lots of creative way of designing the information. All types have to be used appropriately. Typography is not only a text in page.

“Typography is the use of type to advocate, communicate, celebrate, edu- cate, elaborate, illuminate, and disseminate. Along the way, the words and pages become art.”

⎯ James Felici, the author of The Complete Manual of Typography

AdTypo_Ex_TypographicSystems_Modular

Things to note for modular:

Proper lines and grids -> use margin and columns
Use guides
Must be same unit

fig 1.2, Same Unit, Week 1 (01/04/2022)

AdTypo_2_Typographic Composition

Composition -> dominant principles; emphasis, isolation, repetition, symmetry, asymmetry, alignment, etc. Coming to the layouts, abstracts sometimes present ambiguous meaning to the perceiver, it's more eligible for imagery.

fig 1.3, examples of emphasis, Week 1 (01/04/2022)

RULE OF THIRDS

Suggests that frame (space) can be divided into 3 columns and 3 rows
Rarely used on typography

fig 1.4, application of rule of third, Week 1 (01/04/2022)

TYPOGRAPHIC SYSTEMS

Of the 8 systems, the most pragmatic and the most used system is the grid system, which is derived from the grided compositional structure of Letter Press printing.

fig 1.5, typographic systems, Week 1 (01/04/2022)

ENVIROMENTAL GRID

Exploration from the form structure that exist or combining some structures.

fig 1.6, enviromental grid, Week 1 (01/04/2022)

FORM AND MOVEMENT

Exploration from the grid systems. The purpose of this system is to explore, the multitude of options the grid offer, to dispel the seriousness surrounding the application of the grid system, and to see the turning of pages in a book as a slowed-down animation in the form that constitutes the placement of image, text and colour.

fig 1.7, form and movement, Week 1 (01/04/2022)

INSTRUCTIONS
<back to top>

fig 2.1, Module Information Booklet of Advanced Typography

fig 2.2, Advanced Typography Class Timeline

WEEK 1 TASK EXERCISE:
✅ 8 Exercises about layout, color used only white, black, and any one color. (due: next week)

WEEK 2 TASK EXERCISE:
✅ Find pictures and trace words from it.

WEEK 3 TASK EXERCISE:
✅ Refine it
✅ Finalize blog (due WEEK 4)

WEEK 4 TASK EXERCISE:
✅ Type and Play 2

WEEK 5 TASK EXERCISE:
✅ E-Portfolio
✅ Prepare for task 2; create shapes form your initials (1024 or 2048 px, ratio 1:1)

EXERCISES

<back to top>

EXERCISE LIST:

EXERCISE 1: 8 TYPOGRAPHIC SYSTEM

EXERCISE 1 FINAL

EXERCISE 2A: TYPE AND PLAY PART I

EXERCISE 2A FINAL

EXERCISE 2B: TYPE AND PLAY PART II

EXERCISE 2B FINAL

EXERCISES FINAL COMPILATION

EXERCISE 1: 8 TYPOGRAPHIC SYSTEM
(back to exercise list)

Before I started to work, I searched on some examples in Pinterest and Google.

fig 3.1, brainstorming, Week 1 (07/04/2022)

I didn't thought about anything to be honest since this kind of things are very minimalistic and it's hard to digest for me since minimalism isn't my power. But then when I thought of Dilatational, I'm thought of zen garden sand pattern, so I made it inspired by that:

fig 3.2, sketching, Week 1 (07/04/2022)

The typefamily that I'm planning to use is Univers, since I thought I want to use sans serif and Univers have lots of type choice (Boldness, Lightness).

DILATATIONAL

So for the Dilatational one, I tried to make the text shaped in the circle shapes:

fig 3.3, dilatational 1, Week 1 (05/04/2022)

Since I feel the information hierarchy not good and readable, then, I decided to bold the subheadings.

fig 3.4, dilatational 2, Week 1 (05/04/2022)

TRANSITIONAL

Moving on to the Transitional, I feel my sketch layouting is ok for me, so I went with the same format, and adjust it a bit to give it more flow.

fig 3.5, transitional, Week 1 (05/04/2022)

RADIAL

I make it using some circle guides. First, I made the Heading.

fig 3.6, radial 1, Week 1 (05/04/2022)

I feel like it looked like shouting illustration, so I decided to made the other layout similar.

fig 3.7, radial 2, Week 1 (05/04/2022)

RANDOM

For the Random, I tired to combine with a little bit of type play for the Headings.

fig 3.8, random 1, Week 1 (05/04/2022)

I feel the readability is bad, so I planned to add the color in here, as the shadows to make the information pop.

fig 3.9, random 2, Week 1 (05/04/2022)

I feel like I want to add something, so I decided to add some scratches, as an illustration of "riped".

fig 3.8, random 3, Week 1 (05/04/2022)

fig 3.9, illustrator, Week 1 (05/04/2022)

For the Axial, Grid, Modular, and Bilateral, I used Indesign because they don't need shapes and Type on Path.

AXIAL

I'm thinking to make a contrasting layout, so first I used BnW, I make a big black square in the screen.

fig 3.10, axial 1, Week 1 (07/04/2022)

I typed all the informations and highlighted the necessary subheading:

fig 3.11, axial 2, Week 1 (07/04/2022)

GRID

For the Grid system I'm planning on making something simple, not many elements. So I tried to place it like continuously, having a reading flow in there:

fig 3.12, grid, Week 1 (07/04/2022)

MODULAR

Thinking of modular, I don't have any idea on what I'm going to make. So, I just go with the flow, first, then I suddenly thought of something like this:

fig 3.13, modular, Week 1 (07/04/2022)

BILATERAL

For the bilateral, I'm inspired from theatre front layouts, like this classic 90s oldish layout vibes.

fig 3.14, bilateral inspiration, Week 1 (07/04/2022)

So, I made this attempt:

fig 3.15, bilateral 1, Week 1 (07/04/2022)

So here's my work compilations:

fig 3.16, progress 1 compilation, Week 1 (07/04/2022)

I did some changes and adjustments for some system referring to Mr. Vinod's feedbacks. I adjust the one from the less adjustment needed to the one that need lots of adjustments:

AXIAL

I add more leading to the paragraph part in black area. Here's how it looks:

fig 3.17, axial revision, Week 2 (10/04/2022)

GRID

I add more margin space for the Grid System, following the standard Indesign setting.

fig 3.18, grid revision, Week 2 (10/04/2022)

BILATERAL

I reduce the kerning for "The Design School, Taylor's University" as advised by Mr. Vinod, changing the paragraph letters to lowercases, and uniforming the spacing between the sections.

fig 3.19, bilateral revision, Week 2 (10/04/2022)

MODULAR

I tried to rearrange the layout and make the paragraph to be align left. So I made this:

fig 3.20, modular revision, Week 2 (10/04/2022)

RANDOM
I tried to rearrange the layout by erasing all of them first. Started of with the title, then I moved on to the other elements and I finally made my random:
fig 3.21, random revision, Week 2 (10/04/2022)

8 TYPOGRAPHIC SYSTEMS FINAL (JPEG, PDF)
(back to exercise list)

fig 3.22, final compilation, Week 2 (10/04/2022)

JPEG

fig 3.23-3.30, final JPEG; axial, radial, dilatational, random, grid, transitional, modular, bilateral, Week 2 (10/04/2022)

FINAL PDF

fig 3.31, final PDF, Week 2 (10/04/2022)

EXERCISE 2: TYPE AND PLAY PART I
(back to exercise list)

On the week 2, Mr. Vinod started to tasked us on the type and play assignment. We have to search for images to trace the words.

I found these images:

fig 3.32-3.33, source; https://www.pexels.com/photo/bunch-of-quartz-crystal-2942849/, https://pin.it/4Z68Tzv, Week 3 (14/04/2022)

Then, I started to trace them:

fig 3.34, text finding and tracing 1, Week 3 (14/04/2022)

Mr. Vinod gave me feedbacks to try tracing the bigger image, so I tried to re-trace it again and I found these letters:

fig 3.35, text re-finding and re-tracing 1, Week 3 (16/04/2022)

From the selection, Mr. Vinod recommended me to choose either the "wayang kulit" one or the crystal one. I chose the crystal one since I have an idea for the crystal one and the characteristic is quiet clear than the puppet.

So first, I chose my referenced typeface, I came out with this choice; Bodoni (72) Bold. I compared it with the object shapes I found:

fig 3.36, text and reference, Week 3 (16/04/2022)

I want to make a serif type fonts because I want to showcase the "sharp" looking of the crystal, so I'm using a serif type typeface. I choose Bodoni also because I like the way of using thin and thick strokes combinations. I analyzed how the letters are shaped:

fig 3.37, analyzing stroke and lines, Week 3 (19/04/2022)

I tried to compare the original and reference one.

fig 3.38, refining 2, Week 3 (19/04/2022)

fig 3.39, refining 3, Week 3 (19/04/2022)

I stopped and I want to reference on the other shape of quartz:

fig 3.40, quartz study, Week 3 (20/04/2022)

From the images of quartz, I noticed these things:

fig 3.41, quartz study 2, Week 3 (20/04/2022), source; https://www.worldatlas.com/articles/quartz-facts-geology-of-the-world.html

Sharp edges but not sharp
Long straight stem

Thus, in my next refining I want to consider those characteristics. I remake the fonts using more consistent strokes.

fig 3.42, refining step 4, Week 3 (20/04/2022)

I kinda feel satisfied, but I feel weird about the "o" so I wanted to do something with it. Also, I compared my typeface to another typeface also, I found some similarities with Baskerville (Bold), in terms of the thin and thick strokes. If I followed the way Bodoni thin and thick strokes, it somehow don't reflect the quartz characteristic, so I think I change my reference into Baskerville (Bold), since the thickness of the thick and thin strokes don't have much difference. Since I'm referring to it, a serif type typeface, I want to add the characteristic of serif, with "cap" and "feet"

fig 3.43, refining step 5, Week 3 (21/04/2022)

I think the overall look is better than the previous one.

Refining stages until final:

fig 3.44, stages of refining, Week 3 (21/04/2022)

I think I kinda miss something, so Mr. Vinod asked me to amend from the beginning. Following the steps that Mr. Vinod provided on the feedbacks session, I started to reshaping the letter.

fig 3.44, reshaping crystals, Week 3 (22/04/2022)

Then, I move the final shape to the artboard to do the adjusting part.

fig 3.45, adjusting I, Week 3 (22/04/2022)

Then, I began to reshape the shapes. For the final touch, I want to add like a white highlight that indicate some crystals that seen like a one shape, but actually some shapes of crystals.

fig 3.46, adjusting III, Week 3 (22/04/2022)

TYPE AND PLAY FINAL (JPEG, PDF)
(back to exercise list)

fig 3.47, final submission (JPEG), Week 3 (21/04/2022)

fig 3.48, final submission (PDF), Week 3 (21/04/2022)

EXERCISE 2B: TYPE AND PLAY PART II
(back to exercise list)

I studied on some text and photographies out there, and I found these pictures:

fig 3.49-3.52, idea findings, Week 4 (26/04/2022)

Source:

In this exercise, I actually thought of making some text effects like fire, liquids, magic, something so effect like them. I was thinking of making so gluey at first, inspired by a character in my game:

fig 3.53, inspiration, Week 4 (26/04/2022), source; https://images.app.goo.gl/FRt2a2XTXxUm5hBY9

Thus, I searched for some pictures related to what I want:

fig 3.54-3.59, selected images, Week 4 (26/04/2022)

Source:

I searched on some YouTube tutorials on how to make type effects:

1. Magma Text Effect in Adobe Photoshop 2021 | Photoshop Tutorial

2. Fire Text Effect | Photoshop Tutorial

3. Liquid Text Effect - Adobe Illustrator & Photoshop CC Tutorial (2020)

4. Magic Smoke Text Effect | Photoshop Tutorial

So, my first attempt was creating the liquified effect, referring to the third video. I chose the third picture;

fig 3.60, trial of idea 1, Week 4 (27/04/2022)

I like the distortion, but it kinda felt overwhelming too much, also I'm struggling with how the color worked. So, I wanted to try my other plan, referring to the second tutorial.

So, I made this, using clipping mask, overlay, textures.. following the videos.

fig 3.61, trial of idea 2, Week 4 (28/04/2022)

I didn't feel like it suits with the images I'm using to (the first). So I gave up on all my ideas :(

I brainstormed more ideas. I refer back to what Mr. Vinod shown before.

fig 3.62-3.63, Week 3 Lecture Recording

Then, I was thinking like, what if I made something simple but still reflects the personality of the pictures/ surroundings. So, I came up with the ideation similar to the second lecture's screenshot (fig. 3.63). I want to make something fluid, so I searched on some pictures:

fig 3.64-3.65, underwater photographies, Week 4 (28/04/2022)

Source:

I'm referring to this tutorial:

Melting Liquid RGB Text Effect Photoshop Tutorial (+ FREE Textures!)

I came up with this, finally some works to show:')

fig 3.66-3.67, output 1 2, Week 4 (28/04/2022)

On my YouTube recommendation, I found another text effect tutorial, which I thought fun and interesting:

Photoshop Tutorials - Paper Cutout Text Effect

So, I chose this picture because I was thinking of something:

fig 3.68, image source, Week 4 (28/04/2022), source; https://pin.it/5LN0hSN

Following the tutorial, using textures, overlay, etc. , I made this:

fig 3.69, output 3, Week 4 (28/04/2022)

Before the final submission, I refined my "DIVE" one. I add a little wavy effect in the upper word, then I also brushed some blurry effects. Here's the comparison:

fig 3.70, edited comparison, Week 4 (28/04/2022)

EXERCISE 2B: TYPE AND PLAY PART II FINAL (JPEG, PDF)
(back to exercise list)

fig 3.71, TYPE AND PLAY 2 FINAL JPG, Week 5 (04/05/2022)
fig 3.72, TYPE AND PLAY 2 FINAL PDF, Week 5 (04/05/2022)
fig 3.73, TYPE AND PLAY 2 COMPARISON, Week 5 (04/05/2022)

EXERCISES FINAL
(back to exercise list)

8 TYPOGRAPHIC SYSTEMS FINAL

fig 3.74-3.81, final JPEG; axial, radial, dilatational, random, grid, transitional, modular, bilateral, Week 2 (10/04/2022)
fig 3.82, final PDF, Week 2 (10/04/2022)

TYPE AND PLAY FINAL

fig 3.83, final submission (JPEG), Week 3 (21/04/2022)
fig 3.84, final submission (PDF), Week 3 (21/04/2022)

TYPE AND PLAY PART II

fig 3.85, TYPE AND PLAY 2 FINAL JPG, Week 5 (04/05/2022)
fig 3.86, TYPE AND PLAY 2 FINAL PDF, Week 5 (04/05/2022)

FEEDBACKS

<back to top>

Week 2 (08/04/2022) - 8 Layouts:

GENERAL FEEDBACKS:

Body texts 8-12 pt
No pastel colors for the font color
Do task in Indesign

SPECIFIC FEEDBACKS:

Some layouts like Radial, Dilatational, Transitional is already good. The others need a work little bit;

fig 4.1, feedbacks by Mr. Vinod, Week 2 (08/04/2022)

Axial can use more leading around the date area,
Modular can re-edit the heightening and loosening for "The Design School, Taylor's University", and change align for date,
Grid just need to fix the margin,
Bilateral needs to fix the letter spacing of the TDS, Taylor's University and the date, also the line spacing.
Random needs some work.

Week 3 (15/04/2022) - Type Play:

GENERAL FEEDBACKS:

Find a referencing typeface.
Constructed font should reflect the picture chosen.

SPECIFIC FEEDBACKS:

Words founded if cover bigger area are better than too detailed.
Either crystal and puppet can go.

Week 4 (21/04/2022) - Type Play:

GENERAL FEEDBACKS:

Maintain stroke consistency

SPECIFIC FEEDBACKS:

Have to redevelop the shape, because gone wrong.
Contrasty between thick and thin stroke also rigged part

fig 4.2, Week 4 Feedback, Week 4 (22/04/2022)

Week 5 (29/04/2022) - Type Play Part 2:

GENERAL FEEDBACKS:

Can adapt color from images, pay attention to detail such like textures, colors, styles, edges of the images.

SPECIFIC FEEDBACKS:

Three of them are good but preferred the first or second output. For the first output, add more blurry effects on the default text. Overall good.

Week 7 (13/05/2022) - Final Feedbacks

TYPE PLAY 1A:

My fav is transitional, overall is relatively good but there is still room for improvement.

TYPE PLAY 1B:

FT good effort decent output, however there is still some need for refinement.

TYPE PLAY 2:

Excellent work here.

E-PORTFOLIO:

Week 7 E- T1 Excellent - detail documetation.

REFLECTION

<back to top>

EXPERIENCE

In this module, I was forced to be creative in solving problems of design needs. I was forced to go out of my comfort zone, excessive style, to make something that doesn't really need excessiveness. I learnt how to make some aesthetic layouts which I think very useful for my next level education. I also learnt on how to think more, because in the second task, we were challenged to deal with our creativity to make new things.

OBSERVATION

I observe that there are lots of layouts for different occasions. I also saw that things sometimes have some kind of a sequential pattern in it. Living things or even items all have their own characteristic, some of them are like easy to notice, some just don't, like for example the puppet doll on my fig 3.34. It's our challenge to change them into something else that represent their personality.

FINDINGS

I found out that typographers, don't just put layout, words, colors, shapes all on their own. There're always theories behind it. Also I just knew that different layouts sometimes used in different occasions, The other things that I got from this module is that sometimes when I see items and they came like several shapes of words, it's not just a random things happening, it's also part of creativity.

FURTHER READING
<back to top>

THE VIGNELLI CANON - MASSIMO VIGNELLI

In this book, Vigneli explained on how to make a great layouting. There are few things to note in layouting:

THE INTANGIBLES:

Semantics
Syntactics
Pragmatics
Discipline
Appropriateness
Ambiguity
Design is One
Visual Power
Intellectual Elegance
Timelessness
Responsibility
Equity

THE TANGIBLES:

Paper Sizes
Grids, Margins, Columns and Modules A Company Letterhead
Grids for Books
Typefaces, The Basic Ones
Flush left, centered, justified
Type Size Relationships
Rulers
Contrasting Type Sizes
Scale
Texture
Color
Layouts
Sequence
Binding
Indentity and Diversity
White Space
A collection of experiences Conclusion

Grids, Margins, Columns and Modules

Grid represents basic structure of graphic design, as an organizer of a content that provides consistency.
Sometimes give intellectual elegance.

To design a grid:

- Margins

- Divide page into columns

- Note: horizontal and vertical line are very important for the balanced division

Ideas of making grid:

fig 5.1, Grids

Type Size Relationship

- Proper type size comparison with column, examples:

8 on 9, 9 on 10, 10 on 11 pt for columns up to 70 mm.
12 on 13, 14 on 16 for columns up to 140 mm.
16 on 18, 18 on 20, for larger columns.

- For display reason sometimes larger / more leading

- To note: proper capitalization, proper italic, proper usage of weight, regular spacing, tight kerning, ruler.

- LESS DECORATIVE ELEMENT = BETTER!

- TYPE DEFORMATION = BIG NO! (except with great moderation)

fig 5.2, Type Sizing

REFERENCE:

Vignelli, M. (2010). The Vignelli Canon (1st ed., Vol. 1). Lars Müller.

Search This Blog

Abigail Kartika Darmowinoto (0350525)