Typography | Task 2: Typographic Exploration & Communication
27/May/2024- 10/June/2024-week 6-week 8
ZHANG HANYUAN/0363727/Bachelor of Design (Honors) in Creative Media
Typography/Taylors University
Task 2: Typographic Exploration & Communication
Introduction
Lecture：Refer to Task 1
TASK 2 / Typographic Exploration & Communication
"In this task you will be asked to express typographically the content provided in a 2-page editorial spread (200mm x 200mm per page). Choose 1 from the 3 text options provided. No images are allowed.Research
Before starting this task, I compiled a spread of various visual references on Pinterest for inspiration, which would help me develop my ideas.
fig1.1, Editing a spread - visual reference
First I made a simple draft using Procreate,
sketch
And then digitized the draft using Illustrator.
Layout
After formatting the text, I started exploring different layouts. In the first week, I created 3 different layouts:
fig1.2 Draft situation digitization
fig.1.3
fig.1.4
fig.1.5
I start with text formatting. I work on the body copy first, trying different fonts, kerning and tracking, implementing cross justification, etc. I do this with multiple layouts so that I have more options and can decide which one I like best.
This is the first time I have made 3 layouts, and I will make some modifications later to choose the one I like best.
fig.1.6
For my first layout, although I initially thought it would be eye-catching, I decided to try to make it more readable by modifying the text layout and type expression. I didn't like the different thickness of the letters after they were stretched or enlarged.
For the second layout, I made it look simple and elegant, because the Bauhaus style itself is rational, simple, and restrained. But I was not satisfied with the type expression, so I didn't explore it further.
I personally liked the third layout the most, so I spent most of my time improving it.
I stretched a few letters of the word Bauhaus and stretched one-third of it out of the page to make it look more interesting.
fig.1.7
Margins: 10*10*10*50 mm
Gutter: 10 mm
Gutter: 10 mm
Head
Font: Bembo Std
Body
Font: Bembo Std
Type Size: 7 pt
Leading: 9 pt
Paragraph spacing: 11 pt
Characters per-line: 60
Alignment: left justified
The third theme itself doesn’t have much design meaning, so I designed its text to be more like the Bauhaus architectural style.
The title and body of the text are separated, and the title is in bold font.
fig.1.8
FINAL Editorial Spread
fig.1.9 No baseline
fig.1.10 No baseline
fig.1.11
fig.1.12
FEEDBACK
week6:
Basic feedback: This week we completed task 1. Under the guidance of Mr. Max, I modified the layout and blog to make my layout neater and the blog more beautiful. Specific feedback: In class, we drew sketches for task 2. I selected three of them to make digital sketches. There were some problems with the first page of the sketch because I did not consider the uniformity of the font weight when designing. Mr. Max hopes that we can import the sketch into adobe illustrator to help check whether the sketch can be fully put into Adobe InDesign.
Week7:
Overall feedback: This week, due to the public holiday, our class was cancelled and Mr. Max gave us online make-up lessons.
Experience:
Before you start digitizing with Adobe Illustrator on your computer, sketch out the layout structure and the location of the main elements with paper and pen or some drawing software (eg. Procreate) on your iPad. Look at some design websites (eg. Pinterest) for design inspiration. Overly complex designs may be distracting. Keep the layout simple and highlight the key information. You can more efficiently do layout design and text processing in Adobe Illustrator to create professional and beautiful works.
Observe:
I found that in layout design, before starting the design, first determine the page size and grid type, and then set the basic parameters of the grid such as the number of rows and columns, margins and spacing according to the needs of the content. During the design process, test different grid settings and alignments at any time, observe their effects on the layout effect, and adjust them as needed. Although the grid system provides structure and order, in actual design, it also needs to be appropriately and flexibly applied, and adjusted and innovated according to specific design needs. By using the grid system reasonably, the professionalism and aesthetics of the layout design can be greatly improved, while also ensuring that the information is conveyed clearly and effectively.
FURTHER READING:
1."Grid System in Graphic Design" - Reading Notes
"The beauty of reason under order"
Benefits of using a grid
Using a proper grid in your visual design can help:
- Use visual communication methods to construct fact-based arguments;
- Construct graphic and text materials systematically and logically;
- Use graphics and text to make the organization more rhythmic and unified;
- Make the structure of visual information more transparent and tense.
Proper grid
Paper size
We can see that in many cases, the layout of the 8-cell grid system can accommodate illustrations of various sizes. In the legend below, there are 8 image sizes in the 8-cell grid system. Depending on the actual work, the designer can combine images of the same or different sizes on the same page. The grid marked with a red slash in the legend can be used for paintings, pictures, charts, illustrations, color blocks and other elements.
Graphic and text layout
Example
Photos, illustrations, color blocks in grid
In design, the quality requirements for photos/illustrations are relatively high, and photos/illustrations that are clear and have a unified tone must be selected.
If there are multiple photos of product introductions, it is best to take them at the same location and angle to ensure visual unity.
In actual work, photo materials are often not taken at the same time and in the same space, and the backgrounds are inevitably inconsistent. At this time, in order to ensure uniformity, the photo materials need to be processed. The usual processing method is: cut out the main object, and then Use a gray or colored block as a base underneath. If there is a grid, the substrate must be aligned with the grid, if there is no grid, the substrate must be aligned with the line of text.
If you add a color block that is the same size as the grid in a grid with text, the beginning and end of the text will overlap with the edge of the color block, which is obviously not a satisfactory visual effect. The usual solution is:
- The color block should be consistent with the grid, and the text box should be indented;
- The color block extends all around and exceeds the text box.
2.,I chose Typography reference as my reading material for my further reading.
There are now many books devoted to the art, design, practice, resources, and teachings of typography. Because of that, there is an even greater need than ever for a book like this, an all-in-one comprehensive reference guide to all things typographie. We intend for this book to be a broad, authoritative, complete resource of typographic knowledge.
While many typography books contain wonderfully deep, scholarly, and essential material (more about these later), each has its own point of view, its own strengths and weaknesses, and inclusions and omissions. There is no single volume with it all, presented in an easy-to-nav igate and accessible format. While Typography, Referenced covers every area of typography, it provides breadth rather than depth, for typography is a wonderfully dense and rich topic. For depth, we cite additional sources as needed.
As Typography, Referenced came into being, the book An Incomplete Education by Judy Jones and William Wilson (published by Ballantine Books in 1987) came to mind. The concept of this hefty volume was astonishingly ambi-tious: To encompass and explicate the whole of science, philosophy, religion, political science, music, art, world history, psychology, econom-ics, film, and American studies. In short, 10,000 years of culture in one fell swoop, or everything an "educated" person should know. Its aim was to provide key pieces of information, banishing those embarrassing gaps caused by missed educational opportunities or a lack of retention of what had once been learned.
We hope this book emulates the latter idea, as a single sourcebook in which practitioners and the average person alike can find every aspect of typography, with resources and guides for further research. Typography, Referenced, like An Incomplete Education, strives for breadth and inclusiveness, to cover the essential knowledge of the complex subject of typography, everything that a
"typographically educated" person should know.
This book contains the basic foundations and core concepts of what constitutes
The Past as Inspiration
Typeface design is personal and social at the same time. It sits at the intersection of a designer's desire for identity and originality, the demands of the moment, and the conventions shared by the intended audience. The designer also needs to take into account the constraints of the type-making and typesetting technology, the characteristics of the rendering process (whether printing or illuminating), and the past responses to similar conditions by countless designers. A good visual history of past designs is an essential element of every designer's toolkit.
At the heart of this process is a question-filled dialogue: What are the conditions of use for the new design? How will the success of the design be evaluated?
The wider the typeface family, the deeper the need to test conclusively, not only with documents that highlight the typeface's qualities, but also with documents that approximate a wide range of possible uses.
Even very tight briefs (as in the case of typefaces for corporate clients) can generate an extremely broad range of uses-scenarios that may even change after typeface delivery.
But good designers also understand the constraints of their testing environment. Ironically, the screen is gradually becoming an area of better control than print.
Standardized tests to check the quality of type rendering on screen are increasingly published online for developers and designers to use.
But the limitations of laser printers, the range of quality in digital print-ers, and the loss of wet proofs。
These are the first Roman types, faces originally created between the late-fifteenth century (9) and mid-eighteenth century (10) or patterned after typefaces originally designed during this period.
The axis of curved strokes normally inclines to the left in these designs, so that weight stress falls at approximately eight o'clock and two o'clock. The contrast (230) in character stroke weight is not dramatic, and hairlines tend to be on the heavy side. Some versions, such as the earlier Venetian Old Style designs, are distinguished by the diagonal cross stroke of the lowercase (332)
e. Serifs are almost always bracketed in Old Style designs and head serifs are often angled.
ypographic hierarchy refers to the level of impor tance expressed by a piece of text in its environment, whether print-based oron screen. A variety of factors may indicate hierarchy: letterform size,
letterform weight, letterform design characteristics, text color, text contrast (230) with the background, text position and orientation on the page or screen, and general mass.
These factors exist in relation to each other and also in rela tion to images, margin space, and space between lines on the page. For motion-based screen text, animation characteristics-how long the element is visible, how it moves into, off of, and around the sereen-also affect hierarchy.
The viewers take cues from all of the above factors as they scan the text, making split-second decisions about what to read and in which order. Actually, "read" may not best describe what happens because viewers may actually be apprehending a variety of information at once rather than reading individual components. Indeed, as people become increasingly busy multitaskers, they make fewer hierarchically driven decisions about how much attention to divert to any single task.
Designers must be cognizant of the scant amount oflattention their designs may receive, making it increasingly important to create clear typographic hierarchy.
Each ofthese spreads from the use Law Viewbook is an exemplar ofthe complex arrangement of hierarchical information. It isuseful to observe how the format can be altered to sult the need of the subject matter, yet remain connected to the grid and typographic strueture.
Even though the pages include three typefaces-
Adobe Casion Pro, Century Expanded IT Std, and Avenir-a plethora of shifts in size,
weight, case, slope, and tracking clearly direct the reader's attention to the text in order of its importance. The weight and size of'the display type also serve as a kind of ballast for the pages, providing contrast and visual interest. Adam‹Morioka, Inc, United States.
Comments
Post a Comment