Design Exploration: Task 2 Project Development & Presentation Brief

on

20.09.26- 20.12.26

Celine Christabelle Patricia / 0374872 

Major Project / Bachelors of Design (Hons) in Creative Media / The Design School

Design Exploration

Table Contents

1. Instructions

2. Progress

3. Feedback

4. Reflection

Instructions

Progress

Recap of Week 4 - Proposal Finalization 

Week 5 & Week 6

Based on the feedback I received on week 5, I decided to start making the framework for my design exploration project, as the feedback given also gave me a larger image on how I will do for my project. 


Research Findings:


I began exploring different transition techniques commonly used in filmmaking to understand how one scene can connect naturally to another. According to StudioBinder, match cuts establish visual or thematic relationships between two scenes through similarities in shapes, colors, composition or movement. Three techniques that caught my attention were graphic match cuts, match on action and eye line matches. Graphic match cuts connect scenes through similar visual elements, while match on action maintains continuity by cutting during an ongoing movement. Eye line matches, on the other hand, use a character's gaze to guide the audience towards the next subject or scene. These techniques demonstrate how transitions can do more than simply change scenes; they can also strengthen the narrative and maintain visual continuity.

IVRESS (brand.ivress.co.jp)


Fig 4.1 - Scene 1

Fig 4.2 - Scene 1, Transition Object Approach

Fig 4.3 - Transition 


Fig 4.4 - Scene Change


Fig 4.4 - Scene 2

Its storytelling uses scrolling as the main navigation method, guiding users through a sequence of illustrated scenes. I was particularly interested in how visual elements and movements carry across different scenes, creating a continuous narrative rather than making each scene feel disconnected. The website also incorporates click, hold and tap interactions, allowing users to participate in the storytelling process. This inspired me to explore graphic match cuts and match on action as my primary transition techniques, using scrolling to trigger the progression between scenes. I want to investigate how similar shapes and continuous movements can communicate changes in time, particularly when depicting different stages of a character's life, without interrupting the user's immersion.

Hence, after all the research I proceed to continue on the story building process. 

Story Flow

The narrative is structured around five stages of life, with each stage consisting of two scenes, resulting in a total of ten scenes. Each transition represents a significant change in the character's life, using shape-based or motion-based continuity to connect the scenes. User interactions such as holding, scrolling and clicking trigger specific moments in the narrative. The final scene creates a circular narrative by transitioning back to the beginning, symbolizing the cycle of life.

Narrative will be divided into 5 stages (can refer to the previous document)

Week 7 

By this week, I proceed to the storyboard process. 

Fig 5.1 - Home Screen

Fig 5.2 - Storyboard of Stage 1


I realize that my storyboard here doesn't really show a nice flow to continue to the next scene. The initial idea I made previously in slides did not make sense to continue to the next scene. Hence, I start to search for other references through Pinterest board so I can have the large image on how will my story flow be. 

Fig 5.3 - Pinterest Board - https://pin.it/5aemWYA4p

I have these references to have my mind connecting every scenes using the Shape Transitions. Here are my progress for my storyboard. I change the transitions that I made initially, though I still use the same storyline as what it was planned. 

Fig 5.4 - Storyboard making (include transitions)

In this board, I connected the scenes simultaneously, from being a a newborn baby and slowly turning into a teenager. Here I integrate the shape transition from the hands. Moreover, I would use morphing technique from the crawling baby to a walking toddler, and a child who goes to school, instead of using frame to frame. 

Then, it continued to a teenager in a school, here there will be a slight animation of the girl blinking reading a book, then click button will appear to change her expression. After that,  as users scroll they will zoom to the girls eye, changing into a camera, which shows another state of being a teenager, falling in love. 


Fig 5.5 - Storyboard making (include transitions)

As the camera shows, the rain will begin to show, users scroll, and then here there will be a parallax effect, making as if the girl is behind the guy, raining in sadness. Then, here comes the transition from a teenager to an office worker. As the users click more bubbles, she grows older and changes her features. 

Fig 5.6 - Storyboard making (include transitions)

As Mr Hafiz told me to still keep parallax in my research process, so I integrate this in one of my storytelling transition methods. So from the office working, the "camera" slowly pans backwards, showing the office environment, and then through the door it transitions to a wedding held in church, showing the groom and bride, this is for the adulthood stage

Feedback

Week 2

Based on the brief pitch deck I have presented, find examples of interactive storytelling. Also find sources that actually explores more about story telling, because currently the reference I showed are just interactive websites that doesn't really have story telling essence. Mr Hafiz showed a reference of parallax story telling website which I also can refer to  https://hobolobo.net/

Week 5

Based on the previous weeks feedback, rather than relying solely on parallax, which has become a widely adopted technique in interactive websites, explore alternative methods of establishing optical depth and spatial immersion. Transitions can draw inspiration from cinematic techniques, using established visual conventions to guide users between scenes while considering whether the transition is reversible and how continuity can be maintained without disrupting immersion. 

Drawing from existing research in virtual reality, particularly the concept of presence, explore how interaction can strengthen the user's sense of involvement within the environment, as seen in familiar interactive experiences such as Minecraft. Furthermore, investigate how animation and user interaction can evoke stronger emotional responses, potentially creating moments of anticipation, excitement or even goosebumps. User testing could also incorporate video recordings of participants' interactions to observe their behavioral responses and evaluate whether the experience successfully establishes immersion.

C2A: Have more research on different transition methods

Week 7

Document your research process in the e-portfolio by including recordings of your explorations, relevant references and sources, as well as key takeaways from what you have learned. Parallax can still be considered as a supporting technique, so keep it in mind during your exploration. By Weeks 9–10, I would like to see a working transition between Scene 1 and Scene 2. At this stage, prioritize experimenting with and refining the transition techniques rather than spending too much time on the illustrations or art direction. The main focus should be on demonstrating how the two scenes connect seamlessly through movement, visual continuity and interaction.

Week 8

The example I provided focuses more on a silhouette-style visual. A video reference demonstrating the parallax effect would be more helpful, particularly showing how the foreground and midground layers move in relation to each other to create depth and movement.

Reflection

....

Comments

Post a Comment