Advanced Interactive Design - Task 02
22.10.2024 - 06.11.2024 (Week 5 - Week 8)
Sorcha Griselda / 0353056
Advanced Interactive Design / Bachelor of Design in Creative Media / Taylor's University
Task 02 | Interaction Design Planning and Prototype
INSTRUCTION
Exercise 04 | Buttons & Pages
For the past three weeks, Mr. Shamsul has been guiding us step-by-step through the process of designing interactive elements for our websites. He’s shown us how to use Adobe Animate to develop and bring buttons to life, transforming basic navigational tools into engaging, clickable elements that add to the user experience. In addition to buttons, he has taught us how to structure our web pages by creating and organizing different sections. This has involved not only laying out content but also understanding the flow and visual hierarchy needed to make each page intuitive and visually appealing.
 |
| Fig 1.1 Button & Pages Process | Adobe Animate |
Task 02 | Interaction Design Planning and Prototype
For this task, we are required to work on our 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.
I began creating the wireframe in Figma, working through each page
individually and planning the animations and transitions for each. Much of my
inspiration came from ideas I found on Pinterest, while I sourced elements
like images and background visuals from Unsplash
to give the design a polished, cohesive feel. This process allowed me to
refine the visual style and interactive elements gradually, ensuring each page
aligned with the overall look and functionality I wanted.
 |
| Fig 1.2 Pinterest Mood Board |
 |
| Fig 1.3 Initial Wireframe |
When I first started building my wireframe, I kept things straightforward, prioritizing function over appearance. But as I continued, I noticed the design felt too simple and didn’t have the interactive vibe I wanted for an immersive experience. This realization led me to rethink the layout and add elements that would make the site feel more engaging and dynamic.
To bring this vision to life, I started refining key components, introducing smooth transitions, interactive features, and a more visually rich background inspired by Van Gogh’s artistic style. I kept the original structure to maintain cohesion but made strategic updates to add layers of depth and flow. For example, I adjusted image placements, added scroll animations, and created a more guided visual path, making the site feel less like a static page and more like an artistic journey. In the end, the wireframe evolved into a design that felt both polished and immersive, capturing the interactive experience I had envisioned from the start.
Final Submissions
Presentation Slides:
Task 02 | Interaction Design Planning and Prototype by Sorcha Griselda
Walk through Presentation:
Final Wireframe:
Final Flowchart:
|
| Fig 1.4 Final Flowchart |
REFLECTION
Experience
This task was enjoyable overall, though I initially struggled to align my
original idea and mood board with the project requirements. As I worked
through it, I reimagined my concept, which helped me move forward. Creating
the background for the product display took a lot of time since I had to
select specific elements from various images individually, but once that was
complete, putting it all together according to my Task 1 wireframe was pretty
enjoyable. Seeing the wireframe come to life was a rewarding experience.
Working in Adobe Animate was challenging, especially since it was my first
time using it, and I initially had a hard time keeping up in class. I
dedicated extra time at home to familiarize myself with the software, which
helped me follow along better in subsequent sessions. Overall, this project
pushed me to think creatively, and I enjoyed the process.
Observations
Throughout this task, I noticed how important font choices are in giving the
website personality and expression. The color scheme also plays a crucial
role, as it sets the tone for the website and can even tell a story on its
own. I also observed that mastering a platform like Adobe Animate requires
practice and hands-on experience. Learning the basics once or twice wasn’t
enough to build confidence, and I feel a bit anxious about the final project
since it involves creating a full website.
Findings
I discovered that building a website around something you’re passionate about
makes the process smoother and more enjoyable because you understand the
content deeply. I also found that time management was essential; working
steadily on the project each day helped me stay on track and meet deadlines.
Finally, I realized that each step in the design process is necessary for a
cohesive final product. Without these structured steps, diving straight into
building the website would have been overwhelming. This project has given me a
newfound appreciation for websites, as I now understand the hard work and
dedication that go into creating a well-designed site.
Comments
Post a Comment