INTERACTIVE DESIGN ✿ PROJECT 2 ✿
INTERACTIVE DESIGN ✿ PROJECT 2 ✿
25.09.23 - 24.10.23
week 5 - week 8
✿ TAN JIA JIA 0350577 ✿
Bachelor of Design (Honours) in Creative Media
✿ LECTURE ✿
Please refer to Exercise.
✿ LECTURE RECAP ✿
During the Week 5 lecture, Mr. Shamsul introduced us to Project 2, and it became apparent that this project posed a significant challenge, especially for us as beginners in the realm of coding. This assignment served as a notable step up in complexity and required us to further develop our coding skills. It was a moment that highlighted the need for dedication and a willingness to learn as we ventured into this more advanced coding endeavor.
The project requirements entail several key components:
UI Design Prototype Review: Students are expected to review the
feedback received on their UI design prototypes from Part 1 and incorporate
necessary improvements based on the feedback.
Visual Design Refinement: This stage involves implementing the final
visual design elements, which include typography, color palette, and imagery,
in line with one's personal brand and the desired tone of the resume.
Attention to detail is crucial to achieve a polished and cohesive look.
User Interface Interactions Enhancement: Students are tasked with
enhancing user interface interactions, incorporating more advanced features
like animations, smooth transitions, and micro-interactions. The goal is to
ensure that these interactions elevate user engagement and contribute to a
positive user experience.
Technical Implementation: The technical aspect of the project involves
developing the final visual design using HTML and CSS code that accurately
reflects the refined UI design.
Presentation and Documentation: The e-portfolio should be updated to
comprehensively explain and showcase the processes involved in completing the
task. This documentation is essential for providing context and insight into
the project's execution and rationale.
✿ INSTRUCTION ✿
Figure 1.1 MIB of Interactive Design
✿ PROJECT 2 ✿
1.0 IDEATION
Please refer to
Project 1.
2.0 DIGITALIZATION
I meticulously assign each element to its corresponding and appropriate
classes within the HTML structure. This proactive step in the project ensures
that when it comes time to code the CSS, the process will be markedly more
straightforward and organized. By labeling each element with meaningful and
descriptive class names, I establish a logical and systematic connection
between content and style.
Figure 2.2 Screenshot of CSS code (11/10/23)
Even after completing the coding phase, I encountered a multitude of errors
when presenting the project on the website. Recognizing the need for expert
guidance, I made the decision to seek Mr. Shamsul's assistance. This step was
especially significant, and I timed it for after the independent learning
week.
After reaching out to Mr. Shamsul for assistance, he advised me to remove the
navigation bar from the top of the project, as it wasn't a requirement for
Project 2. Furthermore, he took the time to thoroughly examine my code to
identify the underlying issues causing errors. Once the problem was
pinpointed, Mr. Shamsul graciously provided hands-on guidance, teaching me how
to rectify the issues effectively. This personalized support was invaluable,
as it not only resolved immediate challenges but also empowered me with a
deeper understanding of coding and debugging, aligning perfectly with the
essence of experiential learning.
Figure 2.3 Screenshot of the website (23/10/24)
3.0 FINAL OUTCOME
Copy the link below and paste it on Safari/Google to view my Final Outcome,
✿ REFLECTION ✿
Project 2 was a significant learning experience for me. It challenged my coding skills and pushed me to think critically about design and user experience. The process of seeking assistance from Mr. Shamsul and learning how to debug and fix coding issues was a valuable lesson in problem-solving and hands-on learning. Removing the unnecessary elements and reorganizing the layout to enhance visual appeal demonstrated the importance of attention to detail in web design. This project highlighted the power of seeking help when needed and the satisfaction of overcoming coding challenges. It was a valuable step in my journey to becoming a more proficient web developer.
Comments
Post a Comment