Adv. Interactive Design - Task 2: Interaction Design Planning and Prototype
21 May 2024 - 11 June 2023 (Week 5 - Week 8)
Key features of an interactive website: [Elizaj, n.d]
To optimise the workload and stay on schedule, I've made key modifications to
the flow chart:
1. Reduced Pages:
3. Focused Functionalities:
As you can see, my references all feature text overlaying images. I find this approach effective because my designs often feel plain, even with added shadows. Additionally, I prefer subtle effects, such as hovering and easing, to enhance the design.
Since scrolling effects were not advised, I decided to use sliding and fading
effects for animations and transitions in my website presentation.
Interface Design Process
The first design was based on the initial concept where the background would be either animated or a GIF. This included an image layer and interactive elements to allow users to navigate through different pages. However, it was suggested that changing the image might improve the overall quality of the website, as the background in attempt #1 was blurry and lagged.
To address this, I searched for relevant images on Pinterest and was satisfied with the overall aesthetics. The new images align with the artist's favorite color, pink, and are related to the album concept.
While designing this page, I faced challenges in presentation due to Mr. Razif's suggestion to avoid scrolling animations. As a result, I decided to present the design as shown in the figure below. Each page includes interactive elements such as hover animations, an image carousel, and CTA buttons.
Initial Idea
21 May 2024 - 11 June 2023 (Week 5 - Week 8)
Vincent Lee // 0359386
Adv. Interactive Design // Bachelor of Design (Hons) in Creative Media //
Taylor's University
Task 2: Interaction Design Planning and Prototype
INDEX
- Revised Flow Chart
- Design References
- Interface Design Process
- Final User Interface Design and Interactions Planning
- Task 2 Submission and Video Presentation
Instructions
<iframe
src="https://drive.google.com/file/d/1HLrXQ1grWUtRYq1IxHjxZjJWyqRd1SjM/preview"
width="640" height="480" allow="autoplay"></iframe>
Task 2: Interaction Design Planning and Prototype
Students must focus on the visual and interactive design aspects of their
website projects. Unlike static websites, interactive design incorporates
animations to engage users. The plan should include layout visuals along with
animation examples or references, highlighting intended ideas.
Key features of an interactive website: [Elizaj, n.d]
- Loading Animation
- Scrolling Effects
- Hover Animations
- SlideShows
- Videos
- Social Sharing Button
Task Requirements:
- Walkthrough Video presenting the plan and showing the animation examples and/or references.
- Online posts in E-portfolio as reflective studies with links to any resource involved in the creating of the plan. (i.e.: Figma link, Miro link, etc.)
Revised Flow Chart
|
|
Figure 1.1 - Revised Flow Chart
[Latest Update: 13 Jul 2024] |
1. Reduced Pages:
- Focused on essential sections like Home, Biography, and Discography pages to
prioritize critical content.
2. Enhanced Interactivity:
2. Enhanced Interactivity:
- Added more interactive elements to boost user engagement:
- Hover Effects: Elements like the Guitar and Lightstick now have animations.
- Sound Effects: Interactive elements include sounds, such as the Guitar playing with artist voices.
- Click Navigation: Clear click actions on buttons and logos for smoother navigation.
- Ensured each page has clear, focused functions for easy user navigation and
interaction.
Design References
These references were gathered after my first attempt at designing the website
prototype. I conducted further research and narrowed down specific designs and
animations that I liked on Pinterest.Design References
As you can see, my references all feature text overlaying images. I find this approach effective because my designs often feel plain, even with added shadows. Additionally, I prefer subtle effects, such as hovering and easing, to enhance the design.
|
| Figure 1.2 - UI and Interactions References |
|
|
|
The first design was based on the initial concept where the background would be either animated or a GIF. This included an image layer and interactive elements to allow users to navigate through different pages. However, it was suggested that changing the image might improve the overall quality of the website, as the background in attempt #1 was blurry and lagged.
To address this, I searched for relevant images on Pinterest and was satisfied with the overall aesthetics. The new images align with the artist's favorite color, pink, and are related to the album concept.
|
|
Figure 1.4 - Home Page Attempt |
While designing this page, I faced challenges in presentation due to Mr. Razif's suggestion to avoid scrolling animations. As a result, I decided to present the design as shown in the figure below. Each page includes interactive elements such as hover animations, an image carousel, and CTA buttons.
- Divide the artist's journey into four stages and apply scrolling animations,
including zooming in and out upon scrolling.
I visualised this page based on the references and sketches conducted in
Task 1. However, I noticed the outcome was unsatisfactory due to large
areas of empty space, and the impact was not as I had imagined. Initially,
I intended to use scrolling effects, but they were not applicable in this
circumstance. Therefore, I had to think outside the box to present the
music videos in a similar way, but with different interactions.
OnLoad
3. Discography Page
OnLoad
- The screen fades in.
- The 'ROSÉ' logo slides in from the right and positions itself at the top left.
- The video title slides in from different sections, overlapping above the video.
- Navigation buttons [left & right] are positioned on each side of the video.
- A horizontal scrolling bar is placed under the video, with other videos partially visible on the sides.
4. Biography Page
OnLoad (covered Bio Page 1-3)
- Images scale bigger upon pushing to the right side of the screen.
- A captivating heading with a description is positioned on the right.
- Images are positioned at the bottom of the text.
- Sound effect: An airplane sound effect upon entering the screen.
|
| Figure 1.5 - Reference/ Intended Idea for Biography Page. |
|
|
Figure 1.6 - Revised Idea and Attempt_Biography Page |
|
| Figure 1.7 - References/ Intended Idea for Discography Page |
|
| Figure 1.8 - Attempt_Discography Page |
Final User Interface and Interactions Design Planning
1. Loading Screen
|
| Figure 1.9 - Loading Screen |
- An asteroid appears in motion, falling with smoke.
*the loading screen will be designed using After Effects.
2. Home Page
OnLoad
- The screen fades in.
- The title 'ROSÉ,' filled with a GIF, enters at the center of the screen.
- The title then scales down, turns into a plain color, and positions itself at the top of the screen as the website logo/ navigation button to Home Page.
InPage
- Upon the preloaded number reaching 100%, a 'START NOW' button
fades in.
Interactive Elements
- Click
- 'START NOW' button: Navigates users to the Home Page.
OffScreen
- The screen fades out.
|
| Figure 1.10 - Home Page |
- The title 'ROSÉ,' filled with a GIF, enters at the center of the screen.
- The title then scales down, turns into a plain color, and positions itself at the top of the screen as the website logo/ navigation button to Home Page.
InPage
- Images of a 'Microphone,' 'In Ear Monitors,' and 'Guitar' appear.
Each element navigates users to a specific page, indicated by the
text below them.
Interactive Elements
- Hover
- All elements zoom in and wiggle.
- Click
- Microphone and In Ear Monitors: Navigate users to the Discography page.
- Guitar: Navigates users to the Biography page.
OffScreen
- Three rectangles slide in from the bottom, one after
another from right to left, then slowly fade out.
|
| Figure 1.11 - Discography Page |
- The 'ROSÉ' logo slides in from the right and positions itself at the top left.
- The video title slides in from different sections, overlapping above the video.
InPage
- The top navigation bar appears at the top right of the screen.- Navigation buttons [left & right] are positioned on each side of the video.
- A horizontal scrolling bar is placed under the video, with other videos partially visible on the sides.
Interactive Elements
- Hover
- Top navigation bar: Bolded text and color change to indicate the active state of the navigation buttons.
- Navigation buttons: Fill with light brown color, and the arrow icon transforms to white.
- Video: Enlarges, the play icon fades out.
- Click
- 'ROSÉ' logo: Navigates users back to the homepage.
- Top Navigation bar: Allows users to move seamlessly through various sections of the website.
- Navigation buttons: Allow users to move seamlessly between different sections.
- Horizontal scroll bar: Navigates users back to the previous video.
- Double-click on the video: Enables full-screen mode.
- Drag
- Horizontal scroll bar: Allows users to navigate through lengthy content, making it easier to view and access all the information presented on the page.
OffScreen
- The screen instantly navigates back to the homepage.
|
| Figure 1.12 - Biography Page |
OnLoad (covered Bio Page 1-3)
- The biography screen slides in from right to left with a muted
shade of pinkish-red as the background.
- The 'ROSÉ' logo slides in and positions itself at the top left
of the screen.
- Images slide and fade in from different directions to the
center.
- Text slides and fades in from different directions.
- Interactive elements slide and fade in, positioned next to the
text.
Bio Page 1
InPage
- Images of the artist overlap each other, positioned on the
left side of the screen.
- A captivating heading with a description is positioned on the
right.
- A guitar is placed next to the text.
Interactive element
- Hover
- Guitar: Wiggle animation.
- Sound effect: Sound of Rosé playing the guitar.
- Click
- Navigation buttons [left and right]: Navigate users to the previous/next video.
- 'ROSÉ' logo: Navigates users back to the homepage.
- The screen fade out
Bio Page 2
InPage
- Images of the artist in her teenage years continuously push one
over another.- Images scale bigger upon pushing to the right side of the screen.
- A captivating heading with a description is positioned on the right.
- Images are positioned at the bottom of the text.
- Sound effect: An airplane sound effect upon entering the screen.
Interactive Elements
- Click
- 'ROSÉ' logo: Navigates users back to the homepage.
OffScreen
- The image carousel slides back to the right, and the text, logo,
and flag fade out.Bio Page 3
InPage
- Images of the artist during her debut with Blackpink
continuously push one over another.
- Images scale bigger upon pushing to the right side of the screen.
- Images scale bigger upon pushing to the right side of the screen.
Interactive Elements
- Hover
- Light stick: Wiggle animation.
- Sound effect: Squeaky sound.
- Click
- 'ROSÉ' logo: Navigates users back to the homepage.
OffScreen
- The screen fades out.
Bio Page 4
OnLoad
OnLoad
- A video converted to GIF instantly appears as the background
with CTA buttons.
- The artist's album slides in from the top.
- Text buttons slide in from the bottom.
- The artist's album slides in from the top.
- Text buttons slide in from the bottom.
InPage
- Contents are placed on the right side of the screen.
- Buttons are positioned below the text.
Interactive Elements
- Hover
- 'Play Now' button: transforms into a darker, muted shade.
- 'Buy Now' button: turns into a very light gray, often used as an alternate to white.
- Click
- 'Play Now' button: navigates the user to the discography page.
- 'Buy Now' button: directs the user to the official merchandise store.
OffScreen
- The screen fades out.
Week 10 | Adv. Interactive Design_Task 2 Submission:
Interaction Design Planning and Prototype
Creating the layout based on the sketches presented in Task 1
was a tedious process. Despite my efforts, I felt the visual
impact was not as rich as I had hoped. The scrolling animation
I intended to apply for both pages was not suggested, leading
to a loss of ideas on how to present my work. Ultimately, I
chose basic slide transitions, which left me anxious about the
final presentation.
My biggest disappointment was not the fear of failing Mr. Razif but the possibility of letting down the artist I admire. Her music significantly impacts my mood, and I wanted my work to reflect that. This experience taught me the importance of balancing personal expectations with professional obligations.
Figure 1.13 - Task 2: Interaction Design Planning and
Prototype
[Latest Update: 13 Jul 2024]
Figure 1.14 - Interaction Design Planning and Prototype
[Latest Update: 30 Jun 2024]
Video 1.1 - Task 2 Video Presentation
[Latest Update: 16 Jul 2024]
Reflection
My biggest disappointment was not the fear of failing Mr. Razif but the possibility of letting down the artist I admire. Her music significantly impacts my mood, and I wanted my work to reflect that. This experience taught me the importance of balancing personal expectations with professional obligations.
Interaction Design (IxD) is the process of creating engaging
interfaces with well-thought-out behaviors. It focuses on how
users interact with products and aims to create experiences
that are not only effective but also enjoyable.
2. IDF: What is Interaction Design?
What is Interaction Design? - IDF
What is Interaction Design? - IDF
The Interaction Design Foundation describes Interaction Design
as the design of interactive digital products, environments,
systems, and services, emphasizing user-centered design to
enhance user experiences.
This resource provides an in-depth look at Interaction Design,
detailing its principles, methodologies, and the importance of
creating seamless user interactions in digital products.
Explore ten inspiring examples of interactive design that
showcase innovative ways designers create engaging and
effective user experiences across various digital platforms.
Discover a collection of user interface (UI) interactions that
highlight effective design principles and techniques to
improve usability and user satisfaction.
Quick Links
