Task 2: Interaction Design Planning and Prototype

29/05/2024 - 26/06/2024 / Week 6 - Week 9
Reema Arif Hamza / 0362792
Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
Task 2: Interaction Design Planning and Prototype

Content

Week 6: Lecture on Text Masking
Week 7: Lecture on Buttons and Actions
Week 8: Independent Learning Week
Week 9: Lecture on New Page, Hover Effect, and Actions.

Instructions

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 websites, when it comes to interactive design where animations are present, the plan should not only include the layout visuals but also the animation example or reference. Students can build their own animation or use a user-reference animation to demonstrate the intended idea.

Process

I began by exploring Pinterest for reference images. I decided that I wanted the cafe to be inspired by traditional Japanese tea houses. I sketched out a couple of ideas for how I wanted the cafe to look. I also sketched out some navigation buttons I had in mind. 

Fig. 1.1 Sketches, Week 8 (21/06/2024)

I proceeded to start illustrating my high-fidelity wireframes in Illustrator. As you can see below, I have multiple reference pictures of what I wanted the cafe to look like. 

Fig. 1.2 Home Page HiFi Wireframe, Week 9 (23/06/2024)

My initial design felt too symmetrical, so I took inspiration from Traditional Japanese sliding doors and changed the structure to match. I also added flowers to the doors to add a decorative touch. 

Fig. 13  Cafe Wireframe Process, Week 9 (23/06/2024)

After that, I continued to create the rest of the pages. I explored lots of color palettes, and eventually, I ended up choosing the option on the left. I felt that the colors had more contrast and would feel more engaging for users. 

Fig. 1.4 Color Options, Week 9 (23/06/2024)

I inserted all my wireframes in Figma. Then, I added navigation elements and buttons. The compiled High-fidelity Wireframes are below.
Fig. 1.5 Figma Final HiFi Wireframes, Week 9 (23/06/2024)


Fig. 1.6 User Flow, Week 9 (23/06/2024)

Fig. 1.7 Prototype, Week 9 (23/06/2024)
Figma Link: Click Here
Prototype Link: Click Here


Final Presentation

Fig. 1.8 Walkthrough Video, Week 9 (23/06/2024)

Feedback

Week 6-9: No feedback given 

Reflection

Experience
After learning more about Adobe Animate, I had a better understanding of what kind of illustrations/animations I could Include. It was fun to explore all the different interactive elements online and pick ones I wanted to include. 
Observation
I noticed that flat illustrations would be more do-able in adobe animate because of the tools. Textured illustration styles would be quite tough to attempt. It also took me a long time to experiment with my color palette. It was mostly warm and saturated at the beginning, but increasing the saturation and tone added a layer of contrast. I personally think the colors would look better on a screen, which is why I chose those colors in the end. 
Finding.
I found that Adobe Animate is actually quite easy to use once you get the hang of it. It's definitely a good idea to plan the animations before hand because it makes it easier to separate different elements (on layers). 

back to the top

Comments

Post a Comment