Week 5 – Week 8| 27/10/23 – 17/11/23
Emily Soh Ching-Ling | 0359478
Emily Soh Ching-Ling | 0359478
Bachelor of Design (Honours) in Creative Media
Typography | Section 02 | GCD60104
Task 2 — Typographic Exploration & Communication
TABLE OF CONTENTS
1.0 LECTURES
1.1 WEEK 5 — TASK 2 BRIEFING & DEMO
TASK 2 BRIEFING:
- Step 1: Insert all relevant text in the same typeface + font size.
- Purpose: To better understand how much text there is.
- Step 2: Create thumbnail sketches for the layout.
- Step 3: Create the title.
- This can be done in Illustrator.
- Ctrl + D > [Insert Illustrator file]
Page Layout Arrangement: [Select pages at Pages] > Allow Selected Spreads to Shuffle: ☒ > [Arrange pages]
Tip: Block out your layout with grey boxes.
1.2 SCREEN & PRINT
PRINT TYPE VS SCREEN TYPES:
- Print Type:
- Common Typefaces: Caslon, Garamond, Baskerville
- Typeface Characteristics: Elegant, intellectual, highly readable when set at a small font size, versatile, neutral, and easy to digest.
- Font Size:
- When reading close-up: 10 pts.
- When reading at an arm's length: 12 pts.
 |
| Figure 1.2-1: Print Type |
- Screen Type:
- Typefaces intended for web purposes are optimised and often modified to enhance readability and performance on-screen.
- E.g. Taller x-height / reduced ascenders and descenders, wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, modified curves and angles, and more open spacing.
- Examples of Screen Environments: The web, e-books, e-readers, and mobile devices.
- Hyperlink (AKA Hyperactive Link):
- Definition of hyperlink: A word, phrase, or image that the viewer can click on to jump to a new document or new section within the current document.
- Hyperlinks are found in nearly all web pages.
- Text hyperlinks are usually blue and underlined by default.
- When you hover over a hyperlink, the cursor should change to a hand pointing at the link.
- Font Size: 16 pixels.
 |
| Figure 1.2-2: Screen Type |
- System Font for Screen / Web-Safe Fonts:
- Each device comes with its own pre-installed font selection, based on its operating system.
- Examples of Web-Safe Fonts: Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, and Garamond.
- Pixel Differences Between Devices:
 |
| Figure 1.2-3: Pixel Differences Between Devices |
STATIC TYPOGRAPHY VS MOTION TYPOGRAPHY:
- Static Typography:
- Static typography has minimal characteristics in expressing words.
- Traditional characteristics (e.g. bold and italic) offer only a fraction of expressive potential.
 |
| Figure 1.2-4: Static VS Motion Typography |
- Motion Typography:
- Temporal media allows type to become dramatic and letterforms to become fluid and kinetic.
- E.g. Film title credits are brought to life through animation.
2.0 INSTRUCTIONS
3.0 TASK 2 — TYPOGRAPHIC EXPLORATION & COMMUNICATION
Instructions: Express one of the three text options provided in a two-page editorial spread (200 mm × 200 mm per page).
- No images allowed.
- Very minor graphical elements (i.e. line, shade, etc.) might be allowed.
3.1 RESEARCH
Between "The Role of Bauhaus Thought on Modern Culture" and "A Code to Build on and Live By", I couldn't decide which I liked best. So naturally I went scouring Pinterest for inspiration first.
 |
| Figure 3.1-1: "The Role of Bauhaus Thought on Modern Culture" Mood Board, Week 5 (28/10/23) |
 |
| Figure 3.1-2: "A Code to Build on and Live By" Mood Board, Week 5 (28/10/23) |
3.2 SKETCHES
To be honest, I didn't realise how hard sketching for "A Code to Build on and Live By" was until I went through previous batches' e-portfolios and saw the feedback they received.😅 Since "code" here refers to "a code of ethics" rather than programming, it would be misleading to use a Morse code / bar code motif in my design.
-1.png) |
| Figure 3.2-1: "A Code to Build on and Live By" Sketches, Week 6 (03/11/23) |
And so I switched gears and focused on sketching "The Role of Bauhaus Thought in Modern Culture". Since Bauhaus is known for using basic shapes (i.e. circles, squares, triangles), I incorporated that in my layout and title design. I liked these sketches better so I chose to digitise this text (lol).
-1.png) |
| Figure 3.2-2: "The Role of Bauhaus Thought on Modern Culture" Sketches, Week 6 (03/11/23) |
3.3 DIGITISATION
I was a bit worried the title would be too overwhelming since it's primarily made up of shapes, however, my otherwise simplistic layout balances it out and gives the viewer breathing room.
-01.png) |
| Figure 3.3-1: Title (Done in Illustrator), Week 7 (09/11/23) |
 |
| Figure 3.3-2: Type Expression (Before Feedback), Week 7 (09/11/23) |
Based on Mr Vinod's feedback, I have a lot I need to change.😶 I got rid of the grey rectangle, reduced the gutter space, and adjusted the column height.
.png) |
| Figure 3.3-3: Type Expression (After Feedback), Week 7 (10/11/23) |
Much better. Mr Vinod suggested I make the title larger and reduce the size of the left column, so I did just that.
.png) |
| Figure 3.3-4: Final Submission (Without Grids) — JPEG, Week 7 (10/11/23) |
-With-Grids.png) |
| Figure 3.3-5: Final Submission (With Grids) — JPEG, Week 7 (10/11/23) |
Figure 3.3-6: Final Submission (Without Grids) — PDF, Week 7 (10/11/23)
Figure 3.3-7: Final Submission (With Grids) — PDF, Week 7 (10/11/23)
.png) |
| Figure 3.3-8: Blocked Out Layout, Week 7 (10/11/23) |
4.0 FEEDBACK
4.1 WEEK 6
Specific Feedback:
- The grey rectangle is unnecessary.
- Re-evaluate the layout.
- Gutter space is generally around 5 – 10 mm. Your gutter space looks large.
- The right column looks larger than the left (no need to change anything if it isn't).
General Feedback:
- The viewer must be able to tell the visual hierarchy of the layout.
- No long line lengths. Long line lengths mean the viewer has to keep looking back and forth.
4.2 WEEK 9
E-portfolio Feedback: Complete. Good.
5.0 REFLECTION
5.1 EXPERIENCE
Surprisingly less stressful than Task 1. I think Task 1 has prepared me well for this assignment. That being said, it was a tad anxiety-inducing when we didn't have class on Week 6 and thus couldn't receive feedback. I went into the digitising process sort of praying my work didn't need major changes lol.😅
5.2 OBSERVATIONS
I've gotten better and more efficient with InDesign and Illustrator. Not having to constantly look back at my notes has made things 1000% faster. Soon I'll have memorised all relevant shortcut keys and I'll be able to spend more time refining my ideas before digitising them.
5.3 FINDINGS
I noticed that I work better when I have a friend to bounce off of. Having someone who can point out my mistakes and I can brainstorm ideas with helps me out of the creative rut I sometimes find myself in when I look at an assignment for too long. Maybe I should do group homework sessions...🤔
6.0 FURTHER READING
6.1 WEEK 6–8 — JUST MY TYPE: A BOOK ABOUT FONTS
 |
| Figure 6.1-1 Just My Type: A Book About Fonts by Simon Garfield |
Reference: Garfield, S. (2010, October 21). Just My Type: A Book About Fonts. Profile Books.
Comments
Post a Comment