Advanced Interactive Design | Task 1

on

25.4.2024 - 19.5.2024 (Week 1 - Week 4)
Caitlin Ong Lynn Dee / 0343801 / Bachelor of Design (Hons) in Creative Media
Advanced Interactive Design
Task 1

CONTENTS

LECTURE

Week 1
Mr. Razif give us a Brief on the module. Provided us samples of interactive design. And surf though Pinterest for mood board inspiration.

Week 2
We did an exercise on Adobe Animated

Week 3
We did more exercises on Adobe Animated

Week 4
We did more exercises on Adobe Animated

Week 5
We did more exercises on Adobe Animated

INSTRUCTION


Task 1: Thematic Interactive Website

It is where we propose a website focus one specific theme or concept incorporated with interactive elements and we are allowed to choose any topic for the thermic interactive website proposal. For me I choose to create a website selling flowers.

Draft 1

I did research on mood board ideas on Pinterest 

Fig 1.1 Pinterest Board (27/4/2024)

I started sketching the home page to get a clear idea on how the website expands I choose Sketch 5 as the design for my home page

Fig 1.2 Home Menu Sketches (27/4/2024)

Eventually, I created a wireframe of Home page to get a clear idea to determine which one is the final concept. (Note: The home page wireframe is developed before I create Sketch 4 and Sketch 5).

Fig 1.3 Home Page Wireframe (27/4/2024)

After that I started creating a flowchart to plan out the navigation and then I created the each of the webpage design in Figma. I chose to use Sketch 5 as the main concept and create the wireframe.

Fig 1.4 Draft 1 Flow Chart (27/4/2024)


Fig 1.5 Draft 1 Wireframe (28/4/2024)

Draft 2

I receive feedback from Mr. Razif saying there is too much content and I need to focus on one flower. I choose the flower to be a hibiscus. The concept of Sketch 5 is limited, so I switch to Sketch 4 that way it is easier to visualized of better ideas on design difference pages.

Fig 2.1 Draft 2 Flow Chart (4/5/2024)

Fig 2.2 Draft 1 Wireframe (4/5/2024)


Initial Finalization Submission
According to the Mr. Razif the content is still too much I trim down some more. Evenly I trim down the content even further and implemented interactivity on the in the wireframe.

Fig 3.1 Initial Finalization Submission Flow Chart (11/5/2024)

Fig 3.2 Initial Finalization Submission Wireframe with interactivity (11/5/2024)

Fig 3.3 Initial Finalization Submission Proposal Slides (11/5/2024)


Fig 3.4 Initial Finalization Submission Presentation Video (11/5/2024)


Revised Version
I realized in Initial Finalization Submission the UI design form my wireframe is flawed simply because I didn't take in consideration on navigation system and the original walk through was rushed. I also trim the characteristics page, now renamed Anatomy page to simplify the process and I add a loading screen.

Flow Chart Link:
https://www.figma.com/board/18b0L4SexyjrlNjaEje7cB/AID%3A-Task-1-Flowchart?node-id=0-1&t=u6lUGnwaxDSu0a0g-1



Fig 4.1 Final Flow Chart (18/5/2024)


Fig 4.2 Final Navigation (18/5/2024)


Fig 4.2 Loading Screen (18/5/2024)


Final Outcome

Fig 5.1 Final Presentation Slides (19/5/2024)

Fig 5.2 Final Video Final Presentation (19/5/2024)

FEEDBACK

Week 2
  • Simplify the flowchart.
  • Focus on one flower.

Week 3
  • Cut down content the navigation system
  • Art direction fits the subject 

Week 4
  • Care pages create animation to the picture to indicate the pictures are clickable
  • In the Characteristics page put an x on the bubble to exit instead of back button 

REFLECTION

Experience
It is an interesting experience that I had to opportunity to be creative on designing a website, but the entire process is quite changeling, the goal is make the interface simple for the user but at the same time, it has to be unique. Overall, felt that I complicate things, I am afraid that interactive design will cause a hinderance on creating the actual website in the future. 

Observation
From the very beginning I find myself stuck on figuring out creating the composition on for each of the contents after consulting with Mr. Razif it soon become clearer once I scale down some of the content and finding more inspiration on Pinterest
  
Findings
Mr. Razif provide us the sample of our senior work to guide us on how to create the proposal. As I look through it, I find myself confuse because the structure of the proposal is different depending on the person and the content, plus the guidelines our senior is different compared to us

Comments

Post a Comment