Advanced Interactive Design - Project 2 : Interaction Design Planning & Prototype
16/10/2024 - 13/11/2024 ( Week 5 - Week 8 )
Ho Winnie / 0364866
Advanced Interactive Design / Bachelor's of Design Honors In Creative Media
Project 2 : Interaction Design Planning & Prototype
1. Project 2 : Interaction Design Planning & Prototype
Requirements :
Students are required to work on their visual design and start planning their website’s interactive design elements and features. Unlike traditional static website, when it comes to interactive design where animations are present, the plan not only should include the layout visuals but also the animation example or reference. Students can build their animation or user-reference animation to demonstrate the intended idea.
- Walkthrough Video presenting the plan and
showing the animation examples and/or references.
-Online posts in your E-portfolio as your
reflective studies with links to any resource involved in the creating of the
plan. (i.e.: Figma link, Miro link, etc.)
Progression : Interaction Design Planning
My website's idea revolves around Doodles x Crocs collaboration and it would be tilted more around playful 2D elements, with a pastel styled color and illustration style would follow the artist. Below documents my mood board with art and color references.
 |
| Fig 1.1 My Mood board |
In task 1, I created a wireframe to showcase the different screens but I made some changes to make the animation easier and more feasible, especially on the history and artist introduction page. Below documents my final wireframe for the website.
Fig 1.2 Wireframes
Regarding the flow chart of my website, the user will start on the introduction page where they need to find the clickable crocs shoe and that will be the button that will lead the users to the next page which is the history page. There will be buttons like "Click Next" on the history page that will narrate how this collaboration came about. After that, they will be directed to the home page where they are 4 clickable crocs shoes - each representing a different section.
Section 1 : About The Artist - Users will have a click next button that will bring them to a next page that introduces the artist behind doodles. After that, they are able to click on the homepage that brings them back to the main page.
Section 2 : Crocs Box Digital Collactables - Users will see 3 mysterious box they can click and each box will pop up a different digital collactables with a brief introduction to it. Similarly, there will be a homepage button they can click on.
Section 3 : Doodles x Crocs Jibbitz - Users will be able to click on the various jibbitz attached to the crocs shoes and upon clicking, a brief introduction about the jibbitz will show up, and there will be a back button for them to go back to the page with all the jibbitz, as well as a homepage button.
Section 4 : Doodles x Complexcon - Users will first be brought to a page where the introduction to Complexcon is explained. They are able to click on "Next" buttons that brings them through different images about Doodles at Complexcon.
 |
| Fig 1.3 Flowchart of website |
I started off by drawing the introduction page first, starting with the midground than the foreground and lastly the background. I illustrated the Doodles and Crocs logo and added clouds and gradient factors to it, making the elements looks more complete.
 |
| Fig 1.4 Illustration process of introduction page |
For my animation, I decided to do a rainbow flowing across the sky and the crocs shoes coming down just like the reference below. On the homepage, the shoes will be floating.
Fig 1.5 Introduction page animation style reference
Next, I proceeded to illustrate the history page which I personally find it the hardest to do since there is many elements inside, especially the complexity of the background. I did some changes at the end when putting in the textbox that will detail how this collaboration came along as my original drawing of the characters block the box.
 |
| Fig 1.6 History Page Illustration Process |
For the animation of history pages I plan to cloud passing and flowing style since my website is more dreamy and fun, which I felt that the moving clouds can integrate well with the artstyle.
Fig 1.7 History Page Animation Reference
For the next section, I worked on the Home Page where it will feature 4 different clickable crocs shoe, each bringing them to a new section. I started with drawing the main character first than followed by adding the crocs shoes, the doodleverse logo than the background and lastly the buttons.
 |
| Fig 1.8 Design Process of Home Page |
 |
| Fig 1.8 Vectors Drawing for Digital Collactables |
I continued to refine the pages by adding in background, page titles as well as the mystery boxes. I tried to maintain the same artstyle throughout, for the animation , when users click on the box, the crocs box will open and pop up the artwork.
 |
| Fig 1.9 Completed Digital Collactables Section |
Fig 2.0 Animation Reference for Box Opening
For the next section, I worked on the Doodles x Crocs Jibbitz where i drew out six different iconic jibbitz released for this collection and featured a simple but direct way to display them - which is on the crocs shoes. Each Jibbitz will be made into a button where users can click and it will direct them to a separate page, explaining the details of each Jibbitz. The animation reference for the section will be the Jibbitz popping up one by one on the crocs shoes.
 |
| Fig 2.1 Completed Crocs Jibbitz Section |
Fig 2.2 Animation Reference for Jibbitz appearing
For the next section, I worked on the Doodles x Complexcon section where users will land on the main page which the Doodles van will slide down the rainbow. The signboards will be clickable buttons where users can either choose to move on to the Complexcon section or back to homepage.
 |
| Fig 2.3 Completed Crocs x Complexcon section Fig 2.4 Animation Reference for Doodles Van |
 |
| Fig 2.5 Artist Introduction Page |
 |
| Fig 2.6 Illustrator Workspace |
2. Prototyping In Figma
Next, I moved into Figma to start prototyping the website, creating multiple screens for each section to build a cohesive and interactive user flow. I focused on designing a seamless hover effect that slightly enlarges objects upon interaction, adding a sense of depth and responsiveness to the interface.
To refine the effect, I experimented with subtle scaling percentages, shadow overlays, and brightness adjustments, ensuring the hover animation feels natural and intuitive. I also tested various transition speeds and easing styles to make the effect both smooth and engaging. This layered approach creates a visually dynamic experience, drawing users' attention to key elements without being overly distracting.
Fig 2.7 Hover Effect on Crocs Shoes
I created all the buttons and linked the pages up together, ensuring that all clicks leads to the right places, mimicking the flow of the real website.
 |
| Fig 2.8 Prototype Workspace in Figma |
Final Presentation Slides :
View My Figma Prototype :
View My Figma File :
Final Presentation Video :
3.Feedbacks
Week 5:
The current prototype and wireframing you have now is good enough for submission.
4.Reflection
Experience:
Working on this project involved drawing each vector and element individually, coloring them, and carefully applying shades to bring out the right details. This was a time-intensive and challenging process, especially as I constructed the midground, foreground, and background for each screen in segmented sections. Planning in advance was essential to ensure each element fit well together and conveyed the intended theme. The task required meticulous focus and precision, as each vector needed to be consistent with the overall style and aesthetic of the project.
Observations:
Creating an interactive thematic website demanded a different approach than typical web design, as I had to consider how animations would blend with the illustrations and overall design. Unlike standard websites, this one required animated transitions and interactive elements, meaning each drawing needed to be ready for motion and interaction. This additional layer of planning led me to realize how important it is to account for animation while still in the illustration phase. It was fascinating to see how the addition of animation potential could change how I approached each vector and element.
Findings:
Through this project, I learned the critical role of time management when dealing with multi-layered projects that involve several steps, including drawing, prototyping, animation referencing, and presentation. Starting the project early gave me the room to refine each step and ensure it aligned with my vision of a fun and quirky Doodles-inspired style. I was satisfied with the outcome, as it turned out as I had imagined. Now, as I move forward with finalizing the animation in Adobe Animate, I feel prepared to bring this concept to life fully, having laid a solid groundwork through the initial phases.
QUICKLINKS
Comments
Post a Comment