ADVANCED INTERACTIVE DESIGN TASK 2: INTERACTION DESIGN PLANNING AND PROTOTYPE

23.05.2025 - 13.06.2025  / Week 5 -Week 8

Emily Goh Jin Yee / 0357722 / Bachelor of Design (Honours) in Creative Media 

Advanced Interactive Design / DST60804 / Section 02

Task 2: Interaction Design Planning and Prototype

TABLE OF CONTENTS

1. INSTRUCTIONS

2. EXERCISES

3. TASKS

4. FEEDBACK

5. REFLECTION

INSTRUCTIONS


EXERCISES

All W1-W9 exercises are completed in Task 1.

TASKS

TASK 2: INTERACTION DESIGN PLANNING AND PROTOTYPE

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.



For this task, I decided to follow a consistent visual and mood direction by using recurring elements—primarily stars—throughout the design. This decision was made after receiving feedback to maintain a more cohesive theme. I chose to use the same background across the entire website to enhance this consistency. The main visual motifs include stars, space, and subtle hints of roses, all inspired by the music videos(Alonica & XXL) filmed for a beautiful blur album. These elements were selected to reflect the album’s emotional themes, particularly those of heartbreak and introspection.


For the color palette, I narrowed it down to four main colors, with navy blue being the primary shade used in gradients. I kept the images in a similar tone or in black and white to evoke a sense of faded memories and nostalgia. For typography, I combined two styles: a clean, simple font with a handwritten feel—used for journal entries, captions, and lyrics—to convey intimacy and emotion; and Jakarta Sans, chosen for its clarity and structure, which works well for menus and instructions to ensure usability.


As for the user flow chart, I made slight adjustments based on my newly designed prototype. While my initial wireframe sketches featured different elements and layouts, the overall flow remains quite similar. However, I updated some of the navigation text and made small functional changes—for example, the lyrics now appear with a related photo after clicking on a star. These refinements were made to better align the flow with the updated design and enhance the interactive experience.

My hi-fi prototype is designed with a clear and smooth style, aiming to reflect the emotional tone of the album. Slow and subtle animations are used throughout to reinforce the “blurred” atmosphere and the melancholic, introspective mood of the music. The overall experience is intended to feel immersive, gentle, and reflective—much like drifting through memories.





Presentation link here



FEEDBACK


WEEK 5

no feedback//online

WEEK 6

Specific Feedback(task 1)

  • wireframe is messy
  • theme should be more consistent
  • more neater layout
  • neater text placement
  • less playful design(mature)
  • need to focus on the theme because now feels like each page is different theme
  • (after understanding the concept) no need to eliminate any pages except closing page
  • research more on nostalgic theme
  • ensure 'write you blur' is understandable, if not clear enough change the term
  • don't include a 'thank you' page as this doesn't need to 'close'
  • include a menu or navigation(hamburger/somewhere fixed)
  • footer of socials 

WEEK 7

no feedback//online

WEEK 8

no class//submission


after submission feedbacks:

WEEK 9

Specific Feedback

  • wireframe is overall fine and doable
  • layout of the main screen feels messy, no design principle applied
  • navigation bar not very nice, could be better
  • can change colour when hover instead of having the lines under text
  • can tell that the theme is minimalistic yet have polaroid as the main element
  • background animation can be done on adobe animate or used a video but it might take up a lot of space 
  • create a folder and have separate files, this saves more space, avoids crash and lost of whole project
  • name each file the page's name but first must be index
  • the star page's stars feels too flat and childish, make glow effect
  • look up for more inspirations
  • focus on the UI interactions
  • can be simple yet interesting

REFLECTION

Experience

Task 2 focused on planning the visual and interactive design of the Blur website, and it really pushed me to think deeply about how each page should feel, not just how it should look. Unlike static design, I had to consider how things move, fade, glow, or respond to the user — which made the thinking process much harder than expected.

I revised my ideas multiple times, especially when I realized some concepts overlapped or lacked cohesion. For instance, the Star Page and Petal Page both initially revealed lyrics, but I had to rethink their roles so that each one offered a unique emotional layer. This back-and-forth challenged me to align animations, layouts, and content more intentionally with the mood of the album.

