Task 4: Final Project

16/12/2024 - 07/01/2024 / Week 12 - Week 15
Reema Arif Hamza / 0362792
Application Design II / Bachelor of Design (Hons) in Creative Media / Taylor's University
Task 4: Final Project

Content

Week 12-14: Consultation

Instructions

Task 4: Final Project

Students will synthesize the knowledge gained in Tasks 1, 2, and 3 for application in Task 4. They will create an integrated visual asset and refine the prototype into a complete working and functional product experience for 1 task flow.

Continuing from Task 3, I only have three more screens left to design. The task flow I'm working on is the 'select color and visualize' . I chose it because it had a balance of micro/macro interactions.

Stuff left to design:
  • Colors Page
  • Visualizer Page
  • Share Page
  • Side Menu in Home Page

Process

This time around coding was a lot smoother. After learning and suffering in Task 3, I understood more about how to structure my code and what JavaScript I could use. The rest of my pages didn't have any new interactive components to design so I could take code from my Task 3 and build upon it.


Colors Page

For my colors page most of my time was spent structuring the html and adjust the CSS to match my prototype. One particular challenge I faced was the add to wish list heart button. It's position in my prototype was a bit tricky to code. The direct solution was just using transform X&Y to move it to place. Which worked but left an awkward space below because the div for it still existed there.

Anyways I ended up deviating from my prototype and just putting it next to my color info. It made me realize that some things that are so easy to do in Figma just don't work in IRL code. 


Fig. 1.1 Before and After Colors Page, Week 15 (05/01/2025)

Fig. 1.2 Code Snippet, Week 15 (05/01/2025)

Visualizer Page
Mostly the same as my colors page, just spent time adjusting the CSS. Yeah there's really nothing to much to say about it to be honest. 

Fig. 1.3 Visualizer Page, Week 15 (05/01/2025)

Share Page
Again very similar to the previous two pages structure wise, I just kept adjusting the CSS. 

Fig. 1.4 Share Page, Week 15 (05/01/2025)

Side Menu

I mentioned at the end of Task 3 that I wanted to code the slide in side menu if I had time. At first I coded it in a separate file, but I realized the sliding animation wouldn't really work if I did that. So I moved it into my html file, and positioned it off to the side using CSS. Then in my JavaScript I used GSAP to code the slide in and out part. I was pretty happy with how it turned out.

Fig. 1.5 Side Menu, Week 15 (06/01/2025)

Fig. 1.6 Code Snippet, Week 15 (06/01/2025)


Linking Folders/Pages

The last thing left to do was link all my folders together. I was able to just add in the 
onclick="location.href='../folder-name/index.html'" to all my buttons so they linked to the next page. I also added in a root html file outside in the parent folder so it automatically directs you to the starting screen. 

After that I just kept making some tiny adjustments to refine my code and user experience a bit more. 


Final Submission

Netlify Link: 

Google Drive Link:

Video Presentation:


Walkthrough Video:



Feedback

Week 12-14: no feedback given.

Reflection

Experience
I actually had fun doing this task. Coding takes a bit of time (most of which is me copy and pasting my own code) but it's pretty satisfying to reach that end result or when you figure out how to solve a problem. I was actually really burnt out this semester and other modules have been super stressful with very heavy workloads. But this module is pretty therapeutic, maybe because I feel like I actually understand how to code.  

Observation
A lot of my pages used repeating elements so it was really easy to reuse my own code throughout this task. I think the app I chose doesn't have as many interactions like those doing food/transport/shopping apps. So it was a bit hard to find things to add interactions into, but it worked out in the end. But if I had another chance later I would try to do something more challenging so I can learn even more about app design. 

Finding
I found out how to link folders which I didn't know you could do, I was planning to put the code all in one document before I figured that out. GSAP really helped make things simple, because I could use it for basically all the interactions if I tried. 

back to the top

Comments

Post a Comment