Advanced Interactive Design - Task 02: Interaction Design Planning and Prototype

on

Week 05 - Week 08

Ahmad Firas Bin Ahmad Fisal | 0345121

Advanced Interactive Design | Bachelor of Design (Hons) in Creative Media

Task 02: Interaction Design Planning and Prototype

INSTRUCTIONS

Task 02 - Task Brief

Students must work on their visual design and plan 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 animation or use reference animation to demonstrate the intended idea. 

Checklist:

- Assets
- Figma Prototype
- Prototype Flowing
- Video Presentation


TASK 02: INTERACTION DESIGN PLANNING AND PROTOTYPE (Status: Completed)

Referring back to Task 01, I've shown which assets are needed to produce the interactive website. This will be the documentation of showcasing those assets before moving on with the Figma prototype. Slides attached below are the UI/UX Proposal document, it is attached here for the ease of readers to read through this particular blog without having to go to the previous Task 01's blog.


- Spiders
- Crown
- BLOHSH Logo (Billie Eilish's logo)

Assets
Spiders and Spider Web
Asset: Spider and Spider Web (Freepik)

These elements are then separated in Adobe Illustrator to make it a working PNG (Transparent) before transferring to Figma.

Elements in Adobe Illustrator

Crown
Asset: Crown Jewel

BLOHSH Logo (Billie Eilish)
Asset: BLOHSH Logo

UI Buttons/Icons

Cancel Button

Figma Prototyping

This is the entire overview of the Figma prototyping that has been done as part of Task 02: Interaction Design Planning. These frames provide the intended vision of how I would want the interactive website to look upon reaching the final project-making in Adobe Animate. This documentation will delve into sections according to pages and features.

Figma Artboard Overview

Loading Page
Vision: The spider webs appear and the spiders are crawling down from the top of the frame. The appearance of the logo sets the identity of this whole project. It symbolises Billie Eilish. These frames use After Delay animation the most with Ease Out as the transition type. They have different animation speeds to ensure they are smooth and do not awkwardly stop at places where the elements should be in faster motion.


Introduction Page
Vision: A spider web appears from the middle of the screen to tie in the design element from the first frame to the next and the BLOHSH logo from the loading page has now enlarged and moves towards the centre of the screen with a title sliding in from the left side; which indicates the title of the song that I'll be promoting. The frames for the loading page also use similar animation and transition types as the loading page with multi-speeds to accommodate the movement of the elements.


Main Page
Vision: The crown jewel will appear smoothly in the middle of the screen and there's a slight animation where when the cursor is hovering the crown will tilt to the left and right this style is important to me as it invokes the feeling of it being highly interactive with the clickable spiders combined. The animation type I'm utilising for this main page to the crown jewel is the Bouncy effect.
Features Overview
This is a collection of frames that showcase the features that are attached to the crown jewel. Three separate spiders on the crown indicate three different features that will be highlighted. There is a presence of the cancellation button 'x' at the top left of these screens once the camera pans; zooming in to each feature. The animation type that is suitable to showcase this effect is using Ease In and letting Smart animate do its thing to have the zooming effect. More information will be given below:


Feature 01:
Vision: The first spider at the top of the crown will be clickable and the view will be zoomed in to the specific area and the explanation of the song's creation will be provided. The information about this song in the boxed element will be sliding in from the right side of the screen.


Feature 02:
Vision: The spider on the left side will be the song's preview. This is also important to realise the vision of promoting the lead single of this album by Billie Eilish. The boxed element will slide in from the left side of the screen.


Feature 03:
Vision: The spider on the right side will be provided with visuals related to the campaign. These boxed elements are transitioned with a slide-in from the right side of the screen.


The added information below is to show the progression of the prototype flow that is done via Figma; these flows with their dedicated animations and transition styles can make my visions come to life.

Figma Prototype Flow (General)

Figma Prototype Flow (Complex)

Prototype Link:
Main prototype viewing link: Click Here!
Remarks
- Kindly click the 'R' button on the keyboard to restart the prototype for a smoother viewing experience.
- Ensure that your cursor is moving around the crown jewel and move in and out of the crown to experience the animation style.
- Click on the spiders to view the features.

Figma Artboard Viewing:


Video Presentation




Reflection

The process of creating this prototype in Figma to showcase the idea of my final project has been great so far. So much thought and energy has been put into it. I almost feel like I'm actually promoting Billie Eilish's "new single" as that was part of my assignment brief. I'm excited to see where will this progress into in the future and hope that Adobe Animate usage will be smooth sailing.

Comments

Post a Comment