Advance Interactive Design - Project 1: Thematic Interactive Website Proposal

on

22.4.2024 - 19.5.2024 ( Week 1- Week 4)
Gam Jze Shin / 0353154
Advance Interactive Design / Bachelor of Design in Creative Media
Project 1 : Thematic Interactive Website  Proposal 

Index

1. Instructions
2. Project 1: Proposal Draft

Project 1: Thematic Interactive Website Proposal

Thematic Interactive Website Proposal for Brand Engagement. A thematic interactive website is a website that focuses on a specific theme or concept with the aim of incorporating interactive elements to interact with users. Most such websites utilize multimedia such as videos, animations, interactive graphics displayed on the page, or other clickable elements which have interactive components that provoke the user. This dynamic experience is meant to keep the user interested in addition to the thematic concept. Themes in such websites vary from educational, cultural, promotional campaigns to product launch. For example, a thematic interactive site could be a museum. Users can go through a virtual exhibition space through interactive tours, games simulation, or questionnaires. In the event that it is a movie, the site can simulate movie universes offering virtual tours through time and space, or any other subject previously created in the movie. The aim of any such site is to keep the user engaged in the medium through interactive exploration.

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)
Proposal Ideation
At week 1 class, I shared to Mr. Razif about I would like to choose Mixue which is a boba tea brand.

fig 1.1 Mixue option

Mr. Razif recommended that I concentrate on a single product and incorporate customization elements to engage viewers.

fig 1.2 -1.3 Two ideas

After some research, I come out with two idea:
  1. Subway
  2. Sanrio
fig 1.4 - 1.5 Idea sections

Based on the ideas, I developed additional detailed information and determined which sections could be utilized and implemented into my website. I sourced this information from their official website:
fig 1.6 Consultation slot in week 3

In week 3, I scheduled a consultation slot with Mr. Razif to present my idea proposal to him. He expressed that my first idea, which focuses on the Subway brand, is more intriguing and offers a greater array of elements to incorporate into the website. Therefore, I have been advised to proceed with developing the website based on the Subway brand concept.

Progress 
After receiving feedback from lecturer, I focus on the Subway options.

fig 1.7 Proposal style

In my proposal, I utilized the Subway color scheme, which comprises yellow, green, and white, to complement my chosen topic.

fig 1.8 Table of contents

I compiled a list of all the necessary information to include in my final proposal before commencing its creation. This approach provided me with a clear direction and ensured that I wouldn't overlook or omit any essential details.

fig 1.9 Mood board

I aim for my website to have a clean and simple design while still being visually interesting, achieved by incorporating animations to encourage user exploration. To achieve this, I've sought inspiration from styles on Pinterest to use as references.

fig 1.10 Website style

Color scheme of the website will be yellow, green and white. Font used:
  1. Lilita One (For title, navigation part)
  2. Lato (For paragraph / information)
fig 1.11 Website section

In comparison to the previous version, I have included an additional section in the website contents, namely the "About Us" page. I believe it's essential to introduce myself and provide a brief narrative about the purpose of this website.



 
fig 1.12 - 1.16 Page ideas

In each section page, I have incorporated the elements and information that I intend to include on the website. Additionally, I have provided explanations for each element.



fig 1.17 - 1.20 Wireframes
After conceptualizing the idea, I proceeded to create rough wireframes using Canva.
Click here to view the wireframes in Canva.

Final Proposal 
Click here to view the final thematic interactive website proposal in Canva.


fig 1.21 Final proposal (PDF)

Presentation Video

fig 1.13 Presentation Video

Feedback

Week 4
Specific Feedback: I inquired about whether the wireframes I created in Canva could be included in the proposal. Mr. Razif clarified that wireframes can be presented using various methods, emphasizing that the crucial aspect is ensuring they are understandable and provide me with a clearer direction for my visual website.

Week 2
Specific Feedback: As I have two ideas which is Subway and Sanrio, Mr. Razif suggested me to proceed with the Subway option, as it offers more extensive information for me to work with. Additionally, regarding the timeline section, the lecturer suggests that I explore creative ways to present the timeline information, aiming to make it engaging and captivating.

Week 1
Specific Feedback: Focus on a specific item of the brand in order to create interactive section with user.

Reflection

Project 1
In project 1, my objective is to choose a specific topic and brainstorm the content for my website. The most challenging part lies in designing it to captivate users, ensuring it is not only fun and interesting but also inspires them to delve deeper into its content. This task necessitates the application of critical thinking and problem-solving skills, especially in finding creative solutions.

Moreover, I find that conducting thorough research is the most valuable approach to gather inspiration and ideas. However, I do have some concerns about whether I'll be able to execute the website as effectively as outlined in my Thematic Interactive Website Proposal. Consequently, I recognize the importance of improving my skills in Adobe Animate to alleviate these concerns.

Comments

Post a Comment