Typography-Task 1：Exercise1&2
Monday, April 22, 2024
Time Frame Week 1 22 /04/2024 - Week 6 28/05/2024
Deadline week 06
Huang Jiaqi/0371553
Bachelor of Typesetting/Creative Media Design
List
1. MIB
Lecture 1-Typo_0: Introduction
Lecture 2 - Typo_1: Development
Lecture 3-Typo_3: Text_P1
Lecture 4: Text (Part 2)
Lecture 5: - Typo_4_Basic
Lecture 6: Typo-5 - Understanding
Lecture 7: Typoo-6-Screen&Print
3. Practice
Task 1: Practice - Font DesignAnimated fonts
Task 1: Practice - Text exercise
4. Feedback (Week 1-Week 6)
5. Repercussion
6. Further reading
1. MIB
2. LECTURES
All lectures are completed here.
Lecture 1: Typo_0_Introduction
In Mr. Vinod's speech, he introduced us to the importance of typesetting. Typesetting is not only visible in our daily life, but also suitable for various fields such as animation, application design, web design and signage. It has been developing for about 500 years, transitioning from calligraphy and engraving to modern typesetting. It is the basic aspect of any design research, including the creation of fonts and font series, and the art and technology of arranging fonts to ensure the clarity, readability and attractiveness of the written language display. Typesetting involves a series of terms and conventions that are not written rules, which may vary according to the influence of our personality or style. This is not only about how we show ourselves and information, but also about effective communication. Anyone who participates in arranging words, letters, numbers and symbols for publication, display or distribution needs to practice typesetting skills. Before the digital era, typesetting was a professional field, but with the emergence of digital technology, more and more people are involved, which may lead to a decline in the quality of typesetting.
Lecture 2：Typo_1_Development/Timeline
1. Early letter form development: Phoenician to Roman
The development of early letterforms began with the Phoenicians. In the
early days, writing involved scratching wet clay with pointed sticks or
carving into stone with chisels. Uppercase letterforms were the only
letterforms for nearly 2000 years. The forms of uppercase letters
evolved from the tools and materials available, primarily consisting of
straight lines and circular shapes. The Phoenicians wrote from right to
left. Later, the Greeks developed a writing style called "boustrophedon"
(meaning "as the ox plows"), where text lines were read alternately from
right to left and left to right, without any inter-word spacing or
punctuation. Eventually, the Greeks shifted to a strictly left-to-right
writing direction.
Etruscan (and then Roman) carvers would paint letters on marble before
carving them. Some qualities of their strokes—such as variations in
weight from vertical to horizontal and the widening of strokes at the
beginning and end—were carried over into the carved letterforms.
FIG 1.1 Phoenicians dedicate stone monuments to Carthage
Modern Latin and early Arabic evolved from the Phoenician alphabet in
different ways.
Evolution from the Phoenician alphabet
FIG 1.2 Greek writing style“boustrophedon
Changes in the direction of alphabet form
Etruscan and Roman sculptors painted letters on marble before
engraving. However, their works may be unstable, so the weight of the
strokes has changed from vertical to horizontal.
FIG 1.3 Evolution from Phoenicia to Rome
2. Hand script from 3rd - 10th century C.E.
Square Capitals can be found in Roman monuments. They have serif added at the end
of the main stokes.
Rustic Capitals are a compressed version of square capitals. These letterforms are easier and faster to write, but slightly difficult to read.
FIG 1.4 left: Square Capitals (4th or 5th century); right: Rustic Capitals
(late 3rd - mid 4th century)
Development of lowercase letterforms
Cursive writing forms were developed when used in everyday
transactions due to their simplicity and speed, unlike writing Square
Capitals and Rustic Capitals which are time-consuming and typically
reserved for important documents.
Uncials took in some aspects of the Roman cursive hand, especially in the shape of the A, D, E, H, M, U and Q. Uncials are small letters, the broad forms of uncials are more readable at small sizes compared to Rustic Capitals.
Half-uncials are a further formalization of the cursive hand, half-uncials mark the formal beginning of lowercase letterforms, with the use of ascenders and descenders.
FIG 1.5 left: Uncials (4th-5th century); right: Half-uncials (C.500)
Standardization of calligraphy
Charlemagne, the first unifier of Europe since the Romans, issued
an edict in 789 to standardize all ecclesiastical texts. He entrusted
this task to Alcuin of York, Abbot of St Martin of Tours, France. The
monks rewrote the texts using both majuscules (uppercase), miniscule,
capitalization and punctuation which set the standard for calligraphy
for a century.
Blackletter to Gutenberg's Type
|
| Fig1.6 Blackletter Textura (C. 1300) |
With the dissolution of Charlemagne's empire
came regional variations upon Alcuin's script. In northern europe, a
condense strongly vertical letterform know as Blackletter or textura
gained popularity, called 'rotunda'. The romanistic script in Italy is
based on Alcuin's miniscule.
Gutenberg marshalled them all to build pages that accurately mimicked the work of the scribe's hand - Blackletter of northern Europe. He invented the movable type, the technology of printing and typography, to produce his Bible widely in a highly productive way.
FIG 1.7 42 line bible, Johann Gutenberg, Mainz
4. Text type classification
|
|
FIG 1.8
|
Lecture 3: Typo_2_Text_P1
1. Tracking: Kerning and Letterspacing
Kerning
The automatic adjustment of space between individual letterforms.
Kerning is usually adjusted in headlines.
|
| FIG 1.9 Without kerning and with kerning |
Tracking
The addition and removal of space in a word or a
sentence. It is usually adjusted in large paragraphs of text.
Normal tracking is easy to read and suitable to use in a large number of texts.
Loose tracking and tight tracking reduce the readability and recognizability of the pattern that formed the words. People tend to recognize the counterform of the space between the stokes when reading, thus they are not suitable to apply in a large number of texts.
|
| fig 1.10 Normal tracking, tight tracking and loose tracking |
However, loose tracking can be used in headlines but in uppercase letterforms. Uppercase letterforms can stand on their own, while lowercase letterforms require the counterform created between letters to maintain the line of reading.
2. Formatting Text (Alignment)
Flush left is the most natural text formatting that
closely mirrors the asymmetrical experience of handwriting. Each line
starts at the same point but ends wherever the last word ends. The
spaces between words are consistent, creating an even gray value in the
type. However, this format creates ragging, a jagged shape formed by
each end line on the right.
Centered imposes symmetry upon the text, assigning equal
value and weight to both ends of any line. It transforms fields of text
into shapes, thus it is important to amend the breaks so that the text
does not appear too jagged. This format is suitable to apply to a small
number of texts such as captions.
fig 1.11 Flush left and Centered
Flush right emphasises the end of a line as opposed to
its start. It can be useful in situations (like captions) where
the relationship between text and image might be ambiguous without
a strong orientation to the right.
Justified imposes a symmetrical shape on the
text like centering. It is achieved by expanding or reducing
spaces between words and letters. This format can occasionally
produce 'rivers' of white space running vertically through the
text, which are the gaps between the words. Careful attention to
line breaks and hyphens is required to avoid this problem.
fig 1.12 Flush right and Justified
Textures
|
| Fig 1.13 Anatomy of a Typeface |
.png)
|
| Fig1.14 Different typefaces with different gray value |
Type that calls attention to itself before the reader can get to the
actual words is simply interference, and should be avoided. Quite simply
if you see the type before you see the words, change the type.
Consider, too, the different textures of these typefaces. Type with a
relatively generous x-height or relatively heavy stroke width produces a
darker mass on the page than type with a relatively smaller x-height or
lighter stroke. Sensitivity to these differences in colour is
fundamental for creating successful layouts.
In determining type sizes, text type should be large enough to be read
easily at arms length—imagine yourself holding a book in your lap.
|
| Fig. 1.15 Leading and Line Length |
Leading is the space of each line of text. Text that is set too
tightly encourages vertical eye movement; a reader can easily loose his
or her place. Type that is set too loosely creates striped patterns that
distract the reader from the material at hand.
Appropriate leading for text is as much a function of the line length as
it is a question of type size and leading. Shorter lines require less
leading; longer lines more. A good rule of thumb is to keep line length
between 55-65 characters. Extremely long or short lines lengths impairs
reading.
Lecture 4：Typo_3_Text_P2
There are several options for indicating paragraphs. In the first
example, we see "pilcrow" (¶), which is a reservation for medieval
manuscripts, which is rarely used today. The above example shows a
"line space" (front*) between paragraphs. Therefore, if the row space
is 12pt, then the paragraph space is 12pt. This ensures the
cross-alignment of cross-text columns.
The above example shows the standard indentation. Usually, the
indentation here is the same as the line spacing, or the same as the
point size of the text.
The method of the above extended paragraph creates an unusually wide
text column. Despite these problems, there may be strong composition
or functional reasons for choosing.
2. Widows and Orphans
The unpardonable gaffes in formatting text are widows and
orphans.
A widow is a short line of the type left alone at the
end of a column of text. It can be avoided by creating a force line
break before or adjusting the tracking of the line before to let the
last word in the second last line moves down to the last line.
An orphan is a short line of the type left alone at
the start of a new column. It could be avoided by adjusting the length
of the column.
|
|
fig 1.16 Widow and orphan |
3. Highlighting Text
Examples of highlighting text:
- Use the same typeface but different fonts (Italic, Bold) or colour
fig 1.17
-
Use bold sans serif
Note that a sans serif font usually is slightly larger than a serif font in the same point size. In this example, the sans serif font (Univers) has been reduced by 0.5 pt to match the x-height of the serif typeface.
fig 1.18
- Place a field of colour
fig 1.19
- Place typographic elements (such as bullet points)
fig 1.10
-
Use quotation marks
Note that prime is not a quote. The prime is an abbreviation for inches and feet.
fig 1.21
4. Headline within Text
There are many subdivisions in the chapter text. In the following visual
effects, these are marked (A, B and C) according to the level of
importance. The task of the typesetographer is to ensure that these titles
clearly show the reader the relative importance of the text and their
relationship with each other.
The head indicates an obvious interruption between the topics in the part.
In the following example, the "A" title is set to be larger than the text
and displayed in lowercase and bold. The fourth example shows the A header
of "extended" on the left side of the text.
Head B here belongs to head A. Head B indicates a new supporting argument
or example of the topic at hand. Therefore, they should not interrupt the
text as strongly as head A. Here, the B head is displayed in lowercase
letters, italics, thick serifs and thick serifs.
Although the C-head is not common, it highlights the specific aspects of
the material in the B-head text. They did not substantially interrupt the
reading process. Like B-heads, these C-heads are displayed in lowercase
letters, italics, serif bold and non-serif bold. There is at least one
space for visual separation after the C head in this configuration.
Cross-ailignment
The cross-alignment of the title and title with the text type
strengthens the sense of architecture - structure of the page - and
clarifies the vertical rhythm of complementarity. In this example, the
four-line title type (guided 9 points) is cross-aligned with the
three-line text type (guided to 13.5 points).
Here, the one-line title type is cross-aligned with the two-line text
type, and the four-line title type is cross-aligned with the five-line
text type (right; lower left corner).
fig 1.22
Cross-ailignment
Lecture 5: Typo_4_Basic
1. Describing letterforms
- Baseline: the imaginary line at the base of the letterforms
- Median: the imaginary line defining the x-height of letterforms
- X-height: the height in any typeface of the lowercase 'x'
- Stroke: any line that defines the basic letterform
- Apex / Vertex: the point created by joining two diagonal stems
- Arm: short strokes off the stem of the letterform (horizontal: E, F, L; inclined upward: K, Y)
- Ascender: the portion of the stem of a lowercase letterform that projects above the median
- Barb: the half-serif finish on some curved stroke
- Beak: the half-serif finish on the same horizontal arms
- Bowl: the rounded form that describes a counter
- Bracket: the transition between the serif and the stem
- Cross Bar: the horizontal stroke in a letterform that joins two stems together
- Cross Stroke: the horizontal stroke in a letterform that joins two stems together
- Crotch: the interior space where two strokes meet
- Descender: the portion of the stem of a lowercase letterform that projects below the baseline
- Ear: the store extending out from the main stem or body of the letterform
- Em/en: originally referring to the width of an uppercase M, and em is now the distance equal to the size of the typeface; an en is half the size of an em
- Finial: the rounded non-serif terminal to a stroke
- Leg: short stroke off the stem of the letterform (at the bottom: L; inclined downward: K, R)
- Ligature: the character formed by the combination of two or more letterforms
- Link: the stroke that connects the bowl and the loop of a lowercase G
- Loop: the bowl created in the descender of the lowercase G (in some typefaces)
- Serif: the right-angled or oblique foot at the end of the stroke
- Shoulder: the curved stroke that is not part of a bowl
- Spine: the curved stem of the S
- Spur: the extension that articulated the junction of the curved and rectilinear stroke
- Stem: the significant vertical or oblique stroke
- Stress: the orientation of the letterform, indicated by the thin stroke in round forms
- Swash: the flourish that extends the stroke of the letterform
- Tail: the curved diagonal stroke at the finish of certain letterforms
- Terminal: the self-contained finish of a store without a serif, it may be flat, flared, acute, grave, concave, convex or rounded as a ball or a teardrop (see finial)
Typeface
Uppercase and lowercase
Small capital
Uppercase and lowercase numbers
Idari and Roman
Punctuation and miscellaneous characters
Decoration
Describe the font
Roman and Itar
Bold face and light
Concentration and expansion
Lecture 6: Typo_5_Understanding
1. Understanding letterforms
The uppercase letterforms below suggest symmetry, but in fact, it is not
symmetrical. The asymmetrical letterforms below are both internally
harmonious and individually expressive.
Baskerville stroke form: two different stroke weights can be easily
seen
Univers stroke form: a close examination shows that the width of
the left slope is thinner than the right stroke
2. Maintain x height
X-height usually describes the size of lowercase letters. Curved
strokes, such as "s", must be higher than the median (or lower than the
baseline) to look the same size as the vertical and horizontal strokes
adjacent to them.
3. Formal and reverse form (counter)
The spatial description is often included in the brush strokes of the
form.
4. Contrast
The design principle of contrast is also applied to typesetting.
Simple comparison produces many changes: small + organic / large +
machine; small + dark / large + light, etc.
fig 1.23
Lecture 7: Typo_6_Screen&Print
Typography used to be limited to paper, with no changes possible once a
publication was edited, typeset, and printed. Today, typography extends
beyond paper to various screens, making it subject to different
parameters such as operating systems, system fonts, devices, and screens
themselves.
1. Print Type:
Traditionally, typefaces were designed for reading from print. Designers
focused on ensuring text was smooth, flowing, and pleasant to read.
Notable typefaces for print include Caslon, Garamond, Baskerville, and
Univers, known for their elegance, intellectual appeal, and readability
even at small font sizes.
fig 1.24
Type for print
2. Type for Screen
Typefaces for digital screens undergo optimization to enhance readability
and performance in various digital environments. Adjustments include
taller x-heights, wider letterforms, open counters, heavier strokes,
reduced contrast, modified curves, and more open spacing, especially for
smaller sizes. These adjustments aim to improve character recognition and
overall readability on screens. Typefaces like Verdana and Georgia are
specifically designed for screens to address historical issues with
clarity and screen resolution, ensuring optimal legibility and aesthetics
in digital contexts.
3. Hyperactive Link / Hyperlink
A hyperlink is a clickable word, phrase, or image that directs users to
another document or section within the current document. They are commonly
found on web pages and are typically displayed in blue and underlined text
by default.
4 Screen font size
Screen font size - the 16-pixel text on the screen is roughly the same
size as the text printed in books or magazines; this takes into account
the reading distance.
5Network security fonts
Network security fonts– Open Sans, Lato, Arial, Helvetica, Times New
Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino,
Garamond
6. Pixel Differential between Devices
Text size and proportions vary across devices such as PCs, tablets,
phones, and TVs due to differences in screen pixel sizes. Even within the
same device class, there can be significant variations in text appearance.
Static and motion
1. Static typesetting
Static typesetting is not limited to minimum features such as bold and
italics when expressing words. It can also create motion and movement in
a dynamic way.
fig 1.25
2. Motion Typography
Motion typography is introduced around since the 1960s when feature
films started using animated opening titles instead of static text
3 TASK 1: Exercise 1 - Type Expression
words: Balance, Jump, Roll, Crash, Flow, Spark, Time, Swim, Open, Spark, Swing, Dash, Kick
On Tuesday, the teacher gave us 13 words, and we asked us to choose
four more words for draft design. Each word needs four drafts. I
chose four words: crash, Flow, Balance and jump for design.
Sketch
Fig. 2.1 Type expression sketches, Week 2 (4/23/2024)
Fig. 2.2 Type expression sketches, Week 2 (4/23/2024)
Fig. 2.3 Type expression sketches, Week 2 (4/23/2024)
Fig. 2.4 Type expression sketches, Week 2 (4/23/2024)
Fig. 2.5 Type expression sketches, Week 2 (4/23/2024)
- Rough or broken font design.
- Fonts may have sharp edges or irregular shapes to imitate the visual effect of sudden cracking or crashing of things.
2 Flow
- This word may inspire smooth, elegant or continuous font design.
- Fonts may adopt streamlined curves and soft transitions to convey a sense of flow.
3 Balance
4 Jump
This word may inspire lively, interesting or dynamic font design.
Fonts may use irregular shapes and bouncing lines to imitate jumping movements.
2. Digitisation
During the digitisation process, I have tried out several attempts to create the right expression for each word based on my sketches with the typefaces provided.
The first digitalization
Fig. 2.6 Type expression sketches, Week 3 (5/7/2024)
Since this is the first time I have come into contact with this software and my own design, at the beginning of digitization, I first tried to digitize for the first time, using the ICT New Baskerville St Bold font as the design.
Carsh: According to the meaning of the word collision, this vision is like I designed it as a broken feeling, using the effect of feathering.
Flow: According to the consciousness of the word, I used the fish shape in the effect to imagine the fish swimming freely in the water.
Balance: I used the meaning of the air word. The upward convex in the effect deformation.
Jump: According to the meaning of the word, I used the texture of glass to design and deform the letters.
The second digitization
Fig.2.7 Type expression sketches, Week 3(5/7/2024)
The third digitalization
Fig. 2.8 Type expression sketches, Week 3 (5/7/2024)
.jpg)
The fourth time
Fig. 2. 9 Type expression sketches, Week 3 (5/7/2024)
FINAL Type Expressions
Because the teacher thought that my format was wrong, I modified my format and redesigned the flow
FINAL Type Expressions
Fig. 2. 11 Type Final design pdf, Week 4 (5/14/2024)
3. Cartoon production
We must choose one of the four last type expressions to make an animated type expression. I chose the word JUMP for animation. Before we start making animation, we must watch the animation tutorial video made by Mr. Vinod. In the video, Mr. Vinod demonstrated how to use Illustrator and frame animation in Photoshop to make animation step by step. He suggested that we consider how the word will be animated in each frame.
Fig. 2. 12 Type expression sketches, flow GIF Week 4 (5/14/2024)
According to the video, I started my first attempt, and I animated flow.
Fig. 2. 13 Type expression sketches, flow GIF Process Week 4 (5/14/2024)
According to Mr. Vinod's tutorial, I will digitize flow. This is my first time to explore digitalization. I am not satisfied with this. After listening to the teacher's advice, I chose the following design jump as the final design.
Among all my explorations, I found that JUMP's exploration was the most complete, so I chose to digitize JUMP as the final design.
| Fig. 2.14 Final Animated Type Expression "jump" - GIF, Week 4 (5/14/2024) Week 4 (5/14/2024) |
| Fig. 2.15 Final Animated Type Expression "jump"Process- GIF, Week 4 (5/14/2024) Week 4 (5/14/2024) |
Animation Concept and Execution
I created a dynamic and engaging GIF animation where letters jump up and down, with the letters "u" and "p" specifically jumping up from an underground shadow. This concept adds a playful and surprising element to the visual experience.
Production Process
To bring this concept to life, I used Adobe Photoshop (PS) to create the GIF animation, employing a total of 125 layers. Each layer was meticulously crafted to ensure the animation's smoothness and visual appeal.
Detailed Steps
1. Initial Design:
Conceptualization: I first solidified the overall concept of the animation, which involves letters jumping and "u" and "p" emerging from an underground shadow. Creating Basic Letter Layers: In Photoshop, I created all the necessary letters, each on a separate layer.
2. Adding Jumping Effect:
Setting Keyframes: To simulate the jumping effect, I set keyframes across different layers, making the letters appear at various heights. Position Adjustments: I adjusted the vertical position of each letter frame by frame to mimic the motion of jumping up and landing down.
3. Special Effects:
Underground Shadow: I added an underground shadow effect to the letters "u" and "p" to give the illusion that they are jumping out from below.Jumping Out Effect**: By carefully adjusting the height of "u" and "p" from underground to above ground frame by frame, I enhanced the dramatic effect of their emergence.
4. Animation Testing and Optimization:
Previewing Animation: I continuously previewed the animation within Photoshop to ensure each frame transitioned smoothly.Fine-tuning: Based on the previews, I made fine adjustments to each frame to perfect the rhythm and visual impact of the animation.
5. Exporting the GIF:
Setting Export Parameters: In Photoshop, I configured the export settings for the GIF, including frame rate and looping options.
Final Export: I exported the final GIF file and performed a last check to ensure the animation was flawless.
Animation Outcome
The resulting GIF animation is lively and visually captivating. The letters bounce up and down like playful little characters, and the "u" and "p" letters dramatically jump out from their underground shadows, providing a delightful surprise. This creative approach not only adds fun but also enhances the viewer's visual engagement.
Conclusion
By utilizing Adobe Photoshop and meticulously crafting 125 layers, I successfully brought this jumping letter animation to life. This project demonstrates my design and animation skills, as well as my attention to detail and dedication to creative expression. The final GIF animation achieves the desired visual effect and offers a unique and enjoyable experience for the audience.
| Fig. 2.16 Final Animated Type Expression "jump" - GIF, pdf Week 4 (5/14/2024) Week 4 (5/14/2024) |
3.Task 1 - Exercise 2: Text Formatting
Fig. 3.2 Text formatting with kerning, Week 5 (21/5/2024)
Fig. 3.3 Practice Text Formatting (without grids) - JPEG, Week 5 (21/5/2024)
Fig. 3. 4 Practice Text Formatting ( grids) - JPEG, Week 5 (21/5/2024)
I showed these two exercises to the teacher. The teacher pointed out that my format was wrong and asked me to modify the correct format.
Teacher's parameter reference diagram
Final text Typesetting design works
Fonts
Font: Bembo Std (Roman, Italic, and Bold)
Point Size
Body Text: 11 pt
Heading:
Main Title: 60 pt
Line spacing: 65 pt
Secondary Subtitle: 11 pt
Leading
Body Text: 14.4 pt
Paragraph Spacing
-14.4 pt
Alignment
Left align
Color: Light Blue
Start: 12.7 mm
ents
Relative To:Top of Page nt Every:13 pt
150
reshold:50%
Layout Analysis (Layout Analysis)
Title:
The main title "I AM HELVETICA" uses the Bembo Std Bold font of 60 pt.
The subtitle "by John Doe" uses the Bembo Std Italic font of 11 pt.
Text:
The text uses 11 pt Bembo Std Roman font.
The spacing is 14.4 pt, and the spacing between paragraphs is also 14.4 pt.
Photo description:
The picture description uses a 9 pt Bembo Std Italic font with a line spacing of 14.4 pt.
Alignment method:
The full text is aligned with the left, so that the text is neatly arranged on the left edge.
Fig. 3. 7 Final Text Formatting ( grids) - JPEG, Week 5 (21/5/2024)
Fonts
Font: Bembo Std (Roman, Italic, and Bold)
Point Size
-Body Text: 11 pt
- Heading:
- Main Title: 60 pt
- Line spacing: 65 pt
- Secondary Subtitle: 11 pt
Leading
- Body Text: 14.4 pt
Paragraph Spacing
- 14.4 pt
Alignment
- Left align
Layout Analysis (Layout Analysis)
Title:
The main title "I AM HELVETICA" uses the Bembo Std Bold font of 60 pt.
The subtitle "by John Doe" uses the Bembo Std Italic font of 11 pt.
Text:
The text uses 11 pt Bembo Std Roman font.
The spacing is 14.4 pt, and the spacing between paragraphs is also 14.4 pt.
Photo description:
The picture description uses a 9 pt Bembo Std Italic font with a line spacing of 14.4 pt.
Alignment method:
The full text is aligned with the left, so that the text is neatly arranged on the left edge.
Fig. 3. 8 Final Text Formatting (without grids) - pdf, Week 5 (21/5/2024)
Fig. 3. 9 Final Text Formatting ( grids) - JPEG, Week 5 (21/5/2024)
The layout ensures the clarity and readability of the content through appropriate font size, line spacing and paragraph spacing. At the same time, it enhances the hierarchy and visual attractiveness of the layout through left alignment and the use of different line widths. Using the Bembo Std font can add a classic and elegant feeling to the text.
4. Feedback (Week 1-Week 6)
week1: In the first week, the teacher asked us to set up a blog, tell us about the learning tasks of this semester and check our blog. Let us vote for the words for the homework and tell us the requirements of the homework. Choose four words from them to design 16 sketches.
Week 2:The teacher checked the draft design we submitted on Facebook and told us to choose fonts similar to our own to digitize according to the draft design.
Week 3:
The lecturer proposed that I need to continue to try. Miss mentioned that she can't see how the flow design expresses the flow. The other three font designs are acceptable, and the balance design can be modified.
Specific feedback: The lecturer said that my format must be square, and then this balance said that you are very creative mirror a, but this line is not necessary, and then the flow does not see the feeling of flow. Let's go to the draft and try again.
week 4:My teacher provided feedback on my design work. They praised my "jump" design, highlighting its excellence. However, they noted that the font in my "jump" design is different from the font used in the GIF. Additionally, they mentioned that my "flow" design needs improvement, and the format of my final design is not correct. I will focus on refining these aspects to enhance the overall quality of my work
Week 5：Task1 is generally good, and the text type typesetting needs to be improved. Follow the tutorials and requirements given by Mr. Vinod for reference.
Special feedback: Our typesetting grid board, the body content is a little floating, and it needs to be modified to put him on the horizontal line of the grid.
5. Repercussion
Week 1:When I first came into contact with font design, it was not as simple as I thought, but according to the video tutorial given by the teacher, he got started step by step, when the font design was full of a sense of accomplishment.
Week 2：Through the teacher's feedback, I understood that my design is not to pay attention to the appearance of fancy, but to pay attention to the connotation of words and more ideas and creativity, which makes me more aware of the essence of my design.
Week 3: I know a lot of shortcomings, and I understand more about the understanding of the word itself by font design, so there is no need to distort it too much.
Week 4: I understand how to use ps to make GIFs. The creativity of font design is very important.
Week 5: For the first time, I followed Mr. Vinod's tutorial to complete the homework step by step, so that I learned how to use id for the first time in typesetting.
6. Further reading
READING
 |
