ADVANCED TYPOGRAPHY - TASK 2


13/5/2024-10/6/2024 (Week 04-08)

Chan Suet Yee 0358427

Bachelor of Design (Honours) in Creative Media

Advanced Typography | GCD61004 | Sec 03

Task 02 | Key Artwork


 LIST 

TABLE OF CONTENTS:

1.1 LECTURES

1.2 INSTRUCTIONS

1.3 TASK 2

1.4 FEEDBACK

1.5 REFLECTION

1.6 FURTHER READING


 LECTURES 

LECTURE 05: AdTypo_5_Perception & Organisation

 Perception in Typography 
  • Typography influences how easily readers can understand and engage with text
  • Factors like 
    • Typefaces (fonts)
    • Sizes
    • Styles (bold, italic, etc.) 
  • Affect legibility and readability
  • Choosing appropriate typographic elements is crucial for effective communication
 Hierarchy and Structure 
  • Visual hierarchy refers to organising content to prioritise information effectively
  • This involves using different typographic elements such as 
    • Headings
    • Subheadings
    • Body text size
  • To guide the reader's attention through the content
  • Clear hierarchy helps readers navigate and comprehend information more efficiently
 Alignment and Spacing 
  • Proper alignment and spacing contribute significantly to the overall readability and aesthetic appeal of a design
  • Consistent use of grids and margins ensures 
    • A clean and organised layout
    • Enhancing the readability and visual appeal of text
 Psychological Impact 
  • Typography can evoke emotions and communicate brand personality
  • Different fonts and styles can create distinct moods or associations, influencing how viewers perceive and engage with content
  • Understanding these psychological impacts allows designers to strategically choose typography to align with the intended message or brand identity


 INSTRUCTIONS 




 Task 02 

[TYPOGRAPHIC SYSTEMS]

INSTRUCTIONS

For this task, we need to create numerous permutations and combinations of our name as a word mark/lettering. The final design must be elegant, balanced, and clear, resulting in functional and communicative key artwork. This artwork will be used in subsequent collateral, requiring us to explore typographic communication creatively and effectively, synthesising knowledge from Typographic Systems and Type & Play to produce a memorable and exciting key artwork.

SUBMISSIONS
  • Eportfolio Documentation
    • Document all gathered information (failures, successes, sketches, research, printouts, websites, images, charts, etc.) logically and chronologically in one post.
  • Image/Sketch/Diagram Requirements
    • Capture all images/sketches/diagrams with good, even natural light (no tube/bulb/flash light).
    • Clearly indicate final submission, distinguishable from process work, and upload as PDF and JPEG (not PNG) or as instructed.
  • Printed Documentation (if instructed)
    • Document tasks in a printed A4 enclosed in a clear sheet, logically and chronologically.
PROCESS

 About Me (Mind map) 

I started with a mind map exploring my interests and personality traits to guide the creation of a key artwork. 

I am a creative and passionate individual with a strong sense of principles and a caring nature. These strengths fuel my endeavors in hobbies such as sports, baking, and cooking, where I find joy in expressing myself through creativity and nurturing others. However, I acknowledge my weaknesses; I can be emotional and introverted, sometimes procrastinating or being careless. My MBTI type, INFP, reflects my deep inner world and values-driven approach to life. When not immersed in hobbies, I enjoy savoring favorites like ice cream and mala hotpot, accompanied by acoustic and jazz music or expressing myself through contemporary dance. This combination of strengths, weaknesses, hobbies, and preferences forms the core of who I am—a complex individual driven by creativity, empathy, and a pursuit of meaningful experiences.


Fig 1.0  My Personality Mind Map


 Directions to Consider 

Passionate 
  • Bold
    • The boldness of the typeface will command attention and exude confidence.
  • Edges
    • Sharp edges within the letterforms will add a sense of dynamism and energy. 
Emotional
  • Curves
    • Communicate emotions such as gentleness, empathy, and approachability
  • Flowing shapes
    • You can draw inspiration from natural elements like flowing water to create letterforms that feel alive and dynamic
Introverted 
  • Narrow Proportions
    • Can evoke a sense of introversion by occupying less space and appearing less imposing
 Inspiration and References 

While exploring Pinterest, I discovered numerous captivating images that aligned closely with my design vision. Among them, I focused on those featuring impactful, curvy forms with distinct edges, which resonated strongly with the aesthetic I envision for my key artwork. These references exhibit a semi-formal yet sharp quality, emphasizing both elegance and clarity in their lettering and color usage. By selecting images that embody these characteristics, I am shaping a design direction that combines dynamism with a solid, structured foundation, ensuring my artwork communicates effectively and resonates with its audience.


