Typography: Task 2 / Typographic Exploration & Communication
9/5/2023 - 23/5/2023 / Week 6 - Week 8
The first layout that catches my attention and I think it might be taken as the idea for the "Visualize for a better world" article because it let me think of something related to "human eyes" with the semicircles. What interesting is the both heading and body paragraph is equal and it suit the content of the article like something related to "wheel"
While I explore more on the other day, I decided to switch another article
to see whether it will have more ideas on what kind of design I would like
to try. So, I decided to change my exercise to "A code to build on and
live by".
First of all, let's talk about the idea while exploring long paragraph. I
discovered several paragraph online and I realize I wanted to put it
in a staircase outline for because this article are representing what
different types of characteristic a designer should have and the
responsibilities are all need to be sum up to become the expectation in
the community. Therefore, I decided to make it in three columns and adding
more sentences to subsequent columns.
After exploring the heading, I feel like the whole article is still empty
and blank and hard to attract people from the first sight. Because of
that, I tried to design it with stretching the letters by extension on the
outline to fill up the space.
Figure3.0 Reference Six Figure 3.1 Reference
Seven
Primary, I tried to add the weight of each strokes to make it represent
something like build and growing thicker following the sequence of the
paragraphs. Yet, it do not match my expectation so I decided to remain the
original idea with working more for the title of the article.
Other than the placing, I also redesign the letter "B" to lesser
complicated and crowded space beside the content paragraph.
FEEDBACK
Page 34
Page 103
Ee Chern Jun / 0338542
Bachelor of Mass Communication (Hons) Digital Media Production
Task 2: Typographic Exploration & Communication
|
|
|
LECTURES NOTES
INSTRUCTIONS
PROJECTS
TASK 2: TEXT FORMATTING & EXPRESSION
INSTRUCTION
In this task, Mr. Vinod uploaded three different content of article online
and let us choose one to explore the layout and innovate the expression.
There are several guideline to follow before we start the task:
- Two-page editorial spread with a size of 200 x 200
- All content in the article must be used
- Only use text and minor graphical elements like lines or shades
- Only allow Adobe InDesign or Adobe Illustrator for creating the headline
1. Research
After we received the challenge, I survey and study the different type of
layout which focus on long paragraphs with heading on the website,
Pinterest. On top of that, I also read the content in the file given by
Mr. Vinod on Facebook to get an idea of what kind of article are we going
to explore.
|
| Figure1.1 Reference One |
The first layout that catches my attention and I think it might be taken as the idea for the "Visualize for a better world" article because it let me think of something related to "human eyes" with the semicircles. What interesting is the both heading and body paragraph is equal and it suit the content of the article like something related to "wheel"
After that, I tried to draw some drafts on InDesign and started to draft
some ideas but I realized that I have not enough in discovering and
research for more innovative ideas because I stuck when I am not even half
of the work. Therefore, I tried to search more and squeeze my brain cells
on the kind of design I would prefer more for.
During the process, I found out a lot of interesting layout article
that's really represent the content of the essay which I would like to
enhance my work into something that is similar. For example:
|
| Figure 1.2 Reference Two |
2. Sketches
After going through all the references and recordings from other tutorial
group, I wanted to do transfer the word "code" to something like the html
coding and I try to draft the idea on InDesign and refer to how the
heading should be.
|
|
Figure 2.0 First Draft |
|
| Figure 2.1 Reference Three |
Above reference showing the separated paragraph of content with each
different subheading.
Moreover, for the long paragraph, I tried with "Univers LT Std" typeface because I personally feel like this
font is clean and neat, as well as do not have much flavor on
it.
Besides, I also specify the subheading of each respective paragraph to
make it difference for readers to get the idea of the details in the essay
before they go deep into it. After trying with bold, and italics with "ITC Garamond Std", I decided to go for italics which is completed different vibes with the
body paragraph.
|
||||||
|
Figure 2.2 Second Draft
Other than placing the content of the article in a staircase
arrangement, I added lines to make the article to have a more
texture views because I feel like if it's only letters and
words, it will be simple and do not deliver a clear image of
different paragraph.
In addition, while working on the heading, I acknowledge the
word "code" to something like barcode or the coding that we will
be seen online in our website. So I decided to try working on
the lines and gradient to make it look like a barcode
expression.
Later, I feel like I could perform something similar to the reference five in order to let people know that the letter "A" is big and visible to read so it will automatically catch reader's attention as the first word to read. |
|
|
Figure 2.3Third Draft |
Not surprisingly, the outcome of the title did not really match the idea
of what I wanted to present. In addition, Mr. Vinod suggested to use
another word for expression, such as "build" or "code" to make it more
significant.
3. Progression
To explore more idea for the heading, I saved some of the interesting
artwork online which I could change the way I express the
title.
I wanted to go deep with adding lines to increase the textures for my
layout because since I had decided to apply it in my body paragraph, so
it is better to link the heading and body paragraph with the same
elements.
|
|
Figure 3.2 Fourth Draft |
|
| Figure 3.3 Reference Eight |
This article above inspire me in exploring the word "build" to be
maximize and it might be attractive enough for my layout as well as able
to fill up all the empty spaces.
|
|
Figure 3.4 Fifth Draft |
This might look a bit too tight for everything.
|
|
Figure 3.5 Sixth Draft |
This is more simple but not sure how viewers will read it for the
sequence.
|
|
Figure 3.6 Seventh Draft |
Changing the line to the end of the word "to".
|
|
Figure 3.7 Eighth Draft |
Switch the line to center and compare three of the differences.
4. Final Typographic Exploration & Communication:
- HEAD
- Font/s: ITC Garamond Std, Ultra, Bold
- Type Size/s: 147 pt, 34pt
- Leading: 0
- Paragraph spacing: 0
- SUBHEADING in text
- Font/s: ITC Garamond Std, Book Italic
- Type Size/s: 12 pt
- Leading: 11 pt
- Paragraph spacing: 0
- BODY
- Font/s: Univers LT Std, 57 Condensed
- Type Size/s: 10 pt
- Leading: 11 pt
- Paragraph spacing: 11 pt
- Characters per-line: 57
- Tracking: 50
- Alignment: Left-align
- Margins of Top, Bottom, Inside, Out: 12.7 mm
- Columns: 4 per page
- Gutter: 4.233 mm
|
| Figure 4.0 Final layout without grids |
|
|
Figure 4.1 Final layout with grids |
Figure 4.2 Final layout without grids
Figure 4.3 Final layout with grids
Explanation:
The letter "A" have a thicker stroke compare to others is to make it be the highlight to tell readers that the sentence starts from "A". In addition, to express the word "Build". I want to show it is the biggest attention on the layout as a growing strategies and reflect to the remaining words "on and live by" which I place it in the letter "D" as a translate of live by, also stay there with the whole sentence.
Week 6
- General Feedback:
- A reminder again for justify alignment should be 5mm - 7mm only and make sure the subheading are in a different font to differentiate the layers of the whole outcome.
- Specific Feedback:
- For title of the article, choose only one word for the expression and enhance it. Suggestion for the word ""A CODE" can be above then following with other alphabet. Body Paragraph have no issue just to make it look balance and blend with the design of the heading, as well as put one graphic line to one subheading.
- General Feedback:
- Mr. Vinod is reminding us to check the guideline while we submit our work. While working on the assignment two, execution is important form the expression of the heading.
REFLECTIONS
Experiences
Throughout the process of working task two, it provided me a better
understanding on what I prefer for the body paragraphs but not for
the expression of headline. It was a challenging process to make decision
throughout few ideas that I wanted to show but it became a complicated
progression and it might transfer a wrong impact.
Observations
VERY IMPORTANT - Record and save every changes of the process making, it
will help you improve and remind what you have done before the final
outcome.
From the practices for InDesign in this exercise, I became for familiar
with the shortcuts function and the tools to hone my arrangement skills
which specifically strong understanding of the guidelines, principles, and
elements that I used for this assignment. Besides, I realize my
weakness is innovate, try to develop something interesting and creative
which wanted to become unique compared to others. However, the most
important take away is to find our own style to apply so it will be the
one and only.
Findings
A lot of rules and restrictions to follow in doing this task. Keeping the
consistent and balance visual hierarchy for the whole layout is one of the
vital checklists. Other than working physically on the software, further
readings and research are required to apply to this homework in order to
refresh my knowledge and understanding.
FURTHER READING
1. "Typographic Design: Form and Communication" by Rob Carter, Ben Day and Philip B. Meggs
Continue in reading the book that I survey in exercise one, they provided some points for the headline, styles, contrast of different typefaces.
 |
| Figure 5.0 The Book's cover |
- Different proportion are important for making the typefaces look different even they are in one family such as any typefaces and fonts.
 | |
|
Page 45
Page 47
2. "Thinking with type: A Critical Guide for Designers, Writers, Editors, & Students" by Ellen Lupton
- Italics used to emphasizes directly from the character.
- Strokes like, ultraexpanded, extraexpanded, expanded, regular, condensed, extracondensed, and ultracondensed.
.png) |
| Figure 5.2 Italics and proportion examples |
- 21 Univers type family can be used without any restrictions.
- It possess the exact x-height, capital height as well as ascender or descender height.
.png) |
| Figure 5.3 About the Univers family |
2. "Thinking with type: A Critical Guide for Designers, Writers, Editors, & Students" by Ellen Lupton
Discover a new book which provide a lot of examples from western country about the layout, application on typefaces, creative design on printed media or web media.
.png) |
| Figure 5.4 The book's cover |
Page 103
- Subheading or the first letter is crucial to the start of the paragraph.
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment