.jpg)
LIEW XIAO HUI / 0353121 / BACHELOR OF DESIGN (HONOURS) IN CREATIVE MEDIA
TYPOGRAPHY
Task 2: Typographic Exploration & Communication (Text Formatting and Expression)
JUMPLINK
Lectures
Instructions
Task 2: Typographic Exploration & Communication
Feedback
Reflections
Further Reading
LECTURES
All lecture notes completed in
Task 1: Exercises.
Week 05 /
In preparation for our second Typography
task, Mr. Vinod briefed us on the project and shared examples of past work
completed by senior students in order to help us understand the task
better. He also taught us techniques to create layout designs that could
effectively engage our audience.
Week 06 /
In week 6, Mr.
Vinod initiated the first feedback session for task 2. He reviewed all the
layouts we had shared on Facebook and provided feedback based on them.
Furthermore, he demonstrated in real time how we could improve our headline
design using Adobe Illustrator. Next, he allowed us time to make corrections
based on his feedback, and if we completed them, we can present our work to
him right away.
Week 07 /
In week 7, Mr. Vinod assessed the
submitted task 1 work and advised us to follow the structure of the example
blog he had shared. Next, we shared our improved layout on Facebook for
record-keeping purposes. Mr. Vinod reviewed it without conducting a formal
feedback session, but he pointed out specific areas that required improvement
and provide us with valuable advice. Following that, he proceeded to give us a
briefing on the next task we were required to complete.
INSTRUCTIONS
Task 2: Typographic Exploration &
Communication (Text Formatting and Expression)
For this assignment, I am required to select one of the three provided text
options and express typographically of the content by creating a 2-page
editorial spread with dimensions of 200mm x 200mm per page.
Research
In order to gain inspiration, I researched online for
information on Bauhaus, including its definition and relevant visual
references, before beginning to sketch.
|
| Figure 1.1 References. |
Sketches
After conducting research, I sketched out some rough
drafts to develop my ideas before moving on to working in Adobe InDesign and
Illustrator. My concept is to use letters to form a house shape while also
combining the elements of the Bauhaus style.
|
| Figure 1.2, 1.3, 1.4 Sketches. (6.5.2023) |
Following that, I used Adobe Illustrator to digitize the headlines based on the concepts and sketches I had created.
|
| Figure 1.5, 1.6, 1.7, 1.8 Progress screenshot. (7.5.2023) |
After creating a few headlines that met my satisfaction, I moved on to the next step. I used Adobe InDesign to experiment with various typefaces, font sizes, and etc.
|
| Figure 1.9 Progress screenshot. (7.5.2023) |
Layout
I created several layouts, using the Futura typeface
which is light condensed and extra bold condensed for the headlines, and
book and book oblique for the text.
Figure 2.1, 2.2, 2.3, 2.4 Initial layouts. (8.5.2023)
Figure 2.5, 2.6, 2.7, 2.8 Initial layouts (blocks). (8.5.2023)
My headline design ideas to express the meaning of Bauhaus, which is building a house. To achieve this, I used the letters 'A' and 'H' from the word "Bauhaus" to construct a house-shaped form. Additionally, I combine the elements of Bauhaus styles, such as geometric shapes like rectangles and triangles, into the design. Moreover, I experiment with a black-and-white color scheme to create contrast.
Shortlisted Layout
During the week 6 class, I narrowed
down my choices to two layouts, which are layout 3 and layout 4, to present
to Mr. Vinod. I feel that these layouts offer a more reader-friendly and
cleaner design.
Headline fonts: Futura Std (Extra Bold Condensed, Bold Condensed, Light Condensed)
Body text fonts: Futura Std (Book, Book Oblique)
Headline point size: 61.02 pt, 36 pt and 24 pt
Lead-in text and body text point size: 10 pt
Leading: 28.8 pt & 43.2 pt (small headings) and 13 pt (lead-in text & body text)
Paragraph spacing: 13 pt (lead-in text & body text)
Line length: 62 (body text)
|
| Figure 3.1 Shortlisted layout 3. (8.5.2023) |
Shortlisted layout 4
Headline fonts: Futura Std (Extra Bold Condensed,
Bold Condensed, Light Condensed)
Body text fonts: Futura Std (Book,
Book Oblique)
Headline point size: 61.02 pt and 36 pt
Lead-in text
and body text point size: 10 pt
Leading: 43.2 pt & 73.22 pt (small
headings) and 13 pt (lead-in text & body text)
Paragraph spacing:
13 pt (lead-in text & body text)
Line length: 62 (body text)
|
| Figure 3.2 Shortlisted layout 4. (8.5.2023) |
After receiving feedback from Mr. Vinod on my work, I continued my efforts to explore additional layout and headline designs in order to create a more attractive design.
Headline fonts: Futura Std (Extra Bold Condensed)
Lead-in text font:
Futura Std (Heavy Oblique)
Body text fonts: Futura Std (Book, Book
Oblique)
Headline point size: 66.89 pt and 25.9 pt
Lead-in text
and body text point size: 10 pt
Leading: 31.08 pt (small headings) and
13 pt (lead-in text & body text)
Paragraph spacing: 13 pt (lead-in
text & body text)
Line length: 64 (body text)
|
| Figure 3.3 New layout. (13.5.2023) |
|
| Figure 3.4 New layout (blocks). (13.5.2023) |
In week 7, I shared the new layout on a Facebook post to seek feedback. Unfortunately, Mr. Vinod did not provide any feedback on the post, the Facebook post was for record-keeping purposes. However, Mr. Vinod did advise us to be cautious about the excessive use of graphical elements. Taking this advice into consideration, I improve the layout by reducing graphic elements.
|
| Figure 3.5 Improved layout. (20.5.2023) |
|
| Figure 3.6 Improved layout (blocks). (20.5.2023) |
Final Typographic Exploration & Communication (Text Formatting and
Expression)
Margins: 10 mm
Columns: 2
Gutter: 5 mm
Headline
Font: Futura Std Extra Bold Condensed
Point size: 66.89 pt and 25.9
pt
Leading: 31.08 pt (small headings)
Lead-in text
Font:
Futura Std (Heavy Oblique)
Point size: 10 pt
Leading: 13 pt
Paragraph
spacing: 13 pt
Body text
Font: Futura Std (Book, Book
Oblique)
Point size: 10 pt
Leading: 13 pt
Paragraph spacing: 13
pt
Alignment: Left aligned
Line length: 64
|
| Figure 4.1 Final editorial spread. (20.5.2023) |
Figure 4.2 Final editorial spread PDF. (20.5.2023)
|
| Figure 4.3 Final editorial spread - grid. (20.5.2023) |
Figure 4.4 Final editorial spread - grid PDF. (20.5.2023)
FEEDBACK
Week 06
General feedback: Explore different compositions
of expression and layout. Don't make the layout half white and half black it
doesn't look contrast. Can't have two different line lengths for the body
text. Pick one word to express (headline).
Specific feedback: Line length and body text have no issue. Further explore headline design as
now the headline design is not effective and has no memory point.
Week 07
General feedback: Not to rely heavily on
graphical elements and it is not suitable to use Bodoni as a font for body
text.
Specific feedback: Use less graphical elements.
REFLECTIONS
Experience
Upon completing task 1, I have already gained some
experience in using Adobe Illustrator and Adobe InDesign. As a result, I
feel less stressed when compared to task 1. Task 2 seems somewhat similar to
the latter part of task 1, which focused on text formatting. However, the
key difference is that in task 2 is now I can use some graphical elements in
the headline design.
Throughout this task, I have come to realize the importance of sketching and research. Research provides inspiration and enable to explore more interesting and effective designs. Sketching is important in the initial stages as it allows for the comparison of ideas and as a reference for progressing to the next step. Additionally, I have observed that I am not yet fully familiar with all the features of Adobe, as I often find myself spending time searching for specific buttons and functions.
Findings
Task 2 provided me with a unique understanding of
typography, specifically in terms of achieving a balance between graphical
elements and text. Achieving a harmonious balance between graphical elements
and text is quite challenging. There is still a lot of research and learning
that needs to be done in order to enhance my mastery of typography.
FURTHER READING
I decided to continue study on the book, Computer Typography Basics - I.d.e.a.s.
|
| Figure 5.1 Computer Typography Basics - I.d.e.a.s. (2003) |
|
| Figure 5.2 Chapter 6: Paragraph alignment, page 19. |
The next chapter, which is chapter 7 talks about paragraph spacing. Paragraph Spacing refers to the automated space inserted between paragraphs when starting a new paragraph. Once configured, it can add space either above or below the paragraph.
|
| Figure 5.3 Chapter 7: Paragraph spacing, page 20. |
Figure 5.4 Chapter 8: Paragraph rules, page 21.
Comments
Post a Comment