Labels

INTERACTIVE DESIGN [ PROJECT 2 ]

   20.06.24 - 29.06.24 / Week 9 - Week 10

Kim Abin 0365392
Bachelor of Design (Hons) in Creative Media / Interactive Design / Taylor's University
Project 2


OUTLINE

Instruction

  • Project 2 - Working Web Page

Reflection

Quick Links


    INSTRUCTION



    Module Information Booklet (MIB) of Interactive Design


    <iframe src="https://drive.google.com/file/d/1xs_1Oul1eI2COsIo2W3eILWqBWQTsykD/preview" width="640" height="480" allow="autoplay"></iframe>



    Project 2 - Working Web Page


    This task aims to transform my static prototype from Project 1 into a fully functional and interactive web page. So I should create a working website that closely aligns with my original prototype.

    Step: 

         1. Review your static prototype from Project 1 and analyze its layout, typography, colour scheme, and imagery.

         2. Use HTML and CSS to translate the design elements into code, ensuring a faithful representation of the original prototype.

         3. Aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes.

         4. Upload the file in Netlify, update your e-portfolio with all the processes documented in the blog, and submit the link as a submission.


    Fig. 1.1 Project 1 work


    Since the layout I designed in Project 1 was quite complicated, I decided to make the site I created this time slightly simpler than the previous design. First, I created an HTML file in Adobe Dreamweaver, and first, I simply organized the visible words into codes. Since the layout of the designed site was complicated, rather than starting with thinking about the design, the code was arranged by dividing the site into three parts. I also created a CSS file using CSS Designer.


    Fig. 1.2 Process 1 (Week 9 / 21.6.2024)


    Fig. 1.3 Process 2 (Week 9 / 21.6.2024)


    After dividing the site part into three and correcting the incorrectly entered words, I found two fonts on Google Fonts similar to those used in the layout I designed.


    Fig. 1.4 Process 3 (Week 10 / 27.6.2024)


    Honestly, the layout that I designed was complicated for me to complete the task, I couldn’t help but just struggle a bit. But I needed to try first, so I checked the sites and slides (lecture notes) uploaded to Google Classroom by the lecturer and searched on Google to see if there were some problems that I couldn't understand. 


    Fig. 1.5 Process 4 (Week 10 / 27.6.2024)


    Fig. 1.6 Process 5 (Week 10 / 28.6.2024)


    Fig. 1.7 Process 6 (Week 10 / 28.6.2024)


    I was able to do most things by thinking about the elements the lecturer taught us in class, but I was confused about changing the colour of another background within a background. Additionally, aligning the text on both sides and then placing another piece of text next to it was also difficult. And some parts I didn't know how to write the code, so I made a layout that I had already designed a bit simple, and I took out some elements.


    Fig. 1.8 Process 7 (Week 10 / 29.6.2024)


    Fig. 1.9 Process 7 (Week 10 / 29.6.2024)


    Lastly, as the lecturer mentioned, I uploaded the index.html file to Netlify to turn it into a site and submitted it to Google Classroom.


    Final project 2


    REFLECTION

    Experience

    For Project 2, I had to create a one-page site through coding based on the sketches I designed. The project, which spanned about two weeks, was challenging as it was the first time I had to build a site exactly as I intended.


    Observations

    During the project, I tried to create the site exactly as per the original sketches. However, there were many aspects I couldn't understand while coding, so I searched for solutions online and referred to the code examples the lecturer posted on Google Classroom to complete the assignment.


    Findings

    While working on the assignment, I couldn't shake the thought that coding, even after learning it, was complex and difficult. Some simple parts were easy to understand, but the more I wanted to improve the design, the more complex the coding became. I also needed time to think about how the code would affect the final output. Since I initially made the sketches too complex for my skill level, it was disappointing that I had to give up some design elements to complete the site. However, I felt good about having completed the assignment because I learned a lot from the experience.


    QUICK LINKS

    Projects

    Labels:

    Comments

    Post a Comment