ADVANCED INTERACTIVE DESIGN: FINAL PROJECT
24/09/2024 - 03/01/2025
Week 01 - Week 14
Adrianna Sofea Mohd Fauzi (0350661)
Bachelor of Design (Hons) in Creative Media
Advanced Interactive Design: Final Project
Task 3: Final Execution of Prototype
In the final stage of this project, we will develop the website using Adobe Animate, transforming the initial ideas and concepts into a fully realized, functional platform. This phase emphasizes translating the proposal into actionable design and development steps. The focus is on executing both the visual design and interactive functionality with precision, creating a seamless and engaging user experience that brings the website proposal to life.Content and Structure
Total Pages: 8 Pages
Loading Page
Landing Page
About Page
Brand Statement Page
Product 1 Page
Product 2 Page
Gallery Exhibition Page
Contact Page
Loading Page
Animation Symbol: 3 overlapping oval shapes transforming into a cloud/bubble.
Text: "Loading... Please wait."
Landing Page
Title/Text: Skinned (Olive Village font; interactive pop-out reaction on hover).
Subtitle: "Road to healthy skin."
Buttons:
Text: Enter
Symbol: Brand Logo with flip reaction; hovering reveals "LOVE YOUR SKIN" (also serves as Home Button).
Navigation Menu: Home > About > Product > Gallery > Contact
About Page
Title/Text: Welcome to skinned
Subtitle: Skinned is a beauty and skincare wellness brand that curates products based on the value of being ingredient oriented. We cater to a market of consumers who studies the kind of ingredient they want to apply on their skin. We believe Skinned is taking proactive measures to simply be more conscious about the way our consumers view our skincare line; and we love that their lifestyle and our practice goes hand in hand.
Symbol: Brand Logo with flip reaction; hovering reveals "LOVE YOUR SKIN" (Home Button).
Navigation Menu: Home > About > Product > Gallery > Contact
Brand Statement Page
Note: This page appears only when the user clicks the "ENTER" button and is not part of the navigation menu.
Symbol: Brand Logo with flip reaction; hovering reveals "LOVE YOUR SKIN" (Home Button).
Navigation Menu: Home > About > Product > Gallery > Contact
Text: "Consciously made for Southeast Asian skin."
Interactive Buttons:
Right Arrow ("scroll to the left").
Left Arrow ("back").
Product 1 Page: Rice Serum
Images:
Image 1 (masked with shape).
Image 2 (masked with shape).
Text:
Information 1:
Big Text: Lock and stay rice serum.
Subtext: Rice extract with grapeseed.
Paragraph: Excessively oily skin leads to acne infection! These two work in synergy to control oil production and prevent acne growth. Its antimicrobial property also gives skin a smooth complexion.
Information 2:
Big Text: Boost your glow.
Subtext: Functions: Our plant-powered serum is naturally rich in antioxidants and skincare vitamins, transforming cellular health into a brighter, hydrated, and energized version of you.
Price: RM136
Paragraph: Ingredients: Aqua, U-rantenol, Camellia Sinensis Leaf Extract, Oryza Sativa Extract, Vitis Vinifera (Grape) Seed Extract, Aloe Barbadensis Leaf Extract, Sodium Hyaluronate, Acrylates/C10-30 Alkyl Acrylate Crosspolymer, Ceramide NR, Ceramide.
Buttons:
Circle shape ("Click Me!"); reacts by switching to Image 2 and Information 2.
Rounded rectangle ("Moisturizer"); navigates to Product 2 Page.
Symbol: Brand Logo with flip reaction; hovering reveals "LOVE YOUR SKIN" (Home Button).
Navigation Menu: Home > About > Product > Gallery > Contact
Product 2 Page: Gleam Dream Moisturiser
Images:
Image 1 (masked with shape).
Image 2 (masked with shape).
Text:
Information 1:
Big Text: Gleam dream moisturiser.
Subtext: Allantoin and pea protein.
Paragraph: As we age, skin regeneration slows, and stress further delays healing. Allantoin aids cell proliferation, while pea protein, known for its strong antioxidant activity, delivers immediate toning and lifting effects.
Information 2:
Big Text: Plumped and hydrated.
Subtext: Functions: Gleam Dream intensely hydrates and restores your skin, keeping it soft, fully plumped, and lifted. Infused with peptides, allantoin, and antioxidants.
Price: RM98.90
Paragraph: Ingredients: Aqua, Butyleneglycol, Butyrospermum Parkii (Shea Butter), Solum Hyaluronate, Loco Nervi Acetate, Oryza Sativa (Rice) Extract, Hydrolysed Pea Protein, Allantoin, Aloe Barbadensis Leaf Extract, Phenoxyethanol, Ethylhexylglycerin, Triethanolamine.
Buttons:
Circle shape ("Click Me!"); reacts by switching to Image 2 and Information 2.
Rounded rectangle ("Moisturizer"); navigates to next product page.
Symbol: Brand Logo with flip reaction; hovering reveals "LOVE YOUR SKIN" (Home Button).
Navigation Menu: Home > About > Product > Gallery > Contact
Gallery Exhibition Page
Image: A Photoshop collage, upscaled.
Buttons:
4 circular buttons (reacting to different points of the image).
1 restart button.
Symbol: Brand Logo with flip reaction; hovering reveals "LOVE YOUR SKIN" (Home Button).
Navigation Menu: Home > About > Product > Gallery > Contact
Contact Page
Form:
Header: "You have questions?"
Fields: Name, Contact, Email, Inquiry.
Text: "Say hello to us"
Buttons:
3 rounded rectangles linking to Instagram, Pinterest, and TikTok.
Symbol: Brand Logo with flip reaction; hovering reveals "LOVE YOUR SKIN" (Home Button).
Navigation Menu: Home > About > Product > Gallery > Contact
Website Development Progression
Figure 1.1 Document settings
Notes:
The recommended canvas size for website development is 1920 x 1080, so I followed this guideline to ensure the design is optimized for standard screen resolutions and delivers a consistent user experience.
Figure 1.2 Loading page
Notes:
Each oval element is assigned its own layer in the timeline. I named the layers and rearranged the sequence to ensure each oval appears right after the previous one, creating a continuous looping effect until the next page is ready to load.
Figure 1.3
Start to include action script into the keyframe
Figure 1.4 Error effect
Notes:
After adding the script in the Action Panel keyframe, I tested it in the browser. However, the animation didn’t perform as expected. After going back to the Action Script, I realized the issue wasn’t with the script itself but with the timeline setup.
Figure 1.5 Scripting
Notes:
In the first keyframe, only 'oval_load1' is visible, while 'oval_load2' and 'oval_load3' appear later, creating a stacking effect instead of staying in their arranged positions. I wanted 'oval_load1' on top, with 'oval_load2' behind it and 'oval_load3' behind that. It seemed like the animation was following the timeline instead of the script. To fix this, I moved the keyframes for 'oval_load2' and 'oval_load3' to frame 1, so I could control their timing more easily using GSAP. + Additional note: the load will take 8 seconds
The recommended canvas size for website development is 1920 x 1080, so I followed this guideline to ensure the design is optimized for standard screen resolutions and delivers a consistent user experience.
Each oval element is assigned its own layer in the timeline. I named the layers and rearranged the sequence to ensure each oval appears right after the previous one, creating a continuous looping effect until the next page is ready to load.
Start to include action script into the keyframe
After adding the script in the Action Panel keyframe, I tested it in the browser. However, the animation didn’t perform as expected. After going back to the Action Script, I realized the issue wasn’t with the script itself but with the timeline setup.
Figure 1.5 Scripting
In the first keyframe, only 'oval_load1' is visible, while 'oval_load2' and 'oval_load3' appear later, creating a stacking effect instead of staying in their arranged positions. I wanted 'oval_load1' on top, with 'oval_load2' behind it and 'oval_load3' behind that. It seemed like the animation was following the timeline instead of the script. To fix this, I moved the keyframes for 'oval_load2' and 'oval_load3' to frame 1, so I could control their timing more easily using GSAP. + Additional note: the load will take 8 seconds
Landing page
Figure 1.6 Navigation
Notes:
I started by setting up the navigation buttons and arranging them. When I tested it in the browser, I noticed an issue: the buttons were hard to click. If the user hovered directly over the text, it would change color as expected, but moving slightly outside the text's stroke or fill made it unclickable. This could be frustrating for users and needed to be fixed, so I did.
Figure 1.7 Example of clickable on stroke or fill only
Figure 1.8 Included a shape behind the text on "HIT"
to ensure a smooth click
Figure 1.9 Example of clickable button around the space of the text
Notes:
An example of making the area around the text clickable would mean I have to increase the interactive space, such as adding padding or a transparent background to the clickable element. This will ensure that users can click even if they hover slightly outside the visible text area, improving usability
Figure 2.1 Guides to ensure alignment and margins are balance
Figure 2.2 Break apart the letters to create individual symbols Notes:
Each letter needs to be converted into its own individual symbol to enable interactive animation. This setup allows for a pop-out effect to be triggered when the user hovers over the text
Figure 2.3 Brand logo "home" btnNotes:
The logo will be positioned in the top-left corner and will function as a link to navigate users back to the landing page or "home". To add fun, a tagline will appear when users hover over the logo.
Figure 2.4 Circular shapes Notes:
To achieve the gradient effect, I created five individual circle shapes, each in a different color from the brand's color scheme. Afterward, I converted them into a single symbol and applied a blur filter to create a smooth and cohesive gradient look
Figure 2.4 Blur filter on circular shapes
Figure 2.5 Blur filter on circular shapes
Figure 2.6 Testing animation
Figure 1.6 Navigation
I started by setting up the navigation buttons and arranging them. When I tested it in the browser, I noticed an issue: the buttons were hard to click. If the user hovered directly over the text, it would change color as expected, but moving slightly outside the text's stroke or fill made it unclickable. This could be frustrating for users and needed to be fixed, so I did.
Figure 1.7 Example of clickable on stroke or fill only
Figure 1.8 Included a shape behind the text on "HIT"
to ensure a smooth click
Figure 1.9 Example of clickable button around the space of the text
An example of making the area around the text clickable would mean I have to increase the interactive space, such as adding padding or a transparent background to the clickable element. This will ensure that users can click even if they hover slightly outside the visible text area, improving usability
Figure 2.1 Guides to ensure alignment and margins are balance
Figure 2.2 Break apart the letters to create individual symbols
Each letter needs to be converted into its own individual symbol to enable interactive animation. This setup allows for a pop-out effect to be triggered when the user hovers over the text
Figure 2.3 Brand logo "home" btn
The logo will be positioned in the top-left corner and will function as a link to navigate users back to the landing page or "home". To add fun, a tagline will appear when users hover over the logo.
Figure 2.4 Circular shapes
To achieve the gradient effect, I created five individual circle shapes, each in a different color from the brand's color scheme. Afterward, I converted them into a single symbol and applied a blur filter to create a smooth and cohesive gradient look
Figure 2.4 Blur filter on circular shapes
Figure 2.7 Included script for Navigation btn, Enter btn and Logo btn
Notes:
In the script, I included the following line: `bubbles.forEach((bubble, index) => { randomPosition(bubble); }`, which allows the bubbles to move around freely in randomized positions.
Figure 2.8 Enter button
In the script, I included the following line: `bubbles.forEach((bubble, index) => { randomPosition(bubble); }`, which allows the bubbles to move around freely in randomized positions.
Figure 2.8 Enter button
Brand statement page
Figure 2.9 Phrase page
For the phrase page, I want to incorporate a scroll effect where the sentence moves as the user scrolls to the left, continuing until the entire sentence is revealed
Figure 3.1 Arrow buttons
While making the arrow, I decided not to use the right arrow key (on our keyboard) to scroll it and instead chose to use a button for the movement
Figure 3.2 Script for the movement of sentence
About page
Figure 3.3 Grid Guides
Figure 3.4 Grid Guides
Grids and guides to ensure the margins are the same as the landing page.
Figure 3.5 Layout arrangement
I included a paragraph text and arranged everything according to my proposal wireframes
Figure 3.6 Inserting content and information
I imported the SVG images and masked them into the elements to maintain consistency, including rounded corners. Then, I created two keyframes, one displaying only the title, and another that reveals additional information when clicked.
Figure 3.7 Buttons
After several attempts, I realized that I only needed to edit the button hover effect instead of creating another keyframe. So, I removed the extra keyframe and kept one each for the serum and moisturiser.
Figure 3.8 Navigation menu
I began working on the navigation menu but struggled to make it appear on only half of the page. Since it was taking too much time, I decided to shift my focus to the about page and return to the navigation later.
Figure 3.9 Scripting
I added the script for the navigation menu first to ensure I wouldn't forget it later
Product page
Figure 4.1 Information and layout
Arranged the text and layout according to my wireframes.
Figure 4.2 Masking image
I masked the image and included a button on the bottom right to lead the user to the next page, which is the second product.
Figure 4.3 Scripting for Rise serum
I grouped the 'before' texts into a single symbol named 'rs_title'. After the button is clicked, it reveals additional information, which is also grouped into a single symbol with the instance name 's_description'.
Figure 4.4 Scripting for Moisturiser
I applied the same steps to the second product, making adjustments to the images and content to reflect the updated information.
Gallery page
Figure 4.5 Gallery page
For the gallery exhibition, I initially arranged the layout based on my wireframes. However, after multiple attempts with scripting and masking images, I had difficulties. As a result, I decided to change the entire layout, making the page more interactive and user-friendly.
Figure 4.6 Updated gallery concept
I decided to implement the scale image interaction, as it feels much more engaging and dynamic compared to my initial idea.
Figure 4.7 Gallery buttons
I added buttons to allow users to navigate to specific points on the image, making the interaction more seamless.
Figure 4.8 Scripting
Figure 4.9 Layout and arrangement for contact
I included buttons that link directly to the brand's social media platforms for easy access and engagement.
Figure 5.1 Scripting
Figure 5.2 Overall Layers
Figure 5.3 Assets
Figure 5.4 Rice Serum SVG
Figure 5.5 Gleam Dream Moisturiser SVG
Figure 5.6 Image RS 1
Figure 5.7 Image RS 2
Figure 5.8 Image GD 1
Figure 5.9 Image GD 2
Figure 6.1 Image Duo
Figure 6.2 Gallery collage image
Reflection:
The process took much longer than I initially expected. If I could include every detail of this project in this blog, I would, but explaining every challenge or mistake would take forever. I encountered countless errors, from small scripting issues like missing commas to major setbacks like my laptop crashing due to Adobe Animate's heavy resource usage. Lagging and technical problems made the experience even more frustrating, and at times, I almost gave up. I had high hopes and ambitious plans for this project, it seemed fun and exciting in theory.
However, I underestimated the effort and toll it would take. Much of my time was spent on trial and error with scripting, troubleshooting minor errors, and making adjustments. Despite these hurdles, I am proud of the outcome. Although I couldn’t include the review page as originally planned, I successfully followed the wireframes I had designed and brought them to life in ways I hadn’t expected of myself. This project was both strenuous and rewarding. I learned so much, especially about the importance of margins and their role in creating a UI that works seamlessly across different platforms and screen sizes. I also gained a deeper appreciation for coding, it’s incredibly powerful and intriguing, even though it can be complicated for a designer to master.
This increased my interest in coding, and I ended up studying it more to ensure the project was executed successfully. Overall, this experience pushed me out of my comfort zone, taught me resilience, and gave me valuable insights into both design and development. While it was challenging, it was also an opportunity for growth that I’m truly grateful for.
Comments
Post a Comment