Fig 1.1 Visual References



 Sketches 

Sketch 01
  • This sketch emphasis on emotional appeal through bold and round forms creates a compelling visual narrative that resonates deeply with the viewer's feelings and perceptions. 
Sketch 02
  • This sketch is similar to sketch 01 but this has edges. With the edges, the design guide the eye smoothly through its contours, ensuring that the passionate energy remains accessible and engaging rather than chaotic.
Sketch 03
  • For this sketch, in the context of passion and emotion, curves soften the edges making the typeface more inviting and approachable. They can emulate the organic flow of feelings, offering a contrast to the boldness and sharpness while maintaining a strong emotional presence.
Sketch 04
  • In this sketch, thin strokes suggesting a depth of thought and feeling that is more internalized and nuanced, typical of introverted personalities.

Fig 1.2 Sketches



 Digitisation 

I chose to advance to the next stage using Sketch 03. I utilized Sketch 03 as a guide in Adobe Illustrator, meticulously tracing it with the pen tool. Subsequently, I meticulously refined the design, ensuring uniform font weight and height to achieve a polished final product.

During week 6, We printed our digitised key artwork. We displayed the artwork in both larger and smaller boxes to verify its visibility and recognisability, even at reduced sizes.


Fig 1.3 Digitisation (First Attempt)



After seeking feedback from Mr Vinod, he suggested some adjustments that can be done to make the design better. He sketched on the part that need to be improve on the printed key artwork.


Fig 1.4 Printed Key Artwork



 Refinements 
  • Reduces the sharpness of the edges
  • Increases the thickness of stroke for the letter 'S'
  • Smoothen the letter "U'
  • Aligned the height of 'I' with the other letter


Fig 1.5 Outcome after Refinements



 Colour Selection 

Colour psychology Research
  • Orange
    • Energetic and Stimulating : associated with enthusiasm, creativity, and energy. 
    • Attention-Grabbing
  • Pastel Purple
    • Creativity: associated with creativity and imagination
    • Mystery: Lighter purples can also evoke a sense of mystery
  • Creamy White
    • Purity and Simplicity: associated with purity, cleanliness, and simplicity
  • Violet
    • Spirituality and Imagination: Violet is often linked to spirituality, introspection, and contemplation. It can evoke a sense of mystery, depth, and creativity

