Labels

Task 2: Interaction Design Planning and Prototype

Advanced Interactive Design / Week 7 - Week 10

Task 2: Interaction Design Planning and Prototype

Low J- Yin / 0352888

Introduction
Exercise

Students are required to work on their visual design and start planning their website’s interactive design elements and features. Unlike traditional static website, when it comes to interactive design where animations are present, the plan not only should include the layout visuals but also the animation example or reference. Students can build their animation or user-reference animation to demonstrate the intended idea.

fig 1.0 mood board

From my mood board, the colour theme will primarily feature pinks and gaming-style graphics, creating a cute and captivating vibe. This design is intended to engage the audience by allowing them to dress up their dolls, appealing especially to young women and teenage girls.

fig 1.1 concept

The refreshed concept is like stepping into a time machine, capturing the excitement and fun of fashion with our pixelated dolls. As users change outfits, they gradually become acquainted with the "Mother Chucker's" clothing brand. The theme is nostalgic, playful, and engaging, designed to attract fashion enthusiasts, nostalgic individuals, young women, and teenage girls.

Sample Animation 1: 
https://youcanbeanything.tftl.agency/

fig 1.2 reference

I would like to make my hero page displayed 1:1 pixel doll that could flip 360' alongside a welcoming message. This setup serves as an entry point, drawing users into the interactive experience.


Sample Animation 2: 
https://www.pinterest.com/pin/602567625172943615/

fig 1.3 reference

After enter the welcome message button, there will be a section is designed for high interactivity, allowing users to easily click and drag accessories and dresses to style their dolls. The intuitive design ensures that users can enjoy a seamless and engaging dress-up experience.


Sample Animation 3: 
https://www.pinterest.com/pin/829999406340358906/

For this section, showcases different dolls in their "Outfit of the Day" (OOTD). It provides users with inspiration on how to style their dolls, highlighting various outfit combinations and styles. This section aims to enhance user creativity and engagement by offering fashion ideas.

Here is my flow chart:
fig 1.4 flow chart

Here is my hi-fi wireframe:

fig 1.5 hi-fi wireframe
Figma Link:

Here is the website section:

                                           
fig 1.6 hero section

fig 1.7 Play with Doll

fig 1.8 Outfit

fig 1.9 Where to Buy?

Figma Link:


In this exercise, we need to worked on improving our visual design skills and started planning interactive features for a website. Unlike static websites, interactive design involves adding animations, which required to plan both the layout and the animations.

I had focused on identifying where animations could enhance user experience, like button hover effects and page transitions. 

To illustrate our ideas, I researched and used examples of existing animations, helping us understand different styles and techniques. 

This exercise taught us the importance of detailed planning in creating a dynamic and engaging website.

Labels:

Comments

Post a Comment