Advanced Interactive Design | Task 1

on

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


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

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

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


Fig 1.5 Draft 1 Wireframe

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

Fig 2.2 Draft 1 Wireframe


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

Fig 3.2 Initial Finalization Submission Wireframe with interactivity

Fig 3.3 Initial Finalization Submission Proposal Slides


Fig 3.4 Initial Finalization Submission Presentation Video


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


Fig 4.2 Final Navigation 


Fig 4.2 Loading Screen


Final Outcome

Fig 5.1 Final Presentation Slides

Fig 5.2 Final Video Final Presentation

FEEDBACK

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

Week 3
  • Cut down 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





Comments

Post a Comment