Fig 1.6 Key Artwork Colour Scheme


    Fig 1.7 Chosen Colour Scheme



     Expansion Exploration 

    Fig 1.8 Exploration of Wordmark Expansion



     Final Outcome 


    Fig 1.9 Black Wordmark on White Background


    Fig 2.0 White Wordmark on Black Background 



    Fig 2.1 Final Colour Palette



    Fig 2.2 Light Purple Wordmark on Orange Background 



    Fig 2.3 Orange Wordmark on Light Purple Background



    Fig 2.4 Final Submission for Task 2A, PDF



     Collateral Artwork 


    Fig 2.5 Collateral 1



    Fig 2.6 Collateral 2



    Fig 2.7 Collateral 3



    Fig 2.8 Collateral 4



    Fig 2.9 Collaterals in PDF



    Fig 3.0 Instagram Posts in PDF



    Fig 3.1 Final Instagram Page Screenshot (Phone)


    Fig 3.2 Final Instagram Page Screenshot (Laptop)



    Fig 3.3 Final Instagram Post Screenshot (Laptop) in PDF 


    Instagram Link Here




     FEEDBACK 


     Week 5 

    General Feedback
    • Prioritise readability
    • Choose a memorable font
    • Avoid excessive negative space
    • Simplicity is the key
    • Express your identity
    Specific Feedback
    • No specific feedback given

     Week 6 

    General Feedback 
    • Consider the types of products that can showcase your design effectively
    • Plan an aesthetically pleasing and cohesive Instagram layout
    • Avoid overloading the wordmark with repetitive elements, and pay close attention to the whitespace surrounding the mark
    • Prioritise readability so that viewer can easily recognise the letters within a second

    Specific Feedback 
    • Reduce the sharpness of the edges
    • Increase the thickness of stroke for the letter 'S'
    • Smoothen the letter "U'
    • Align the height of 'I' with the other letter

     Week 7 

    General Feedback 

  • Avoid excessive color repetition and match collateral wisely
  • Use bold, vibrant colors to create striking contrasts and capture attention
  • Avoid muted colors as they can be difficult to discern and lack impact

    • Specific Feedback 
    • No specific feedback
     Week 8 

    Independent learning week



     REFLECTION 

    Experience

    Creating numerous permutations and combinations of our name as a word mark was a valuable experience in typographic design. The process required balancing elegance, clarity, and functionality, and pushed my creativity and technical skills. By applying principles from Typographic Systems and Type & Play, I explored various typographic elements, enhancing my understanding of how type conveys different messages and emotions.

    Observation

    I observed that small adjustments in typeface, spacing, and alignment significantly impacted the word mark's overall effect. Experimenting with serif and sans-serif fonts, as well as the weight and curvature of letters, revealed how these choices influence tone and visual rhythm. This highlighted the importance of detail and balance in typographic design.

    Findings

    From this task, I learned that effective key artwork blends creativity and precision, must be memorable, readable, and versatile. The iterative design process provided valuable insights for refinement. This experience reinforced the importance of typographic communication and will enhance my future design work.


     FURTHER READING 

     A Type Primer by John Kane 


    Fig A Type Primer by John Kane



    "A Type Primer" by John Kane is a comprehensive guide to typography, detailing its history, key terminology, and practical uses. Kane delves into various facets of type design, including letterforms, fonts, spacing, and alignment. He traces the development of typography from its beginnings to contemporary digital typefaces, emphasizing significant milestones and influential designers. The book provides clear explanations of typographic principles and techniques, making it suitable for both novices and seasoned designers. In summary, "A Type Primer" is an invaluable resource for anyone wanting to enhance their knowledge of typography and refine their design abilities.



    Comments

    Post a Comment

    Popular posts from this blog

    GAMES DEVELOPEMNT - TASKS

    Image
    23/04/2025 -21/05/2025 (Week 01-14) Chan Suet Yee 0358427 Bachelor of Design (Honours) in Creative Media Games Development  | DST611104 | Sec 01  LIST  TABLE OF CONTENTS: 1. INSTRUCTIONS 2. TASKS   INSTRUCTIONS   TASKS  TASK 01 & 02 : GAMES DESIGN DOCUMENT & GAME ASSETS  TASK 01  For  Task 1  of our Game Development module, our group was formed during  Week 2 . I teamed up with  Mei Hui  and  Emily , and together, we began brainstorming ideas for our 2D side-scrolling game. After some discussion, we decided to draw inspiration from a tabletop game we previously created in one of our past semester projects, titled  "Sudsprite Spin."  We felt that the characters and gameplay mechanics from that game had potential to be developed into a fun and whimsical digital experience. In our 2D game adaptation, the  Sudsprite  becomes the main character. We wanted to preserve the bubbly, playful the...
    Read more

    APPLICATION DESIGN 2 - TASK 2

    Image
    19/05/2025 -08/06/2025 (Week 05-07) Chan Suet Yee 0358427 Bachelor of Design (Honours) in Creative Media Application Design II | DST60504 | Sec 01 Task 02 | Interaction Design Proposal & Planning  LIST  TABLE OF CONTENTS: 1. INSTRUCTIONS 2. TASKS 3.REFLECTION   INSTRUCTIONS   TASKS  INSTRUCTIONS For this assignment, we are required to develop a  comprehensive interaction design plan  for our final  web-based mobile application . The goal is to  visually and conceptually prepare the user interactions and animations  that will enhance the overall user experience. The key components of the assignment include: 1. Interaction Design Documents Create  detailed flowcharts and wireframes  to map out the user journey. Clearly show the  layout of each screen  and the  navigation structure  of the app. 2. Animation Prototyping Micro Animations : Design small interactive effects (e.g., button clicks, loading in...
    Read more

    ADVANCED INTERACTIVE DESIGN - TASK 02

    Image
    23/05/2025-13/06/2025 (Week 05-08) Chan Suet Yee 0358427 Bachelor of Design (Honours) in Creative Media Advanced Interactive Design | DST60804 | Sec 02 Task 2 | Interactive Design Planning & Prototype  LIST  TABLE OF CONTENTS: 1. INSTRUCTIONS 2. EXERCISES 3. TASKS 4. REFLECTION   INSTRUCTIONS    EXERCISES  WEEK 5 - BOUNCING BALL ANIMATION In Week 5, we learned how to create a simple bouncing ball animation using Adobe Animate. The first step was to draw the ball using the  Oval Tool  and turn it into a  symbol . After that, we used the  Pencil Tool  to draw a curved path showing how the ball would bounce. Next, we added  keyframes  at the starting and ending points of the path. Then, we applied a  motion tween  so the ball would follow the path smoothly. To make the animation more realistic, we slightly adjusted the  speed and motion  using easing. This exercise helped me understand how keyframes an...
    Read more