02/05/2023 - 23/05/2023 / Week 5 - Week 8
Joey Lok Wai San / 0350857
Typography / Bachelor of Design (Hons) in Creative Media Task 2: Typographic Exploration and Communication (Text Formatting and Expression)
LECTURES
All lectures completed in Task 1 - Exercises
WEEK 5
Mr. Vinod briefed us on our next task - Task 2: Typographic Exploration and Communication. This new task requires us to apply what we learned in Task 1: Type Expression and Text Formatting. We are required to watch the demo video by Mr. Vinod, before researching layouts and creating a few layout sketches.
Fig. 1.1 “Typography Task 2 Process Demo” Video, Week 5 (02/05/2023)
In this video, Mr. Vinod demonstrates the requirements for Task 2, and how we are to go about this assignment.
WEEK 6
In Week 6, we concentrated on our progress on Task 2 and Mr. Vinod gave us feedback on our work. By looking at other students' work and their feedback, we can apply what we have learned from their work to ours. Mr. Vinod also showed us some examples of headline expressions and advised that the simplest ideas can be the best ideas. We don’t always need to use many elements to create a good design.
WEEK 7
Mr. Vinod looked through our work and improvements made from the feedback. He did not give any feedback this week. We also started on a new task, here is the blog link for Task 3.
https://drive.google.com/file/d/1Fa_8v8rFlQ2C5sBRt7drwWp8NZxm1CfD/preview
TASK 2: Text Formatting and Expression
For Task 2, we have to create a 2-page editorial spread (200 x 200) of the provided text. We are to choose 1 of the 3 text options. No images or colors are allowed, and some minor graphical elements might be allowed. We are required to use Adobe InDesign to typographically express the text.
1. Visual References
The editorial text I chose was “The Role of Bauhaus Thought on Modern Culture”. I have never heard of the word Bauhaus before and was interested to learn more about it. Each paragraph feeds the reader more information about how the term Bauhaus came about and the Bauhaus artistic movement. To start, I searched for references for interesting layout designs on the Internet. These are just general layout designs that would help inspire and later brainstorm my own layout designs.
Fig. 2.1 Layout Research, Week 5 (06/05/2023)
Research and Inspiration for “Bauhaus” Layout I did further research on the term "Bauhaus" just to get more information on the artistic movement. I have bold the important elements that is used in the Bauhaus movement and that I plan on incorporating in my work.
Fig. 2.2 Bauhaus, Week 5 (06/05/2023)
I looked up "Bauhaus" to gain ideas for how to apply its artistic components to my word. The word “Bauhaus” means “house of building”. Bauhaus designs are often abstract and geometric, characterized by clean lines, simple shapes, primary colours, and little to no ornamentation/decoration (Provost, 2022). I wanted to replicate this style in my type of expression.
Fig. 2.3 "Bauhaus" Layout Research, Week 5 (06/05/2023)
Fig. 2.4 "Bauhaus" Layout Research, Week 5 (06/05/2023)
The Bauhaus design school, Staatliches Bauhaus, taught typography. They were fervent supporters of the sans-serif type because they found the cleaner, more geometric design to be more appealing (Moriarty, 2016).
Fig. 2.5 "Bauhaus" Headline Expression Research, Week 5 (06/05/2023)
2. Headline Type Expressions
For the type expression headline, I have chosen to express the word “Bauhaus” in the headline. I wanted to incorporate the concept of geometric shapes, simple lines, and the use of sans-serif typeface of the Bauhaus artistic movement. I was inspired by this Bauhaus typography design. The design is very minimal and gets the point of the Bauhaus artistic movement across.
Fig. 2.6 Bauhaus Typography Design, Week 5 (07/05/2023)
3. Text Formatting
Fig. 2.8 Before and After Tracking, Week 5 (07/05/2023)
Fig. 2.9 Hidden Characters and Alignment, Week 5 (07/05/2023)
4. Layout Sketches These are some rough digital sketches I have come up with, using different headline expressions and layouts. Sketching out layouts gave me a general idea of the direction I wanted to go with.
Fig. 2.10 Layout Sketches, Week 5 (06/05/2023)
5. Layouts Digitization (Week 6) I then began digitizing my ideas in Adobe InDesign.
Fig. 3.1 Layouts, Week 6 (07/05/2023)
Fig. 3.2 Layouts Blocked Out, Week 6 (07/05/2023)
SHORTLISTED LAYOUTS Layout #1
Fig. 3.3 Layout #1, Week 6 (07/05/2023)
Fonts: Univers LT Std (Condensed, Bold Condensed), Gill Sans Std (Regular, Bold Condensed) Point size: 10pt (text), 14pt (lead-in text), 100, 38, and 28pt (heading) Leading: 12pt (text), 16pt (lead-in text) Paragraph spacing: 12pt (text), 16pt (lead-in text) Line length: 34 characters (text) Alignment: Left aligned Margins: 10mm (top, bottom, left, right) Gutter: 5mm I wanted to create a design that literally defines ‘Bauhaus’. I used lines to create the outline building of a house. The lines connect to the rest of the layout. I like this idea quite a lot Layout #2
Fig. 3.4 Layout #2, Week 6 (07/05/2023)
Fonts: Univers LT Std (Condensed, Bold Condensed), Gill Sans Std (Regular, Bold Condensed) Point size: 10pt (text), 14pt (lead-in text), 100, 38, and 28pt (heading) Leading: 12pt (text), 16pt (lead-in text) Paragraph spacing: 12pt (text), 16pt (lead-in text) Line length: 57 characters (text) Alignment: Left aligned Margins: 10mm (top, bottom, left, right) Gutter: 5mm
I used the concept of simple and geometric shapes to create this layout. A lot of designs from the Bauhaus movement contain lots of squares, rectangles, and lines. Layout #3
Fig. 3.5 Layout #3, Week 6 (07/05/2023)
Fonts: Univers LT Std (Condensed, Light), Gill Sans Std (Regular, Bold Condensed) Point size: 10pt (text), 14pt (lead-in text), 100 and 38pt (heading) Leading: 12pt (text), 16pt (lead-in text) Paragraph spacing: 12pt (text), 16pt (lead-in text) Line length: 33 characters (body text) Alignment: Left aligned Margins: 10mm (top, bottom, left, right) Gutter: 5mm The words ‘Bauhaus’ builds the outline of the house. I prefer this design over the house in Layout #1, but I think the layout could be better for the rest of the spread. Layout #4
Fig. 3.6 Layout #4, Week 6 (07/05/2023)
Fonts: Univers LT Std (Condensed, Bold Condensed), Gill Sans Std (Regular, Bold Condensed)
Point size: 10pt (text), 13pt (lead-in text), 100 and 28pt (heading)
Leading: 12pt (text), 16pt (lead-in text)
Paragraph spacing: 12pt (text), 16pt (lead-in text)
Line length: 58 characters (body text)
Alignment: Left aligned
Margins: 10mm (top, bottom, left, right)
Gutter: 5mm 6. New Layouts (After Feedback from Week 6)
After the feedback from Week 6, I designed more layouts and, I quote, went "back to the drawing board" -Mr. Vinod. While I did not need to redo my work, I still wanted to try out different layouts. I personally think these new layout designs are much more interesting.
Fig. 4.1 New Layout Sketches, Week 6 (09/05/2023)
Fig. 4.2 More New Layout Sketches, Week 6 (09/05/2023)
Fig. 4.3 Bauhaus Typography: "Simple ideas can be the best ideas" -Mr. Vinod, Week 6 (09/05/2023)
Fig. 4.4 New Layouts, Week 6 (13/05/2023)
Fig. 4.4 New Layouts Blocked Out, Week 6 (13/05/2023)
Fig. 4.5 New Layout #1, Week 6 (13/05/2023)Fonts: Univers LT Std (Roman, Oblique), Gill Sans Std (Regular)
Point size: 10pt (text), 8pt (subtext), 21pt (lead-in text), 80 and 24pt (heading)
Leading: 12pt (text), 10pt (subtext), 23pt (lead-in text)
Paragraph spacing: 12pt (text), 10pt (subtext), 23pt (lead-in text)
Line length: 35 characters (text)
Alignment: Left aligned
Margins: 10mm (top, bottom, left, right)
Gutter: 5mm Layout #2
Fig. 4.6 New Layout #2, Week 6 (13/05/2023)
Fonts: Univers LT Std (Roman, Oblique)
Point size: 10pt (text), 8pt (subtext), 16pt (lead-in text), 100 and 36pt (heading)
Leading: 12pt (text), 10pt (subtext), 19pt (lead-in text)
Paragraph spacing: 12pt (text), 10pt (subtext), 19pt (lead-in text)
Line length: 53 characters (text)
Alignment: Left aligned
Margins: 10mm (top, bottom, left, right)
Gutter: 5mm The heading would disappear into the gutter. The headline is also too simple. Layout #3
Fig. 4.7 New Layout #3, Week 6 (13/05/2023)
Fonts: Univers LT Std (Roman, Oblique), Futura Std (Roman)
Point size: 10pt (text), 8pt (subtext), 16pt (lead-in text), 100 and 36pt (heading)
Leading: 12pt (text), 10pt (subtext), 19pt (lead-in text)
Paragraph spacing: 12pt (text), 10pt (subtext), 19pt (lead-in text)
Line length: 53 characters (text)
Alignment: Left aligned
Margins: 10mm (top, bottom, left, right)
Gutter: 5mm
Fig. 4.8 New Layout #4, Week 6 (13/05/2023)
Fonts: Univers LT Std (Roman, Oblique), Futura Std (Book)
Point size: 10pt (text), 8pt (subtext), 16pt (lead-in text), 80 and 28pt (heading)
Leading: 12pt (text), 10pt (subtext), 19pt (lead-in text)
Paragraph spacing: 12pt (text), 10pt (subtext), 19pt (lead-in text)
Line length: 53 characters (text)
Alignment: Left aligned
Margins: 10mm (top, bottom, left, right)
Gutter: 5mm The heading is a little too small, and there are a lot of big empty spaces.
I decided to work and develop Layout #3. Mr. Vinod mentioned avoiding placing headings and body text in the middle as it could lead to misalignment when printed. However, this layout is still my favourite. Developing Headline Expression
Fig. 4.9 Improving Headline Expression, Week 7 (18/05/2023)
Fig. 4.10 Original Layout Design, Week 7 (18/05/2023)
Fig. 4.11 Developing Layout Design, Week 7 (18/05/2023)
Fig. 4.12 Developing Layout Design, Week 7 (18/05/2023)
Fig. 4.14 Layout Progress, Week 7 (18/05/2023)
Fig. 4.16 Final Layout with grids - JPEG, Week 7 (18/05/2023)
HEAD
Fonts: Futura Std (Heavy - Heading; Book - Small Headings)
Point Size: 202pt (Heading), 32pt, 28pt (Small Headings)
Leading: 35pt (Small Headings)
Paragraph spacing: -
BODY
Fonts: Univers LT Std (Roman - Body Text; Oblique - Subtext; Heavy Oblique - Lead-in Text)
Point Size: 9pt (Body Text), 8pt (Subtext), 20pt (Lead-in Text)
Leading: 12pt (Body Text), 9pt (Subtext), 22pt (Lead-in Text)
Paragraph spacing: 12pt (Body Text), 9pt (Subtext), 22pt (Lead-in Text)
Line length: 58 characters (Body Text), 35 characters (Subtext)
Alignment: Left align
Columns: 4
Margins: 10mm (top, bottom, left, right)Gutter: 5mm Hyperlinks
Fig. 4.19 Hyperlinks, Week 7 (18/05/2023)WEEK 6
General feedback
Simple ideas can be the best ideas. The design of the word must correlate with the meaning of the text. Never have 3 different line lengths of body text; maintain the same line length so people know the text is related. Try to avoid headings and body text in the middle as printing can cause misalignment.
Specific feedback
Layout #3 is too similar to the example. Layout #2 is alright. Pay attention to the small details: tracking looks tight and cross-alignment is uneven
WEEK 7
General feedback
Bodoni is not a good typeface to use for the body text
Specific feedback
No feedback was given on Task 2.
Experience
This task was a better experience than the previous task because I had the basic knowledge and understanding already at hand. I learned how to create layouts, the importance of a simple but effective design and the arrangement of text. It was difficult to create a layout that works and to express the title. When a layout is too simple, it gets boring to look at. When a layout is interesting, there may be too much going on. I struggled a little with designing a layout that I was happy with.
Observations
My observation from this task is that sketching out a layout is incredibly important. By sketching out your layouts, you get a rough idea of how to develop and digitize the layouts. I also observed that the smallest details of the text are important. Font size, ragging, and cross alignment can cause the layout to look different, if not done properly. The hierarchy of information is also very important as there must be a flow of information that guides the reader’s eye. The title is what the viewers will see first - titles should be eye-catching, followed by the way the rest of the text is formatted and placed. The way we express the title is extremely important for viewers to understand what the text is about.
Findings
I found that creating layout designs is not an easy task at all. Before starting this task, it looked like a simple thing to do, but there are, in fact, a lot of things to consider. From the way we adjust the text to the way we place them on a page, are all important to enhance the viewer’s reading experience.
Fig. 5.1 “Typographic Design: Form and Communication” Book
Based on Task 2, which is about layouts and layout designs, I decided to read “Chapter 4: The Typographic Grid” and “Chapter 5: Syntax and Communication” of the book "Typographic Design: Form and Communication".
Chapter 4: The Typographic Grid
Fig. 5.2 Chapter 4: The Typographic Grid, Page 67
The chapter covers a lot about the typographic grid, I spent more time reading on the topics relevant to the task such as structure and space, single-column grids, multi-column grids, etc. When typography is introduced into space, it plays a significant role in creating divisions and establishing spatial structure. By manipulating the size, weight, and position of typographic elements, new structures and arrangements can be formed. Even a single letterform can convey a sense of motion: when centred, it appears static, but when positioned off-centre, it creates an illusion of movement. Rotating the letter gives the impression of tumbling.
Fig. 5.3 Chapter 4: The Typographic Grid, Page 71
It is best to use single-column blocks for text in traditional novels. The margins and text block of the page must always be considered as a proportional system. Margins set the typographic stage and may be asymmetrical or symmetrical. The text block can be adjusted to attain a variety of proportional relationships. The way text blocks are arranged on a page has a significant impact on the overall tone of the communication.
Fig. 5.5 Chapter 4: The Typographic Grid, Page 75
Multicolumn grids require a balance of type size, line length and leading. If one of these elements is adjusted, it will require an adjustment to the others. For example, changing the type size will create a need to adjust the line length. Rhythm is achieved by the repetition and contrast of columns. White spaces separate elements and when done right, can make a design more energetic. Exploring the columns can lead to interesting visual rhythms and patterns.
Fig. 5.6 Chapter 4: The Typographic Grid, Page 80Modular grids are best used to present complex information. They are formed by the intersections of horizontal and vertical lines. The more complex the grid, the more organizational possibilities there are. However, a design with too much variety takes away hierarchical clarity, and a design that is too simple will bore the viewer. Thus, it is important to think of the grid as a way to organise information and not as a fixed rule for all designs.
Chapter 5: Syntax and Communication
Fig. 5.7 Chapter 5: Syntax and Communication, Page 97
Typographic space is the rhythmic and dimensional field in which typographic communication exists. This field consists of a positive form (the typographic elements) and a void (the spatial ground). Unity in the space is achieved by visual compensation - the spatial balance and arrangement of typographic elements. Visual compensation is achieved by balancing elements, such as adjusting their sizes, weights, spatial intervals, etc. until unity and equilibrium is achieved.
Visual hierarchy is the arrangement of elements from the most prominent to the least prominent in a typographic space. A designer must consider the importance of each element in the message, the environment that the communication will be read and the arrangement of forms. Elements with similar characteristics will have an equal visual hierarchy. However, when they have contrasting characters, their differences allow them to have a more dominant position in composition. This contrast can be achieved by considering their visual properties such as size, weight color and spatial interval.
APA Referencing Format Moriarty, A. (2016). The Modern Letter - The Best of the Bauhaus Typography. Widewalls. Retrieved from https://www.widewalls.ch/magazine/bauhaus-typography Provost, R. (2022). What is Bauhaus — Art Movement, Style & History Explained. Studiobinder. Retrieved from https://www.studiobinder.com/blog/what-is-bauhaus-art-movement/#:~:text=The%20Bauhaus%20is%20a%20German,and%20geometric%2C%20with%20little%20ornamentation.
Comments
Post a Comment