Advanced Interactive Design - Project 1 : Thematic Interactive Website Proposal
23/9/2024 - 16/10/2024 ( Week 1 - Week 4 )
Ho Winnie / 0364866
Advanced Interactive Design / Bachelor's of Design Honors In Creative Media
Project 1 : Thematic Interactive Website Proposal
1. Thematic Interactive Website Ideas
Requirement :
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.
Students are required to create a thematic interactive website proposal with the topic of their choice that can be based on:
1. A specific product of a particular brand launch/special (i.e.: Nike brand new shoe), Beauty product launch (i.e.: Sephora compact powder,
2. Movie promotion
3. Game release promotion.
4. Gallery/Museum exhibit launch
5. Band/Artist latest release.
Or anything else you have in mind (subject to the module coordinator’s
approval)
Submission
1. Completed UI/UX proposal document.
2. All processes (concept, wireframes, mood board, flow chart)
Progression :
Mr Shamul instructed us to brainstorm of 5 possible ideas we can do for our thematic interactive website with a compilation of visual references and website reference. For me, I chose to focus more on product based website as there is more room for details. Below are my shortlisted ideas and proposal :
1. Miss Dior Eau de Parfum
2. Starbucks Sakura Seasonal Drink
3. Doodles x Crocs Launch
4. League of Legends Star Guardian Skin Release
5. EXO Album Launch
First Draft of Proposal :
After feedback session with Mr Shamsul, he suggested that I do idea 3 which is the Doodles x Crocs launch due to its interesting art style which I personally prefer too so I begun more research work to finalize my proposal
2. Final Proposal
Concept :
The concept behind the Doodles x Crocs Interactive Website is to create an engaging, playful digital experience that reflects the vibrant and imaginative nature of both brands. The website serves as a dynamic journey for users to explore the collaboration in a way that combines art, fun, and interactive elements, inviting them to immerse themselves in the whimsical Doodles universe while discovering the unique Crocs collection.
Key aspects of the concept include:
Interactive Exploration: Each section of the site is designed to be interactive, allowing users to engage with the content in a meaningful way. From clickable Crocs shoes that serve as navigation buttons to interactive animations (like finding the clickable shoe on the loading screen), the goal is to keep users actively involved in the experience.
Storytelling and Visual Delight: The website uses animation and storytelling to walk users through the origin of the Doodles x Crocs collaboration, showing how the worlds of quirky Doodles characters and the iconic Crocs footwear merged to create a one-of-a-kind collection. Every page, from the History section to the ComplexCon feature, unfolds the narrative while visually representing the creativity and vibrancy of both brands.
Creative Showcases: The site highlights key elements of the collaboration, such as the Crocs Box Digital Collectibles, the playful Jibbitz charms, and the artist behind Doodles. These sections not only inform but also allow users to interact with the product in a way that mirrors the physical act of wearing Crocs or collecting Doodles art, all while featuring exclusive content like digital art reveals and event recaps.
Engagement and Immersion: The site blends art and interaction to foster a sense of community and engagement. Users don’t just learn about the collaboration—they experience it, from the hovering animation of a shoe to the clickable Jibbitz that offer more details. It’s about creating a world where art, fashion, and digital culture collide, inviting users to play, explore, and connect with the brand.
Bridging Digital and Physical Worlds: The concept also extends beyond digital art. By featuring sections like the ComplexCon recap and exclusive Jibbitz, the website bridges the gap between digital interaction and real-world products, encouraging users to explore both virtual collectibles and physical items like the Crocs shoes themselves.
I will mainly focus on the product and the artist of this collaboration , since the Doodles x Crocs collaboration merges the physical and digital realms, an interactive website could highlight this fusion effectively. It could showcase the Crocs Box digital collectibles, artist, and Jibbitz charms through animations, and interactive previews. The soft, cartoonish art style allows for the creation of animated elements and interactive graphics that can enhance user engagement. For instance, characters and objects can be animated to move with user interactions upon clicking.
Moodboard :
I mainly referenced the artstyle from the pictures used during the collaboration released by the artist and Crocs.
Color Palette & Typographic Styles :
Low Fidelity Wireframe :
User Flow :
3. Feedback
Week 3 : All ideas are quite interesting but Mr Shamsul personally prefers Idea 3 which is the Crocs x Doodles collaboration because of the art style, which is my favorite too
Week 4 : The wireframe is good and everything is ready for submission, just update the blog.
4. Reflection
4. Reflection
Experience:
Over the past four weeks, I had the opportunity to design a thematic website based entirely on my own vision, which allowed me to explore creative freedom in exciting ways. Under the guidance of Mr. Shamsul, I dived into Adobe Animate, a software I had never used before, and it presented both challenges and rewards. Through this process, I expanded my skill set and gained a deeper understanding of interactive website design, an area that had always intrigued me. Choosing the Crocs x Doodles collaboration as the theme for my project also pushed me to revisit and refine my drawing skills, as I hand-drew each vector for the wireframe to add a personal touch.
Observation:
The process of finding inspiration and gathering references was both stimulating and enlightening. It allowed me to connect the dots on how engaging, interactive websites are crafted. As I explored different ideas, I realized how crucial research and creative exploration were in bringing the project to life. The hands-on experience of seeing the project evolve from concept to execution was incredibly rewarding, and it was satisfying to witness how each piece came together as I moved forward.
Findings:
This journey of creative exploration and technical learning has led to unexpected growth. Adobe Animate proved to be an excellent tool for designing interactive websites, and combining this with personal touches, like hand-drawing vectors, added uniqueness to the project. The freedom to design and execute a project based on my vision not only honed my technical skills but also enhanced my ability to creatively explore and adapt, fostering growth in ways I hadn’t anticipated.
QUICKLINKS
Comments
Post a Comment