Labels

Advanced Interactive Design - Task 1 / Thematic Interactive Website Proposal

 24.4.2024 - (Week 1 - Week )
Chong Hui Yi / 0363195
Advanced Interactive Design / BDCM
Task 1 / Thematic Interactive Website Proposal

Table of Contents




INSTRUCTIONS


<iframe src="https://drive.google.com/file/d/1MyQGWgV08rAY3uC0H5FnUs6N7kXAeZc1/preview" width="640" height="480" allow="autoplay"></iframe>

Task 1: Thematic Interactive Website Proposal


Requirement


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.

Requirements 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)

Progression 

Initially, I thought we needed to have three topics, so I chose Popmart, Museums, and the film "Zootopia" as my three themes. However, I later realised that we only needed to do one. Among these three themes, I actually prefer the Dimoo series from Popmart. The website could include blind boxes from the Dimoo series, details about the creator, and so on. But I'm afraid the content might not be enough, even after visiting the POPMART official website, I still couldn't find more information.

Fig. 1.0 Three idea of proposal topic

At that point, I thought of creating a website about cats, and the website "Fluffy Hugs" completely captured my heart! I adore this cute style and cats, it's simply perfect~ Consequently, I decided to create a website about Scottish Fold cats.

Fig. 1.1 Website Reference - "Fluffy Hugs"

Concept


The theme I've chosen for the website is Scottish Fold cats, and the overall style will feature cute flat illustrations. It aims to provide people with a deeper understanding of this breed, including their personality, history, health issues, and more.

Despite their cute appearance, the folded ears are actually a genetic condition that can't be cured and bring lifelong pain. Once you decide to adopt, it's crucial not to abandon them, as many are left behind due to their health problems.

# More mood boards can be viewed in Fig. 4.0 (Google Slide).

Flow Chart

For the Scottish Fold website, I want to include sections on history, characteristics, temperament, facts, health issues, and how to groom. Fig. 2.0 is my initial simple website structure. I'm quite confused as I haven't started making wireframes yet. 

Fig. 2.1 is my flow chart after I began to have ideas on how to design the website. However, in week 6, Mr. Shamsul gave me feedback that the website content might be too extensive, and I might not have enough time to complete it, which led to Fig. 2.2. I trimmed down the sections by removing facts and how to groom your cat, as these two are not as important.

    Fig. 2.0 Flow Chart - First Attempt

    Fig. 2.1 Flow Chart - Second Attempt
    Fig. 2.2 Flow Chart - Third Attempt

Wireframes

Firstly, for the home page, I want to centre the title "Scottish Fold" along with a brief description in the middle of the page. The background will consist of many repeated images of Scottish Folds. You can refer to Fig. 3.1 for the images.

For the heading, I will use the CatYi font that I designed in advanced typography. For other text, I will use the Baumas font.

Fig. 3.0 Home page


Fig. 3.1 Home page background illustration reference

When you scroll down, you will reach the history page. First, a brief explanation will fade in, followed by Susie and a dialogue, then the Country of Origin. Finally, a next button will appear. On this page, the animation is automatic, and you don't need to press any buttons to continue but the "next" button is required to proceed to the next page.

Fig. 3.2 History page

On the characteristics page, there will be an illustration of a Scottish Fold, with each part labelled to highlight its characteristics. As you continue scrolling down, five buttons will appear. Pressing any button will expand it into a large rectangle. For example, clicking on "body colour" will display 10 different colours along with their names. Pressing the back button will return you to the previous page. Finally, you can proceed to the temperament page by clicking the "next" button.

Fig. 3.3 Characteristics page

At first, my design for the Temperament page involved text shooting out from Popcat's mouth, while the background "Temperament" has animation. However, I found it too chaotic. So, my second idea is to feature six Popcats. When you click on a cat, it will open its mouth to display text. 

Then, clicking the "next" button will take you to the facts page. However, I feel that the facts page doesn't offer anything special. In the final wireframes, I removed the facts page.

Fig. 3.4 Temperament page

Fig. 3.5 Facts page

As you scroll down, cat paw prints will slowly appear, leading to a paragraph of text, then onto the health problem page (Fig. 3.7). On this page, content will extend from the left/right side by cat paws. 

Fig. 3.6 Health problem page 1

Fig. 3.7 Health problem page 2

However, later on, I removed Fig. 3.6 and Fig. 3.7, so the health problem page became Fig. 3.8. This design is similar to the how to groom page, which I later removed as well. My idea is that content will only appear when you click on a question mark.

Fig. 3.8 Health problem page

Fig. 3.8 How to groom page

Finally, as you scroll down, there will be a concluding paragraph of text as the last page. You can click on a "back to top" button to return to the home page.

Fig. 3.8 Last page

Fig. 3.9 Wireframes - First Attempt


Final Proposal


#For detailed wireframe explanations, please refer to the blog.

Fig. 4.0 Final Thematic Interactive Website Proposal


FEEDBACK

Week 5: 

This theme is acceptable. The wireframe can use a line to represent text, but your font can only be used for titles.

Week 6: 

You need to reduce the content while maintaining quality. The output should not fall below this standard, as there is a concern about insufficient time


REFLECTION

I think creating wireframes for Project 1 was quite interesting. I was initially hesitant and spent a considerable amount of time choosing a theme, but ultimately, I chose one that I like. In reality, I am unsure if my ideas can be realised in Adobe Animate, as we have only learned about animation so far. I don't know how to design a website or what functionalities are feasible, so I am quite worried and confused. Erm, I hope I can make it work. If not, I will have to revise my plan. 

Over the six weeks of lectures, I found them enjoyable and fun, and I learned a bit about how to use Adobe Animate, the difference between keyframes and frames, and how to use classic tween, motion tween, shape tween, among other things.
Labels:

Comments

Post a Comment

Popular Posts