Project Name
Longya Men Re-Identified
Project Description
Why was it called Longya Men? Who created that name? What does it have to do with us Singaporeans? Continue reading [Narrative Interaction] Final Project
Project Name
Longya Men Re-Identified
Project Description
Why was it called Longya Men? Who created that name? What does it have to do with us Singaporeans? Continue reading [Narrative Interaction] Final Project
For each of the object, there should be a background sound effects (ambience) to help enhance user’s experience as they navigate through the website. The ambience should depict what the setting of that object should sound like. Continue reading [Narrative Interaction] Process – Sound Effects & Voice Over
For the introduction video, I used still images to tell the story of a modern Singaporean girl who was taught about Raffles in school. She interacted with her Grandmother and discovered a box with ‘Longya Men’ written on it. This section of the website is photography-based as it should portray the present time. Continue reading [Narrative Interaction] Process – Intro Video
The web pages below are the final mock ups for Longya Men Re-Identified. Since the transition/animation of the website is hard to be expressed using still graphics, I created different frames as a guide for me to visualize the final product. Continue reading [Narrative Interaction] Process – Final Mock Ups
These are the updated web mock ups for Longya Men Re-Identified. I have removed most of the colours and only coloured parts that highlight that section of the narrative. Continue reading [Narrative Interaction] Process – Mock Up Updates
To add more content into my website, I visited several places to have better understanding of the history and take photos of the artefacts and images/sketches they have in the past. Continue reading [Narrative Interaction] Process – Info-Hunting
Adobe Muse Basic : https://www.youtube.com/watch?v=CKL_nGZ-DPI
Basic Motion Scroll : https://www.youtube.com/watch?v=KJMi5l9Ru-g
Slow Background Speed : https://www.youtube.com/watch?v=pXS1rLhcLvw
Dynamic Changing Background : https://www.youtube.com/watch?v=N0A0bdjpMrI
Full Screen Video Background : https://www.youtube.com/watch?v=YX8ZHpL3W_A
Background Video (Mask Text) : https://www.youtube.com/watch?v=8XmHBHRIzT8
Video Background : https://www.youtube.com/watch?v=uL6zPejT5GM
Image Hove Overlay : https://www.youtube.com/watch?v=hD-D_9-AhCE
Animated Rollover Buttons : https://www.youtube.com/watch?v=C1WhhAxKS-I
Advanced State Transitions (Button) : https://www.youtube.com/watch?v=cccc9HjiUwo
State Transition Buttons : https://www.youtube.com/watch?v=HJySNZB2CIo
Animated Rollover Buttons : https://www.youtube.com/watch?v=C1WhhAxKS-I
Parallax Background (Movement on Hover) : https://www.youtube.com/watch?v=0getLxHC2mU
Blurry to Non-Blurry Scroll Effect : https://www.youtube.com/watch?v=VnSOaaNpB_E
Scroll Zoom Widget : https://www.youtube.com/watch?v=8VDo6fflSTU
Focus-Our BackDrop : https://www.youtube.com/watch?v=GFh42syUIVg
Pre-Loader : https://www.youtube.com/watch?v=AVHcPi5d3Gs
Advanced Pre-Loader : https://www.youtube.com/watch?v=57y8rfVkACU
Load Page at Anchor : http://museresources.com/load-page-at-anchor.html
Flying Text : https://www.youtube.com/watch?v=CcX6p_a9jUc
Use Jquery & Muse : https://www.youtube.com/watch?v=s1LL8qC8eZs
Image Fade In as you scroll : https://www.youtube.com/watch?v=0KeeHpQioi8
Smooth Page Transition : https://www.youtube.com/watch?v=UMq0N8RFSkk
On Scroll Audio Effects : http://resources.muse.adobe.com/products/on-scroll-audio-effects
On Scroll Audio Effects : https://www.youtube.com/watch?v=55AAafahjtE
Adobe Muse Dynamic Content : http://stackoverflow.com/questions/26767916/adobe-muse-dynamic-content-change
The screens below are my first phase of mock ups for the website as I tried to visualise how they will look like. The designs are not panel-by-panel but rather frame-by-frame as it is quite hard to also include the animation/transition of the elements.
Continue reading [Narrative Interaction] Process – Web Mock Ups 1
*Open image on new tab to zoom*
A super late post is finally here. Continue reading [Narrative Interaction] Process – Storyboard & Wireframe