Advanced Interactive Design - Task 1: Thematic Interactive Website Proposal
Bachelor of Design (Honours) in
Creative Media
Liang Lina 0347076
Advanced Interactive Design - Task 1
INSTRUCTIONS
Lecture & Activities：
Week 1:
This week, Mr. Shamsul introduced us to the specific details of the classroom
activities and explained each task we need to complete in the next 14 weeks.
He also gave an example using the excellent theme website on the website. Our
task this week is to start installing the Adobe Animate software and find 3
creative ideas for Task 1 proposal.
Week 3:
We were the first to learn to use Adobe Animate. Mr. Shamsul first explained
the tools to us, and then told us that the first thing to do was to create a
new file.
Configure file settings:
- Select high definition: 1280 x 720 pixels
- Frame rate: 30.00, good quality
- Platform type: HTML 5 Canvas
- It should be named index.html
Then Mr. Shamsul introduced the toolbar to us, such as the selection tool,
shape tool and color fill tool. In the class, we learned how to draw a beach
ball.
The tools used include the Ellipse Tool, the Line Tool and the Paint Bucket
Tool.
During the drawing process, Mr. Shamsul also taught us some useful shortcut
keys to enhance our efficiency:
- Command + A → Select all objects
- Command + B → Separate the selected symbols or text
- V → Use the selection tool to convert straight lines into curves
- Command + D → Duplicate and repeat the last transformation
- Command + Shift + S → Save as a new file
- Spacebar → Temporarily switch to the hand-shaped tool to make it easier to move the canvas
When adding shadows to the beach ball, we learned a simple but effective
technique:
First, draw a straight line, then curve it. Cut and separate the areas that
require shading, and then adjust the color contrast to create a natural shadow
effect. This not only adds depth to the shape, but also makes the work look
more vivid and three-dimensional.
In the latter part of the course, we will start a new illustration exercise.
Mr. Shamsul posted an illustration on Google Classroom, so next we will draw
and color a sailboat.
Week 4:
This week, Mr. Shamsul taught us how to turn painting works into animations.
We started with the most basic movements, learning how to break down static
images into different stages of motion, and then gradually created a
coherent animation.
In class, we first attempted to simulate the feeling of bouncing up and down
using a simple line, just like being stretched and then bouncing back. This
helped me better understand the concepts of "movement rhythm" and "ease".
Task 1：Thematic Interactive Website Proposal
Description
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.
Or anything else you have in mind (subject to the module coordinator’s
approval)
Submission
1. Completed UI/UX proposal document.
2. All processes (concept, wireframes, mood board, flow
chart)
Have to be documented and posted in your E-portfolio as your reflective
studies.
Proposal Ideas
- Star Tour (introduction, songs, movies, etc. introduction, offline music nodes lighting up. Make a simple map? Click on it to view where the music festival/concert was held)
- Dog Explorer（A specialized website dedicated to introducing dogs, which can also be a knowledge-based educational platform for the general public。Dog Breed Interaction Reference Guide、Behavioral interaction science popularization, dog feeding simulation）
- The Story of Qingyuan Chicken - From Its Birth to the Table. It tells the story of how a young chicken grows up, and then its life comes to an end and it is served on people's tables. Then let's introduce its living environment, followed by the process from egg incubation to being served on the table, as well as the recipes.
All the ideas can be viewed in the following Canva file: Click on the
LINK
to proceed.
Final Concept: From Forest to Feast - Qingyuan Chicken
Finally, I chose From Forest to Feast - Qingyuan Chicken as my final
project theme, as it was very helpful for me to explore this chicken
breed. It not only guides users in their learning but also offers
interactive clickable experiences.
This website explores the origin and the story behind the Qingyuan
chicken, and provides information about its growth process, growth
environment, cooking methods, and more. Whether you are a curious food
enthusiast or interested in this breed of chicken, this website offers an
engaging interactive guide.
Target Audience
Food lovers ： Individuals interested in traditional ingredients
Cultural explorers and tourists ： Users curious about the Lingnan lifestyle and culinary traditions,
engaging with the story of Qingyuan Chicken through digital
exploration.
Health and environmental advocates ： Those who value eco-friendly farming and healthy eating, using
the site to gain insight into sustainable food practices.
The website aims to blend entertainment with education, allowing
users of all backgrounds
to enjoy and learn about the cultural, ecological, and culinary
significance of Qingyuan Chicken.
Visual design style
For website design, I plan to adopt a simple and friendly
design, using a soft beige color tone.
MOODBOARD
This is the color palette I created based on the reference
materials of Qingyuan chicken. I hope to present its interactive
teaching through simple and gentle colors.
Palette
The color style is light beige and greenish blue, simple, soft
and fresh (following the growth environment of Qingyuan
chicken). All elements are based on cartoon-like images.
Layout design
The website logo uses the Amatic SC font, the main text uses
the Poppins font, and the titles and other elements use
Quicksand. The combination of serif and sans-serif fonts gives
the main text a modern feel and makes it easy to read.
Visual Reference
I referred to some website wireframes to obtain visual
references, especially those for dynamic products. Besides the
visual effects, I also learned about the transition effects.
Please refer to the attached references (to watch the video, you
can view it in the embedded slides).
Website References
I have listed 3 website references collected from Dribble, FWA Awards and
CSS Winner. The styles and transition designs of these references have
greatly inspired me.
1. builtkindly
Source：Link
Builtkindly has a warm color tone, providing users with a minimalist and
comfortable atmosphere. I like the simple interaction on the homepage.
Additionally, it has a clean and organized layout, which makes me think it
could be a source of inspiration for me in the future.
2. folllit
Source：Link
I chose this website because within folllit, the cursor turns into a pen,
which inspired me and made it possible for the cursor to change.
3. DOTDNA
Source：Link
The text transition of DOTDNA is very smooth and pleasant. I really like it.
I think this could be an interactive way that could appear as the title of
my interactive website.
User process
Wireframe/Prototype Development
After completing the user flow, I quickly started working on the wireframe
design. According to the previous process plan, I began with the loading
page and set various options.
I followed the logical sequence of the flowchart to design each interface
step by step: from the entry animation and loading effect on the home
page, to the function options of the main menu, and then to the subsequent
content display and the tips page.
Figma Link：Link
After receiving the teacher's feedback, I promptly corrected my framework.
Firstly, I unified the style of my entire web design, with consistent
fonts, sizes and styles, and established a clear hierarchical structure to
avoid the situation of key points shifting.
Final Outcome Task 1: Proposal for a Theme Interactive Website
Canva：Link
FEEDBACK
Week 2:
After consulting Mr. Shamser, he pointed out that the third option has
great potential. Because the theme of the first star was about
Thailand, which was quite general. The second one was about dogs. Mr.
Shamsul conducted a live search to find out how many different breeds
of dogs there were. The number was just too large.
Week 4:
The feedback for this week is that the style of the entire website
design needs to be unified. A uniform font, size and style should be
adopted, and a clear hierarchical structure should be established to
prevent confusion in the presentation of key content. You can think
about Audi cars. Their official website, car design and logo are all
very unified and harmonious.
REFLECTION
Experience:
Through this project, I learned how to combine narrative with
interactive elements to enhance the immersive experience of users.
During the design process, I constantly tried to adjust the page
layout to make the presentation of the content more coherent and
vivid. Learning Adobe Animate was very interesting for me (such as
tween animations, classic easing animations, motion guide
animations).
Observations:
I have observed that a successful animation project not only requires proficiency in technology, but also the ability to sense rhythm and the coherence of visual elements. Appropriate timing, smooth transitions, and control over visual layers can greatly enhance the immersive quality of the work. I have also noticed that subtle changes in the movements in the animation often convey emotions more effectively than complex special effects.
Findings:
Through this process, I discovered that interaction design is not only a
technical practice, but also an art of visual narrative. I learned to
convey rhythm and emotions in the visuals, and realized the importance
of patience and detailed observation in the creation process. This
learning experience has deepened my understanding of interactive media
design and has also sparked my interest in further exploring animation
expression.
Comments
Post a Comment