| The Vignelli Canon by Massimo Vignelli (2010) |
Further Reading
The Vignelli Canon by Massimo Vignelli (2010)
Massimo Vignelli's book, "The Vignelli Canon," is a seminal work in the field of design, providing an in-depth look into the core principles that underpin effective design practice. Vignelli's approach is rooted in the belief that design should be both functional and aesthetically pleasing, while also communicating its intended message with clarity and precision.
Semantics in Design
One of the crucial sections of "The Vignelli Canon" is dedicated to semantics, where Vignelli explores the significance of meaning in design choices. According to Vignelli, semantics is about understanding and leveraging the meaning behind each design element to ensure that the final product communicates effectively with its audience. This involves a deep comprehension of the cultural, social, and psychological contexts in which design operates.
1. Cultural Contexts: Vignelli emphasizes the importance of cultural awareness in design. Designers must consider how different cultures interpret various symbols, colors, and forms. For instance, colors can have different connotations across cultures—while white might signify purity in some cultures, it can represent mourning in others. Understanding these nuances helps designers create work that resonates appropriately with diverse audiences.
2. Social Contexts: Social factors, including societal norms and trends, also play a crucial role in design semantics. Designers need to be attuned to the current social climate and how it influences public perception. This understanding allows them to craft messages that are relevant and engaging to contemporary audiences.
3. Psychological Aspects: The psychological impact of design elements is another critical consideration. Vignelli discusses how shapes, colors, and typography can evoke specific emotions and reactions. For example, rounded shapes might be perceived as friendly and approachable, while sharp angles could be seen as aggressive or dynamic. Effective design leverages these psychological cues to create the desired emotional response from the audience.
Application of Semantics in Design
By applying the principles of semantics, designers can make informed decisions that enhance the communicative power of their work. Here are a few practical applications of these concepts:
Color Choice: Selecting colors that align with the intended message and audience. For example, using green in eco-friendly product packaging to signify environmental consciousness.
Typography: Choosing typefaces that complement the tone of the message. A sleek, modern typeface might be suitable for a tech company, whereas a more traditional serif font could be appropriate for a law firm.
Imagery: Using images that support the message and resonate with the audience's experiences and expectations. For example, featuring real people in advertisements to create a sense of relatability and authenticity.
Conclusion
The Vignelli Canon" serves as an essential guide for designers, providing a framework to create meaningful and effective designs. By understanding and applying the principles of semantics, designers can ensure that their work not only looks good but also communicates the intended message clearly and powerfully to the target audience. Vignelli's insights into the deeper meanings and functions of design elements remain relevant and influential, making "The Vignelli Canon" a must-read for anyone serious about mastering the art of design.
Comments
Post a Comment