Advanced Interactive design-Task 1/Thematic Interactive Website Proposal
24.4.2024 - 15.4.2023/Week 1-Week 4
Kong Cai Yi / 0363862
Advanced Interactive design / Bachelor of Design (Hons) in Creative
Media
Task 1: Thematic Interactive Website Proposal
INDEX
- Lectures
- Task 1/ Thematic Interactive Website Proposal
- Feedback
- Reflections
LECTURES
Week 1/ Briefing
On first Week, Mr. Shamsul briefed us on the module and the tasks for this
semester. We were instructed to begin our Project 1 proposals by
brainstorming topics for our thematic websites. I am particularly
interested in the themes of festivals, music, and Instax products. I
started to do some research in Pinterest .
Fig. 1.1 Research of project 1 (27.04.2024-Week 1)
Week 3/Adobe Animate (Exercise 1)
During our Week 3 class, we learned how to draw using Adobe Animate. We
first received a tutorial on how to use various tools such as the shape
tool, selection tool, and paint bucket tool. After the tutorial, Mr.
Shamsul asked us to draw a few objects—specifically a kite, a beach ball,
and boats—for practice purposes.
Fig 1.2 Exercise 1 in adobe animate (9.05.2024-Week 3)
Fig 1.3 Exercise 1 in adobe animate (16.05.2024-Week 4)
Click this link to view exercise 2
INSTRUCTIONS
Instructions:
Students are required to create a thematic interactive website
proposal with the topic of their choice that can be based on:
1. A specific product of a particular brand launch/special (i.e.: Nike
brand new shoe), Beauty product launch (i.e.: Sephora, compact powder)2. Movie promotion
3. Game release promotion.
4. Gallery/Museum exhibit launch
5. Band/Artist latest release.
6. Or anything else you have in mind (subject to the module
coordinator’s approval)
Week 1/ Ideation
I have a few product ideas in mind but I'm not sure how they would work in
thematic website, so I looked for some references on Pinterest. I have a strong
interest in using Instax and frequently use it. My ideas for shoes and albums
were inspired by artwork I found on Pinterest, so I might be able to use these
references to improve my concepts.Interested Field+ References :
- INSTAX: https://pin.it/2JW5F81eF
- SHOES: https://pin.it/5uaSjX1hK
- ART BOX FESTIVAL: https://pin.it/HyHDFHixP
- SPOTIFY MUSIC
- CAT CAFE
Interested Colour Scheme:
- Vibrant, retro-inspired feel with a mix of warm and cool tones.
- Teal, pink, yellow, and shades of brown
Fig 2.1 (28.04.2024-Week 1)
Interested Layout design:
Fig 2.2 (28.04.2024-Week 1)
Week 3/ Working on proposal
What should include inside the proposal:
Since I've decided to focus on the new launch of the Instax Mini 12 film, I've been exploring thematic website references that align with my product and the presentation style I envision. I found the following two websites particularly inspiring:
I have used Canva elements to create my wireframes, which makes them look neat and easy for me to understand. For the flow chart, I'm not sure what information to include, so I plan to ask Mr. Shamsul during next week's class.
What should include inside the proposal:
- Concept
- Wireframes
- Moodboard
- Flow Chart
Fig Proposal Progress (8.05.2024-Week 3)
Fig Proposal Progress (11.05.2024-Week 3)
Week 4/ Proposal Submission
Click here to view thematic interactive website proposal in Canva
FEEDBACK
Feedback from Mr Shamsul
WEEK 4:
- In advanced interactive design, we are moving beyond creating traditional website layouts as we did last semester. So I need to develop an unusual layout for a thematic interactive website. This involves incorporating different elements on the homepage that can navigate to various pages and enhance user interaction.
- For my concept, Mr Shamsul suggested call it "Retro" since I'm using retro-related colors like purple, pink, and green.
- My flow chart is to include the homepage and detail the navigation paths to other pages. List the pages I have and outline the user journey through different navigation options.
WEEK 6:
- Based on the home page design, we should focus more on Color and Product categories. Information like About and Contact should be displayed with a smaller font size to emphasize the more important categories.
REFLECTIONS
Experience
At first, I was confused and didn't know what to choose as my theme. However, after researching online, I realized that I really like INSTAX, so I decided to use it as the theme for my project. Once I made that decision, I started selecting my color scheme. Since INSTAX cameras are usually pastel colors, I chose a retro pastel color palette to match. When creating the wireframes, my thinking was still limited; I thought we needed to make a traditional website. But in this module, we have upgraded to create an extraordinary website. Therefore, I changed my website layout to make it look more casual and attractive.
Findings
Thanks to Mr. Shamsul's guidance, I understood the kind of website desired for this project and was able to make corrections in time. In this task, I also learned that creating a user flow chart is actually quite simple, yet it is a crucial step that cannot be overlooked. After seeing the examples provided by the teacher, I was impressed by those designers and thought that creating something similar myself would be very interesting and fulfilling. So, I am very excited and can't wait to get started!
Comments
Post a Comment