Advanced Interactive Design · Task 2 · Interaction Design Planning and Prototype
Oct 2024 - 17 Nov 2024 / Week 5 - Week 8
YANG ZHI CHING / 0365154
Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media
Task 2 · Interaction Design Planning and Prototype
INSTRUCTION
Doc 1.1 MIB
Task 2 · Interaction Design Planning and Prototype
Requirement |
- Walkthrough Video presenting the plan and showing the animation examples and/or references.
- Online posts in E-portfolio as your reflective studies with links to any resource involved in the creating of the plan. (i.e.: Figma link, Miro link, etc.)
Topic |
Kuala Lumpur illustration fair (exhibition).
|
| Fig 1.1 Kuala Lumpur Illustration Fair Poster 2024 |
|
|
Fig 1.2 Visual Collection Of KLIF 2024 |
Website Structure |
|
|
Fig 1.3 Wireframe in Figma |
Animation & Effects Planning |
1. Loading Page
Refer to the animation right, I want my loading page to
have a simple, geometric style. But I don’t want it to be overly dynamic. I’d like it
to light up one by one, like a traffic light, with
Klif's background image.
Fig1.1 Loading Animation Reference
2. Hero Page
The hero page creates the first impression of the
website, so I want to make this section interactive
for users.
I’ll use Klif’s original flat-style illustrations
and let users to interact with them to make them
move.
Fig1.2 Hero Page Wireframe and Original Flat-style
Illustration
Vid 1.3 Interactive Hero Page Reference
Vid 1.4 Interactive Hero Page Reference
3. Artworks Show Wall
Next is the highlight of my website, which sets
it apart from Klif’s official site.
My concept is to let people directly see these
artworks first. If they’re interested, they can
click to learn more about the artists. I feel
showcasing only the artists without their work
might limit the visibility of talented but
lesser-known creators.
|
|
Fig 1.5 Arworks Show Wall
|
I’m particularly inspired by the motion effects on
the Half of Eight website. Their works move with the
cursor, making the user experience engaging and fun.
However, I worry I might not achieve such an ideal
effect.
So, my backup plan is inspired by Chainzoku. Its
animation is also dynamic and fun, but compared to
Half of Eight, it’s simpler and more
straightforward—though it feels a bit less lively.
Vid 1.6 Half of Eight Website
Vid 1.7 Chainzoku
4. Information Page Flipping
Initially, I planned for the information pages
to have a flipping effect. But after exploring
Half of Eight, I realized it felt a bit “too
formal” for Klif. Instead, I found another reference with a
desktop-like sliding menu, which feels more
lively and fun—better suited for Klif’s
style.
|
|
Fig 1.8 Information Page Wireframe |
Vid 1.9 Half of Eight
Vid 1.10 Final "Menu" Reference
My information page will include:
Directory (Map Guide): I want to use a zoom-in
scrolling effect to showcase the map.
Vid 1.11 Zoom-in Scrolling Effect
Timetable: I plan to use a card-flipping animation to
display the schedules for different days.
Vid 1.12 Card Animation Effect
Fig 1.12 Official Site's "Eye"
Fig 1.13 Ideal Effect
Klif About Page: This will follow a similar fun and
interactive approach.
Fig 1.14 About Page Reference
Presentation Slide & Video |
Ad. Interactive - Task 2 Planning by Chelsea YangFig 2.1 Presentation Video
REFLECTION
| Experience |
This project is more about building references for my ideal outcome.
Throughout this process, I’ve explored many renowned works by masters in
the field, which has been incredibly inspiring. I hope that one day I can
also create something as outstanding as they have.
| Findings |
What I found lacking in this project was seeking advice from my instructor.
Acting on my own without consultation might have made my work overly
subjective.
Comments
Post a Comment