Advanced Interactive Design: Task 1 Proposal
SHIMANLIN,（0375858)
Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media
Task 1 Proposal
TABLE OF CONTENTS
Instruction
Lecture
Exercises
Feedback
Reflection
INSTRUCTIONS
TASK
Description
Thematic Interactive Website Proposal for Brand Engagement. A thematic
interactive website is a website that focuses on a specific theme or
concept with the aim of incorporating interactive elements to interact
with users. Most such websites utilize multimedia such as videos,
animations, interactive graphics displayed on the page, or other
clickable elements which have interactive components that provoke the
user. This dynamic experience is meant to keep the user interested in
addition to the thematic concept. Themes in such websites vary from
educational, cultural, promotional campaigns to product launch. For
example, a thematic interactive site could be a museum. Users can go
through a virtual exhibition space through interactive tours, games
simulation, or questionnaires. In the event that it is a movie, the site
can simulate movie universes offering virtual tours through time and
space, or any other subject previously created in the movie. The aim of
any such site is to keep the user engaged in the medium through
interactive exploration.
Requirements
Students are required to create a thematic interactive website proposal
with the topic of their choice that can be based on:
A specific product of a particular brand launch/special (i.e.: Nike
brand new shoe), Beauty product launch (i.e.: Sephora compact powder)
Movie promotion
Game release promotion.
Gallery/Museum exhibit launch
Band/Artist latest release.
Or anything else you have in mind (subject to the module coordinator’s
approval)
Submission
Completed UI/UX proposal document.
All processes (concept, wireframes, mood board, flow chart/site map)
Prototype
My 3 ideas
To start off, I chose Interactive Website Experience as my topic.
Before deciding on my final direction, I first developed three
different concepts that focused on creating immersive and engaging
user experiences.
- Idea 1 - Virtual Ocean Exploration Website
- Idea 2 - Abandoned Hotel Horror Interactive Website
The Abandoned Hotel Horror Interactive Website creates a cinematic horror experience that encourages users to uncover hidden secrets by exploring rooms and collecting clues.
- Idea 3 - Virtual Fashion Week Experience
The Virtual Fashion Week Experience offers a luxury digital exhibition where users can discover fashion collections through an elegant and immersive online showcase.
For each concept, I analysed the visual
style, user experience, interaction design, animations, and
storytelling elements.
After evaluating the advantages of each option, I decided to adopt the virtual ocean exploration website solution. This solution offered the best opportunity for immersive storytelling, creative animation, and interactive user experience.
Task 1 Website Final Proposal Canva Slides:
Task 1 Material Creation:
I drew it in Procreate and imported it into Animate.
Material Thumbnails
Marine Animals & Main Characters
Trash
Background
Because the workload of purely hand-drawn work is enormous, I first created a low-fidelity figma.（On the page 2 of Figma）
Based on the initial wireframe planning, I built the website prototype in Figma and incorporated various interactive designs to enhance the user experience.
Task 1 Website Final Prototype:
FEEDBACK
Week 3
Specific feedback: Mr Shamsul said that my ocean proposal was good, but the visual content must be created by myself.
Week 8
Specific feedback: Mr Shamsul said that the assets I created myself were good and I could proceed with creating the Figma prototype.
Week 10
Specific feedback: Mr Shamsul said that the interactions in my Figma prototype were acceptable.
REFLECTIONS
Experiences
Throughout this project, I experienced the full process of developing a thematic interactive website, from concept development to prototype creation. I explored three different ideas before selecting the Virtual Ocean Exploration Website as my final direction. This process helped me understand how to evaluate concepts based on storytelling potential, visual style, and user engagement.
During the design process, I gained experience in creating original visual assets by drawing marine animals, characters, backgrounds, and environmental elements in Procreate before importing them into Adobe Animate. I also learned how to organize and prepare digital assets for interactive website development.
I further developed my skills in UI/UX design by creating wireframes and prototypes in Figma. Through designing interactive elements and planning the website flow, I learned how layout, navigation, and animation can work together to create an immersive user experience.
Observations
During the project, I observed that a strong concept and visual direction are important for creating an engaging interactive website. Among the three initial ideas, the ocean exploration concept provided more opportunities for storytelling, animation, and interactive experiences.
I also observed that creating a fully hand-drawn interactive website requires a large amount of time and resources. Therefore, developing a low-fidelity wireframe before creating the final prototype helped me organize the structure, user flow, and interaction design more effectively.
Findings
Through this project, I found that interactive website design requires a balance between visual creativity, storytelling, and usability. A successful website should not only have attractive visuals but also provide clear navigation and meaningful interactions for users.
I also found that planning and prototyping are essential steps in the design process. By creating the Figma prototype before moving into further development, I was able to identify potential improvements and ensure that the overall user experience matched the intended concept. This project improved my understanding of interactive design and strengthened my ability to develop immersive digital experiences.
Comments
Post a Comment