Interactive Design // Final Project
25.11.22 - 11.12.22 (Week 13 - Week 15 )
Emelyne How Sok Hing (0352938)
Bachelor of Design (Hons) Creative Media
Interactive Design // Final Project
LECTURES
INSTRUCTIONS
Week 15:
We are to create our own website based on our Project 1. We need to create 5 pages including the landing page. I started designing the other pages using Figma and this is what I came up with for the other 4 pages that we are to do.
 |
| Figure 1.0 Landing Page, 6th December 2022 |
 |
| Figure 1.1 About me page, 6th December 2022 |
 |
| Figure 1.2 Gallery page, 6th December 2022 |
 |
| Figure 1.4 Discography page, 6th December 2022 |
 |
| Figure 1.5 More info page, 6th December 2022 |
Figure 1.6 Compilation of pages PDF, 6th December 2022
I started by designing the pages using Figma before moving on to the coding. The first step was to import all of the PNGS into my files, where I also created a separate file for each page that was then gathered into a single large file. I began my coding after importing all of the images I required for my project. One of the advantage of this project is that from the landing page itself elements like the nav bar or the footer could be copy pasted for every other page which also helped to speed up the process.
.png) |
| Figure 1.7 Progression of coding, 8th December 2022 |
.png) |
| Figure 1.8 Progression of coding, 8th December 2022 |
After coding all the pages one by one which took me around 2 days to complete, I proceeded to add codes which were responsible for the responsiveness of the pages. Then after doing this, I cross checked if everything worked such as the hyperlinks or buttons and so on and posted it on Netlify.
Final Project Submission
This final project is based on IU who is a South Korean artist and actress. I mostly wanted to create a fan site for her where individuals could easily learn more about her career and personal life as well.
Individual link:
Landing page - https://landingpageiu.netlify.app/
Gallery page - https://iugallery.netlify.app/
Album page - https://discography-page.netlify.app/
More info page - https://moreinfopage.netlify.app/
About me page - https://aboutiu.netlify.app/
Demo video of what I choose to create for the pages
REFLECTIONS
I initially found this last project to be very stressful because I was still working on Project 2 and its faulty code. I therefore made the decision to start everything over afresh, which I did more quickly than I thought. Finding out how to position my images and other elements the way I wanted to was fairly tough at first. To find the answers to my questions, I mainly had to search the w3schools website on Google. I'm glad that some strangers on the internet were having the same issue as me since that gave me the opportunity to use what I learned through internet to change what I wanted. Coding the Html was one thing but coding the CSS was another. The CSS took quite a while for me to understand since I had to do a lot of trial and errors to be able to get the right positioning of my elements. However, I would say that it was quite satisfying to see my website come to life, and I was very happy and relieved when most of the codes started to function the way I wanted them to. Doing the responsive part was another pain, it took me quite a while to understand the concept itself. This module was a lot about self-learning which honestly was hard most of the times. I learned also that practice makes perfect as I was watching my progression during this semester. I'm just glad that I am done finally with coding as to be honest it was a real pain and a lot of migraines.
Comments
Post a Comment