24/09/2024- 20/10/2024 (Week 1-Week 4)
Lizzie Tanaka (0362065)A
Advanced Interactive Design | BDCM | Taylor's University
Task 1: Thematic Interactive Website Proposal
INSTRUCTIONS
On task 1, we are to submit the proposal for our thematic website project. The
project will 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.
Or anything else you have in mind (subject to the module
coordinator’s
approval)
Submission Instructions:
1. Completed UI/UX proposal document.
2. All processes (concept, wireframes, mood board,
flow chart)
Research and Brainstorming
We were given one week to come up with 10 visual references and 5 ideas
for our website. I came up with these ideas:
1. Travel website
The website would inform the audience of places to visit in Indonesia. It
will give information regarding the city/island, what to do there or where
to visit, and tour itineraries as a reference.
I wanted the website to feature a parallax animation on the landing page
that would zoom in as we scroll down. At first, I wanted to do a more fun
and bold colored website, but after looking at more references I felt like
a minimalist approach would look better. However, I still kept the idea in
the slides to explore on it again.
2. Product Release: The Paper Bunny
The Paper Bunny is a Singaporean-based brand that sells lifestyle
products and is most known for their bags. I thought of doing a product
release website for their recent bags release.
The website would follow TPB's brand visual identity with a minimalist
approach utilizing earthy, neutral colors. For the product itself, it will
be animated in 3D.
3. Product Release: Ana.tomy
Ana.tomy is a Malaysian based brand that sells lifestyle products, but
are known for their customizable planners. I wanted to do a product
release for their newest collaboration line with Peanuts.
Similar to the previous concept, it would feature a the 3D product
animation and would follow the original visual identity with a more
modern, minimalist approach. However, since the brand itself uses bolder
colors in their identity, I thought of making the website more
colorful.
4. Book series
I also thought of doing a book series introduction for the Hunger Games
book series. The animation would be like a bookshelf with several books on
the side view and when hovered, some books will turn to the front/cover
side and display the title of the book. However, this idea is quite
underdeveloped because I wasn't too into the idea itself.
5. Movie series
Since I thought of introducing a book series, I ventured more and thought
of doing a similar thing but for a series of a movies, in this case, also
Hunger Games. The movie itself is still tentative but again, the idea is
underdeveloped as I wasn't too interested in this idea.
My 5 ideas is compiled in this PPT where I showed Mr. Shamsul for
feedback. I included the visual references and animation ideas I could use
for the website.
Fig 1.1 Ideas compiled into one PPT
For each of the ideas, Mr. Shamsul gave me feedbacks
1. Travel website: Good idea but it should be more specific than just the
whole Indonesia. Try to choose a certain tourist destination and talk about
it.
2. Product releases: The idea is a bit boring
3. Book and movie series: Avoid doing the Hunger Games series because there
has been a lot of it in past projects.
At the end, I leaned more into the travel website so I proceeded to do the
flowchart, the wireframes and sketches, as well as the content I want to put
inside. I started with doing the flowchart to map out what I want to include
in the content.
Fig 1.2 Flowchart
After the flowchart is done, I proceed to make my wireframe. I made the
wireframe in Figma for each page. However, since the idea is not set in
stone yet, the design may change later on. The gray boxes represent the
pictures. On the main pages, the pictures represent the subsequent pages and
when hovered, it will expand a little. When clicked, it will redirect users
to the page and the picture will zoom in and fill the page.
Fig 1.3 Wireframe
I chose to use a more colorful scheme but this may change depending on how
it looks overall on the prototype stage. I chose Rakkas as my heading font
for titles and subheadings, and the paragraph will be using Bricolage
Grotesk. All fonts are sourced from Google Fonts.
Fig 1.4 Font and color palette
Final Proposal PPT
Fig 1.5 Final Proposal PPT
FEEDBACKS
Week 3
1. Travel website: Good idea but it should be more specific than just
the whole Indonesia. Try to choose a certain tourist destination and
talk about it.
2. Product releases: The idea is a bit boring
3. Book and movie series: Avoid doing the Hunger Games series because
there has been a lot of it in past projects.
REFLECTIONS:
Overall, I'd say it was a quite fun stage of this project as we're given the creative freedom to explore on different ideas. It feels intimidating when looking at what we must do later on but it's also equally exciting to see the final product. My proposal is far from perfect and I'll be sure to explore more ideas and improve the project as we go.
.jpg)
.png)
Comments
Post a Comment