Advanced Interactive Design: Task 3 (Completed Thematic Interactive Website)

-

  

Advanced Interactive Design: Task 3 (Completed Thematic Interactive Website)


22/10/2024 - 6/11/2024 (Week 5 - Week 8)
Afif Shukri / 0354429
Advanced Interactive Design / Bachelor of (Design) in Creative Media / DST60804
Task 3 (Completed Thematic Interactive Website)


PROCESS




Fig 1.1 - Process of website 


This assignment I started with 3 layers that is the action layer, button and background. This is easier for me to navigate and design the website. Although I have tried plenty of ways on designing this website, this seemed to be the easiest for me.


Fig 1.2 - Landing page animation


For the animation of the landing page, I did a animation using classic tween fade in transition. This creates a more minimalistic approach that fits well with theme of the website.


Fig 1.3 - Action button process


Fig 1.4 - Action button process

Throughout this project, I have stumbled upon hurdles when it comes to font. The original font that I was suppose to be using had problems in Adobe Animate. When I designed my wireframe on Adobe Illustrator and Figma. The font had no problems, but in Adobe Animate there seem to be some kind of a problem with the font, hence I went for an alternative choice.

Fig 1.5 - Alternative font



Finished timeline with all the layers.

Fig 1.6 - Finished timeline


After finishing all the designing, animation and doing all the action buttons. I published my file HTML and JS to have it published on Netlify.


Fig 1.7 - Netlify Process



INSTRUCTIONS 


Figure 1.8 - Module Information Booklet



ASSIGNMENT



Final Submission Task 3:





Screen Record:


Fig 1.9 - Screen recording of website




REFLECTION



Overall this journey was very tough and overwhelming for me. It really drained me mentally and physically. From trying to code actions, design and to publish it on web was really difficult for me. 


The help from Mr Shamsul was tremendous. He was very helpful in guiding me throughout my journey. He taught me well, in terms of navigating through this project on Adobe Animate.

Adobe Animate has always been a struggle from me as I am quite new to the software. Overtime, I managed to learn and improve myself on using this software. This assignment really pushed me to my limits. Building this website was one for the history book for me, the creativity and the handwork behind building a website is very applaudable. 

Comments

Post a Comment

Popular posts from this blog

Creative Writing: Final Compilation

-
Image
  Creative Writing: Final Compilation 29/10/2024 - 10/12/2024 (Week 1 - Week 12) Afif Shukri / 0354429 Creative Writing / Bachelor of (Design) in Creative Media /  MKT62504 Final Compilation (Task 1 - Task 3) INSTRUCTIONS   Figure 1. - Module Information Booklet ASSIGNMENT Assignment 1 (Short Story): Book Cover Figure 1.0 - Assignment 1 (Book Cover) Story Figure 1.1 - Assignment 1 (Story) Assignment 2 (Monologue): Figure 1.2 - Assignment 2  Assignment 3 (Poetry): Theme:  Pride and Prejudice  The conflict between self-importance and preconceived judgments, which hinder personal growth and meaningful connections with others or understanding your true self. F ortune  (Sonnet) With gold in hand and trade to lead my way, I bargained hard and built a great estate. No love, no trust — my riches led astray, For wealth consumed the life I sought to create. I bought and sold with lies beneath my tongue, No kindness found its home within my soul. I took from...
Read more

Design Research Methodology - Assignment 4: Research Report & Final Presentation

-
Image
  Design Research Methodology - Assignment 4: Research Report & Final Presentation 13/11/23 - 27/11/23 (Week 12 - Week 14) Afif Shukri / 0354429 Design Research Methodology / Bachelor of (Design) in Creative Media / RES60604 Assignment 4: Research Report & Final Presentation Instruction Assignment Reflection can be found at the end of the Final Report slides. Canva Link: https://www.canva.com/design/DAFuY0-iRWY/e0Nbvt9KK0gQFJmQ_3OAQQ/edit?utm_content=DAFuY0-iRWY&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton Final Report slides in PDF: Final Presentation slides in PDF: Recording of final presentation:
Read more