.png){kind=small}
10/11/2024 - 16/12/2024 / Week 7 - Week 12
Reema Arif Hamza / 0362792
Application
Design II / Bachelor of Design (Hons) in Creative Media / Taylor's
University
Task 3: Interactive Component Design & Development
Content
Lectures
Week 7: Task 3 Briefing and Consultation on Task 2
Week 8: Independent Learning Week
Week 9: Finding interactive components in our app to develop
Week 10: Consultation
Week 11: Consultation
Week 12: Public Holiday no class
Instructions
Task 3: Interactive Component Design & Development
Students will build upon the knowledge gained in Task 2 to create micro-interactions and animated micro-interactions for their app. This will greatly elevate the user experience of the app. The aim of this task is to get the students to explore and make creative decisions on the type of interactions they would want to integrate into their app.
The output of this task is a working animation element that are ready to be integrated in their final app. Meaning it’s no longer a visualization like how it was in Task 2. This will be created using HTML/CSS and JavaScript with the use of animation framework if necessary.
Interactive Components/Elements can be:
- Navigation Menu with interactive icons.
- Side Menu interaction
- Pop Up boxes
- Call to action buttons.
- Page/Screen transitions
-
Etc. (discuss with the module coordinator for further clarification)
Process
At the start of Week 9, we were instructed to select 5-6 components to code
for Task 3. I looked through my components and felt the ones from my
"selecting a color and visualizing" task flow worked the best because
it had a good balance of macro and micro animations.
Planned Components to Code:
Start
- Splash Screen - animation of rainbow circle and then logo appears
- Slide in - buttons slide in after splash screen
- Hover on button - darkens slightly
- Slide in - content slides/fades in
- Heart button - toggles between outline and filled on tap
- Hover on the section tab - darkens slightly
- Bottom navigation bar - is highlighted on page
- Carousel - cards scroll horizontally
After showing Mr. Shamsul my chosen components he advised me to add a slide
in animation for my buttons, change my rainbow fill to a blue fill for my
navigation bar, and use DaisyUI for an image carousel.
Splash Screen
I chose to start with my splash screen animation because it seemed not to
complex to start off with. For this task I used GSAP and Blackbox AI to help
me code, this was mostly because JavaScript was quite new to me, and AI can
also help with structuring my code properly.
The HTML and CSS was fairly simple, I just made a div for the splash screen
and made another two inside for the logo and rainbow-ball. My rainbow-ball
actually used a gradient in my prototype so I used CSS to make a similar
linear gradient taking the colors from Figma.
After styling all my elements, I started to work on the JavaScript, I used
Blackbox AI to help me figure out how to rotate and expand it and
everything. It was mostly similar to what we learned in our previous classes
but I was playing around with the border-radius, scale, rotation, and scale.
I had to experiment with it for a while, until it somewhat matched my
prototype.
Fig. 1.1 Splash Screen, Week 10 (27/11/2024)
Fig. 1.2 Code Snippet, Week 10 (27/11/2024)
Overall, I was pretty satisfied with it and decided to move on to my next
component. Instead of doing it on a separate file I thought it would be
better just to do it on the same file, that was I can have an easier time in
Task 4.
Slide-in and Hover Buttons
I used basic HTML and CSS to code my buttons and text, I added a hover
effect in CSS so it darkens slightly, and has a yellow outline. Then I used
GSAP to make my buttons slide in from the left, but first I had to update my
CSS so that they were off to the side and not visible. I just made the
JavaScript move them and make them visible. It took a bit of trial and error
to make it smooth and I had to refine the layout a bit to match my
prototype.
Fig. 1.3 Slide in Buttons, Week 12 (11/12/2024)
Fig. 1.4 Code Snippet, Week 12 (11/12/2024)
Hover on Section Tabs
I made a new file for my Home Page, I took some time to adjust the layout
because instead of doing the components separately I just wanted to code the
whole page. I think it would save me time later and that way my code won't
clash as much.
For the section tabs I made one big div and three divs inside. Then I
adjusted the padding and width, then adding a hover effect in my CSS.
Fig. 1.5 Section Tabs Hover, Week 12 (11/12/2024)
Fig. 1.6 Code Snippet, Week 12 (11/12/2024)
Carousel
Initially I planned to use the carousel from DaisyUI but I was having
trouble trying to customize to match my prototype. Instead, I just did the
HTML and CSS to match my prototype and used Blackbox AI to figure out the
script. It took a couple of tries for it to work, I was debating between
using mouse scroll or click and drag. But whenever I tried to do click and
drag it just wouldn't work, so I settled on using a mouse scroll.
I also had trouble getting the carousel to start and stop within the cards
but I managed to find something in my code that could do that for
me.
Fig. 1.7 Carousel, Week 12 (11/12/2024)
Fig. 1.8 Code Snippet, Week 12 (11/12/2024)
Heart Button
I added my heart button inside the card content and positioned it in CSS so
it sat at the top right corner. To get the SVG, I found out you can just
export your icons from Figma directly. I put in both the filled and unfilled
SVGs and added a class name to them. Then in my JavaScript made it so when
you click it would toggle to that class.
At first my code didn't work when I tried it. After putting it in a separate
file it seemed to be working. I wasn't sure what was causing the problem but
after asking the AI with my whole code, it seemed I had to do a different
code if I had multiple heart buttons. So I fixed that and everything worked
pretty well.
Fig. 1.9 Heart Button, Week 12 (11/12/2024)
Fig. 1.10 Code Snippet, Week 12 (11/12/2024)
Bottom Navigation Bar
I made my nav bar in the footer and separated it to five divs. I put in the
SVGs from Figma and styled everything in CSS till it looked close to my
prototype. For the middle camera button I had to make it a different class
and style it separately.
To make the icons toggle to an active state when clicked, The script was
similar to the heart button, where I just had to toggle it to active, which
was styled in CSS. It first had to remove active from all icons and then add
it to the icon that was clicked.
Fig. 1.11 Nav Bar, Week 12 (11/12/2024)
Fig. 1.12 Code Snippet, Week 12 (11/12/2024)
The navigation bar isn't perfect because the active icons look a little off.
I plan to fix it in Task 4.
Slide in
The last animation to code was the slide in transition for the home page. I
just used GSAP to bring my elements a little up and with opacity, so it
looks like it moved up and faded in.
Fig. 1.13 Slide in Transition, Week 12 (11/12/2024)
Fig. 1.14 Code Snippet, Week 12 (11/12/2024)
Final Submission
Google Drive Link:
Walkthrough Presentation:
Feedback
Week 10: Yeah that's fine you don't need to make it exactly like your
prototype, looks good (talking about splash screen).
Reflection
Experience
Overall I think it went pretty okay. The html or CSS wasn't anything new but I
did learn a few new things like making a gradient directly in the code.
JavaScript was a bit harder on the other hand, I asked AI for a lot help with
that one. But I think I'm getting the hang of it.
Observation
It's interesting to code the app you designed. Because when you were designing
it in Figma you didn't really think about if it's feasible to actually code.
So there were certain head scratchers that's for sure.
Finding
I think a few new things I learnt were mainly in JavaScript and using GSAP.
You can make things slide in by moving them offscreen in CSS, and just setting
x:0 in GSAP. It's actually quite straightforward once you use it and
experiment with it. I'm glad I decided to code my components directly as pages
because it sets me up well for Task 4.
Comments
Post a Comment