Labels

INTERACTIVE DESIGN | FINAL PROJECT: 5 PAGE WEB DESIGN

  

30.11.2025 - 11.01.2025 /Week 11 - Week 14

Final project: 5 Page Web Design

Loh Kai Xuan (0365780)

TABLE OF CONTENTS



LECTURE


Final Task

Objective:
The objective of this assignment is to bring your website redesign to life by developing a fully functional website (MINIMUM OF FIVE (5) PAGES based on the prototype created in the previous assignment. This final product should reflect all the design and user experience decisions made throughout the project, resulting in a polished and professional website.

Assignment Description:
Building on your redesign proposal and prototype, you are now required to develop the final working website. This website should be fully functional, demonstrating your ability to implement web design principles, front-end development techniques, and best practices in user experience (UX) and accessibility.
Final Project: 5 Page Web Design

Proposal:

Prototype:


My selected topic was the Victorian Web. An online encyclopedia about the Victorian Era. LINK HERE


Fig. 1.1. The Victorian Web Homepage


Progress Report:

I started with linking the favicon and other needed items like the css and font. Google fonts did not have the font I wanted so I switched from Georgia to Merriweather.

Fig. 1.2. Linking items

Then, I created all the files I needed for the 5 pages. Namely: Index, about, contact, authors and j-m-barrie. Originally the 5th page is "How to Cite" but Mr Shamsul reccomended me to do a specific author's page instead so that u can click from the author page.  

Fig. 1.3. Creating Files


Afterwards I started creating the navbar. I started off with bootstrap but it was confusing me even more so I ended up coding it myself. Using the help of https://www.w3schools.com/. A friend showed me this website which had many tutorials and exmaple codes. This helped me tremendously. I made the navbar float on top so it stays even when you scroll down.

Fig. 1.4. html of the navbar

I had a huge issue with the responsiveness of navbar on smaller screensizes. After many tries, I asked for help from a friend in computer science. She taught me how to create different values for different screen sizes. She also introduced me to the use of display: grids, which helped in arranging my navbar better + collapsing half of the navbar below when the screen size reduces. My navbar css ended up very complicated due to the grids, but it looked alot neater and responsive now.

Fig. 1.5. navbar on smaller screen size

    


Fig. 1.6. part of the navbar css

I then created the dropdown menu. It uses a list as well and display flex to create multiple dropdowns. This is to help with searching for needed info faster. However it got too overcrowded when in mobile so i just made it dissapear with display:none once it got to that size. It also collapses liek the navbar when on smaller screensize.

Fig. 1.7. dropdown css

Fig. 1.8. dropdown css for diff screen size

Now that the hard part was solved, I moved on to the footer. It used a similar code as the header. i also added some shortcut buttons to useful parts of the site.

Fig. 1.9. footer


Now that the header and footer is completed, I also made a back to top button so its easier to return to the top. I added some style to it and transition too so it doesn't feel too abrupt when clicked. 

Fig. 1.10. back to top button css

After creating he header image and title, I used tutorials from the W3 school web as reference to make a gallery using cards for the info browsing in the main page. 

Fig. 1.11. card html

This card system was used for the author's page as well.

Fig. 1.12. homepage

To make it more interactive, I added hover animations on both the image and the text. Both lifts up when hovered. The image gets a box shadow while text enlarges.

Fig. 1.12. Gallery css

I copy pasted the header and footer code to all other pages then started on the about page. It was relatively simple but just had positioning difficulties. I used mostly column and rows to alternate the image and text for a more interesting layout. This helps leads the viewer's eyes too.

Fig. 1.13. Row css

I started having issues where the header image is clipping underneath the navbar. So I added a empty container underneath so that it always be pushed below the navbar. To make images round, I gave them border radius 100%

Fig. 1.13. Empty css



Next, is the contact page. It was similar to the prev pages but this time I wanted to make a FAQ and form. In my prototype, I wanted to make my FAQ a dropdown selector but realized it couldn't be done in html and css. So I searched around, eventually settling for using radio selector. 

Fig. 1.14. FAQ prototype vs final


Fig. 1.15. FAQ css


Fig. 1.16. portion of FAQ html


Next to tackle would ne the form. I used the insert form function in dreamreaver first then editted to fit my website using the css. I used many references from W3 school. I also added a clear and submit button bellow. 


Fig. 1.17.Creating the form

Fig. 1.18.Form html

The author page was just a replica of the homepage but with slight different in design. Unlike the original design, I chose to do a gallery of cards instead of a list of bullet points so its more visually appealing to scroll and look for what you want to learn about.

Fig. 1.14. Authors Page


Lastly, is the page for one of the authors. I chose J.M. Barrie. The original page was an article with minimal design. I decided to keep it simple but also make it comfortable to read. I added a heading image too with a profile of the author as the original heading was too obscure. 

Fig. 1.15. Original page of J.M. barrie

Fig. 1.15. New designed page of J.M. Barrie

Fig. 1.16.text layout for J.M. Barrie page


After completing everything, I checked all the pages in different screen sizings and editted till it looks presentable and comfortable.

Fig. 1.17. tablet sizing for homepage

Finally, I bolded and italic the buttons that lead to a page so its easier for lecturer to know which webpage I've done. A friend also reccomended me to add something fun. It is a line of javascript that gives a pop up when u press a button that leads to nowhere. 

Fig. 1.18. popup javascript


Fig. 1.19. popup



Final Result:

Website Link: 

Drive Link: 




Feedback

Week 11

Should make another page linked from the authors page.
 

RREFLECTION

Week 11-14

I have never coded before this semester so this final project was extremely daunting for me. I spent weeks on this. Just the header gave me a headache for over 2 weeks. I'm surprised i somehow finished it a little early. It was an eye opening experience for me as I knew coding was hard but not this hard. It was hard to keep up due to the many unfamiliar terms, But by the end of the project, I learnt alot and I can proudly say that I do know how to make a basic website now. 

The final product was not perfect, especially the mobile version but It was a great learning experience. 


Labels:

Comments

Post a Comment

Popular Posts