Advanced Interactive Design - Task 1 : Thematic Interactive Website Proposal
Zhao GuanMei | 0363166
Advanced Interactive Design| Bachelor of Design (Honours) in
Creative Media
Task 1 : Thematic Interactive Website Proposal
INDEX
Lectures
Lecture 1: Adobe Animate
Lecture 2: Principles of Animation
Task 1: Thematic Interactive Website Proposal
Ideation
Progress
Final Thematic Interactive Website Proposal
Feedbacks
Reflections
Further Reading
INSTRUCTION
LECTURES
Lecture 1 :
In this week, we start to familiar with the tools
in Adobe Animate's
We practiced drawing beach ball, a kite and a boat.
Fig. 1.0-1.3 ball, kite and boat (week
Lecture 2: Principles of Animation
Disney's 12 Principles of Animation to UI Design:
Squash and Stretch
Anticipation
Staging
Straight-ahead Action and Pose to Pose
Follow Through and Overlapping Action
Slow in and Slow out
Arc
Secondary Action
Timing
Exaggeration
Solid Drawing
Appeal
Six Principles of Using Animation in UX Design:
Timing
Easing
Continuity
Hierarchy
Screen Transition
Clarity: simple and clear movements
In week 4 , We started learning to make simple animations - bouncing
ball, and shape transferring.
Animation exercise:
http://127.0.0.1:8090/movement.html?84681467
TASK 1
Thematic interactive website:
centers on a specific concept and utilizes multimedia like videos and
animations to engage users. The goal is to maintain user interest
through interactive exploration, with themes varying from educational
content to promotional campaigns. For instance, such a site could
feature virtual museum tours or movie universe simulations, keeping
users engaged with dynamic, interactive experiences.
In this task, we are required to create a thematic interactive website proposal with the topic of our 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.
Or anything else (subject to the module coordinator’s approval)
Requirements
In this task, we are required to create a thematic interactive website proposal with the topic of our 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.
Or anything else (subject to the module coordinator’s approval)
Requirements
Completed UI/UX proposal document include :
1. Flow chart
2. Concept
1. Flow chart
2. Concept
3. Wireframes
4. Mood board
Inspiration
The concept of this task is I want to make a interactive gallery
website
1.okay studio gallery
Fig. 1.0 screen grab of okay studio gallery website (week
2 1.Apr.2024)
This web page provides me with a very innovative gallery
concept, which is not only the basic fixed picture display,
but also adds many interactive elements such as photo floating
and so on. The colors and style will change every time I enter
a new page. I think this is my ideal gallery web design.
2.merlin
Fig. 1.1 screen grab of MERLIN website (week 2
1.May.2024)
I like the homepage of this page very much, its animation
effect and overall style are very harmonious, so that I feel
very real into a "breathing" page
Through these two web pages, I have the basic concept of the
gallery web page I want to design, including animation, style
conversion, text layout and so on.
Progress
I chose JELLYCAT , a high-end soft toy brand as the topic to
create this website.
Fig. 2.0 screen grab from JELLYCAT website (week 4
15.May.2024)
After the idea approved by our module coordinator Mr. Shamsul, I was happy to get the suggestion that I could
use 2D, which for me was the opportunity to create another
style of web page for jellycat.
Flow chart:
Fig. 2.1 flow chart (week 4 15.May.2024)
Wire frame:
I looked through some existing wireframe designs and
understood the templates for making them before I started
making wireframe.
Fig. 2.2 wire frame reference from Pinterest(week 4
15.May.2024)
At first, I drew all the ideas in my mind on the draft book,
and then selected the most ideal design in adobe illustrator
and digitised it into the final wireframe.
Wireframe overview
Fig. 2.6 wireframe final out come (week 6 | 27.5.May.2024)
Final Thematic Interactive Website Proposal
Feedbacks
week 4:
The design concept should be more clear, can use a keyword to describe,
suggest use 2 dimension illustration to present the gallery web page, also
suitable for my current level of learning.consider the functionality of the web page, if just want to create a
gallery , should focus on displaying the work, do not add the purchase
function.
week 6:
flow chat should write clearly the categories of all pages, not all
"gallery" . Can add a brief introduction page before entering the home
page, so that users are more clear about the background of the
page
Reflections
Experience:
Completing my first interactive proposal was an exhilarating journey that
merged creativity with technical know-how. The process began with
brainstorming and refining the core concept, which was a 2D interactive
gallery website. Drawing the concept wireframe in Illustrator was
particularly rewarding as it allowed me to visualise the structure and
flow of the website. Creating the flowchart helped in mapping out user
interactions and navigation paths clearly. Each step, from initial ideas
to final details, was a learning opportunity that deepened my
understanding of interactive web design.
Observations:
Observing existing interactive websites provided essential insights into best practices and innovative features that could be adapted and improved upon. I also noted the necessity of balancing creative vision with technical execution, as both aspects are essential for a successful project. The process is detail-oriented, with every element playing a critical role in the overall experience.
Findings:
Through this project, I discovered that a clear concept is crucial as
it serves as the foundation for all design elements. Visual tools like
wireframes, flowcharts, and mood boards proved invaluable, guiding the
design process and effectively communicating ideas to our module coordinator.
Comments
Post a Comment