Advanced Interactive Design / Task 1
24.4.2024 - 15.5.2024 (Week 1 - Week 4)
Loke Yan Ling / 0344602
Advanced Interactive Design / Bachelor of Design in Creative Media
Task 1 - Thematic Interactive Website Proposal
Instructions
Lecture
Week 1
Introduction to Adobe Animate
• Basic introduction on Adobe Animate
Introduction to Thematic Design
Thematic design styles showcase the cultural energy, mood, angst and influencers of a time or movement.
"Thematic Design styles explore creative interiors based on specific themes in history and design movements. These design styles are often founded in the socio-political culture of a particular time in human creative history. Thematic design styles showcase the cultural energy, mood, angst and influencers of a time or movement. Exploring different thematic design styles will build a strong foundation and create the framework for your success as a designer, artist and creative individual."
Example websites: fwa.com https://thefwa.com/awards/page/1/
Briefing
Overview of interactive website design, the importance of user engagement, and introduction to thematic design and what to submit in the proposal.
Proposal
1. Completed UI/UX proposal document.
2. All processes (concept, wireframes, mood-board, flow chart)
have to be documented and posts in your E-portfolio as your reflective studies.
3. A video presentation or Class presentation (to be decided by the module coordinator.
Prototype platform for following task
-> Figma
-> Adobe XD
-> Netlify
Thematic interactive website proposal topic: (select one)
1. 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)
Adobe Animate
Adobe animate firstly used for designed interactive flash website and game but need of third party plugin to proceed using the outcome. Therefore, adobe develop current Adbe Anime version which can convert the file to html.
Setting
Prefer medium screen with 24 frame rate for this project. 24 frame rate is 24 frame per one second, is a normal speed in animation.
Website to refer for animation
- 12 disney
- 6 Six Principles of Using Animation in UX Design
Symbol setting
modify -> convert to symbol -> moving clip/graphic/button -> registration point (animation start from it) -> center
Everything that need to add motion, such as classic tween, motion tween need to convert symbol.
Fig 1.1 Effect
Ease In (Slow In):
Effect: The animation starts slowly and gradually accelerates to its full speed.
Use When: You want to create a sense of anticipation or build-up before the main action. Imagine a car slowly pulling away from a stop sign.
Example: A bouncing ball. The ball starts compressed at the bottom of the bounce, then speeds up as it launches into the air.
Ease Out (Slow Out):
Effect: The animation starts at full speed and gradually decelerates to a stop.
Use When: You want to emphasize the final position or create a sense of weight or follow-through. Imagine a thrown ball reaching its peak and slowing down before falling.
Example: A closing door. The door swings quickly at first but slows down smoothly as it reaches its closed position.
Ease In-Out (Slow In & Slow Out):
Effect: The animation starts slowly, accelerates to full speed in the middle, and then decelerates to a stop.
Use When: You want to create a natural, realistic motion that feels smooth and balanced. This is the most commonly used easing function.
Example: A window opening. The window starts to open slowly, gains momentum in the middle, and then gently comes to a rest when fully open.
Task 1: Thematic Interactive Website Proposal
Brainstorm
Based on the the assignment brief, we were required choose one topic for the thematic interactive design.
- A specific product of a particular brand launch/special (i.e.: Nike brand new shoe), Beauty product launch (i.e.: Sephora compact powder,
- Movie promotion
- Game release promotion.
- Gallery/Museum exhibit launch
- Band/Artist latest release.
For my website project, I've chosen movie promotion as the theme, and since I'm a huge Katniss Everdeen fan, The Hunger Games immediately came to mind. However, I'm not interested in creating a ticket-selling website. Instead, I want to delve deeper and explore the immersive world of Panem, the movie's setting.
My focus is on showcasing the elements within the story that significantly impacted the characters and the overall plot. While the initial concept was to create a merchandise store based on the movie, I believe a more engaging approach would be to showcase these impactful elements in an interactive way.
Fig 1.2 Progress in Photoshop
Fig 1.3 Collage
This is the collage I made for this idea. This collage captures the essence of rebellion and hope, two key themes in The Hunger Games. The raised fingers, a symbol of defiance against the Capitol, stand out prominently. Images of suffering and oppression serve as a stark reminder of what the rebellion is fighting against. However, hope persists. The Mockingjay pin, a powerful symbol of resilience and a yearning for a better future, takes center stage. The inclusion of nature imagery, like the bird and the blue sky, reinforces the message of hope.
Fig 1.4 Element of Hunger Games
I also draw out the element to visualize that intended to put inside the website which is
- Mockingjay pin
- Weapon (Bow)
- Nightlock Berries
- Silver Parachute
- Tracker Jacker
- Three Finger Salute
- White rose represent capitol
- The Cart (The girls on fire)
.jpg)
Fig 1.5 Ideation
Fig 1.6 Moodboard
The typography of the websites will be Merriweather and original Hunger Games font to reinforce the mood and tone of the franchise, whether it's bold and aggressive or subtle and understated. However, thee original Hunger Games font not yet to be download. The merriweather typeface will be applied in wireframe.
Feedback Week 3:
Maybe try on different things to make the content interesting, such as the description of characters with the strength and weakness. Wireframes
To fully immerse visitors in the world of The Hunger Games, I'm focusing on two key elements: the characters and the event locations. Each character will have a detailed profile that includes their biographical background, their strengths and weaknesses, and their weapon of choice. Additionally, the event locations that have a significant impact on the reader's experience will be showcase. These locations will be brought to life through immersive visuals and interactive elements, allowing visitors to experience the Games firsthand.
Fig 2.1 Wireframes draft
Fig 2.2 Character Page
The initial wireframes for the website establish a clear structure with four main sections: homepage, character pages, event pages, and detailed event pages. The event page thumbnails are designed with a door motif, hinting at the concept of entering different locations within the world of The Hunger Games. Smooth transitions between pages and elements will enhance the user experience, creating a seamless flow as visitors navigate the website.
Fig 2.2 Inconsistent in design
Feedback Week 4:
Sir point out that there is inconsistent designed within character page and event page. Further explained about why choose simplicity and modern design as The Hunger Games has the complicated story' s background.
Style
Minimalist and Modern
Minimalist and Modern
Why
- Conveys a sense of austerity and oppression
The minimalist aesthetic, with its clean lines, limited color palette, and sparse use of elements, can effectively convey the oppressive and dystopian nature of the world portrayed in "The Hunger Games." This stark, stripped-down design can evoke the harsh realities faced by the characters and the overall bleakness of their circumstances.
- The oppressive dystopian nature of the world portrayed in the movie
- Evoke the harsh realities faced by the characters
- The overall bleakness of their circumstances
- Modern and timeless appeal
Fig 2.3 Redesign
To create a more cohesive user experience, I've redesigned the character page. Now, the character information will be displayed alongside a selection box similar to the one used for event locations. Additionally, the event location icons within this selection box have been redesigned. To maintain a consistent visual style, the event place icons within this selection box have been redesigned. Previously resembling church doors, they've been replaced with more generic, rounded door icons.
Fig 2.2 will not be used as the layout is confuse and inconsistent therefore will be proceed in the same layout but with different character in Fig 2.4. The box on the right corner allows the user to view next character without back to the selection page again. It will reduce the step and frustration of visitors.
Fig 2.4 Wireframe draft 2
Fig 2.5 Contact Page
I initially felt the contact page lacked interactivity and wanted to add a touch of thematic relevance. Since the movie is based on a novel, I envisioned a creative design inspired by a book cover. This concept involved the cover "flipping open" to reveal contact information when a user wanted to reach out, and then "closing back" after submitting an inquiry.
However, Mr. Shamsul raised a valid concern about potential frustration caused by excessive animation. We agreed to prioritize a clean and user-friendly experience, focusing on essential functionality while maintaining a subtle nod to the book theme. So, The flip animation only applied on opening the book cover, while the inquiries has been submitted, then having some feedback will be fine.
Fig 2.6 SideBar menu
Last, the website utilizes a sidebar menu with rounded corners, mirroring the overall design aesthetic. This menu offers detailed navigation options for each category, allowing users to effortlessly explore all sections of the website. In future development stages, we plan to incorporate an animation feature that allows the user to collapse the sidebar menu for a cleaner interface. It's important to note that the sidebar menu button is excluded from the homepage, as the homepage already features prominent navigation buttons for quick access to various sections.
Fig 2.7 Wireframe
To fully immerse visitors in the regimented world of Panem, the website's design adopts a folder aesthetic. This not only evokes the Capitol's bureaucratic control over the Hunger Games, but also reflects the meticulously documented history of the Games and the abundance of rules that govern every tribute's fate. The subtle folder imagery further reinforces this sense of a controlled environment, mirroring the Capitol's obsession with record-keeping and solidifying the website's connection to the dystopian storyline of The Hunger Games.
Flowchart
Fig 2.8 Flow Chart
While designing the flowchart of website, it helps me focus the detail carefully. Every elements that want to consider in websites have to be listed.
Instead of just biographies, I preferred detailed character profiles that delve into their personalities, and backstories. So the character profiles will be biography, skills, personality and memorable/key moments.
In event place, I think about create immersive experiences for each event place. This could involve 360° views, interactive maps with trivia points, or even simulations that let users experience key events from the story. Although is quite hard to achieve within this module, but still want to have a try. I found one of the 3d scene of The Arena in sketchup, this resource is suits to put in the websites.
Mr Shamsul suggest that maybe recorded in video format of the 360 view of the 3d Arena could be applied in the website. He will discussed with Mr Razif for more information. He suggested to find the reference for others animation that intended to applied in the website in next task.
Final Submission Proposal
Fig 3.1 Thematic Interactive Website Proposal
Reflection
This module has completely revolutionized the way I view website design. It opened my eyes to the vast possibilities beyond traditional layouts and categories. The emphasis on user interaction and engagement has truly inspired me. I'm incredibly grateful for the opportunity to apply these innovative concepts to my website project. Through this module, I've gained a deeper understanding of user-centered design principles and how to create immersive, interactive websites that resonate with specific themes. I'm excited to leverage this newfound knowledge to bring my vision to life.
Comments
Post a Comment