Yang Shumeng(0378848)

     INTERACTIVE DESIGN -  Project 2 || 05/11/2025 – 26/11/2025 (Week 7 – Week 11) || Yang Shumeng 0378848 || Interactive Design / Bachelor of Design (Honours) in Creative Media || Interactive Design / Project 2 TABLE OF CONTENTS 1 . Instructions 2 . Process Work 3 . Reflection 1. Instructions： 2. Process Work： Prototype Overview: The purpose of this assignment was to transform the existing Yale School of Art website (art.yale.edu) into a functional prototype that maintains its artistic character while improving clarity, structure, and usability. I developed a clickable prototype using Figma, focusing on simplifying the information layout and strengthening visual hierarchy so that users can navigate the site more easily. The prototype consists of four core pages: Home, Programs / Study Areas, About the School, and Visit / Contact. Each page demonstrates how the redesigned interface supports clearer communication, more intuitive navigation, and a more accessible user ...

   Video and Sound Production - Exercises || 22/9/2025 – 8/10/2025 (Week 1 – Week 3) || Yang Shumeng || Interactive Design / Bachelor of Design (Honours) in Creative Media || Video and Sound Production - Exercises TABLE OF CONTENTS 1. Lectures 2. Instructions 3. Process Work 4. Feedback 5. Reflection 1. Lecture： Week 1: Introduction to Cinematography – Shots, Angles & Techniques 1. What is a Shot? A shot is a continuous piece of footage recorded from the moment the camera starts rolling until it stops. By manipulating elements such as shot size, angle, movement, composition, and focus , filmmakers shape emotional impact, direct attention, and control narrative pacing. 2. Shot Sizes Shot Type Description Purpose Extreme Wide Shot (EWS/ELS) Subject appears very small within a vast space Scale, isolation, geography Wide / Long Shot (WS/LS) Full figure visible with environment Establishing action and spatial context Full Shot (FS) Head-to-toe framing Show posture and mov...

  Advanced Typography | Task 2: Key Artwork and Collateral || 20/10/2025 – 17/11/2025 (Week 5 – Week 8) || YANG SHUMENG 0378848 || Advanced Typography ||  Task 2: Key Artwork and Collateral TABLE OF CONTENTS 1. Lectures 2. Instructions 3. Process Work 4. Feedback 5. Reflection 6. Further Reading 1. Lecture Week 5 – Perception and Organisation in Typography Perception refers to the cognitive processes through which we observe, decode, and make sense of visual information. In typography, perception involves more than simply reading words — it includes how text interacts with images, color, shapes, and spatial arrangement. Effective typography guides viewer attention, establishes visual pathways, and supports smooth information processing. Contrast is a fundamental strategy for building hierarchy and emphasis. According to typographic theorist Carl Dair , contrast can be applied in several ways, each shaping the viewing experience differently: Size – Larger type grabs atte...

    Video and Sound Production - Project 2 || 29/10/2025 – 21/11/2025 (Week 6 – Week 9) || Yang Shumeng 0378848 || Interactive Design / Bachelor of Design (Honours) in Creative Media || Video and Sound Production - Project 2 TABLE OF CONTENTS 1. Lectures 2. Instructions 3. Process Work 4. Feedback 5. Reflection 1. Lecture： Mise en Scène “Mise en scène,” meaning “putting on stage” in French, refers to everything visible within the frame and how these components are arranged to convey story, mood, and emotion. It forms the core of visual storytelling, enabling audiences to interpret meaning beyond spoken dialogue. Key Elements: Setting and Environment: Establish the narrative world and shape tone and atmosphere. Props: Symbolize ideas, support the plot, and reveal character details. Costume and Makeup: Communicate identity, status, personality, and emotional state. Lighting: Directs viewer attention and builds mood through contrast, shadows, and highlights. ...

    INTERACTIVE DESIGN - Exercise 3 || 22/10/2025 – 2/11/2025 (Week 5 – Week 6) || Yang Shumeng 0378848 || Interactive Design / Bachelor of Design (Honours) in Creative Media || Interactive Design / Exercise 3 TABLE OF CONTENTS 1 . Instructions 2 . Process Work

    INTERACTIVE DESIGN -  Project 1 || 15/10/2025 – 1/11/2025 (Week 4 – Week 6) || Yang Shumeng 0378848 || Interactive Design / Bachelor of Design (Honours) in Creative Media || Interactive Design / Project 1 TABLE OF CONTENTS 1. Lectures 2. Instructions 3. Process Work 4.   Reflection   Lecture Summary: HTML & CSS Fundamentals 1. ID Attribute The ID attribute gives a unique identity to an HTML element. Each page can only have one element per ID — duplicates are not allowed. Main purposes: Apply a unique style to a specific element (e.g., highlight one paragraph differently). Target elements precisely in CSS or JavaScript. Example: < p id = "intro" >Welcome! </ p > 2. Class Attribute The class attribute groups elements that share the same styling or behavior. Multiple elements can use the same class name . Commonly used to style similar sections, such as important notes or tooltips . Example: < p...