I experimented with hover effects, transitions, and soft animations. Through this, I learned that in interactive design, visual planning isn’t just about the layout — it’s about movement, meaning, and memory. Every animation choice had to enhance the story or atmosphere. It taught me to think more like a director than a designer — curating what users see, feel, and experience, moment by moment.

QUICK LINKS


TASK 1: THEMATIC INTERACTIVE WEBSITE PROPOSAL

TASK 2: INTERACTION DESIGN PLANNING AND PROTOTYPE

FINAL PROJECT & E-PORTFOLIO


Comments

Post a Comment

Popular posts from this blog

APPLICATION DESIGN II TASK 1: APP DESIGN 1 SELF-EVALUATION & REFLECTION

Image
24.04.2025 - 15.05.2025  / Week 1 -Week 4 Emily Goh Jin Yee / 0357722 / Bachelor of Design (Honours) in Creative Media  Application Design I/ DST60504 / Section 01 Task 1:  App Design 1 Self-Evaluation and  Reflection TABLE OF CONTENTS 1.  INSTRUCTIONS 2.  EXERCISES 3.  TASKS 4.  FEEDBACK 5.  REFLECTION INSTRUCTIONS CLASS EXERCISES WEEK 3 EXERCISE To redesign a boarding pass based on prioritizing the main information. We were given an information page and we worked in groups to design a boarding pass. process Outcome WEEK 4 EXERCISE To create a task flow chart/wireflow chart for a booking app. Our group have chosen a cinema app (booking movie). Task flow chart for cinema app TASKS TASK 1: APP DESIGN 1 SELF-EVALUATION & REFLECTION  For this task, we need to reflect on the final project we created in Mobile App Design 1. The main goal is to evaluate the app we designed, identify what didn’t work so well, and think of ways to improve th...
Read more

INFORMATION DESIGN EXERCISES

Image
03.02.2025 - 17.02.2025  / Week 1 -Week 2 Emily Goh Jin Yee / 0357722 / Bachelor of Design (Honours) in Creative Media  Information Design / GCD60504 / Section 01 Exercises TABLE OF CONTENTS 1.  LECTURES 2.  INSTRUCTIONS 3.  EXERCISES ↪ EXERCISE 1 ↪ EXERCISE 2 4.  FEEDBACK 5.  REFLECTION LECTURES INSTRUCTIONS CLASS EXERCISES EXERCISE 1: QUANTIFIABLE INFORMATION Objective: Quantify raw data and visualize information through a photograph. Create a visual representation of numerical data that allows for easy interpretation and analysis. Instructions: Gather a set of objects and categorize them based on quantifiable factors such as color, shape, or pattern. Arrange the objects in a presentable layout or chart. Clearly label the quantities and data using written indicators (e.g., pens or markers). Example Objects: Box of LEGO pieces Jar of buttons Jar of marbles Set of colorful rubber bands M&Ms, coins, or other small items The goal of this exercise is ...
Read more

APPLICATION DESIGN FINAL PROJECT & E-PORTFOLIO

Image
11.11.2024 - 12.01.2025 / Week 8 -Week 16 Emily Goh Jin Yee / 0357722 / Bachelor of Design (Honours) in Creative Media  Application Design I/ DST60504 / Section 01 Final Project: Hi-Fidelity App Design Prototype & E-portfolio TABLE OF CONTENTS 1.  LECTURES 2.  INSTRUCTIONS 3.  TASKS 4.  FEEDBACK 5.  REFLECTION INSTRUCTIONS TASKS FINAL PROJECT: HIFIDELITY & E-PORTFOLIO After completing the low-fidelity app design prototype, I transitioned to the high-fidelity version. To start, I used the Color Shades Finder tool to refine the color palette. One of the issues with the Watsons app is its lack of a consistent color theme. While the current colors somewhat represent the brand and make the app recognizable, they can also feel overly distracting. For the high-fidelity prototype, I focused on creating a more cohesive and simple color theme. In the existing app, green, blue, pink, and various gradients are frequently used. For this redesign, I chose colors...
Read more