Advanced Interactive Design - Project 01: Thematic Interactive Website Proposal
ADVANCED INTERACTIVE DESIGN DST 60804
WEEK 01 - WEEK 04 (23.09.2024 - 14.10.2024)
NAME: Chin Tze Wei
I.D: 0357423
COURSE: Advanced Interactive Design / Bachelor of Design (Honors) in Creative Media
GROUP: Class 01 Sec 01
Advanced Interactive Design - Project 01: Thematic Interactive Website Proposal
- LIST -
TABLE OF CONTENT
1. Instructions
2.2
Process
2.2.1
Colour Scheme
2.2.2
Chosen Font
2.2.3
Wireframe
2.2.4
User Flow
3.
Feedback
4.
Reflection
1. INSTRUCTION
Module Information Booklet (MIB)
Module Information Booklet (24/09/2024)
To the TOP ⬆
2. TASK 01: THEMATIC INTERACTIVE WEBSITE PROPOSAL
To-Do List:
We are required to create a thematic interactive website proposal with the
topic of their choice that can be based on:
- A specific product of a particular brand launch/special (i.e.: Nike brand new shoe), Beauty product launch (i.e.: Sephora compact powder,
- Movie promotion
- Game release promotion.
- Gallery/Museum exhibit launch
- Band/Artist latest release.
Submission Requirement:
- Completed UI/UX proposal document
- All processes (Concept, wireframes, mood board, flow chart)
2.1 Brainstorming
Based on the topic choice recomended state above, I have explored several topic such as:- A specific product of a particular brand launch - HERMES Perfume Collection Series
- Movie promotion - Howl's Moving Castle
- Game release promotion - Love and Deepspace
- Gallery/Museum exhibit launch - Calude Monet Art Gallery
- Band/Artist latest release - Seventeen (KPOP) New Launch Album
After determining the topic of thematic interactive website, I then prepared a mood board on Canva and consulted with Mr Shamsul.
Presentation/Mood Board on Canva
For Canva Slides, Click HERE.After consulted these topic with Mr Shamsul, I decided to proceed with the topic "Howl's Moving Castle" as my final project.
2.2 Processes
After I have decided on the topic "Howl's Moving Castle", I then plan to integrate and determine the informations for the websites, such as colour schemes, chosen font, wireframe and user flow.2.2.1 Colour Schemes
Based on the visual references I showed in the Canva slides, the suitable colour schme for the whole interactive website is as below:
Figure 2.0 Colour Scheme chosen for interactive website
2.2.2 Chosen Font
Logo
As stated above the canva slides, I have chosen
Cinzel as my Logo font.
To preview, click
HERE
.png)
Figure 2.1 Chosen font for Logo
Tittle
For Tittle of the website, I have chosen Libre Baskerville as my Tittle font.
To preview, click HERE
.png)
Figure 2.2 Chosen font for Tittle
Body Text
For information which is the information of the website, I have chosen Roboto Serif as my Tittle font.
To preview, click HERE
.png)
Figure 2.3 Chosen font for Body Text
2.2.3 Wireframe
After that, I tried to create a draft wireframe for my website by using Figma.Figma link: Click HERE
Figure 2.4 Wireframe
2.2.4 User Flow
Later, I then use Miro to create my user flow.
Miro link: Click HERE
Figure 2.5 User Flow
2.3 Final Proposal Document
Finally, I merge all the information into one powerpoint slide.
Canva link: Click
HERE
To the TOP ⬆
3. FEEDBACK
Week 03
Specific Feedback:
-
Topic 2 and Topic 3 is quite interesting. Choose 1 to
proceed.
Specific Feedback:
- Topic 2 and Topic 3 is quite interesting. Choose 1 to proceed.
To the TOP ⬆
4. REFLECTION
Designing a thematic website based on my own version has been a truly
rewarding experience. Under Mr. Shamsul's guidance, I had the opportunity to
learn the application, Adobe Animate, which challenged me to expand my skill
set and deeepen my understanding of interactive websites.
To the TOP ⬆
