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
Week 1
Briefing towards the module expectations, on what stream of design that we want to explore more, also showcase past projects that we are proud of.
Week 2
After week 1's class, I have dig in to my previous works that I genuinely enjoy making, also explore on what section of my field that I wish to explore more.
The two interactive websites I am inspired of is Active Theory and Off Brand Studio. They made several interactive websites for brands as well, the most well known one is Lando Norris Interactive Website that is also quite popular among the social media world.
Week 3
Based on the feedback I received from Mr Hafiz on the previous week, I went through several other websites that actually shows some immersive story telling. Updated in my new pitch deck, I took another inspiration from another two website, Saint Of Pitch and also https://storytime.xyzal.com/
Research Findings:
Saint of Pitch
|
| Fig 1.2 - Frame 2 Story |
Santioni Spirits uses a combination of scroll-driven storytelling and interactive animation to guide users through a cinematic narrative. Rather than navigating through separate pages, users scroll to progress through different scenes, following a saint-like character as he travels through a mysterious landscape. The website incorporates comic-book-inspired illustrations, camera movements, parallax effects and animated environments to create a sense of depth and movement.
Its transitions rely on visual continuity, where elements such as portals, shapes and environmental objects become visual bridges between scenes, making the progression feel seamless rather than like a series of disconnected images. The website also uses gesture-based interactions to make users active participants in the story. For example, users can hold and move their cursor to interact with objects, select a bottle and hold to pour a drink for the character. These actions are directly connected to the narrative rather than serving as decorative interactions.
Story time with Nigel
|
| Fig 2.1 - Landing Screen |
|
| Fig 2.2 - User Guide |
|
| Fig 2.3 - StoryMode |
The website introduces a collection of illustrated stories, each with its own characters and narrative. Users first enter a bedtime-themed environment, where they can adjust the night-light brightness and choose a story to read. Its visual direction uses soft lighting, illustrated characters, layered backgrounds and a storybook aesthetic to create a calming atmosphere. The storytelling is structured around reading pages, allowing children and parents to progress through the narrative at their own pace.
The transitions and interactions are more focused on page-based storytelling and atmosphere rather than complex animations. Users can move through the story like a digital picture book, with illustrated scenes providing the visual context for each part of the narrative. The website also incorporates audio elements and reading guidance, encouraging parents to use a soft-spoken voice and emphasise certain words to create a soothing experience.Week 4 - Proposal Finalization
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/
Reflection
....
Comments
Post a Comment