Advanced Interactive Design Task 2 Interaction Design Planning and Prototype

24th April 2024 (Week 1)  - 15th July 2024 (Week 13th)

Insha Thahirah Rajab - 0360671

Advanced Interactive Design - Section 04

Bachelor's Degree  in Creative Media (Honors) - Taylors University

Task 2

CONTENTS

Lectures

Instructions

Task 2

Reflection

INSTRUCTIONS

TASK

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.

Requirements:

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.)

: research and references

 

I took inspiration from indie video game "Monument Valley". I appreciated the vectorized art style and its palette.

: wireframe design process

I started off with the loading page, I wanted it to replicate until a sunrise - sunset. For the title I included the "My Soul" typography with a textured effect. 

which then eventually morphs into the start page:

I then started working on the homepage design. I created a simple design following my instinct and followed a horoscope design. I kept the theme mystical and simplistic, following a wheel design with a hovering mockup.

I included the constellation name, and a "read more" button. The menu and body typeface was "Livvic". 

I struggled with creating the constellation page and connecting it with the wheel design. It felt flat and boring, as well as the scrolling page.

 

I decided to divide the sections into 2 separate pages instead, and while doing so, experimented with a different menu style and look to reflect the wireframe draft:

Afterwards, I focused on playing around with different dynamic animation styles for the homepage, mainly the wheel and hovering effect.

I started comparing if a gradient effect, or the elements getting bigger worked better. Eventually I went for a gradient hovering effect:

After gathering feedback from Mr Samshul, I redid a lot of the design to suit the initial wireframe sketch and reconstructed the loading page. I wanted the page transitions to resemble more of a night sky changing colours and replicate a twinkling stars effect.

I started off with a new loading page, with dynamic pages prototyped to give the intended animation effect.
 

I then redid the start page with a similar design, and included a clicking button element:

I changed the design of the main wheel from a circle to a semi-circle for better readability and composition. I prototyped the wheel to have a working hovering effect, with text display. This was done by using a wheel component with variants that change as the mouse hovers over them.

 

I further porotyped each constellation page to open as they are clicked on the wheel. The appearance of the page was also redone, to reflect on the wheel being used as an expanded shape to display the information.

Afterwards, as per sir's feedback, I decided to make the mythology as a pop-up to reduce clutter and create something more interactive. This was my first design:

I wasn't happy with the colours or the overall design of it. It included a cross button and I used the same constellation icon to place on top of the image. However, I couldn't find a uniform graphic pack for it and wanted to find a more consistent design for all the constellations.

This was my second design:

:final proposal

This was my final proposal: 

TASK 2 - PLANNING AND PROTOTYPE by Thahira Rajab

: final video walkthrough

This is my video walkthrough:  

: final figma prototype

This is my figma prototype:

link - https://www.figma.com/design/7mqVDgdPOS9LNRimYrdYRb/Stellar-Mind?node-id=0-1&t=0nGGJP5GGScEj6fL-1

FEEDBACK

Week 5

Specific Feedback: You can make your website include a more minimalistic and vectorized, cartoon feel rather than simply realism. This will make it easier for you to make your assets and animate. It's okay if the proposal does not include this, as changes can be made along the way from your proposal and that is simply a brief on your overall concept.

General Feedback: Start on making up your assets and mockups to be presented and guided through a video presentation. Refer the example provided. 

Week 6

Specific Feedback: -

General Feedback: We will have our class to be online next week. Management has agreed that lecturers may conduct their classes fully online for the dates of 23-28 May 2025 due to the widespread road closures in Klang Valley for the ASEAN Summit. 

Week 7

Specific Feedback: Your design is overcomplicated and needs to be simplified further to smoothen the animation progress. Try not to overdo it, change the loading page to something simpler and cohesive with the rest of the website's theme. Change the wheel from a full circle to a semi-circle and enlarge for better readability. Make the hovering effects more noticeable and be sure to animate this. You can include additional information as a pop-up and shorten your text further.

General Feedback: Good website UI design is characterized by several key factors, including clear navigation, consistent branding, user-friendly layouts, fast loading times, and accessibility. It should also be visually appealing and easy to use, with intuitive controls and clear feedback. 

Week 8

independent learning week

Week 9

General Feedback: There are several resources you can use to get UI ideas, including design blogs, UI design galleries, design books, and UI design communities such as Dribbble, Pinterest, and Behance. You can also find inspiration in everyday objects, such as magazines, packaging, and signage.

Specific Feedback: Okay. Looks better from previous design. Ready for submission.

Week 10

General Feedback: Start on making up your assets and mockups to be presented and guided through a video presentation. Refer the example provided.

REFLECTIONS

Experience: Using Figma was quite seamless and enjoyable as we had learnt how to use Figma during the previous semester. I enjoyed choosing out a colour palette and font, as well as using the prototyping feature to include smooth transitions and button animations. Recording the video presentation was fun, and a good way to not only inform Mr Shamsul but myself on the direction my execution was to take when creating the final website.

Observations: Observations made through past pupils and peers provided me with a rough framework of what is to be expected. 

Findings: Throughout my progress, I found that working on the Figma and presentation slides alternatively creates consistency and helps work faster when it comes to aligning design goals and expected output. I found making the Figma prototype increasingly interactive aids the video walkthrough in displaying what is to be expected.