Typography / Task 2: Typographic Exploration & Communication
5/5/2023 - 28/5/2023 (Week 5 - Week 8)
Lim Jia Zhen / 0349294
Typography / Bachelor of Mass Communication (Hons) in Advertising and Brand Management
Task 2 : Typographic Exploration and Communication (Text Formatting and Expression)
CONTENT / LINK
1. Lectures
2. Instructions
4. Feedbacks
5. Reflections
LECTURES
All lecture notes are completed in Task 1: Exercises.
Week 5: Typography Task 2 Progress Demo
Mr Vinod demonstrates how he did his sketches and layout for Task 2 and also explains the important things we need to follow in Task 2.
INSTRUCTIONS
Figure 1.1 Assignment Guidelines for Typography
<iframe src="https://drive.google.com/file/d/1TJmL-1T-AklSY94tL0IuntZBXOY8zYLP/preview" width="640" height="480" allow="autoplay"></iframe>
I am required to construct a 2-page editorial spread (200 × 200) with the provided texts for Task 2. No pictures or colours are allowed, however minimal graphic elements, like a line or a shade, might be acceptable. Adobe InDesign is to be used to write and convey the content typographically, while Adobe Illustrator is permitted for the headline.
TASK 2: TYPOGRAPHIC EXPLORATION & COMMUNICATION
1. Research
Out of the three text options provided, I selected 'The Role of Bauhaus Thought on Modern Culture' as my headline for this assignment. Bauhaus thought had a significant impact on modern culture, particularly through its use of primary colours and geometric shapes. Bauhaus artists and architects used geometric shapes like squares, triangles, and circles for balance and order. The use of primary colours by Bauhaus is rooted in their desire for simplicity, clarity, and a departure from traditional colour palettes. Then I decided to search for some inspiration from Google and Pinterest.
Headline References
I realised that most of the designs used primary colours and geometric shapes like squares, triangles, and circles.
Figure 2.1 Headline References
Layout References
I found some visually appealing layouts and designs on Pinterest to provide some inspiration and expose me to diverse ideas and help me with the editorial composition.
Figure 2.2 Layout References
2. Sketches
After conducting thorough research, I transferred my ideas into sketches before transitioning to Adobe InDesign and Illustrator. I experimented with various angles, arrangements, and combinations of the lead text, body text, and the headline, exploring different possibilities to enhance the overall composition.
Figure 2.3 Layout Sketches, Week 6 (9/5/2023)
3. Headline Expression Exploration
Based on the sketches, I have digitised the headline designs by using Adobe Illustrator.
Figure 2.4 Headline Digitised in Adobe Illustrator, Week6 (9/5/2023)
Figure 2.8 Headline Draft #4, Week 6 (9/5/2023)
Figure 2.9 Headline Draft #5, Week 6 (9/5/2023)
4. Layout Explorations
Then I have formatted the text provided by our lecturer n Adobe Indesign with the headlines shown in the above. I played with different layouts and compositions to make the editorial spread look attractive. I decided to use left justify for the body text.
Figure 2.10 Layout #1, Week 6 (10/5/2023)
Figure 2.11 Layout #2, Week 6 (10/5/2023)
Figure 2.12 Layout #3, Week 6 (9/5/2023)
Figure 2.13 Layout #4, Week 6 (9/5/2023)
Figure 2.14 Layout #5, Week 6 (9/5/2023)
I was absent on Week 6 because I got sick, so I did not have the chance to get specific feedback from Mr. Vinod. However, I did watch the recordings on Week 6 and I realised that some of Mr. Vinod's comments could apply to my layouts. I felt like the most of the headline designs rely too much on graphical elements and has poor legibility.
At last, I decided to move on with Figure 2.9 Headline Draft #5, because it has the least graphical elements compared to the rest of the drafts.
The word Bauhaus means "building house" in German, so by expressing the meaning of the word, I enlarged the letter "H" in the headline and use the knife tool to cut two diagonal lines in the middle and separated the top and the bottom to create the shape of a house.
Figure 2.15 Headline Draft #6, Week 7 (14/5/2023)
I decided lighten the colour of the bottom of the letter "H" to create contrast with the top. I also changed the both the letter "A" into triangles because Bauhaus artists and architects tend to use geometric shapes in their designs. Then I tilted the headline diagonally to make it look dynamic.
Figure 2.16 Headline Draft #7, Week 7 (14/5/2023)
I used left aligned for the body text and have done kerning and tracking. I used Univers LT Std (65 Bold Oblique) for the lead-in-text, and Futura Std Book for the body text.
Figure 2.17 Body Text Layout #1, Week 7 (14/5/2023)
Margins: 10mm
Columns: 2
Gutter: 5mm
Headline
Font: Futura Std Extra Bold, Futura Std Heavy
Point size: 85pt, 160pt, 25pt
Leading: 27.5pt
Lead-in-text
Font: Univers Lt Std 65 Bold Oblique
Point size: 18pt
Subtext
Font: Gill Sans Italic
Point size: 10pt
Leading: 12.5pt
Paragraph Spacing: 12.5pt
Alignment: Left Aligned
Line Length: 55
Body Text
Font: Futura Std Book
Point size: 10pt
Leading: 12.5pt
Paragraph Spacing: 12.5pt
Alignment: Left Aligned
Line Length: 59
Figure 2.18 Layout #6, Week 7 (14/5/2023)
On Week 7, Mr. Vinod gave feedback on my layout and said it looks ok however he recommends to remove the four thin lines at the headline as they appear excessive and do not contribute significantly to the overall aesthetic.
Figure 2.19 Headline Digitised in Adobe Illustrator, Week 7 (14/5/2023)
Figure 2.20 Headline Draft #8, Week 7 (14/5/2023)
I decided to try different layouts and compositions in Adobe InDesign.
At last, I went with the last layout in Figure 2.21. In that layout, I extended the line that is attached to the headline because it looks weird when it's been cut off, so it minimises the white space at the top.
Figure 2.22 Layout Digitised in Adobe InDesign, Week 7 (15/5/2023)
I also changed the body text to left justify because I think it makes the layout look more neat. I also did kerning and tracking to avoid rivers. I also made sure the text has cross alignment and all the text are sat on the baseline.
Figure 2.23 Body Text Layout #2, Week 7 (15/5/2023)
Final Task 2: Typographic Exploration &Communication
Margins: 10mm
Columns: 2
Gutter: 7mm
Headline
Font: Futura Std Extra Bold, Futura Std Heavy
Point size: 85pt, 160pt, 25pt
Leading: 27.5pt
Lead-in-text
Font: Univers Lt Std 65 Bold Oblique
Point size: 18pt
Subtext
Font: Gill Sans Italic
Point size: 10pt
Leading: 12.5pt
Paragraph Spacing: 12.5pt
Alignment: Left Justify
Line Length: 55
Body Text
Font: Futura Std Book
Point size: 10pt
Leading: 12.5pt
Paragraph Spacing: 12.5pt
Alignment: Left Justify
Line Length: 59
Figure 2.24 Final Editorial Spread JPEG, Week 7 (19/5/2023)
Figure 2.25 Final Editorial Spread PDF, Week 7 (19/5/2023)
Figure 2.26 Final Editorial Spread with Grids JPEG, Week 7 (19/5/2023)
Figure 2.27 Final Editorial Spread with Grids PDF, Week 7 (19/5/2023)
The final layout with hyperlinks that are provided in the text.
Figure 2.28 Final Editorial Spread with Hyperlinks PDF, Week 7 (20/5/2023)
FEEDBACKS
Week 6
General Feedback: Focus on the expression first, then work on your layout. A gutter width of 7mm is optimal for justify alignment, and only pick one word to express from the headline. Explore different compositions of expression and layout.
Specific Feedback: I was absent this week, but I watched the recording and I realised some of the feedbacks from Mr. Vinod can be applied to my work, such as focus on cross alignment, make sure each paragraph maintain the same line length and have a proper visual hierarchy.
Week 7
General Feedback: Don't rely heavily on graphical elements and don't use Bodoni as body text.
Specific Feedback: The overall layout appears acceptable, it is recommended to remove the two thin lines in the design as they appear excessive and do not contribute significantly to the overall aesthetic.
REFLECTIONS
Experience
Upon completing Task 1, I had the opportunity to familiarise myself with Adobe Illustrator. As a result, I noticed I was less stressed when approaching Task 2. Although Task 2 shares similarities with the latter part of Task 1, Task 2 allows the inclusion of minimal graphical elements in the headline design. I've gained valuable experience and knowledge in layout designs throughout Task 2. However, I encountered difficulties in brainstorming and implementing unique compositions that would effectively arrange the text in a visually pleasing manner. despite these challenges, i remained determined to explore and develop the initial idea I had chosen. Nevertheless, I am quite satisfied with the outcome and opportunity to learn from the process.
Observation
Throughout this task, I have come to realise that my familiarity with all the features in Adobe is not yet complete, as I often find myself spending times searching for specific buttons and functions. This observation highlights the importance of continuous learning and exploration to further enhance my proficiency with the software. Moreover, I have gained a valuable understanding of the significance of both sketching and research in the design process. Research serves as a wellspring of inspiration, allowing for the exploration of more captivating and impactful designs. Sketching, on the other hand, proves to be crucial in the initial stages, enabling the comparison of ideas and serving as a reference point for progressing to the subsequent steps.
Findings
Task 2 gave me a unique understanding of typography, particularly in terms of finding a balance between visuals and text. Achieving this balance proved to be challenging, I realised that there is still much to learn and research in order to improve my typography skills. During this task, I discovered that typography is not as simple as it seems, as there are various rules to follow, such as aligning elements and avoiding awkward word spacing. These rules ensure a smooth and pleasant reading experience. Additionally, I learned that creating captivating and dynamic layout requires time and exploration. While seeking inspiration from books and other sources was helpful, it is crucial to spend time brainstorming and developing ideas in order to come up with a well-explored concept.
FURTHER READING
Figure 3.1 Typography, Referenced: A Comprehensive Visual Guide to the Language, History, and Practice of Typography (2012)
REFERENCE:
Haley, A. et al. (2012) Typography, referenced: A comprehensive visual guide to the language, history, and practice of typography. Beverly, MA: Rockport Publ.
Chapter 4: Typographic Principles
The chapter covers the importance of typography in design and the different typographic principles, such as hierarchy, contrast, alignment, balance, and white space. This section includes examples of different typographic design, as well as practical advice on how to apply the different typographic principles in design.
Figure 3.2 The Golden Section
Figure 3.3 ISO Format
The ISO format is a standardised paper size system developed by the International Organization for Standardisation. It includes commonly recognised sizes such as A4, A5, and A6. the sizes follow a consistent ratio of 1: √2, allowing for easy scaling and resizing while maintaining proportionality. The ISO format promotes uniformity and compatibility in document handling and printing practices globally.
Figure 3.4 Anatomy of a Grid
The Cartesian grid system uses horizontal lines across an X-axis that intersects vertical lines on the Y-axis. these intersecting lines create individual modules that provides a framework in which designers can insert words and images. Each module becomes part of a larger system, such as columns and rows (for example, five modules makes up one column). When used successfully, the tool can help designers achieve compositional unity, variety, and functionality.
Figure 3.5 Grid Types
Book and manuscript grid typically have the fewest complexities, but constructing them takes time and forethought. Proportional relationships should happen between inside, outside, top, and bottom margins, so that readers can grasp the book's pages without obscuring the text they're reading. Traditionally, books have one text column per page and provide adequate space at the top and bottom for page numbers, author names, and titles. Sufficient room on the left and right sides for holding the book is also important.
Columnar grids can have any number of vertical divisions across the format, with as few as one per page. Through fewer flow lines (horizontal lines) across each page make columnar grids less flexible, the decision-making and layout processes become much easier for the designer.
Modular grid is a series of horizontally and vertically aligned modules create the structure on which text and image can reside.
Figure 3.6 White Space
White space allows the reader an opportunity to focus on elements that demand the most attention. White space can further an underlying message the designer hopes to communicate to the viewer. Despite these issues, designers should use white space sparingly as too much can make a composition look sterile.
Figure 3.7 Contrast
Contrast is one of the best ways to create differentiation between graphic elements. With typography, contrasts in size, weight, width, colour, position, and typeface are just some of the means to separate information or catch a viewer's glance.
Comments
Post a Comment