14.10.2024 - 27.11.2024 (Week 4 - Week10)
Chang Yu Rou | 0374168 | Bachelor of Design (Honours) in Creative Media
Advanced Typography GCD61004
Task 2 - Key Artwork & Collateral
TABLE OF CONTENTS
1. LECTURES
Lectures 5 (Week 5 // 22.10.2024 - 27.10.2024)
✒️ Advanced Typography : Designing Type
Perception in typography deals with the visual navigation and interpretation
of the reader via contrast, form and organisation of the content.
Content can be textual, visual, graphical or in the form of colour.
However, our focus today is on typography.
📌CONTRAST
|
| fig1.5.1 Typographical Contrast devised by Rudi Ruegg |
📝7 Types of Contrast by Carl Dair:
|
| fig 1.5.2 Typographical Contrast devised by Carl Dair |
1️⃣Contrast/ Size
- A contrast of size provides a point to which the reader's attention is drawn.
- Using by making a title, heading noticeably bigger compared to the body text.
2️⃣Contrast/ Weight
- Describes how bold type can stand out in the middle of the lighter type of the same style.
- Using rules, spots, squares provides a heavy area for an emphasized point of visual attraction.
3️⃣Contrast/ Form
- Using the different weights to create contrast when dealing with information.
- A distinction between a capital letter and its lowercase equivalent, or a Roman letter and its italic variant, condensed, expanded versions.
4️⃣Contrast/ Structure
- The different letterforms of different kinds of typefaces;
- Monoline sans serif and traditional serif/ italic and blackletter.
5️⃣Contrast/ Structure
- Putting the contrasts of size, weight, form, and structure together.
- Texture refers to the way the lines of type look as a whole up close and from a distance.
6️⃣Contrast/ Direction
- Opposition between vertical and horizontal, and the angles in between.
- Turning one word on its side can create a dramatic effect, text blocks also have their vertical or horizontal aspects of direction.
- Mixing wide blocks of long lines with tail columns of short lines can also create a contrast.
7️⃣Contrast/ Colour
- The use of colour, a second colour is often less emphatic in values compared to plain black on white.
- It is important to give thought to which element needs to be emphasized and to pay attention to the tonal values of colours that are used.
---------------------------------------------------------------------------------------------
📌FORM
- Form refers to the overall look and feel of the elements that make up the typographic composition.
- Plays a role in visual impact and first impressions.
The word typography originated from the Greek words 'typos' (form) and
'graphis' (writing), which means to write in accordance with the form.
📝Typography can be seen as having 2 functions:
1. To represent a concept
2. To represent a concept in a visual form
|
||
|
---------------------------------------------------------------------------------------------
📌ORGANIZATION/ GESTALT
- Gestalt is a German word meaning the way a thing has been "placed" or "put together".
- An attempt to understand the laws behind the ability to acquire and maintain meaningful perceptions.
- Laws of Similarity
- Laws of Proximity
- Laws of Closure
- Laws or Continuation
- Laws of Symmetry
- Laws of Simplicity (Praganz)
2. INSTRUTIONS
▸ MI_GCD60104_TYPOGRAPHY_BDCM_2024
3. PRACTICAL
Task 2 - Key Artwork & Collateral
- Explore and compose as many permutations and combinations of your name in the form of a wordmark/lettering.
- The final key artwork must be an elegant solution, well balanced and composed, not complicated or confusing that leads to a functional and communicable key artwork.
Task 2A - Key Artwork
Mindmap
.png)
|
| fig3.1.1 Mindmap About Me, Week 4 (16/10/2024) |
Moodboard
.png)
|
| fig 3.1.2 My Moodboard, Week 4 (16/10/2024) |
Sketches on Week5
.png)
|
| fig 3.1.3 Sketches My Wordmark, Week 5 (23/10/2024) |
More Sketches
- More were created after receiving feedback from Mr. Vinod during Week 5.
|
| fig 3.1.4 More Sketches of My Wordmark, Week 5 (27/10/2024) |
📝Chosen keywords for my wordmark:
- Playful, Quirky, Positive, Cute
I selected design number 5 from Fig. 3.1.4 because it reflects my personality.
I enjoy doodles, cute designs, and maintaining a positive mindset.
Digitization
During Week 5, Mr. Vinod suggested refining my wordmark to make the letters
more recognizable, especially the "O" in "YUROU," so it would be easier to
read. He also commented that the flower on top of the letter "Y" seemed
unnecessary.
Taking his advice, I adjusted my wordmark and refined the overall
design.
Below is my digitization process by using Adobe Illustrator.
- Left: The original sketch from Fig. 3.1.4 alongside its digitized version.
- Right: The refined design of my wordmark.
|
| fig 3.1.5 Digitization Process of My Wordmark, Week 6 (30/10/2024) |
After making the changes, I showed Mr. Vinod the updated design on the spot.
He then suggested showing it to someone unfamiliar with my name to see if
they could read the wordmark.
I immediately found a few people and asked them for feedback. The result was
positive—they were able to read my wordmark clearly. Mr. Vinod approved the
final design and said it looked good!
Final Digitization
|
| fig 3.1.6 Final Digitization of My Wordmark, Week 6 (30/10/2024) |
Colour Application
To choose a color palette for my wordmark, I used websites like Hunt Color and Adobe Color to find the right colors that matched the mood I wanted. My goal was to select a palette that fits and enhances my wordmark.
I started by writing down the feelings I wanted my wordmark to convey, based on my chosen keywords: Playful, Quirky, Positive, and Cute.
With these in mind, I decided on a palette featuring warm, pastel tones with bright and cheerful shades of yellow.
|
|
fig 3.1.7 Color palette exploration, Week 6 (30/10/2024) |
Below is my final color palette for my wordmark. It includes deep purple,
light purple, soft green, bright yellow, and a creamy beige. This combination
gives a playful, quirky, and positive feeling, perfectly matching the cute and
lighthearted vibe I wanted for my wordmark design.
|
| fig 3.1.8 Final Color palette, Week 6 (30/10/2024) |
Key Artwork Animation
For my wordmark animation, I wanted to make it playful and fun, reflecting
the idea of drawing and doodles, which are the keywords for my design.
I started by animating the "Y" and "R" to look like they were being drawn
with a pencil.
Then, I played with the "O" by making it a flower. The flower spins as it
falls from nowhere, starting large and gradually shrinking until it fits
perfectly into the wordmark.
For the first "U," I made it a smiley face and played with the eyes—switching
between normal and winking expressions to add a fun and lively touch.
I created the animation using Adobe Illustrator and Photoshop.
Below is my process 1:
|
|
fig 3.1.9 black and white animation process 1 in AI, Week 9
(19/11/2024) |
First, I made my wordmark animation in Adobe Illustrator using black and
white. This helped me focus on planning how the animation would move.
Then, I exported it and tested it in Photoshop using the stack feature to
see if it looked smooth.
Once I was happy with the flow, I added my color palette in Illustrator to
make it more interesting. After that, I exported about 90 frames and put
them together in Photoshop to finish the animation.
Below is my process 2:
|
| fig 3.1.10 Animation process 1 in AI, Week 9 (20/11/2024) |
Even though it was a lot of work, I really enjoyed it. There were many manual steps, unlike After Effects, which is easier. But I still preferred using AI and PS for this project.
|
|
fig 3.1.11 Animation process 2 in PS, Week 9 (21/11/2024) |
Animation of my wordmark
|
| fig 3.1.12 Animation of my wordmark, Week 9 (22/11/2024) |
📌Final Outcome - Task 2A
|
|
fig 3.2.1 Black wordmark on white background, Week 6
(30/10/2024) |
|
|
fig 3.2.2 White wordmark on black background, Week 6
(30/10/2024) |
|
|
fig 3.2.3 Colour Palette, Week 6 (30/10/2024) |
|
|
fig 3.2.4 Wordmark in actual colours on lightest shade of colour
palette, Week 6 (30/10/2024) |
|
|
fig 3.2.5 Wordmark in lightest shade of colour palette on
darkest shade of colour palette, Week 6 (30/10/2024) |
|
|
fig 3.2.6 Key Artwork Animation, Week 9 (22/11/2024) |
fig 3.2.7 Task 2A Key Artwork - PDF, Week 9 (22/11/2024)
Task 2B - Collateral
For Task 2B, using the wordmark that we created from task 2A, we were
instructed to expand the visual identity and apply its idea/ design to
chosen collaterals. This also included creating a layout design for my
own Instagram page.
Below is the link to the websites I used for mockups:
- Canva Mockups - https://www.canva.com/mockups/
Collaterals
- For my collateral, I wanted to create something warm, cute, and sweet, reflecting the style of my wordmark.
Collateral #1 Pillow
For Collateral 1, I designed a pillow with a soft light green color as the
main tone. The pattern features a cute flower doodle, designed to look
like it’s reaching out for a hug, bringing a cozy and comforting feel.
|
| fig 3.3.1 Pillow pattern design, Week 8 (11/11/2024) |
Collateral #2 T-shirt
For Collateral 2, I decided on a t-shirt because shirts are something
everyone can use, and if my design can spread positivity, then why not?
The shirt features a cute flower doodle, with the quote "Little Lines Big
Smile" above it, reflecting my desire to bring smiles and spread good
vibes.
|
| fig 3.3.2 T-shirt pattern design, Week 8 (11/11/2024) |
Collateral #3 Cup
For Collateral 3, I created a cup design with my wordmark as the pattern.
The background is a cheerful yellow, making it bright and eye-catching.
|
| fig 3.3.3 Cup pattern design, Week 8 (11/11/2024) |
Collateral #4 Sticker
For Collateral 4, I designed a sticker. I’ve noticed that stickers are
really popular with people of all ages, and it seems like a fun trend. So,
I created a simple yet playful design to fit the sticker style, hoping it
will spread some joy.
|
| fig 3.3.4 Sticker pattern design, Week 8 (11/11/2024) |
Below is my first attempt at Instagram feed layout design:
|
|
fig 3.3.5 My first Instagram Feed Design Layout, Week 8
(11/11/2024) |
After getting feedback from Mr.Vinod, I make some changes.
Below is my second attempt at Instagram feed layout design:
|
|
fig 3.3.6 My second Instagram Feed Design Layout, Week 8
(11/11/2024) |
📌Final Outcome - Task 2B
|
|
fig 3.4.1 Collateral 1, Week 8 (11/11/2024) |
|
| fig 3.4.2 Collateral 2, Week 8 (11/11/2024) |
|
| fig 3.4.3 Collateral 3, Week 8 (11/11/2024) |
|
| fig 3.4.4 Collateral 4, Week 8 (11/11/2024) |
|
| fig 3.4.5 Instagram Feed Design Layout, Week 8 (11/11/2024) |
Instagram link: https://www.instagram.com/yr._.smile2u
.png)
|
| fig 3.4.6 Screenshot of Instagram page, Week 8 (11/11/2024) |
Final Compilation - Task 2
|
|
|
fig 3.5.1 Black wordmark on white background, Week 6
(30/10/2024) |
|
|
|
fig 3.5.2 White wordmark on black background, Week 6
(30/10/2024) |
|
|
|
fig 3.5.3 Colour Palette, Week 6 (30/10/2024) |
|
|
||||||||||||||
fig 3.5.4 Wordmark in actual colours on lightest shade
of colour palette, Week 6 (30/10/2024)
|
|
|
|
fig 3.5.12 Screenshot of Instagram page, Week 8
(11/11/2024) |
4. FEEDBACK
Week 8
No classes due to ILW.
Week 7
General Feedback:
- Everything is ok, but need to refine some.
Specific Feedback:
- Mr. Vinod suggested that I can play around with my wordmark more.
- Overall is fine.
Week 6
General Feedback:
- Make sure your wordmark is clear for others to read.
- Mr. Vinod commented that the wordmark design is satisfactory, but he suggests reducing the white space to bring the elements closer together slightly.
- Mr. Vinod recommended enhancing the color palette to create a stronger contrast by incorporating a transition from dark to light shades.
Week 5
General Feedback:
- Don't stick to one sketch, explore more style of yourselves.
Specific Feedback:
- The first and second can put on more effort, can be better.
- Discover more, Explore more.
5. REFLECTION
Experience
This task was much harder than I thought it would be. I assumed
creating my own key artwork would be easy, but it took a lot of time
and effort to complete my wordmark. I had to focus on making the
shapes work well together while showing the idea I wanted to
express. For the wordmark, it was challenging to balance the text
and design so they looked good together. Even though it was
frustrating at times, I kept working and learned a lot from the
process. By the end, I felt happy with what I had created and proud
of how much I improved.
Observation
I noticed that every detail in a design plays an important role. Even
small adjustments, like spacing or the angle of a line, can make a big
difference in how the final piece feels. I also realized how important
it is to stay patient and not rush through the process, especially
when things don’t seem to work at first. Breaking down the task into
smaller steps helped me focus and solve problems more effectively.
Findings
Through this task, I’ve learned the importance of starting with a
clear purpose and direction. Jumping straight into visuals without
proper planning often leads to ineffective designs and wasted time.
I also realized that letting go of rigid expectations can open up
new possibilities and ideas. By being flexible and allowing room for
exploration, I was able to approach challenges in a more creative
way and reach a satisfying final outcome.
6. FURTHER READING
Past, Present And The Future Of Wordmark Logos – A Study
What They Are:
- Wordmark logos are designs that use only the company’s name, written in a unique style, to represent the brand.
Why They Work:
- The style, font, and color of the text help show the brand’s personality and make it stand out.
Examples:
- Big brands like Google, Coca-Cola, and Disney use wordmark logos to create strong identities.
Tips for Design:
- Keep it simple, easy to read, and match the style to the brand’s image.
📝Wordmark logos are simple but powerful, using text to leave a
strong impression.
From this website, I learned that wordmark logos use only text to
represent a brand, focusing on the company’s name. The design of the
text, including the font, spacing, and color, plays a big role in
showing the brand’s personality and making it memorable. I also
learned that wordmark logos are simple but powerful and can make a
strong impression if done right. Successful examples like Google and
Coca-Cola show how the right style of text can create a lasting
identity for a brand.
Comments
Post a Comment